add titles, description and images for seo

web/src/app/lokaler/page.tsx

@@ -1,14 +1,33 @@
+import { Metadata, ResolvingMetadata } from "next";
 import { graphql } from "@/gql";
 import { VenueFragment, VenueIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { VenueList } from "@/components/venues/VenueList";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
+import { getSeoMetadata } from "@/lib/seo";
+
+const venueIndexQuery = graphql(`
+  query venueIndex {
+    index: venueIndex {
+      ... on VenueIndex {
+        ...VenueIndex
+      }
+    }
+    venues: pages(contentType: "venues.VenuePage", limit: 100) {
+      ... on VenuePage {
+        ...Venue
+      }
+    }
+  }
+`);
 
 const VenueIndexDefinition = graphql(`
   fragment VenueIndex on VenueIndex {
     ... on VenueIndex {
       title
+      seoTitle
+      searchDescription
       lead
       body {
         ...Blocks
@@ -23,6 +42,8 @@ const VenueFragmentDefinition = graphql(`
     id
     slug
     title
+    seoTitle
+    searchDescription
     images {
       ...Blocks
     }
@@ -48,21 +69,22 @@ const VenueFragmentDefinition = graphql(`
   }
 `);
 
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(venueIndexQuery, {});
+  const index = (data?.index ?? []) as VenueIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
+
 export default async function Page() {
-  const venueIndexQuery = graphql(`
-    query venueIndex {
-      index: venueIndex {
-        ... on VenueIndex {
-          ...VenueIndex
-        }
-      }
-      venues: pages(contentType: "venues.VenuePage", limit: 100) {
-        ... on VenuePage {
-          ...Venue
-        }
-      }
-    }
-  `);
   const { data, error } = await getClient().query(venueIndexQuery, {});
   const index = (data?.index ?? []) as VenueIndexFragment;
   const venues = (data?.venues ?? []) as VenueFragment[];