Metadata and opengraph tags

apps/iiif/.iiifrc-base.yml

@@ -9,13 +9,18 @@ run:
   - extract-slug-source
   - delft-extract-labels
   - extract-part-of-collection
-  - extract-thumbnail
+  - extract-thumbnail-local
   - manifest-sqlite
   - metadata-analysis
   - site-collections
   - delft-image-source
   - typesense-manifests
 
+config:
+  extract-thumbnail-local:
+    width: 1080
+    height: 1080
+
 stores:
   collective-access:
     type: iiif-json

apps/iiif/scripts/delft-label-extract.js

@@ -13,10 +13,13 @@ extract(
     if (!resource) return false;
 
     const label = resource.label;
+    const summary = resource.summary;
 
     return {
       meta: {
         label: getValue(label),
+        intlLabel: label,
+        intlSummary: summary
       },
     };
   }

apps/iiif/scripts/extract-thumbnail-local.js

@@ -0,0 +1,56 @@
+import { createThumbnailHelper } from "@iiif/helpers";
+import { extract } from "iiif-hss";
+
+extract({
+  id: "extract-thumbnail-local",
+  name: "Extract Thumbnail",
+  types: ["Manifest"],
+  invalidate: async (resource, api, config) => {
+    const cache = await api.caches.value;
+    return !cache.extractThumbnail && cache.extractThumbnail !== false;
+  }},
+  async (resource, api, config) => {
+    const vault = resource.vault;
+    const helper = createThumbnailHelper(vault);
+    const thumbnail = await helper.getBestThumbnailAtSize(
+      api.resource,
+      config.width
+        ? {
+            width: config.width,
+            height: config.height || config.width,
+          }
+        : {
+            width: 256,
+            height: 256,
+          },
+      config.dereference || false
+    );
+
+    if (thumbnail?.best) {
+      return {
+        meta: { thumbnail: thumbnail.best },
+        caches: { extractThumbnail: true },
+      };
+    }
+    else {
+      const thumbnail = await helper.getBestThumbnailAtSize(
+        api.resource, {
+              width: 256,
+              height: 256,
+            },
+        config.dereference || false
+      );
+
+      if (thumbnail?.best) {
+        return {
+          meta: { thumbnail: thumbnail.best },
+          caches: { extractThumbnail: true },
+        };
+      }
+    }
+
+    return {
+      caches: { extractThumbnail: false },
+    };
+  },
+)

apps/static-site/content/pages/en/collections-listing.mdx

@@ -0,0 +1,4 @@
+---
+title: Collections
+path: "/collections"
+---

apps/static-site/content/pages/en/exhibitions-listing.mdx

@@ -0,0 +1,4 @@
+---
+title: Exhibitions
+path: "/exhibitions"
+---

apps/static-site/content/pages/en/home.mdx

@@ -0,0 +1,8 @@
+---
+title: Academic Heritage, History and Art
+description: Explore the history of Delft University of Technology and the Special Collections of TU Delft Library
+image: "https://dlc.services/thumbs/7/13/00a1a6c3-25cb-4873-b570-2a77205852c9/full/683,1024/0/default.jpg"
+imageWidth: 683
+imageHeight: 1024
+path: "/"
+---

apps/static-site/content/pages/en/publications-listing.mdx

@@ -0,0 +1,4 @@
+---
+title: Publications
+path: "/publications"
+---

apps/static-site/content/pages/en/search.mdx

@@ -0,0 +1,4 @@
+---
+title: Search
+path: "/search"
+---

apps/static-site/content/pages/nl/collections-listing.mdx

@@ -0,0 +1,4 @@
+---
+title: Collecties
+path: "/collections"
+---

apps/static-site/content/pages/nl/exhibitions-listing.mdx

@@ -0,0 +1,4 @@
+---
+title: Tentoonstellingen
+path: "/exhibitions"
+---

apps/static-site/content/pages/nl/home.mdx

