chore: update build process with workflow (#78)

Co-authored-by: Anton Lilleby <[email protected]>

.github/workflows/sanity-deploy.yml

@@ -1,8 +1,10 @@
-name: Deploy Sanity
+name: Sanity Deploy Workflow
+
 on:
   push:
     branches: [main]
-    paths: ['studio/**']
+    paths: ["studio/**"]
+
 jobs:
   sanity-deploy:
     runs-on: ubuntu-latest
@@ -11,13 +13,22 @@ jobs:
     defaults:
       run:
         working-directory: ./studio
+
     steps:
       - name: Checkout Repository
         uses: actions/checkout@v4
-        
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
 
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ~/.pnpm-store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('studio/**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
       - name: Install Packages
         run: pnpm install
 
@@ -33,4 +44,3 @@ jobs:
           SANITY_STUDIO_SUPABASE_URL: ${{ secrets.SANITY_STUDIO_SUPABASE_URL }}
           SANITY_STUDIO_SUPABASE_KEY: ${{ secrets.SANITY_STUDIO_SUPABASE_KEY }}
           SANITY_STUDIO_SLACK_HOOK: ${{ secrets.SANITY_STUDIO_SLACK_HOOK }}
-

.vscode/settings.json

@@ -7,5 +7,6 @@
   "prettier.useEditorConfig": true,
   "[svelte]": {
     "editor.defaultFormatter": "svelte.svelte-vscode"
-  }
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "svelte"]
 }

README.md

@@ -1,6 +1,8 @@
 # CapraWeb
 
-Dette repositoriet inneholder to applikasjoner: Sanity Studio under /studio og CapraWeb applikasjonen laget i SvelteKit under /app. Prosjektet har fått navnet CapraWeb for å inkludere hele nettsiden her i fremtiden. Foreløpig fokuserer vi på arrangementsdelen.
+Dette repositoriet inneholder to applikasjoner: Sanity Studio under /studio og SvelteKit applikasjonen under /app. Prosjektet har fått navnet CapraWeb for å inkludere hele nettsiden her i fremtiden. Foreløpig fokuserer vi på arrangementsdelen.
+
+Dette er et levende dokument og steder med denne arbeideren 👷 trenger hjelp!
 
 ## Krav
 
@@ -24,7 +26,8 @@ Dette repositoriet inneholder to applikasjoner: Sanity Studio under /studio og C
 
 For å kjøre koden:
 
-1. Be om environment variabler for lokal testing i kanalen #tmp_arrangementsoversikt. Du må selv opprette en .env fil i /studio og /app.
+1. Be om environment variabler for lokal testing i kanalen #tmp_arrangementsoversikt.
+   Du må selv opprette en `.env` fil i /studio og /app.
 
 2. Installer dependencies:
 
@@ -39,57 +42,73 @@ pnpm install
 pnpm dev
 ```
 
-- CapraWeb skal nå kjøre på [http://localhost:5173/](http://localhost:5173/)
-- Sanity Studioet skal kjøre på [http://localhost:3333/](http://localhost:3333/)
+- SvelteKit skal nå kjøre på [http://localhost:5173/](http://localhost:5173/)
+- Sanity Studio skal kjøre på [http://localhost:3333/](http://localhost:3333/)
 
 NB: Du kan også starte dev serverne hver for seg i deres respektive mapper.
 
-## Lag innhold til CapraWeb
+## Lag innhold til SvelteKit
 
 1. Gå inn i Sanity Studio og legg til nye events, og trykk publiser
-2. Besøk CapraWeb, eventuelt refresh siden, og se at innholdet vises
+2. Besøk SvelteKit appen, eventuelt refresh siden, og se at innholdet vises
 
 ## Figma
 
 Design drodling finner man her: [Nettside design](https://www.figma.com/design/ZFgYAb0tYd8LUwKMomOfBx/Nettsideting?node-id=1-664&t=96Kmh2v9JKb1BpLY-0)
 
-## Deploy
+👷 Venter på oppdatert Sanity views for Påmeldinger og Matallergier/preferanser
+👷 Venter på oppdatert design for avmelding
+👷 Venter på e-post template
+
+## Sanity
 
-### Sanity
+### Deploy
 
-Sanity Studio blir deployet til [https://capra.sanity.studio/](https://capra.sanity.studio/). Vi vurderer muligheter for CI/CD, men foreløpig må du navigere til /studio og kjøre følgende kommando:
+Sanity Studio blir deployet til [https://capra.sanity.studio/](https://capra.sanity.studio/). Github Actions deploy utløses ved push til main-branch og endring i /studio. Det er også mulig å gjøre det manuelt ved å navigere til /studio og kjøre følgende kommando:
 
 ```bash
 sanity deploy
 ```
 
 Administrering av Sanity instansen kan gjøres via [https://www.sanity.io/manage/personal/project/<project-id>](https://www.sanity.io/manage/personal/project/<project-id>).
 
-CapraWeb blir foreløpig deployet til [https://capra-web.vercel.app/](https://capra-web.vercel.app/) fra /app med følgenden kommando:
+## Bygg
+
+For å bygge en produksjonsversjon av Sanity studio lokalt, naviger deg til /studio og kjør følgende kommando:
 
 ```bash
