add titles, description and images for seo

web/src/app/foreninger/page.tsx

@@ -1,15 +1,51 @@
+import { Metadata, ResolvingMetadata } from "next";
 import { graphql } from "@/gql";
 import { AssociationFragment, AssociationIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { AssociationList } from "@/components/associations/AssociationList";
-import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
+import { getSeoMetadata } from "@/lib/seo";
+
+const allAssociationsQuery = graphql(`
+  query allAssociations {
+    index: associationIndex {
+      ... on AssociationIndex {
+        ...AssociationIndex
+      }
+    }
+    associations: pages(
+      contentType: "associations.AssociationPage"
+      limit: 1000
+    ) {
+      ... on AssociationPage {
+        ...Association
+      }
+    }
+  }
+`);
+
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(allAssociationsQuery, {});
+  const index = (data?.index ?? []) as AssociationIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
 
 const AssociationIndexDefinition = graphql(`
   fragment AssociationIndex on AssociationIndex {
     ... on AssociationIndex {
       title
+      seoTitle
+      searchDescription
       lead
       body {
         ...Blocks
@@ -24,6 +60,8 @@ const AssociationFragmentDefinition = graphql(`
     id
     slug
     title
+    seoTitle
+    searchDescription
     excerpt
     lead
     body {
@@ -40,20 +78,6 @@ const AssociationFragmentDefinition = graphql(`
 `);
 
 export default async function Page() {
-  const allAssociationsQuery = graphql(`
-    query allAssociations {
-      index: associationIndex {
-        ... on AssociationIndex {
-          ...AssociationIndex
-        }
-      }
-      associations: pages(contentType: "associations.AssociationPage", limit: 1000) {
-        ... on AssociationPage {
-          ...Association
-        }
-      }
-    }
-  `);
   const { data, error } = await getClient().query(allAssociationsQuery, {});
   const associations = (data?.associations ?? []) as AssociationFragment[];
   const index = (data?.index ?? []) as AssociationIndexFragment;
@@ -62,7 +86,10 @@ export default async function Page() {
     <main className="site-main" id="main">
       <PageHeader heading={index.title} lead={index.lead} />
       {index.body && <PageContent blocks={index.body} />}
-      <AssociationList associations={associations} heading="Foreninger og utvalg" />
+      <AssociationList
+        associations={associations}
+        heading="Foreninger og utvalg"
+      />
     </main>
   );
 }