UI med Svelte og React
Server side rendering med SvelteKit
Styling med Tailwind
Hosted hos Vercel
Innhold og bilder i Sanity
En løsning for administrasjon og visning av både interne og eksterne arrangementer hos Capra, Fryde og Liflig. Dette inkluderer fagsirkler, konferanser, frokostseminarer og sosiale begivenheter. Prosjektet har fått navnet CapraWeb for å inkludere hele nettsiden her i fremtiden. Foreløpig fokuserer vi på arrangementsdelen, også kalt skjer.
Dette er et levende dokument, denne arbeideren 👷 betyr at vi trenger hjelp!
Kanban board finner man her: Notion
Design drodling finner man her: Nettside design
- 👷 Venter på oppdatert Sanity views for Påmeldinger og Matallergier/preferanser
- 👷 Venter på oppdatert design for avmelding
- 👷 Venter på e-post template
- Node.js (v18.19 eller senere)
- PNPM (9.0.6 eller senere)
- Sanity CLI (anbefalt)
- Supabase CLI (anbefalt)
- Vercel CLI (valgfritt)
- ESLint
- EditorConfig
- Prettier
- Svelte
- Tailwind CSS IntelliSense
For å kjøre koden lokalt:
- Be om environment variabler for lokal testing i kanalen #tmp_arrangementsoversikt.
Du må selv opprette en
.env.localfil i både /studio og /app.
Hvis du trenger tilgang til Sanity Studio, eventuelt Google Console, Vercel og Supabase, må dette også spesifikt forespørres.
- Installer dependencies:
cd capra-web/app
pnpm install
cd capra-web/studio
pnpm install- Start dev serverene:
cd capra-web/app
pnpm dev
cd capra-web/studio
pnpm dev- SvelteKit applikasjonen skal nå kjøre på http://localhost:5173
- Sanity Studio skal kjøre på http://localhost:3333
Vi har to dataset i Sanity studio, en for dev testing og en for produksjon.
For å bygge en produksjonsversjon av Sanity studio lokalt, naviger deg til /studio og kjør følgende kommando:
pnpm buildBygg bør alltid kjøres som en del av vår pull request policy 👷
Sanity Studio blir deployet til https://capra.sanity.studio. GitHub Actions deploy kjører automatisk ved push til main-branch og ved endringer i /studio mappen. Alternativt kan deploy også utføres manuelt ved å navigere til /studio og kjøre følgende kommando:
sanity deployAdministrering av Sanity instansen kan gjøres via https://www.sanity.io/manage/personal/project/.
For å generere typer av innholdsskjemaer, kjør følgende kommandoer fra /studio:
sanity schema extract --enforce-required-fields
sanity typegen generateNB: Når sanity.model.ts er generert i /studio/models, skal den også kopieres til /app.
For å bygge en produksjonsversjon av SvelteKit lokalt, naviger til /app og kjør følgende kommando:
pnpm buildBygg bør alltid kjøres som en del av vår pull request policy 👷
SvelteKit blir foreløpig deployet til https://capra-web.vercel.app fra /app med følgenden kommando:
vercel deploy👷 Vi er på en Vercel-plan som ikke tillater bygg og deploy i en organisasjon. Må undersøke CI/CD-løsninger på et tidspunkt for å automatisere vår deploy prosess.
SvelteKit templaten sanity-template-sveltekit-clean har en eslint konfigurasjon som ikke funker. Har prøvd å oppgradere til eslint 9 med flatconfig fra denne issuen. 👷 Det er en del lint-errors som må undersøkes.
Postgres-databasen kan konfigures fra https://supabase.com/dashboard/project/. Vi har to prosjekter i supabase dashboardet, en for dev testing og en for produksjon.
For å generere typer fra databasemodellen, kjør følgende kommando fra enten /studio eller /app:
supabase gen types typescript --project-id <project-id> database.model.tsNB: Når database.model.ts er generert, må den legges til i både /studio og /app.
Vi bruker Playwright for e2e-testing i Sveltekit-appen. Disse ligger under app/src/lib/e2e.
For å kjøre alle testene:
pnpm playwright testVil du kjøre kun en enkelt test, sleng på filnavnet på slutten:
pnpm playwright test example.spec.tsVil du klikke deg rundt i browser for å se hva som skjer i testene, sleng på --ui på slutten 🚀 Vi trenger flere tester 👷!
Når et arrangement publiseres for første gang, vil det automatisk genereres en Slack-melding til kanalen #tmp_arrangementer. For å bygge meldingen kan man benytte Block Kit Builder. Denne tjenesten lar deg visuelt designe layouten av meldingen med ulike blokker som knapper, tekstfelter og bilder.
E-post med kalenderinvitasjon (.ics-fil) sendes fra SvelteKit på serversiden. På grunn av manglende tilgang til en server fra Sanity, har vi satt opp et API-endepunkt i SvelteKit som Sanity kan kommunisere med for å sende e-post. Som SMTP host benytter vi oss av Mandrillapp. Autentisering skjer via Mailchimp.
E-post domene for alle selskaper må verifiseres. Vi er på en trial-plan her og 👷
For å teste e-postfunksjonaliteten lokalt:
- Fjern "development"-sjekker i funksjonskallene for å kjøre i lokalt miljø.
- For å teste e-post sendt fra Sanity: Legg til
http://localhost:3333iAccess-Control-Allow-Origin.
Vi kan kun oppdatere kalenderinvitasjoner som allerede er sendt ut. Vi har ikke toveis kommunikasjon gjennom kalenderinvitasjonene, og kan derfor ikke se endringer hvis en deltager svarer Ja, Kanskje eller Nei. For å løse dette, vurderer vi å sette opp en MandrillApp webhook som kan lytte på deltagerens svar. Inntil videre må avmeldinger skje via vår nettside.
- Gå inn i Sanity Studio og legg først til et nytt arrangement, og trykk "Publiser".
- Når et arrangement publiseres, blir det automatisk opprettet et arrangement i Postgres-databasen.
- Besøk SvelteKit appen, eventuelt refresh siden, og se at innholdet vises.
Hvis tid eller lokasjon for et publisert arrangement endres i Sanity, følges denne prosessen:
- En dialogboks for å bekrefte endringen vises.
- En e-post sendes til alle påmeldte deltagere for å informere om ny tid/lokasjon.
- Den eksisterende kalenderinvitasjonen oppdateres med de nye detaljene, slik at deltagerne har oppdatert informasjon i kalenderen.
- Innhodet blir publisert på nytt.
- Gå inn i Sanity Studio og trykk "Avpubliser" på et publisert arrangement.
- Arrangement blir avpublisert og vises ikke i SvelteKit-appen.
Innholdet kan republiseres uten noen konsekvenser.
- Gå inn i Sanity Studio og trykk "Slett".
- En dialogboks for å bekrefte slettingen vises.
- Arrangementinformasjon lagret i Sanity og Postgres-databasen blir permanent slettet.
- Gå inn i Sanity Studio og trykk "Avlys arrangement".
- En dialogboks for å bekrefte avlysningen vises.
- En e-post sendes ut til alle påmeldte deltagere for å informere om avlysningen.
- Kalenderinvitasjonen markeres som avlyst i deltagerens kalender.
- Arrangementet blir avpublisert i Sanity og innholdet blir "Read only".
Innholdet kan ikke republiseres på nytt, men kan dupliseres for nytt bruk.
For å oppfylle GDPR-krav og spare lagringsplass, slettes arrangementer fra Postgres-databasen som ble avsluttet for mer enn 7 dager siden. Dette håndteres av CRON-jobben "daily-event-cleaner". Innholdet forblir lagret i Sanity.
Når en bruker melder seg på et arrangement, utløses følgende prosess:
- En e-postbekreftelse sendes til brukeren.
- E-posten inkluderer en kalenderinvitasjon med deltagerstatus satt som akseptert.
- Kalenderinvitasjonen legges automatisk inn i deltagerens kalender, slik at arrangementet blir synlig i kalenderen umiddelbart etter påmelding.
Avhengig av om deltageren er intern eller ekstern, håndteres avmeldinger på forskjellige måter:
- Når en intern deltager melder seg av et arrangement, sendes en bekreftelses e-post som informerer om at avmeldingen er mottatt.
- Kalenderinvitasjonen oppdateres samtidig til å vise status som avslått.
- Eksterne deltagere som ønsker å melde seg av, mottar først en e-post med en lenke for å bekrefte avmeldingen.
- Når mottaker klikker på bekreftelseslenken og den blir godkjent på nettsiden, sendes en ny e-post som bekrefter avmeldingen.
- Kalenderinvitasjonen oppdateres til å vise status som avslått, på samme måte som for interne deltagere.