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 = getWagtailUrlPath(url);
-  const urlPath = `/home/${url.join("/")}/`;
-
-  const genericPageByUrlPathQuery = graphql(`
-    query genericPageByUrl($urlPath: String!) {
-      page: page(contentType: "generic.GenericPage", urlPath: $urlPath) {
-        ... on GenericPage {
-          ...Generic
-        }
-      }
-    }
-  `);
-
   const { data, error } = await getClient().query(genericPageByUrlPathQuery, {
     urlPath: urlPath,
   });

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

@@ -1,11 +1,23 @@
+import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { ImageFigure } from "@/components/general/Image";
 import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
-import { formatDate, formatExtendedDateTime } from "@/lib/date";
+import { formatDate } from "@/lib/date";
-import { notFound } from "next/navigation";
+import { getSeoMetadata } from "@/lib/seo";
+
+const newsBySlugQuery = graphql(`
+  query newsBySlug($slug: String!) {
+    news: page(contentType: "news.NewsPage", slug: $slug) {
+      ... on NewsPage {
+        ...News
+      }
+    }
+  }
+`);
 
 export async function generateStaticParams() {
   const allNewsSlugsQuery = graphql(`
@@ -27,17 +39,24 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function Page({ params }: { params: { slug: string } }) {
+export async function generateMetadata(
-  const newsBySlugQuery = graphql(`
+  { params }: { params: { slug: string } },
-    query newsBySlug($slug: String!) {
+  parent: ResolvingMetadata
-      news: page(contentType: "news.NewsPage", slug: $slug) {
+): Promise<Metadata | null> {
-        ... on NewsPage {
+  const { data, error } = await getClient().query(newsBySlugQuery, {
-          ...News
+    slug: params.slug,
-        }
+  });
-      }
+  const news = (data?.news ?? []) as NewsFragment[];
-    }
-  `);
 
+  if (!news) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(news, parent);
+  return metadata;
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
   const { data, error } = await getClient().query(newsBySlugQuery, {
     slug: params.slug,
   });
@@ -52,7 +71,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
   return (
     <main className="site-main" id="main">
       <section className="news-header">
-        <Breadcrumb link="/aktuelt" text="Nyhet" date={formatDate(news.firstPublishedAt, "d. MMMM yyyy")} />
+        <Breadcrumb
+          link="/aktuelt"
+          text="Nyhet"
+          date={formatDate(news.firstPublishedAt, "d. MMMM yyyy")}
+        />
         <h1 className="news-title">{news.title}</h1>
         {news.lead && (
           <div

web/src/app/aktuelt/page.tsx

@@ -1,9 +1,24 @@
-import { graphql } from "@/gql";
 import { getClient } from "@/app/client";
 import { NewsList } from "@/components/news/NewsList";
-import Link from "next/link";
+import { Metadata, ResolvingMetadata } from "next";
 import { PageHeader } from "@/components/general/PageHeader";
 import { newsQuery, NewsFragment, NewsIndexFragment } from "@/lib/news";
+import { getSeoMetadata } from "@/lib/seo";
+
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(newsQuery, {});
+  const index = (data?.index ?? []) as NewsIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
 
 export default async function Page() {
   const { data, error } = await getClient().query(newsQuery, {});

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

@@ -1,3 +1,5 @@
+import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import { EventDetails } from "@/components/events/EventDetails";
 import { EventHeader } from "@/components/events/EventHeader";
@@ -6,7 +8,17 @@ import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { EventFragment } from "@/gql/graphql";
 import { getEventPig } from "@/lib/event";
-import { notFound } from "next/navigation";
+import { getSeoMetadata } from "@/lib/seo";
+
+const eventBySlugQuery = graphql(`
+  query eventBySlug($slug: String!) {
+    event: page(contentType: "events.EventPage", slug: $slug) {
+      ... on EventPage {
+        ...Event
+      }
+    }
+  }
+`);
 
 export async function generateStaticParams() {
   const allEventSlugsQuery = graphql(`
@@ -28,17 +40,24 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function Page({ params }: { params: { slug: string } }) {
+export async function generateMetadata(
-  const eventBySlugQuery = graphql(`
+  { params }: { params: { slug: string } },
-    query eventBySlug($slug: String!) {
+  parent: ResolvingMetadata
-      event: page(contentType: "events.EventPage", slug: $slug) {
+): Promise<Metadata | null> {
-        ... on EventPage {
+  const { data, error } = await getClient().query(eventBySlugQuery, {
-          ...Event
+    slug: params.slug,
-        }
+  });
-      }
+  const event = (data?.event ?? []) as EventFragment[];
-    }
-  `);
 
+  if (!event) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(event, parent);
+  return metadata;
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
   const { data, error } = await getClient().query(eventBySlugQuery, {
     slug: params.slug,
   });

web/src/app/arrangementer/page.tsx

@@ -1,17 +1,36 @@
+import { Suspense } from "react";
+import { Metadata, ResolvingMetadata } from "next";
 import { getClient } from "@/app/client";
 import { EventContainer } from "@/components/events/EventContainer";
 import {
-  futureEventsQuery,
+  eventsOverviewQuery,
+  eventIndexMetadataQuery,
   EventFragment,
   EventCategory,
   EventOrganizer,
 } from "@/lib/event";
 import { PageHeader } from "@/components/general/PageHeader";
-import { Suspense } from "react";
+import { EventIndexFragment, VenueFragment } from "@/gql/graphql";
-import { VenueFragment } from "@/gql/graphql";
+import { getSeoMetadata } from "@/lib/seo";
+
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(eventIndexMetadataQuery, {});
+  const index = (data?.index ?? []) as EventIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
 
 export default async function Page() {
-  const { data, error } = await getClient().query(futureEventsQuery, {});
+  const { data, error } = await getClient().query(eventsOverviewQuery, {});
+  const index = (data?.index ?? []) as EventIndexFragment;
   const events = (data?.events?.futureEvents ?? []) as EventFragment[];
   const eventCategories = (data?.eventCategories ?? []) as EventCategory[];
   const eventOrganizers = (data?.eventOrganizers ?? []) as EventOrganizer[];

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
+        <div
-            className="lead"
+          className="lead"
-            dangerouslySetInnerHTML={{ __html: association.lead }}
+          dangerouslySetInnerHTML={{ __html: association.lead }}
-          />
+        />
-        )}
+      )}
       <PageContent blocks={association.body} />
     </main>
   );

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>
   );
 }