-vercel deploy
+pnpm build
 ```
 
-Supabase Postgres database kan konfigures fra [https://supabase.com/dashboard/project/<project-id>](https://supabase.com/dashboard/project/<project-id>).
+Bygg bør alltid kjøres som en del av vår pull request policy 👷
 
-## Bygg
+## Lint
+
+Sanity/SvelteKit templaten [sanity-template-sveltekit-clean](https://github.com/sanity-io/sanity-template-sveltekit-clean) hadde en broken eslint konfigurasjon. Har derfor prøvd å oppgradere til eslint 9 med flatconfig fra denne [issuen](https://github.com/sveltejs/eslint-plugin-svelte/issues/732). 👷 Det er en del lint-errors som må undersøkes.
+
+## SvelteKit
 
-For å bygge en produksjonsversjon av CapraWeb, naviger til /app og kjør følgende kommando:
+### Deploy
+
+SvelteKit blir foreløpig deployet til [https://capra-web.vercel.app/](https://capra-web.vercel.app/) fra /app med følgenden kommando:
 
 ```bash
-pnpm build
+vercel deploy
 ```
 
-For å bygge en produksjonsversjon av Sanity studio, naviger til /studio og kjør følgende kommando:
+👷 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.
+
+### Bygg
+
+For å bygge en produksjonsversjon av SvelteKit lokalt, naviger til /app og kjør følgende kommando:
 
 ```bash
 pnpm build
 ```
 
-## TypeScript Generering
+Bygg bør alltid kjøres som en del av vår pull request policy 👷
 
-### Sanity
+### TypeScript Generering
 
 For å generere typer av innholdsskjemaer, kjør følgende kommandoer fra /studio:
 
@@ -100,7 +119,11 @@ sanity typegen generate
 
 NB: Når sanity.model.ts er generert i /studio/models, skal den også kopieres til /app.
 
-### Supabase
+## Supabase
+
+Supabase Postgres database kan konfigures fra [https://supabase.com/dashboard/project/<project-id>](https://supabase.com/dashboard/project/<project-id>).
+
+### TypeScript Generering
 
 For å generere typer fra databasemodellen, kjør følgende kommando fra enten /studio eller /app:
 
@@ -116,57 +139,81 @@ Vi bruker Playwright for e2e-testing i Sveltekit-appen. Disse ligger under app/s
 
 For å kjøre alle testene:
 
-```
+```bash
 pnpm playwright test
 ```
 
 Vil du kjøre kun en enkelt test, sleng på filnavnet på slutten:
 
