add titles, description and images for seo

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

@@ -1,14 +1,41 @@
+import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
-import { Blocks } from "@/components/blocks/Blocks";
 import { ImageSliderBlock } from "@/components/blocks/ImageSliderBlock";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
-import { Image } from "@/components/general/Image";
 import { PageContent } from "@/components/general/PageContent";
 import { NeufMap } from "@/components/venues/NeufMap";
 import { VenueInfo } from "@/components/venues/VenueInfo";
 import { graphql } from "@/gql";
 import { VenueFragment } from "@/gql/graphql";
-import { notFound } from "next/navigation";
+import { getSeoMetadata } from "@/lib/seo";
+
+const venueBySlugQuery = graphql(`
+  query venueBySlug($slug: String!) {
+    venue: page(contentType: "venues.VenuePage", slug: $slug) {
+      ... on VenuePage {
+        ...Venue
+      }
+    }
+  }
+`);
+
+export async function generateMetadata(
+  { params }: { params: { slug: string } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(venueBySlugQuery, {
+    slug: params.slug,
+  });
+  const venue = (data?.venue ?? []) as VenueFragment[];
+
+  if (!venue) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(venue, parent);
+  return metadata;
+}
 
 export async function generateStaticParams() {
   const allVenueSlugsQuery = graphql(`
@@ -31,16 +58,6 @@ export async function generateStaticParams() {
 }
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const venueBySlugQuery = graphql(`
-    query venueBySlug($slug: String!) {
-      venue: page(contentType: "venues.VenuePage", slug: $slug) {
-        ... on VenuePage {
-          ...Venue
-        }
-      }
-    }
-  `);
-
   const { data, error } = await getClient().query(venueBySlugQuery, {
     slug: params.slug,
   });

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[];