Migrering fra Gatsby til Next

.env

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_GTAG=G-C9D7DNPHFK
+NEXT_PUBLIC_GTM_ID=GTM-PNJJ336P
+GITHUB_OWNER=Queer-Hangout
+GITHUB_REPO=queer-hangout-hjemmeside

.github/dependabot.yml

@@ -11,30 +11,41 @@ updates:
       interval: "daily"
     groups:
       core:
+        update-types:
+          - "minor"
+          - "patch"
         patterns:
-          - "react*"
-          - "@types/react*"
+          - "react"
+          - "react-*"
+          - "@types/react"
+          - "@types/react-*"
           - "@types/node"
           - "typescript"
           - "server-only"
+      dev:
+        update-types:
+          - "minor"
+          - "patch"
+        dependency-type: "development"
       next:
+        update-types:
+          - "minor"
+          - "patch"
         patterns:
-          - "*next*"
-      sanity:
-        patterns:
-          - "*sanity*"
+          - "next"
+          - "next-*"
+          - "*-next"
+          - "@next/*"
+          - "nextjs-*"
       mui:
+        update-types:
+          - "minor"
+          - "patch"
         patterns:
-          - "*mui*"
-          - "*emotion*"
-      eslint:
-        patterns:
-          - "*eslint*"
-      styling:
-        patterns:
-          - "*css*"
-          - "autoprefixer"
-          - "*styled*"
+          - "@mui/*"
       default:
+        update-types:
+          - "minor"
+          - "patch"
         patterns:
           - "*"

.gitignore

@@ -1,69 +1,40 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# node-waf configuration
-.lock-wscript
+.env.*
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
-# Dependency directories
-node_modules/
-jspm_packages/
+# testing
+/coverage
 
-# Typescript v1 declaration files
-typings/
+# next.js
+/.next/
+/out/
 
-# Optional npm cache directory
-.npm
+# production
+/build
 
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# dotenv environment variable files
-.env*
+# misc
+.DS_Store
+*.pem
 
-# gatsby files
-.cache/
-public
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
 
-# Mac files
-.DS_Store
+# vercel
+.vercel
 
-# Yarn
-yarn-error.log
-.pnp/
-.pnp.js
-# Yarn Integrity file
-.yarn-integrity
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -2,94 +2,24 @@
 
 Denne hjemmesiden skal fungere som et samlested for offentlig informasjon knyttet til Queer Hangout i Drammen.
 
