add titles, description and images for seo

web/src/app/arrangementer/[slug]/page.tsx

@@ -1,3 +1,5 @@
+import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import { EventDetails } from "@/components/events/EventDetails";
 import { EventHeader } from "@/components/events/EventHeader";
@@ -6,7 +8,17 @@ import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { EventFragment } from "@/gql/graphql";
 import { getEventPig } from "@/lib/event";
-import { notFound } from "next/navigation";
+import { getSeoMetadata } from "@/lib/seo";
+
+const eventBySlugQuery = graphql(`
+  query eventBySlug($slug: String!) {
+    event: page(contentType: "events.EventPage", slug: $slug) {
+      ... on EventPage {
+        ...Event
+      }
+    }
+  }
+`);
 
 export async function generateStaticParams() {
   const allEventSlugsQuery = graphql(`
@@ -28,17 +40,24 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function Page({ params }: { params: { slug: string } }) {
-  const eventBySlugQuery = graphql(`
-    query eventBySlug($slug: String!) {
-      event: page(contentType: "events.EventPage", slug: $slug) {
-        ... on EventPage {
-          ...Event
-        }
-      }
-    }
-  `);
+export async function generateMetadata(
+  { params }: { params: { slug: string } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(eventBySlugQuery, {
+    slug: params.slug,
+  });
+  const event = (data?.event ?? []) as EventFragment[];
 
+  if (!event) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(event, parent);
+  return metadata;
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
   const { data, error } = await getClient().query(eventBySlugQuery, {
     slug: params.slug,
   });