Root Linjeforening Hjemmeside

Laget av kodegruppen PIN

[!NOTE] For bugs eller forslag til forbedringer, opprett en issue i issues.

📑 Innhold

• Stack

• Setup

  • Installere avhengigheter
  • Prettier
    • VSCode
    • Intellij / Webstorm / Annen JetBrains IDE
  • Starte utviklingsserver
  • Starte produksjonsserver

• Praktisk info

  • Mappestruktur
  • PNPM

🤖 Stack

• Next.js
• NextUI
• Tailwind CSS
• pnpm
• TypeScript
• Heroicons
• Sanity
• Prettier

💻 Setup

Installere avhengigheter

Minimum Node.js versjon er 18.17.0

pnpm install

Prettier

Prosjektet er satt opp med Prettier for å formatere koden. For at formateringen skal fungere må du sette opp Prettier i din editor.

VSCode

For å installere Prettier i VSCode, gå til extensions og søk etter Prettier. Installer så extensionen som heter "Prettier - Code formatter". Deretter legg til følgende i din settings.json:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

Slik at prettier formatterer koden din automatisk når du lagrer.

Intellij / Webstorm / Annen JetBrains IDE

Gå til "Language & Frameworks -> JavaScript -> Prettier", sett configuration til automatic og kryss av for "Run on save".

Pattern bør matche det som er satt i package.json i format scriptet.

{**/*,*}.{js,jsx,ts,tsx,json,yml,css,md}

Starte utviklingsserver

Kjører i development mode på http://localhost:3000.

Bruker dev datasettet fra Sanity.

pnpm dev

Starte produksjonsserver

Kjører i production mode på http://localhost:3000.

Bruker production datasettet fra Sanity.

pnpm build && pnpm start

👉 Praktisk info

Se også Krav til nettsiden.

[!NOTE] For mer info om Next.js og Sanity, se wiki eller dokumentasjonen til de respektive rammeverkene.

Mappestruktur

• .github (GitHub actions, dependabot og templates)
• app (Filer knyttet til routes/pages)
  • (root) (Hovedmappen for alle ruter som ikke tilhører sanity)
  • (sanity) (Hovedmappen for alle ruter som tilhører sanity)
• components (React komponenter som brukes av pages eller andre komponenter)
  • buttons (Diverse knapper)
  • cards (Kort som brukes for å vise innhold, som arrangementer, nyheter og lignende)
  • header (Mavigasjonsbaren med lenkene)
  • icons (Komponenter som bygger rundt heroicons og SVG ikoner)
  • imageGallery (Komponenter for bildegalleriet)
  • omOss (Komponenter for om oss siden)
• hooks (Custom hooks som kan brukes i client components på nettsiden)
• public (Bilder, fonter og andre ikke-kode filer som skal vises i nettsiden)
• sanity (Filer knyttet til Sanity. Som schemas, queries, typer og andre ting)
  • lib (Sanity relaterte funksjoner)
  • queries (Spørringer mot sanity)
  • schemas (Sanity schemas)
• utils (Nyttige hjelpefunksjoner)

Merk at app mappen er delt inn i to ulike grupper, (root) og (sanity). Hvor filene kun eksisterer i den gruppen de er definert i. Hvis de er definert utenfor en gruppe, vil de eksistere i alle grupper. (sanity) mappen brukes bare for studio, siden studioet bruker en egen stil og trenger ikke samme layout som resten av nettsiden.

PNPM

Hvis du skal installere en ny pakke, bruk kommandoen pnpm -w add din-pakke.

De fleste kommandoer fra NPM virker også med PNPM