-I dette dokumentet finner du nødvendig informasjon for både innholdsredaktører og utviklere. Les gjerne punktet om [personvern og sikkerhet](#personvern-og-sikkerhet) før du begynner.
-
 <p align="center">
-  <img src="./content/images/Logo_QH_svg.svg" title="Queer Hangout logo" alt="Ypsilon bridge with rainbow colors" width="50%" height="auto">
+  <img src="./public/images/Logo_QH_svg.svg" title="Queer Hangout logo" alt="Ypsilon bridge with rainbow colors" width="50%" height="auto">
 </p>
 
+Denne nettsiden er skrevet i **Next.js**, som er et rammeverk basert på **React**. Til styling brukes **Tailwindcss**. Hele nettsiden hostes via **Vercel** sitt CDN.
+
 ## Personvern og sikkerhet
 
 Vær oppmerksom på at alt som publiseres på denne nettsiden er **offentlig informasjon**. Dette gjelder både innholdet som publiseres på nettsiden, men også selve koden.
 
 Det må derfor aldri lagres sensitiv informasjon eller passord i dette Github-repoet. Dersom du har behov for lagring av sensitiv data og trenger bistand med dette, ta kontakt med Levi.
 
----
-
-## For innholdsredaktører
-
-I denne nettsiden holder vi kode og innhold adskilt, slik at alle kan redigere nettsidens innhold uten å måtte kunne kode.
-
-### Hvordan opprette ny side
-
-Skal du opprette en ny underside på nettsiden gjør du dette ved å lage en `.mdx` (Markdown) fil i mappen `/content/pages`.
-
-For eksempel, skal du lage en ny underside med tittelen **Om oss**, lager du en ny fil med filnavnet `/content/pages/om-oss.mdx`.
-
-Filen må ha følgende struktur. **Det er viktig at frontmatter (alt mellom de tre bindestrekene helt øverst) skrives på dette formatet.**
-
-For å gjøre det enklere for deg selv kan du ta utgangspunkt i malen som ligger i `/templates/page.mdx`. Her ligger også forklaring på hva de forskjellige feltene er.
-
-```
----
-title: Om oss
-description: En beskrivelse av siden på mindre enn 150 tegn
-slug: /om-oss
-menu: 1
----
-
-# Om oss
-
-Queer Hangout er en sosial møteplass for voksne bosatt i Drammen og omegn.
-
-## Hvor møtes vi?
-
-Vi møtes 2 ganger i måneden, enten på Criollo eller Strømsø knutepunkt.
-
-```
-
-### Frontmatter
-
-**Frontmatter** er den delen av en `.mdx` fil som befinner seg helt øverst, med tre bindestreker (`---`) over og under. Frontmatter brukes til å lagre metadata om siden. Denne metadataen brukes til å generere kode for den ferdige nettsiden.
-
-#### Felter
-
-For denne nettsiden har vi 4 obligatoriske felter som må fylles ut for hver nettside. Disse står forklart under.
-
-- **title**: Tittelen til siden. Denne tittelen vil vises i menyen øverst på siden, på fanen i nettleseren, og i treff på søkemotorer.
-
-- **description**: En kort beskrivelse av innholdet til siden. Denne beskrivelsen vil vises i treff på søkemotorer. **OBS - Må være under 150 tegn**.
-
-- **slug**: En adresse til siden. F.eks. hvis nettsiden har domenet `https://queerhangout.no`, og `slug` settes til å være `/om-oss`, så vil nettsideadressen til siden være `https://queerhangout.no/om-oss`. **OBS - Må starte med `/`, og kun inneholde tegn som er gyldige i en URL**
-
-- **menu**: Hvorvidt siden skal vises i menyen, og i så fall hvilken sortering den skal ha. Dersom `menu` settes til `-1` vil ikke siden være synlig i menyen. Alle sider med `menu` satt til et positivt tall vil sorteres og vises i stigende rekkefølge i menyen. **OBS - Må være et positivt heltall eller `-1`**
-
----
-
-## For utviklere
-
-Denne nettsiden er skrevet i **Gatsby.js**, som er et rammeverk basert på **React**. Til styling brukes **Tailwindcss** og **Material Tailwind**.
-
-Hele nettsiden er statisk generert ved bygg, og hostes via **Vercel** sitt CDN.
-
-### Kjøre prosjektet lokalt
-
-#### Krav
-
-For å kjøre prosjektet trenger du å ha **Node.js** og **npm** installert lokalt på din maskin.
-
-#### Installer
-
-- Installer avhengigheter med kommando `npm ci`
-
-#### Kjør utviklingsserver
-
-- Kjør utviklingsserver med hot reload med kommando `npm run develop`.
-- Åpne nettleseren din på `http://localhost:8000`
-- Graphql playground er tilgjengelig på `http://localhost:8000/__qraphql`
-
-#### Kjør produksjonsbygg lokalt
+## Hvordan bidra
 
-- Bygg nettsiden med `npm run build`
-- Server den ferdigbyggede statiske siden med `npm run serve`
-- Åpne nettleseren din på `http://localhost:9000`. **OBS** statisk produksjonsbygg vil ikke oppdatere seg ved kodeendringer.
+1. Sørg for at du har en konto på [Github](https://github.com).
+2. Be om å bli lagt til i [Queer Hangouts Github organisasjon](https://github.com/Queer-Hangout) i følgende team:
+   - **Redaktører** om du kun vil endre nettsidens innhold
+   - **Utviklere** om du vil endre på kildekoden
+3. [Sett opp lokalt utvilkingsmiljø](docs/localdev.md).
+4. For hjelp til å komme i gang med Git, les vår [git dokumentasjon](docs/git.md).
+5. Skal du endre nettsideinnhold, les [dokumentasjon for innholdsredaktører](docs/content.md).

app/[language]/[slug]/layout.tsx

@@ -0,0 +1,36 @@
+import LayoutComponent from "@/components/layout";
+import { getSlugs } from "@/helpers/content-helper";
+import { getMetadata } from "@/helpers/metadata-helper";
+import { Language } from "@/types/language";
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export default async function Layout({
+  params,
+  children,
+}: {
+  params: Promise<{ language: Language; slug: string }>;
+  children: ReactNode | ReactNode[];
+}) {
+  const { language, slug } = await params;
+  const allowedSlugs = await getSlugs(language);
+  return (
+    <LayoutComponent
+      language={language}
+      slug={allowedSlugs.includes(slug) ? slug : undefined}
+    >
+      {children}
+    </LayoutComponent>
+  );
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ language: Language; slug: string }>;
+}): Promise<Metadata> {
+  const { language, slug } = await params;
+  const allowedSlugs = await getSlugs(language);
+  if (!allowedSlugs.includes(slug)) return {};
+  return getMetadata(language, slug);
+}

app/[language]/[slug]/page.tsx

@@ -0,0 +1,28 @@
+import { Language } from "@/types/language";
+import { getAllSlugs, getSlugs, loadPageMdx } from "@/helpers/content-helper";
+import { notFound } from "next/navigation";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ language: Language; slug: string }>;
+}) {
+  const { language, slug } = await params;
+  const allowedSlugs = await getSlugs(language);
+  if (!allowedSlugs.includes(slug)) notFound();
+  const { default: PageContent } = await loadPageMdx(language, slug);
+  return <PageContent />;
+}
+
+export async function generateStaticParams() {
+  return (await getAllSlugs()).flatMap(({ language, slugs }) =>
+    slugs
+      .filter((slug) => slug !== "index")
+      .flatMap((slug) => {
+        return {
+          language,
+          slug,
+        };
+      })
+  );
+}

app/[language]/layout.tsx

@@ -0,0 +1,21 @@
+import { Language } from "@/types/language";
+import { ReactNode } from "react";
+import { Metadata } from "next";
+import { getMetadata } from "@/helpers/metadata-helper";
+
+export default async function Layout({
+  children,
+}: {
+  children: ReactNode | ReactNode[];
+}) {
+  return <>{children}</>;
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ language: Language }>;
+}): Promise<Metadata> {
+  const { language } = await params;
+  return getMetadata(language, "index");
+}