-```
+```bash
 pnpm playwright test example.spec.ts
 ```
 
-Vil du klikke deg rundt i browser for å se hva som skjer i testene, sleng på `--ui` på slutten 🚀
+Vil du klikke deg rundt i browser for å se hva som skjer i testene, sleng på `--ui` på slutten 🚀 Vi trenger flere tester 👷!
+
+## Plausible
+
+Plausible tilbyr en måte å analysere trafikk på nettstedet. Den er fritt for cookies og samler ingen personopplysninger. Vi trenger derfor ingen cookie consent. For å integrere Plausible er det lagt til et sporingsskriptet i HTML-headeren. Sporingen for å måle og analysere besøksstatistikk vises i et Sanity dashboard.
+
+Vi er på en trial versjon foreløpig 👷
 
 ## Slack
 
-Når et arrangement publiseres for første gang, vil det automatisk genereres en Slack-melding til kanalen #tmp\*arrangementer For å bygge meldingen kan du benytte [Block Kit Builder](https://app.slack.com/block-kit-builder). Denne tjenesten tillater deg å visuelt designe layouten av dine Slack-meldinger med ulike blokker som knapper, tekstfelter og bilder for en mer engasjerende kommunikasjon.
+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](https://app.slack.com/block-kit-builder). Denne tjenesten lar deg visuelt designe layouten av meldingen med ulike blokker som knapper, tekstfelter og bilder.
 
-## Mandrillapp
+## E-posthåndtering
 
-Hvis du vil teste e-post lokalt, kan du legge til http://localhost:5173 i Access-Control-Allow-Origin i /app/src/lib/auth/cors.ts.
-I tillegg må denne linjen kommenteres ut:
+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 [Mandrill](https://mandrillapp.com/). Innlogging skjer via Capra sin Mailchimp bruker siden Mandrill er en underleverandær av dem.
 
-```
-process.env.MODE !== "development"
-```
+### Påmelding
 
-## Sentry
+Når en bruker melder seg på et arrangement, utløses følgende prosess:
 
-Sentry brukes for å overvåke, logge og rapportere klientfeil.
+1. En e-postbekreftelse sendes til brukeren.
+2. Denne e-posten inkluderer en kalenderinvitasjon med deltagerstatus satt som akseptert
+3. Kalenderinvitasjonen legges automatisk inn i deltagerens kalender, slik at arrangementet blir synlig i kalenderen umiddelbart etter påmelding.
 
-## Plausible
+### Avmelding
+
+Avhengig av om deltageren er intern eller ekstern, håndteres avmeldinger på forskjellige måter:
+
+#### Interne deltagere
+
+1. Når en intern deltager melder seg av et arrangement, sendes en bekreftelses e-post som informerer om at avmeldingen er mottatt.
+2. Kalenderinvitasjonen oppdateres samtidig til å vise status som avslått.
+
+#### Eksterne deltagere
+
+1. Eksterne deltagere som ønsker å melde seg av, mottar først en e-post med en lenke for å bekrefte avmeldingen.
+2. Når mottaker klikker på bekreftelseslenken og den blir godkjent på nettsiden, sendes en ny e-post som bekrefter avmeldingen.
+3. Kalenderinvitasjonen oppdateres til å vise status som avslått, på samme måte som for interne deltagere.
+
+### Endring av Tid/Lokasjon
+
+Hvis tid eller lokasjon for et arrangement endres i Sanity, følges denne prosessen:
+
+1. Brukeren får en dialogboks for å bekrefte endringen.
+2. En e-post sendes til alle påmeldte deltagere for å informere om ny tid/lokasjon.
+3. Den eksisterende kalenderinvitasjonen oppdateres med de nye detaljene, slik at deltagerne har oppdatert informasjon i sine kalendere.
+
+### Avlysing av Arrangement
+
+Ved avlysing av et arrangement i Sanity:
+
+1. Brukeren får en dialogboks for å bekrefte avlysningen.
+2. En e-post sendes ut til alle påmeldte deltagere for å informere om avlysningen.
+3. Kalenderinvitasjonen markeres som avlyst i deltagerens kalender.
+4. Arrangementet blir avpublisert i Sanity og tittelen blir markert med "Avlyst"
 
-Plausible tilbyr en g måte å analysere trafikk på nettstedet. Det er et open-source alternativ til tradisjonelle analyseverktøy som Google Analytics. Plausible er fritt for cookies og samler ingen personopplysninger.
-Vi trenger derfor ingen cookie consent. For å integrere Plausible er det lagt til et sporingsskriptet i HTML-headeren. Sporingen for å måle og analysere besøksstatistikk vises i Sanity studio.
+### Testing av E-post Lokalt
 
-# Legges inn i Notion
+For å teste e-postfunksjonaliteten lokalt:
 
-## App Features
+1. Legg til `localhost` i `Access-Control-Allow-Origin`.
+2. Fjern "development"-sjekker i funksjonskallene for å kjøre i lokalt miljø.
 
-| Status | Feature                             | Alle                                                                                | Intern                                                          |
-| ------ | ----------------------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------- |
-| ✅     | Liste over kommende arrangementer   | Viser alle synlige arrangementer                                                    | Viser alle synlige og lukkede arrangementer, samt påmeldinginfo |
-| ✅     | Liste over tidligere arrangementer  | Viser alle tidligere arrangementer                                                  | Samme                                                           |
-| ✅     | Filtrering av liste arrangementer   | Viser filtreringsbokser                                                             | Samme                                                           |
-| ✅     | Visning av arrangement              | Viser ikke deltagere                                                                | Viser interne deltagere                                         |
-| ✅     | Påmeldingsskjema                    | Viser alle skjema felter. Interne kan ikke bruke dette skjemaet.                    | Viser alle felter utenom vanlige personopplysninger             |
-| ✅     | Påmeldingsskjema e-post             | Sender e-post bekreftelse                                                           | Samme                                                           |
-| ✅     | Påmeldingsskjema kalenderinvitasjon | Kalenderinvitasjon sendes som akseptert og blir lagt til i kalender                 | Samme                                                           |
-| ✅     | Avmeldingsskjema                    | Viser inputfelt for e-post                                                          | Viser kun knapp for avmelding                                   |
-| ✅     | Avmeldingsskjema e-post             | Sender e-psot avmelding token som må bekreftes. Sender ny e-post etter bekreftelse. | Sender e-post bekreftelse, men trenger ikke å bekrefte          |
-| ✅     | Avmeldingsskjema kalenderinvitasjon | Kalenderinvitasjonen blir avslått i kalenderen                                      | Samme                                                           |
+### Kalenderinvitasjon 👷
 
-NB. Vi kan kun oppdatere kalenderinvitasjonen som allerede er sendt ut. Vi har ikke en toveis kommunikasjon gjennom kalenderinvitasjonen, og kan derfor ikke se endringer hvis en deltager svarer Ja, Kanskje eller Nei. En avmelding skal skje via vår nettside.
+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.
 
-## Sanity Features
+---

app/.gitignore

@@ -13,6 +13,3 @@ vite.config.ts.timestamp-*
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-
-# Sentry Config File
-.sentryclirc

app/eslint.config.js

@@ -0,0 +1,43 @@
+import eslintPluginSvelte from "eslint-plugin-svelte";
+import svelteParser from "svelte-eslint-parser";
+import typeScriptEslint from "typescript-eslint";
+
+export default [
+  ...eslintPluginSvelte.configs["flat/recommended"],
+  ...typeScriptEslint.configs.strictTypeChecked,
+  ...eslintPluginSvelte.configs["flat/prettier"],
+  {
+    languageOptions: {
+      parser: typeScriptEslint.parser,
+      parserOptions: {
+        project: "./tsconfig.json",
+        extraFileExtensions: [".svelte"],
+        ecmaVersion: 2020,
+        sourceType: "module",
+        project: true,
+      },
+    },
+  },
+  {
+    files: ["**/*.svelte"],
+    languageOptions: {
+      parser: svelteParser,
+      parserOptions: {
+        parser: typeScriptEslint.parser,
+      },
+    },
+    ignores: [
+      ".DS_Store",
+      "node_modules",
+      "build",
+      ".svelte-kit",
+      "package",
+      ".env",
+      ".env.*",
+      "!.env.example",
+      "pnpm-lock.yaml",
+      "package-lock.json",
+      "yarn.lock",
+    ],
+  },
+];