web/src/app/kontakt/page.tsx

@@ -1,14 +1,28 @@
+import { Metadata, ResolvingMetadata } from "next";
 import { graphql } from "@/gql";
 import { ContactIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
 import { PageHeader } from "@/components/general/PageHeader";
 import { PageContent } from "@/components/general/PageContent";
 import { GeneralContactBlock } from "@/components/blocks/GeneralContactBlock";
+import { getSeoMetadata } from "@/lib/seo";
+
+const contactQuery = graphql(`
+  query contacts {
+    index: contactIndex {
+      ... on ContactIndex {
+        ...ContactIndex
+      }
+    }
+  }
+`);
 
 const ContactIndexDefinition = graphql(`
   fragment ContactIndex on ContactIndex {
     ... on ContactIndex {
       title
+      seoTitle
+      searchDescription
       lead
       body {
         ...Blocks
@@ -17,18 +31,24 @@ const ContactIndexDefinition = graphql(`
   }
 `);
 
-export default async function Page() {
+export async function generateMetadata(
-  const contactQuery = graphql(`
+  { params }: { params: { url: string[] } },
-    query contacts {
+  parent: ResolvingMetadata
-      contactIndex {
+): Promise<Metadata | null> {
-        ... on ContactIndex {
-          ...ContactIndex
-        }
-      }
-    }
-  `);
   const { data, error } = await getClient().query(contactQuery, {});
-  const index = (data?.contactIndex ?? []) as ContactIndexFragment;
+  const index = (data?.index ?? []) as ContactIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
+
+export default async function Page() {
+  const { data, error } = await getClient().query(contactQuery, {});
+  const index = (data?.index ?? []) as ContactIndexFragment;
 
   return (
     <main className="site-main" id="main">

web/src/app/layout.tsx

@@ -3,10 +3,26 @@ import { Header } from "@/components/layout/Header";
 import { Footer } from "@/components/layout/Footer";
 import { Metadata } from "next";
 
+const baseUrlMetadata = process.env.URL
+  ? { metadataBase: new URL(process.env.URL) }
+  : {};
+
 export const metadata: Metadata = {
-  title: "Chateau Neuf",
+  title: {
+    template: "%s | Chateau Neuf – Det Norske Studentersamfund",
+    default: "Chateau Neuf – Det Norske Studentersamfund",
+  },
+  alternates: {
+    canonical: "./",
+  },
   description:
     "Chateau Neuf er studenthuset i Oslo og tilholdsstedet for foreningene i Studentersamfundet.",
+  openGraph: {
+    siteName: "Chateau Neuf – Det Norske Studentersamfund",
+    locale: "nb-NO",
+    type: "website",
+  },
+  ...baseUrlMetadata,
 };
 
 export default function RootLayout({

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

web/src/app/sok/page.tsx

@@ -3,6 +3,8 @@ import { getClient } from "@/app/client";
 import { SearchContainer } from "@/components/search/SearchContainer";
 import { Suspense } from "react";
 
+// TODO: seo metadata?
+
 export default async function Page({
   searchParams,
 }: {

web/src/app/utleie/page.tsx

@@ -1,3 +1,4 @@
+import { Metadata, ResolvingMetadata } from "next";
 import { graphql } from "@/gql";
 import { VenueFragment, VenueRentalIndexFragment } from "@/gql/graphql";
 import { getClient } from "@/app/client";
@@ -5,11 +6,29 @@ import { VenueList } from "@/components/venues/VenueList";
 import { PageHeader } from "@/components/general/PageHeader";
 import { BgPig } from "@/components/general/BgPig";
 import { PageContent } from "@/components/general/PageContent";
+import { getSeoMetadata } from "@/lib/seo";
+
+const venueRentalIndexQuery = graphql(`
+  query venueRentalIndex {
+    index: venueRentalIndex {
+      ... on VenueRentalIndex {
+        ...VenueRentalIndex
+      }
+    }
+    venues: pages(contentType: "venues.VenuePage", limit: 100) {
+      ... on VenuePage {
+        ...Venue
+      }
+    }
+  }
+`);
 
 const VenueRentalIndexDefinition = graphql(`
   fragment VenueRentalIndex on VenueRentalIndex {
     ... on VenueRentalIndex {
       title
+      seoTitle
+      searchDescription
       lead
       body {
         ...Blocks
@@ -18,21 +37,22 @@ const VenueRentalIndexDefinition = graphql(`
   }
 `);
 
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(venueRentalIndexQuery, {});
+  const index = (data?.index ?? []) as VenueRentalIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
+
 export default async function Page() {
-  const venueRentalIndexQuery = graphql(`
-    query venueRentalIndex {
-      index: venueRentalIndex {
-        ... on VenueRentalIndex {
-          ...VenueRentalIndex
-        }
-      }
-      venues: pages(contentType: "venues.VenuePage", limit: 100) {
-        ... on VenuePage {
-          ...Venue
-        }
-      }
-    }
-  `);
   const { data, error } = await getClient().query(venueRentalIndexQuery, {});
   const index = (data?.index ?? []) as VenueRentalIndexFragment;
   const venues = (data?.venues ?? []) as VenueFragment[];

web/src/gql/gql.ts

@@ -13,38 +13,40 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    title\n    lead\n    pig\n    body {\n      ...Blocks\n    }\n  }\n": types.GenericFragmentDoc,
+    "\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    seoTitle\n    searchDescription\n    title\n    lead\n    pig\n    body {\n      ...Blocks\n    }\n  }\n": types.GenericFragmentDoc,
+    "\n  query genericPageByUrl($urlPath: String!) {\n    page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n      ... on GenericPage {\n        ...Generic\n      }\n    }\n  }\n": types.GenericPageByUrlDocument,
     "\n    query allGenericSlugs {\n      pages(contentType: \"generic.GenericPage\") {\n        id\n        urlPath\n      }\n    }\n  ": types.AllGenericSlugsDocument,
-    "\n    query genericPageByUrl($urlPath: String!) {\n      page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n        ... on GenericPage {\n          ...Generic\n        }\n      }\n    }\n  ": types.GenericPageByUrlDocument,
+    "\n  query newsBySlug($slug: String!) {\n    news: page(contentType: \"news.NewsPage\", slug: $slug) {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n": types.NewsBySlugDocument,
     "\n    query allNewsSlugs {\n      pages(contentType: \"news.NewsPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllNewsSlugsDocument,
-    "\n    query newsBySlug($slug: String!) {\n      news: page(contentType: \"news.NewsPage\", slug: $slug) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  ": types.NewsBySlugDocument,
+    "\n  query eventBySlug($slug: String!) {\n    event: page(contentType: \"events.EventPage\", slug: $slug) {\n      ... on EventPage {\n        ...Event\n      }\n    }\n  }\n": types.EventBySlugDocument,
     "\n    query allEventSlugs {\n      pages(contentType: \"events.EventPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllEventSlugsDocument,
-    "\n    query eventBySlug($slug: String!) {\n      event: page(contentType: \"events.EventPage\", slug: $slug) {\n        ... on EventPage {\n          ...Event\n        }\n      }\n    }\n  ": types.EventBySlugDocument,
+    "\n  query associationBySlug($slug: String!) {\n    association: page(\n      contentType: \"associations.AssociationPage\"\n      slug: $slug\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": types.AssociationBySlugDocument,
     "\n    query allAssociationSlugs {\n      pages(contentType: \"associations.AssociationPage\") {\n        id\n        slug\n      }\n    }\n  ": types.AllAssociationSlugsDocument,
-    "\n    query associationBySlug($slug: String!) {\n      association: page(\n        contentType: \"associations.AssociationPage\"\n        slug: $slug\n      ) {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  ": types.AssociationBySlugDocument,
+    "\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n": types.AllAssociationsDocument,
-    "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.AssociationIndexFragmentDoc,
+    "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.AssociationIndexFragmentDoc,
     "\n  fragment Association on AssociationPage {\n    __typename\n    id\n    slug\n    title\n    excerpt\n    lead\n    body {\n      ...Blocks\n    }\n    logo {\n      url\n      width\n      height\n    }\n    associationType\n    websiteUrl\n  }\n": types.AssociationFragmentDoc,
-    "\n    query allAssociations {\n      index: associationIndex {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\", limit: 1000) {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  ": types.AllAssociationsDocument,
+    "\n  query contacts {\n    index: contactIndex {\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n": types.ContactsDocument,
-    "\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.ContactIndexFragmentDoc,
+    "\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.ContactIndexFragmentDoc,
-    "\n    query contacts {\n      contactIndex {\n        ... on ContactIndex {\n          ...ContactIndex\n        }\n      }\n    }\n  ": types.ContactsDocument,
+    "\n  query venueBySlug($slug: String!) {\n    venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": types.VenueBySlugDocument,
     "\n    query allVenueSlugs {\n      pages(contentType: \"venues.VenuePage\", limit: 100) {\n        id\n        slug\n      }\n    }\n  ": types.AllVenueSlugsDocument,
-    "\n    query venueBySlug($slug: String!) {\n      venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.VenueBySlugDocument,
+    "\n  query venueIndex {\n    index: venueIndex {\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": types.VenueIndexDocument,
     "\n  fragment VenueIndex on VenueIndex {\n    ... on VenueIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.VenueIndexFragmentDoc,
     "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    images {\n      ...Blocks\n    }\n    body {\n      ...Blocks\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    showInOverview\n    floor\n    preposition\n    usedFor\n    techSpecsUrl\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n": types.VenueFragmentDoc,
-    "\n    query venueIndex {\n      index: venueIndex {\n        ... on VenueIndex {\n          ...VenueIndex\n        }\n      }\n      venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.VenueIndexDocument,
     "\n  fragment Home on HomePage {\n    ... on HomePage {\n      featuredEvents {\n        id\n      }\n    }\n  }\n": types.HomeFragmentDoc,
     "\n    query home {\n      events: eventIndex {\n        ... on EventIndex {\n          futureEvents {\n            ... on EventPage {\n              ...Event\n            }\n          }\n        }\n      }\n      home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n        ... on HomePage {\n          ...Home\n        }\n      }\n      news: pages(contentType: \"news.newsPage\", order: \"-first_published_at\", limit: 4) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  ": types.HomeDocument,
     "\n      query search($query: String) {\n        results: search(query: $query) {\n          __typename\n          ... on PageInterface {\n            slug\n          }\n          ... on NewsPage {\n            id\n            title\n          }\n          ... on EventPage {\n            id\n            title\n          }\n          ... on GenericPage {\n            id\n            title\n          }\n          ... on VenuePage {\n            id\n            title\n          }\n          ... on AssociationPage {\n            id\n            title\n            associationType\n          }\n        }\n      }\n    ": types.SearchDocument,
+    "\n  query venueRentalIndex {\n    index: venueRentalIndex {\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n": types.VenueRentalIndexDocument,
     "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n": types.VenueRentalIndexFragmentDoc,
-    "\n    query venueRentalIndex {\n      index: venueRentalIndex {\n        ... on VenueRentalIndex {\n          ...VenueRentalIndex\n        }\n      }\n      venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  ": types.VenueRentalIndexDocument,
     "\n  fragment OneLevelOfBlocks on StreamFieldInterface {\n    id\n    blockType\n    field\n    ... on RichTextBlock {\n      rawValue\n      value\n    }\n    ... on ImageWithTextBlock {\n      image {\n        ...Image\n      }\n      imageFormat\n      text\n    }\n    ... on ImageSliderBlock {\n      images {\n        ... on ImageSliderItemBlock {\n          image {\n            ...Image\n          }\n          text\n        }\n      }\n    }\n    ... on HorizontalRuleBlock {\n      color\n    }\n    ... on FeaturedBlock {\n      title\n      featuredBlockText: text\n      linkText\n      imagePosition\n      backgroundColor\n      featuredPage {\n        contentType\n        pageType\n        url\n        ... on EventPage {\n          featuredImage {\n            ...Image\n          }\n        }\n        ... on NewsPage {\n          featuredImage {\n            ...Image\n          }\n        }\n      }\n      featuredImageOverride {\n        ...Image\n      }\n    }\n    ... on ContactListBlock {\n      items {\n        blockType\n        ... on ContactEntityBlock {\n          contactEntity {\n            ...ContactEntity\n          }\n        }\n      }\n    }\n    ... on EmbedBlock {\n      url\n      embed\n      rawEmbed\n    }\n    ... on FactBoxBlock {\n      backgroundColor\n      factBoxBody: body\n    }\n  }\n": types.OneLevelOfBlocksFragmentDoc,
     "\n  fragment Blocks on StreamFieldInterface {\n    ... on AccordionBlock {\n      heading\n      body {\n        ...OneLevelOfBlocks\n      }\n    }\n    ... on PageSectionBlock {\n      title\n      backgroundColor\n      icon\n      body {\n        ...OneLevelOfBlocks\n      }\n    }\n    ... on ContactSectionBlock {\n      title\n      text\n      blocks {\n        ... on ContactSubsectionBlock {\n          title\n          text\n          blocks {\n            ...OneLevelOfBlocks\n          }\n        }\n        ...OneLevelOfBlocks\n      }\n    }\n    ...OneLevelOfBlocks\n  }\n": types.BlocksFragmentDoc,
     "\n  fragment Image on CustomImage {\n    id\n    url\n    width\n    height\n    alt\n    attribution\n  }\n": types.ImageFragmentDoc,
     "\n  fragment ContactEntity on ContactEntity {\n    id\n    name\n    contactType\n    title\n    email\n    phoneNumber\n    image {\n      ...Image\n    }\n  }\n": types.ContactEntityFragmentDoc,
     "\n  fragment Event on EventPage {\n    __typename\n    id\n    slug\n    title\n    subtitle\n    lead\n    body {\n      id\n      blockType\n      field\n      ... on RichTextBlock {\n        rawValue\n        value\n      }\n    }\n    featuredImage {\n      ...Image\n    }\n    pig\n    facebookUrl\n    ticketUrl\n    free\n    priceRegular\n    priceMember\n    priceStudent\n    categories {\n      ... on EventCategory {\n        name\n        slug\n        pig\n      }\n    }\n    occurrences {\n      ... on EventOccurrence {\n        __typename\n        id\n        start\n        end\n        venue {\n          __typename\n          id\n          slug\n          title\n          preposition\n          url\n        }\n      }\n    }\n    organizers {\n      ... on EventOrganizer {\n        id\n        name\n        slug\n        externalUrl\n        association {\n          ... on AssociationPage {\n            url\n          }\n        }\n      }\n    }\n  }\n": types.EventFragmentDoc,
-    "\n  query futureEvents {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n    eventOrganizers: eventOrganizers {\n      ... on EventOrganizer {\n        id\n        name\n        slug\n        externalUrl\n        association {\n          ... on AssociationPage {\n            url\n          }\n        }\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\") {\n      ... on VenuePage {\n        id\n        title\n        slug\n        preposition\n      }\n    }\n  }\n": types.FutureEventsDocument,
+    "\n  fragment EventIndex on EventIndex {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n  }\n": types.EventIndexFragmentDoc,
-    "\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    title\n    firstPublishedAt\n    excerpt\n    lead\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n": types.NewsFragmentDoc,
+    "\n  query eventIndexMetadata {\n    index: eventIndex {\n      ... on EventIndex {\n        ...EventIndex\n      }\n    }\n  }\n": types.EventIndexMetadataDocument,
-    "\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    title\n    lead\n  }\n": types.NewsIndexFragmentDoc,
+    "\n  query futureEvents {\n    index: eventIndex {\n      ... on EventIndex {\n        ...EventIndex\n      }\n    }\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n    eventOrganizers: eventOrganizers {\n      ... on EventOrganizer {\n        id\n        name\n        slug\n        externalUrl\n        association {\n          ... on AssociationPage {\n            url\n          }\n        }\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\") {\n      ... on VenuePage {\n        id\n        title\n        slug\n        preposition\n      }\n    }\n  }\n": types.FutureEventsDocument,
+    "\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n    firstPublishedAt\n    excerpt\n    lead\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n": types.NewsFragmentDoc,
+    "\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n    lead\n  }\n": types.NewsIndexFragmentDoc,
     "\n  query news {\n    index: newsIndex {\n      ... on NewsIndex {\n        ...NewsIndex\n      }\n    }\n    news: pages(contentType: \"news.NewsPage\", order: \"-first_published_at\", limit: 1000) {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n": types.NewsDocument,
     "\n  query openingHoursSets {\n    openingHoursSets {\n      ...OpeningHoursSetFragment\n    }\n  }\n": types.OpeningHoursSetsDocument,
     "\n  fragment OpeningHoursSetFragment on OpeningHoursSet {\n    name\n    effectiveFrom\n    effectiveTo\n    announcement\n    items {\n      id\n      function\n      week {\n        id\n        blockType\n        ... on OpeningHoursWeekBlock {\n          ...OpeningHoursWeekBlock\n        }\n      }\n    }\n  }\n": types.OpeningHoursSetFragmentFragmentDoc,
@@ -69,7 +71,11 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    title\n    lead\n    pig\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    title\n    lead\n    pig\n    body {\n      ...Blocks\n    }\n  }\n"];
+export function graphql(source: "\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    seoTitle\n    searchDescription\n    title\n    lead\n    pig\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment Generic on GenericPage {\n    __typename\n    id\n    urlPath\n    seoTitle\n    searchDescription\n    title\n    lead\n    pig\n    body {\n      ...Blocks\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query genericPageByUrl($urlPath: String!) {\n    page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n      ... on GenericPage {\n        ...Generic\n      }\n    }\n  }\n"): (typeof documents)["\n  query genericPageByUrl($urlPath: String!) {\n    page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n      ... on GenericPage {\n        ...Generic\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -77,7 +83,7 @@ export function graphql(source: "\n    query allGenericSlugs {\n      pages(cont
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query genericPageByUrl($urlPath: String!) {\n      page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n        ... on GenericPage {\n          ...Generic\n        }\n      }\n    }\n  "): (typeof documents)["\n    query genericPageByUrl($urlPath: String!) {\n      page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n        ... on GenericPage {\n          ...Generic\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n  query newsBySlug($slug: String!) {\n    news: page(contentType: \"news.NewsPage\", slug: $slug) {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n"): (typeof documents)["\n  query newsBySlug($slug: String!) {\n    news: page(contentType: \"news.NewsPage\", slug: $slug) {\n      ... on NewsPage {\n        ...News\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -85,7 +91,7 @@ export function graphql(source: "\n    query allNewsSlugs {\n      pages(content
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query newsBySlug($slug: String!) {\n      news: page(contentType: \"news.NewsPage\", slug: $slug) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  "): (typeof documents)["\n    query newsBySlug($slug: String!) {\n      news: page(contentType: \"news.NewsPage\", slug: $slug) {\n        ... on NewsPage {\n          ...News\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n  query eventBySlug($slug: String!) {\n    event: page(contentType: \"events.EventPage\", slug: $slug) {\n      ... on EventPage {\n        ...Event\n      }\n    }\n  }\n"): (typeof documents)["\n  query eventBySlug($slug: String!) {\n    event: page(contentType: \"events.EventPage\", slug: $slug) {\n      ... on EventPage {\n        ...Event\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -93,7 +99,7 @@ export function graphql(source: "\n    query allEventSlugs {\n      pages(conten
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query eventBySlug($slug: String!) {\n      event: page(contentType: \"events.EventPage\", slug: $slug) {\n        ... on EventPage {\n          ...Event\n        }\n      }\n    }\n  "): (typeof documents)["\n    query eventBySlug($slug: String!) {\n      event: page(contentType: \"events.EventPage\", slug: $slug) {\n        ... on EventPage {\n          ...Event\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n  query associationBySlug($slug: String!) {\n    association: page(\n      contentType: \"associations.AssociationPage\"\n      slug: $slug\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n"): (typeof documents)["\n  query associationBySlug($slug: String!) {\n    association: page(\n      contentType: \"associations.AssociationPage\"\n      slug: $slug\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -101,11 +107,11 @@ export function graphql(source: "\n    query allAssociationSlugs {\n      pages(
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query associationBySlug($slug: String!) {\n      association: page(\n        contentType: \"associations.AssociationPage\"\n        slug: $slug\n      ) {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  "): (typeof documents)["\n    query associationBySlug($slug: String!) {\n      association: page(\n        contentType: \"associations.AssociationPage\"\n        slug: $slug\n      ) {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n"): (typeof documents)["\n  query allAssociations {\n    index: associationIndex {\n      ... on AssociationIndex {\n        ...AssociationIndex\n      }\n    }\n    associations: pages(\n      contentType: \"associations.AssociationPage\"\n      limit: 1000\n    ) {\n      ... on AssociationPage {\n        ...Association\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment AssociationIndex on AssociationIndex {\n    ... on AssociationIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -113,15 +119,15 @@ export function graphql(source: "\n  fragment Association on AssociationPage {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query allAssociations {\n      index: associationIndex {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\", limit: 1000) {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  "): (typeof documents)["\n    query allAssociations {\n      index: associationIndex {\n        ... on AssociationIndex {\n          ...AssociationIndex\n        }\n      }\n      associations: pages(contentType: \"associations.AssociationPage\", limit: 1000) {\n        ... on AssociationPage {\n          ...Association\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n  query contacts {\n    index: contactIndex {\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n"): (typeof documents)["\n  query contacts {\n    index: contactIndex {\n      ... on ContactIndex {\n        ...ContactIndex\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment ContactIndex on ContactIndex {\n    ... on ContactIndex {\n      title\n      seoTitle\n      searchDescription\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query contacts {\n      contactIndex {\n        ... on ContactIndex {\n          ...ContactIndex\n        }\n      }\n    }\n  "): (typeof documents)["\n    query contacts {\n      contactIndex {\n        ... on ContactIndex {\n          ...ContactIndex\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n  query venueBySlug($slug: String!) {\n    venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n"): (typeof documents)["\n  query venueBySlug($slug: String!) {\n    venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -129,7 +135,7 @@ export function graphql(source: "\n    query allVenueSlugs {\n      pages(conten
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query venueBySlug($slug: String!) {\n      venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  "): (typeof documents)["\n    query venueBySlug($slug: String!) {\n      venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n  query venueIndex {\n    index: venueIndex {\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n"): (typeof documents)["\n  query venueIndex {\n    index: venueIndex {\n      ... on VenueIndex {\n        ...VenueIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -138,10 +144,6 @@ export function graphql(source: "\n  fragment VenueIndex on VenueIndex {\n    ..
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    images {\n      ...Blocks\n    }\n    body {\n      ...Blocks\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    showInOverview\n    floor\n    preposition\n    usedFor\n    techSpecsUrl\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"): (typeof documents)["\n  fragment Venue on VenuePage {\n    __typename\n    id\n    slug\n    title\n    images {\n      ...Blocks\n    }\n    body {\n      ...Blocks\n    }\n    featuredImage {\n      ...Image\n    }\n    showAsBookable\n    showInOverview\n    floor\n    preposition\n    usedFor\n    techSpecsUrl\n    capabilityAudio\n    capabilityAudioVideo\n    capabilityBar\n    capabilityLighting\n    capacityLegal\n    capacityStanding\n    capacitySitting\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n    query venueIndex {\n      index: venueIndex {\n        ... on VenueIndex {\n          ...VenueIndex\n        }\n      }\n      venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  "): (typeof documents)["\n    query venueIndex {\n      index: venueIndex {\n        ... on VenueIndex {\n          ...VenueIndex\n        }\n      }\n      venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  "];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -157,11 +159,11 @@ export function graphql(source: "\n      query search($query: String) {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query venueRentalIndex {\n    index: venueRentalIndex {\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n"): (typeof documents)["\n  query venueRentalIndex {\n    index: venueRentalIndex {\n      ... on VenueRentalIndex {\n        ...VenueRentalIndex\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n      ... on VenuePage {\n        ...Venue\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n    query venueRentalIndex {\n      index: venueRentalIndex {\n        ... on VenueRentalIndex {\n          ...VenueRentalIndex\n        }\n      }\n      venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  "): (typeof documents)["\n    query venueRentalIndex {\n      index: venueRentalIndex {\n        ... on VenueRentalIndex {\n          ...VenueRentalIndex\n        }\n      }\n      venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n        ... on VenuePage {\n          ...Venue\n        }\n      }\n    }\n  "];
+export function graphql(source: "\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment VenueRentalIndex on VenueRentalIndex {\n    ... on VenueRentalIndex {\n      title\n      lead\n      body {\n        ...Blocks\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -185,15 +187,23 @@ export function graphql(source: "\n  fragment Event on EventPage {\n    __typena
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query futureEvents {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n    eventOrganizers: eventOrganizers {\n      ... on EventOrganizer {\n        id\n        name\n        slug\n        externalUrl\n        association {\n          ... on AssociationPage {\n            url\n          }\n        }\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\") {\n      ... on VenuePage {\n        id\n        title\n        slug\n        preposition\n      }\n    }\n  }\n"): (typeof documents)["\n  query futureEvents {\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n    eventOrganizers: eventOrganizers {\n      ... on EventOrganizer {\n        id\n        name\n        slug\n        externalUrl\n        association {\n          ... on AssociationPage {\n            url\n          }\n        }\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\") {\n      ... on VenuePage {\n        id\n        title\n        slug\n        preposition\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  fragment EventIndex on EventIndex {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n  }\n"): (typeof documents)["\n  fragment EventIndex on EventIndex {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    title\n    firstPublishedAt\n    excerpt\n    lead\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    title\n    firstPublishedAt\n    excerpt\n    lead\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n"];
+export function graphql(source: "\n  query eventIndexMetadata {\n    index: eventIndex {\n      ... on EventIndex {\n        ...EventIndex\n      }\n    }\n  }\n"): (typeof documents)["\n  query eventIndexMetadata {\n    index: eventIndex {\n      ... on EventIndex {\n        ...EventIndex\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    title\n    lead\n  }\n"): (typeof documents)["\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    title\n    lead\n  }\n"];
+export function graphql(source: "\n  query futureEvents {\n    index: eventIndex {\n      ... on EventIndex {\n        ...EventIndex\n      }\n    }\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n    eventOrganizers: eventOrganizers {\n      ... on EventOrganizer {\n        id\n        name\n        slug\n        externalUrl\n        association {\n          ... on AssociationPage {\n            url\n          }\n        }\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\") {\n      ... on VenuePage {\n        id\n        title\n        slug\n        preposition\n      }\n    }\n  }\n"): (typeof documents)["\n  query futureEvents {\n    index: eventIndex {\n      ... on EventIndex {\n        ...EventIndex\n      }\n    }\n    events: eventIndex {\n      ... on EventIndex {\n        futureEvents {\n          ... on EventPage {\n            ...Event\n          }\n        }\n      }\n    }\n    eventCategories: eventCategories {\n      ... on EventCategory {\n        name\n        slug\n        showInFilters\n      }\n    }\n    eventOrganizers: eventOrganizers {\n      ... on EventOrganizer {\n        id\n        name\n        slug\n        externalUrl\n        association {\n          ... on AssociationPage {\n            url\n          }\n        }\n      }\n    }\n    venues: pages(contentType: \"venues.VenuePage\") {\n      ... on VenuePage {\n        id\n        title\n        slug\n        preposition\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n    firstPublishedAt\n    excerpt\n    lead\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n"): (typeof documents)["\n  fragment News on NewsPage {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n    firstPublishedAt\n    excerpt\n    lead\n    featuredImage {\n      ...Image\n    }\n    body {\n      ...Blocks\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n    lead\n  }\n"): (typeof documents)["\n  fragment NewsIndex on NewsIndex {\n    __typename\n    id\n    slug\n    seoTitle\n    searchDescription\n    title\n    lead\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

web/src/lib/common.ts

@@ -51,6 +51,10 @@ export function stripWhitespace(s: string): string {
   return s.replace(/\s/g, "");
 }
 
+export function stripHtml(s: string): string {
+  return s.replace(/(<([^>]+)>)/gi, "");
+}
+
 export function formatPhoneE164(phone: string): string {
   phone = stripWhitespace(phone);
   if (phone.startsWith("+") || phone.length != 8) {

web/src/lib/event.ts

@@ -28,6 +28,8 @@ const EventFragmentDefinition = graphql(`
     __typename
     id
     slug
+    seoTitle
+    searchDescription
     title
     subtitle
     lead
@@ -89,8 +91,34 @@ const EventFragmentDefinition = graphql(`
   }
 `);
 
-export const futureEventsQuery = graphql(`
+const EventIndexFragmentDefinition = graphql(`
+  fragment EventIndex on EventIndex {
+    __typename
+    id
+    slug
+    seoTitle
+    searchDescription
+    title
+  }
+`);
+
+export const eventIndexMetadataQuery = graphql(`
+  query eventIndexMetadata {
+    index: eventIndex {
+      ... on EventIndex {
+        ...EventIndex
+      }
+    }
+  }
+`);
+
+export const eventsOverviewQuery = graphql(`
   query futureEvents {
+    index: eventIndex {
+      ... on EventIndex {
+        ...EventIndex
+      }
+    }
     events: eventIndex {
       ... on EventIndex {
         futureEvents {

web/src/lib/news.ts

@@ -8,6 +8,8 @@ const NewsFragmentDefinition = graphql(`
     __typename
     id
     slug
+    seoTitle
+    searchDescription
     title
     firstPublishedAt
     excerpt
@@ -26,6 +28,8 @@ const NewsIndexFragmentDefinition = graphql(`
     __typename
     id
     slug
+    seoTitle
+    searchDescription
     title
     lead
   }

web/src/lib/seo.ts

@@ -0,0 +1,50 @@
+import { ResolvingMetadata } from "next";
+import { stripHtml } from "./common";
+
+export function getSeoDescription(
+  searchDescription?: string | null,
+  excerpt?: string | null,
+  lead?: string | null
+): string | undefined {
+  if (searchDescription && searchDescription.length) {
+    return searchDescription;
+  }
+  if (excerpt) {
+    const textOnly = stripHtml(excerpt).trim();
+    if (textOnly.length) {
+      return textOnly;
+    }
+  }
+  if (lead) {
+    const textOnly = stripHtml(lead).trim();
+    if (textOnly.length) {
+      return textOnly;
+    }
+  }
+  return undefined;
+}
+
+export async function getSeoMetadata(page: any, parent: ResolvingMetadata) {
+  const title = page.seoTitle ?? page.title;
+  const description = getSeoDescription(
+    page?.searchDescription,
+    page?.excerpt,
+    page?.lead
+  );
+  const parentOpenGraph = (await parent)?.openGraph ?? {};
+  let images = [];
+  if (page?.featuredImage && page.featuredImage.url) {
+    images.push(page.featuredImage.url);
+  }
+  if (page?.logo && page.logo.url) {
+    images.push(page.logo.url);
+  }
+  const openGraph = {
+    ...parentOpenGraph,
+    title: title,
+    description: description,
+    images: images,
+  };
+
+  return { title, description, openGraph };
+}