add titles, description and images for seo

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

@@ -1,9 +1,41 @@
+import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import { AssociationHeader } from "@/components/associations/AssociationHeader";
 import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
-import { notFound } from "next/navigation";
+import { getSeoMetadata } from "@/lib/seo";
+
+const associationBySlugQuery = graphql(`
+  query associationBySlug($slug: String!) {
+    association: page(
+      contentType: "associations.AssociationPage"
+      slug: $slug
+    ) {
+      ... on AssociationPage {
+        ...Association
+      }
+    }
+  }
+`);
+
+export async function generateMetadata(
+  { params }: { params: { slug: string } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(associationBySlugQuery, {
+    slug: params.slug,
+  });
+  const association = (data?.association ?? []) as AssociationFragment[];
+
+  if (!association) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(association, parent);
+  return metadata;
+}
 
 export async function generateStaticParams() {
   const allAssociationSlugsQuery = graphql(`
@@ -26,19 +58,6 @@ export async function generateStaticParams() {
 }
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const associationBySlugQuery = graphql(`
-    query associationBySlug($slug: String!) {
-      association: page(
-        contentType: "associations.AssociationPage"
-        slug: $slug
-      ) {
-        ... on AssociationPage {
-          ...Association
-        }
-      }
-    }
-  `);
-
   const { data, error } = await getClient().query(associationBySlugQuery, {
     slug: params.slug,
   });
@@ -53,11 +72,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
     <main className="site-main" id="main">
       <AssociationHeader association={association} />
       {association.lead && (
-          <div
-            className="lead"
-            dangerouslySetInnerHTML={{ __html: association.lead }}
-          />
-        )}
+        <div
+          className="lead"
+          dangerouslySetInnerHTML={{ __html: association.lead }}
+        />
+      )}
       <PageContent blocks={association.body} />
     </main>
   );