add titles, description and images for seo

web/src/app/[...url]/page.tsx

@@ -1,10 +1,12 @@
 import { graphql } from "@/gql";
 import { GenericFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
+import { Metadata, ResolvingMetadata } from "next";
 import { notFound } from "next/navigation";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
 import { BgPig } from "@/components/general/BgPig";
+import { getSeoMetadata } from "@/lib/seo";
 
 export const dynamicParams = false;
 
@@ -13,6 +15,8 @@ const GenericFragmentDefinition = graphql(`
     __typename
     id
     urlPath
+    seoTitle
+    searchDescription
     title
     lead
     pig
@@ -22,6 +26,21 @@ const GenericFragmentDefinition = graphql(`
   }
 `);
 
+const genericPageByUrlPathQuery = graphql(`
+  query genericPageByUrl($urlPath: String!) {
+    page: page(contentType: "generic.GenericPage", urlPath: $urlPath) {
+      ... on GenericPage {
+        ...Generic
+      }
+    }
+  }
+`);
+
+function getWagtailUrlPath(url: string[]): string {
+  // for the page /foo/bar we need to look for `/home/foo/bar/`
+  return `/home/${url.join("/")}/`;
+}
+
 export async function generateStaticParams() {
   const allGenericSlugsQuery = graphql(`
     query allGenericSlugs {
@@ -50,21 +69,29 @@ export async function generateStaticParams() {
   });
 }
 
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { url } = params;
+  const urlPath = getWagtailUrlPath(url);
+  const { data, error } = await getClient().query(genericPageByUrlPathQuery, {
+    urlPath: urlPath,
+  });
+
+  const page = (data?.page ?? []) as GenericFragment;
+
+  if (!page) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(page, parent);
+  return metadata;
+}
+
 export default async function Page({ params }: { params: { url: string[] } }) {
   const { url } = params;
-  // for the page /foo/bar we need to look for `/home/foo/bar/`
-  const urlPath = `/home/${url.join("/")}/`;
-
-  const genericPageByUrlPathQuery = graphql(`
-    query genericPageByUrl($urlPath: String!) {
-      page: page(contentType: "generic.GenericPage", urlPath: $urlPath) {
-        ... on GenericPage {
-          ...Generic
-        }
-      }
-    }
-  `);
-
+  const urlPath = getWagtailUrlPath(url);
   const { data, error } = await getClient().query(genericPageByUrlPathQuery, {
     urlPath: urlPath,
   });