@@ -0,0 +1,8 @@
+---
+title: Academisch Erfgoed, Geschiedenis en Kunst
+description: Verken de geschiedenis van de TU Delft en de bijzondere collecties van de TU Delft Library
+image: "https://dlc.services/thumbs/7/13/00a1a6c3-25cb-4873-b570-2a77205852c9/full/683,1024/0/default.jpg"
+path: "/"
+imageWidth: 683
+imageHeight: 1024
+---

apps/static-site/content/pages/nl/publications-listing.mdx

@@ -0,0 +1,4 @@
+---
+title: Publicaties
+path: "/publications"
+---

apps/static-site/content/pages/nl/search.mdx

@@ -0,0 +1,4 @@
+---
+title: Zoek
+path: "/search"
+---

apps/static-site/contentlayer.config.ts

@@ -11,12 +11,15 @@ const Pages = defineDocumentType(() => ({
     title: { type: "string", required: true },
     path: { type: "string", required: true },
     description: { type: "string", required: false },
+    image: { type: "string", required: false },
+    imageWidth: { type: "number", required: false },
+    imageHeight: { type: "number", required: false },
   },
   computedFields: {
     lang: {
       type: "string",
-      resolve: (publication) => {
-        return publication._id.split("/")[1];
+      resolve: (page) => {
+        return page._id.split("/")[1];
       },
     },
   },
@@ -28,9 +31,12 @@ const Publication = defineDocumentType(() => ({
   contentType: "mdx",
   fields: {
     title: { type: "string", required: true },
+    description: { type: "string", required: false },
     date: { type: "string", required: false },
     author: { type: "string", required: false },
     image: { type: "string", required: false },
+    imageWidth: { type: "number", required: false },
+    imageHeight: { type: "number", required: false },
     hero: { type: "string", required: false },
     toc: { type: "boolean", default: false },
     depth: { type: "number", default: 3 },

apps/static-site/src/app/[locale]/about/page.tsx

@@ -1,24 +1,43 @@
-import { allPages } from ".contentlayer/generated";
 import { Slot } from "@/blocks/slot";
 import { SlotContext } from "@/blocks/slot-context";
 import { Page } from "@/components/Page";
 import { Illustration } from "@/components/blocks/Illustration";
 import { useMDXComponent } from "next-contentlayer/hooks";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { getBasicMetadata, makeTitle, getMdx, getDefaultMetaMdx } from "@/helpers/metadata";
 
-export default async function AboutPage({ params }: { params: { locale: string } }) {
-  const aboutPages = allPages.filter((page) => page.path === "/about");
-  const aboutPage = aboutPages.find((page) => page.lang === params.locale) || aboutPages[0];
-
-  if (!aboutPage) throw new Error(`No about page found for locale ${params.locale}`);
+export async function generateMetadata({ params }: { params: { locale: string } }): Promise<Metadata> {
+  const t = await getTranslations();
+  const path = "/about";
+  const defaultMeta = getDefaultMetaMdx({ params: { locale: params.locale } });
+  const page = getMdx({ params: { pageName: "About", path: path, locale: params.locale } });
+  const title = makeTitle([page.title, defaultMeta.title]);
+  const description = page.description ?? defaultMeta.description;
+  return getBasicMetadata({
+    locale: params.locale,
+    siteName: defaultMeta.title,
+    title: title,
+    description: description,
+    image: {
+      url: page.image ?? defaultMeta.image,
+      width: page.image ? page.imageWidth : defaultMeta.imageWidth,
+      height: page.image ? page.imageHeight : defaultMeta.imageHeight,
+    },
+    path: path,
+  });
+}
 
-  const MDXContent = useMDXComponent(aboutPage.body.code);
+export default async function AboutPage({ params }: { params: { locale: string } }) {
+  const page = getMdx({ params: { pageName: "About", path: "/about", locale: params.locale } });
+  const MDXContent = useMDXComponent(page.body.code);
   const CustomSlot = (inner: any) => {
     return <Slot context={{ page: "about", locale: params.locale }} {...inner} />;
   };
 
   return (
     <Page>
-      <h1 className="text-4xl font-medium">{aboutPage.title}</h1>
+      <h1 className="text-4xl font-medium">{page.title}</h1>
       <div className="mb-32 mt-8 h-full lg:col-span-2">
         <article className="prose md:prose-xl prose-lg max-w-full leading-snug md:leading-snug">
           <SlotContext name="page" value={"about"}>

apps/static-site/src/app/[locale]/collections/[collection]/page.tsx

@@ -1,8 +1,48 @@
 import { CollectionPage } from "@/components/pages/CollectionPage";
 import { loadCollection } from "@/iiif";
 import { Page } from "@/components/Page";
-import { unstable_setRequestLocale } from "next-intl/server";
+import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 // import siteMap from "@repo/iiif/build/meta/sitemap.json";
+import { Metadata } from "next";
+import { getValue } from "@iiif/helpers";
+import { baseURL, makeTitle, getDefaultMetaMdx } from "@/helpers/metadata";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { collection: string; locale: string };
+}): Promise<Metadata> {
+  const t = await getTranslations();
+  const slug = `collections/${params.collection}`;
+  const { collection } = await loadCollection(slug);
+  const defaultMeta = getDefaultMetaMdx({ params: { locale: params.locale } });
+  const collTitle = getValue(collection.label, { language: params.locale, fallbackLanguages: ["nl", "en"] });
+  const description =
+    getValue(collection.summary, { language: params.locale, fallbackLanguages: ["nl", "en"] }) ??
+    defaultMeta.description;
+  const title = makeTitle([collTitle, defaultMeta.title]);
+  const url = `/collections/${params.collection}`;
+  // this page currently uses the default meta image as a 'collection image' is not available.
+  return {
+    metadataBase: new URL(baseURL),
+    description: description,
+    title: title,
+    openGraph: {
+      locale: params.locale,
+      siteName: defaultMeta.title,
+      title: title,
+      type: "website",
+      url: url,
+      images: [
+        {
+          url: defaultMeta.image ?? "",
+          width: defaultMeta.imageWidth,
+          height: defaultMeta.imageHeight,
+        },
+      ],
+    },
+  };
+}
 
 export default async function Collection({ params }: { params: { collection: string; locale: string } }) {
   unstable_setRequestLocale(params.locale);

apps/static-site/src/app/[locale]/collections/page.tsx

@@ -2,14 +2,36 @@ import { Page } from "@/components/Page";
 import { Slot } from "@/blocks/slot";
 import { getTranslations, unstable_setRequestLocale } from "next-intl/server";
 import { CollectionListing } from "@/components/pages/CollectionListing";
+import { getBasicMetadata, makeTitle, getMdx, getDefaultMetaMdx } from "@/helpers/metadata";
+import { Metadata } from "next";
+
+export async function generateMetadata({ params }: { params: { locale: string } }): Promise<Metadata> {
+  const t = await getTranslations();
+  const path = "/collections";
+  const defaultMeta = getDefaultMetaMdx({ params: { locale: params.locale } });
+  const page = getMdx({ params: { pageName: "Collections", path: path, locale: params.locale } });
+  const title = makeTitle([page.title, defaultMeta.title]);
+  const description = page.description ?? defaultMeta.description;
+  return getBasicMetadata({
+    locale: params.locale,
+    siteName: defaultMeta.title,
+    title: title,
+    description: description,
+    image: {
+      url: page.image ?? defaultMeta.image,
+      width: page.image ? page.imageWidth : defaultMeta.imageWidth,
+      height: page.image ? page.imageHeight : defaultMeta.imageHeight,
+    },
+    path: path,
+  });
+}
 
 export default async function Collections(props: { params: { locale: string } }) {
   unstable_setRequestLocale(props.params.locale);
   const t = await getTranslations();
   // List of collections.
   return (
     <Page>
-
       <Slot name="main-collections" context={{ locale: props.params.locale }} />
 
       {/* <CollectionListing /> */}