add titles, description and images for seo

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