@canopy-iiif/app 0.10.2 → 0.10.4

package/lib/build/iiif.js

@@ -15,10 +15,13 @@ const {
 } = require("../common");
 const mdx = require("./mdx");
 const {log, logLine, logResponse} = require("./log");
+const { getPageContext } = require("../page-context");
+const PageContext = getPageContext();
 const {
   getThumbnail,
   getRepresentativeImage,
   buildIiifImageUrlFromService,
+  buildIiifImageUrlForDimensions,
   findPrimaryCanvasImage,
   buildIiifImageSrcset,
 } = require("../iiif/thumbnail");
@@ -44,6 +47,9 @@ const DEFAULT_CHUNK_SIZE = 20;
 const DEFAULT_FETCH_CONCURRENCY = 5;
 const HERO_THUMBNAIL_SIZE = 800;
 const HERO_IMAGE_SIZES_ATTR = "(min-width: 1024px) 1280px, 100vw";
+const OG_IMAGE_WIDTH = 1200;
+const OG_IMAGE_HEIGHT = 630;
+const HERO_REPRESENTATIVE_SIZE = Math.max(HERO_THUMBNAIL_SIZE, OG_IMAGE_WIDTH);
 
 function resolvePositiveInteger(value, fallback) {
   const num = Number(value);
@@ -69,6 +75,73 @@ function resolveThumbnailPreferences() {
   };
 }
 
+async function resolveHeroMedia(manifest) {
+  if (!manifest) return null;
+  try {
+    const heroSource = (() => {
+      if (manifest && manifest.thumbnail) {
+        const clone = { ...manifest };
+        try {
+          delete clone.thumbnail;
+        } catch (_) {
+          clone.thumbnail = undefined;
+        }
+        return clone;
+      }
+      return manifest;
+    })();
+    const heroRep = await getRepresentativeImage(
+      heroSource || manifest,
+      HERO_REPRESENTATIVE_SIZE,
+      true
+    );
+    const canvasImage = findPrimaryCanvasImage(manifest);
+    const heroService =
+      (canvasImage && canvasImage.service) ||
+      (heroRep && heroRep.service);
+    const heroPreferred = buildIiifImageUrlFromService(
+      heroService,
+      HERO_THUMBNAIL_SIZE
+    );
+    const heroFallbackId = (() => {
+      if (canvasImage && canvasImage.id) return String(canvasImage.id);
+      if (heroRep && heroRep.id) return String(heroRep.id);
+      return '';
+    })();
+    const heroWidth = (() => {
+      if (canvasImage && typeof canvasImage.width === 'number')
+        return canvasImage.width;
+      if (heroRep && typeof heroRep.width === 'number') return heroRep.width;
+      return undefined;
+    })();
+    const heroHeight = (() => {
+      if (canvasImage && typeof canvasImage.height === 'number')
+        return canvasImage.height;
+      if (heroRep && typeof heroRep.height === 'number')
+        return heroRep.height;
+      return undefined;
+    })();
+    const heroSrcset = buildIiifImageSrcset(heroService);
+    const ogImage = heroService
+      ? buildIiifImageUrlForDimensions(
+          heroService,
+          OG_IMAGE_WIDTH,
+          OG_IMAGE_HEIGHT
+        )
+      : '';
+    return {
+      heroThumbnail: heroPreferred || heroFallbackId || '',
+      heroThumbnailWidth: heroWidth,
+      heroThumbnailHeight: heroHeight,
+      heroThumbnailSrcset: heroSrcset || '',
+      heroThumbnailSizes: heroSrcset ? HERO_IMAGE_SIZES_ATTR : '',
+      ogImage: ogImage || '',
+    };
+  } catch (_) {
+    return null;
+  }
+}
+
 function firstLabelString(label) {
   if (!label) return "Untitled";
   if (typeof label === "string") return label;
@@ -133,6 +206,19 @@ function extractSummaryValues(manifest) {
   return unique.join(" ");
 }
 
+function normalizeSummaryText(value) {
+  if (!value) return "";
+  return String(value).replace(/\s+/g, " ").trim();
+}
+
+function truncateSummary(value, max = 240) {
+  const normalized = normalizeSummaryText(value);
+  if (!normalized) return "";
+  if (normalized.length <= max) return normalized;
+  const slice = normalized.slice(0, Math.max(0, max - 3)).trimEnd();
+  return `${slice}...`;
+}
+
 function stripHtml(value) {
   try {
     return String(value || "")
@@ -655,104 +741,59 @@ async function ensureFeaturedInCache(cfg) {
         }
 
         try {
-          const heroSource = (() => {
-            if (manifest && manifest.thumbnail) {
-              const clone = {...manifest};
-              try {
-                delete clone.thumbnail;
-              } catch (_) {
-                clone.thumbnail = undefined;
-              }
-              return clone;
-            }
-            return manifest;
-          })();
-          const heroRep = await getRepresentativeImage(
-            heroSource || manifest,
-            HERO_THUMBNAIL_SIZE,
-            true
-          );
-          const canvasImage = findPrimaryCanvasImage(manifest);
-          const heroService =
-            (canvasImage && canvasImage.service) ||
-            (heroRep && heroRep.service);
-          const preferredHeroThumbnail = buildIiifImageUrlFromService(
-            heroService,
-            HERO_THUMBNAIL_SIZE
-          );
-          const heroSrcset = buildIiifImageSrcset(heroService);
-          const heroFallbackId = (() => {
-            if (canvasImage && canvasImage.id) return String(canvasImage.id);
-            if (heroRep && heroRep.id) return String(heroRep.id);
-            return "";
-          })();
-          const heroWidth = (() => {
-            if (canvasImage && typeof canvasImage.width === "number") {
-              return canvasImage.width;
-            }
-            if (heroRep && typeof heroRep.width === "number") {
-              return heroRep.width;
-            }
-            return undefined;
-          })();
-          const heroHeight = (() => {
-            if (canvasImage && typeof canvasImage.height === "number") {
-              return canvasImage.height;
-            }
-            if (heroRep && typeof heroRep.height === "number") {
-              return heroRep.height;
-            }
-            return undefined;
-          })();
-          if (preferredHeroThumbnail || heroFallbackId) {
-            const nextHero = preferredHeroThumbnail || heroFallbackId;
-            if (entry.heroThumbnail !== nextHero) {
-              entry.heroThumbnail = nextHero;
+          const heroMedia = await resolveHeroMedia(manifest);
+          if (heroMedia && heroMedia.heroThumbnail) {
+            if (entry.heroThumbnail !== heroMedia.heroThumbnail) {
+              entry.heroThumbnail = heroMedia.heroThumbnail;
               touched = true;
             }
-            if (heroSrcset) {
-              if (entry.heroThumbnailSrcset !== heroSrcset) touched = true;
-              entry.heroThumbnailSrcset = heroSrcset;
-              if (entry.heroThumbnailSizes !== HERO_IMAGE_SIZES_ATTR) touched = true;
-              entry.heroThumbnailSizes = HERO_IMAGE_SIZES_ATTR;
-            } else {
-              if (entry.heroThumbnailSrcset !== undefined) {
-                delete entry.heroThumbnailSrcset;
-                touched = true;
-              }
-              if (entry.heroThumbnailSizes !== undefined) {
-                delete entry.heroThumbnailSizes;
-                touched = true;
-              }
-            }
-            if (typeof heroWidth === "number") {
-              if (entry.heroThumbnailWidth !== heroWidth) touched = true;
-              entry.heroThumbnailWidth = heroWidth;
-            } else if (entry.heroThumbnailWidth !== undefined) {
-              delete entry.heroThumbnailWidth;
+          } else if (entry.heroThumbnail !== undefined) {
+            delete entry.heroThumbnail;
+            touched = true;
+          }
+          if (heroMedia && typeof heroMedia.heroThumbnailWidth === "number") {
+            if (entry.heroThumbnailWidth !== heroMedia.heroThumbnailWidth)
               touched = true;
-            }
-            if (typeof heroHeight === "number") {
-              if (entry.heroThumbnailHeight !== heroHeight) touched = true;
-              entry.heroThumbnailHeight = heroHeight;
-            } else if (entry.heroThumbnailHeight !== undefined) {
-              delete entry.heroThumbnailHeight;
+            entry.heroThumbnailWidth = heroMedia.heroThumbnailWidth;
+          } else if (entry.heroThumbnailWidth !== undefined) {
+            delete entry.heroThumbnailWidth;
+            touched = true;
+          }
+          if (heroMedia && typeof heroMedia.heroThumbnailHeight === "number") {
+            if (entry.heroThumbnailHeight !== heroMedia.heroThumbnailHeight)
               touched = true;
-            }
-          } else {
-            if (entry.heroThumbnail !== undefined) {
-              delete entry.heroThumbnail;
+            entry.heroThumbnailHeight = heroMedia.heroThumbnailHeight;
+          } else if (entry.heroThumbnailHeight !== undefined) {
+            delete entry.heroThumbnailHeight;
+            touched = true;
+          }
+          if (heroMedia && heroMedia.heroThumbnailSrcset) {
+            if (entry.heroThumbnailSrcset !== heroMedia.heroThumbnailSrcset)
               touched = true;
-            }
-            if (entry.heroThumbnailWidth !== undefined) {
-              delete entry.heroThumbnailWidth;
+            entry.heroThumbnailSrcset = heroMedia.heroThumbnailSrcset;
+            if (entry.heroThumbnailSizes !== HERO_IMAGE_SIZES_ATTR) touched = true;
+            entry.heroThumbnailSizes = HERO_IMAGE_SIZES_ATTR;
+          } else {
+            if (entry.heroThumbnailSrcset !== undefined) {
+              delete entry.heroThumbnailSrcset;
               touched = true;
             }
-            if (entry.heroThumbnailHeight !== undefined) {
-              delete entry.heroThumbnailHeight;
+            if (entry.heroThumbnailSizes !== undefined) {
+              delete entry.heroThumbnailSizes;
               touched = true;
             }
           }
+          if (heroMedia && heroMedia.ogImage) {
+            if (entry.ogImage !== heroMedia.ogImage) touched = true;
+            entry.ogImage = heroMedia.ogImage;
+            entry.ogImageWidth = OG_IMAGE_WIDTH;
+            entry.ogImageHeight = OG_IMAGE_HEIGHT;
+          } else if (entry.ogImage !== undefined) {
+            delete entry.ogImage;
+            delete entry.ogImageWidth;
+            delete entry.ogImageHeight;
+            touched = true;
+          }
         } catch (_) {}
 
         if (touched) await saveManifestIndex(idx);
@@ -962,58 +1003,22 @@ async function rebuildManifestIndexFromCache() {
         }
       } catch (_) {}
       try {
-        const heroSource = (() => {
-          if (manifest && manifest.thumbnail) {
-            const clone = {...manifest};
-            try {
-              delete clone.thumbnail;
-            } catch (_) {
-              clone.thumbnail = undefined;
-            }
-            return clone;
-          }
-          return manifest;
-        })();
-        const heroRep = await getRepresentativeImage(
-          heroSource || manifest,
-          HERO_THUMBNAIL_SIZE,
-          true
-        );
-        const canvasImage = findPrimaryCanvasImage(manifest);
-        const heroService =
-          (canvasImage && canvasImage.service) ||
-          (heroRep && heroRep.service);
-        const preferredHero = buildIiifImageUrlFromService(
-          heroService,
-          HERO_THUMBNAIL_SIZE
-        );
-        const heroFallbackId = (() => {
-          if (canvasImage && canvasImage.id) return String(canvasImage.id);
-          if (heroRep && heroRep.id) return String(heroRep.id);
-          return "";
-        })();
-        const heroWidth = (() => {
-          if (canvasImage && typeof canvasImage.width === "number")
-            return canvasImage.width;
-          if (heroRep && typeof heroRep.width === "number") return heroRep.width;
-          return undefined;
-        })();
-        const heroHeight = (() => {
-          if (canvasImage && typeof canvasImage.height === "number")
-            return canvasImage.height;
-          if (heroRep && typeof heroRep.height === "number")
-            return heroRep.height;
-          return undefined;
-        })();
-        if (preferredHero || heroFallbackId) {
-          entry.heroThumbnail = preferredHero || heroFallbackId;
-          if (typeof heroWidth === "number") entry.heroThumbnailWidth = heroWidth;
-          if (typeof heroHeight === "number") entry.heroThumbnailHeight = heroHeight;
-          const heroSrcset = buildIiifImageSrcset(heroService);
-          if (heroSrcset) {
-            entry.heroThumbnailSrcset = heroSrcset;
+        const heroMedia = await resolveHeroMedia(manifest);
+        if (heroMedia && heroMedia.heroThumbnail) {
+          entry.heroThumbnail = heroMedia.heroThumbnail;
+          if (typeof heroMedia.heroThumbnailWidth === "number")
+            entry.heroThumbnailWidth = heroMedia.heroThumbnailWidth;
+          if (typeof heroMedia.heroThumbnailHeight === "number")
+            entry.heroThumbnailHeight = heroMedia.heroThumbnailHeight;
+          if (heroMedia.heroThumbnailSrcset) {
+            entry.heroThumbnailSrcset = heroMedia.heroThumbnailSrcset;
             entry.heroThumbnailSizes = HERO_IMAGE_SIZES_ATTR;
           }
+          if (heroMedia.ogImage) {
+            entry.ogImage = heroMedia.ogImage;
+            entry.ogImageWidth = OG_IMAGE_WIDTH;
+            entry.ogImageHeight = OG_IMAGE_HEIGHT;
+          }
         }
       } catch (_) {}
       nextIndex.byId.push(entry);
@@ -1297,6 +1302,13 @@ async function buildIiifCollectionPages(CONFIG) {
         if (!manifest) continue;
         manifest = await normalizeToV3(manifest);
         const title = firstLabelString(manifest.label);
+        let summaryRaw = '';
+        try {
+          summaryRaw = extractSummaryValues(manifest);
+        } catch (_) {
+          summaryRaw = '';
+        }
+        const summaryForMeta = truncateSummary(summaryRaw || title);
         const baseSlug =
           slugify(title || "untitled", {
             lower: true,
@@ -1354,26 +1366,74 @@ async function buildIiifCollectionPages(CONFIG) {
           const {loadAppWrapper} = require("./mdx");
           const app = await loadAppWrapper();
 
+          let heroMedia = null;
+          try {
+            heroMedia = await resolveHeroMedia(manifest);
+          } catch (_) {
+            heroMedia = null;
+          }
+          const normalizedHref = href.split(path.sep).join("/");
+          const pageHref = rootRelativeHref(normalizedHref);
+          const pageDescription = summaryForMeta || title;
+          const pageDetails = {
+            title,
+            href: pageHref,
+            url: pageHref,
+            slug,
+            type: "work",
+            description: pageDescription,
+            meta: {
+              title,
+              description: pageDescription,
+              type: "work",
+              url: pageHref,
+            },
+          };
+          const ogImageForPage = heroMedia && heroMedia.ogImage ? heroMedia.ogImage : '';
+          if (ogImageForPage) {
+            pageDetails.image = ogImageForPage;
+            pageDetails.ogImage = ogImageForPage;
+            pageDetails.meta.image = ogImageForPage;
+            pageDetails.meta.ogImage = ogImageForPage;
+          }
+          const pageContextValue = { navigation: null, page: pageDetails };
           const mdxContent = React.createElement(WorksLayoutComp, {manifest});
-          const siteTree = app && app.App ? mdxContent : mdxContent;
+          const siteTree = mdxContent;
           const wrappedApp =
             app && app.App
               ? React.createElement(app.App, null, siteTree)
               : siteTree;
+          const withContext =
+            PageContext && pageContextValue
+              ? React.createElement(
+                  PageContext.Provider,
+                  { value: pageContextValue },
+                  wrappedApp
+                )
+              : wrappedApp;
           const page = MDXProvider
             ? React.createElement(
                 MDXProvider,
                 {components: compMap},
-                wrappedApp
+                withContext
               )
-            : wrappedApp;
+            : withContext;
           const body = ReactDOMServer.renderToStaticMarkup(page);
-          const head =
-            app && app.Head
-              ? ReactDOMServer.renderToStaticMarkup(
-                  React.createElement(app.Head)
+          let head = "";
+          if (app && app.Head) {
+            const headElement = React.createElement(app.Head, {
+              page: pageContextValue.page,
+              navigation: null,
+            });
+            const wrappedHead = PageContext
+              ? React.createElement(
+                  PageContext.Provider,
+                  { value: pageContextValue },
+                  headElement
                 )
-              : "";
+              : headElement;
+            head = ReactDOMServer.renderToStaticMarkup(wrappedHead);
+          }
           const needsHydrateViewer =
             body.includes("data-canopy-viewer") ||
             body.includes("data-canopy-scroll") ||
@@ -1438,7 +1498,7 @@ async function buildIiifCollectionPages(CONFIG) {
           else if (needsRelated && sliderRel) jsRel = sliderRel;
           else if (viewerRel) jsRel = viewerRel;
 
-          let headExtra = head;
+          const headSegments = [head];
           const needsReact = !!(
             needsHydrateViewer ||
             needsRelated
@@ -1474,7 +1534,7 @@ async function buildIiifCollectionPages(CONFIG) {
           if (searchFormRel && jsRel !== searchFormRel)
             extraScripts.push(`<script defer src="${searchFormRel}"></script>`);
           if (extraScripts.length)
-            headExtra = extraScripts.join("") + headExtra;
+            headSegments.push(extraScripts.join(""));
           try {
             const {BASE_PATH} = require("../common");
             if (BASE_PATH)
@@ -1484,12 +1544,13 @@ async function buildIiifCollectionPages(CONFIG) {
                 )}</script>` + vendorTag;
           } catch (_) {}
           let pageBody = body;
+          const headExtra = headSegments.join("") + vendorTag;
           let html = htmlShell({
             title,
             body: pageBody,
             cssHref: null,
             scriptHref: jsRel,
-            headExtra: vendorTag + headExtra,
+            headExtra,
           });
           try {
             html = require("../common").applyBaseToHtml(html);
@@ -1516,14 +1577,38 @@ async function buildIiifCollectionPages(CONFIG) {
                     e.id === String(manifest.id || id) &&
                     e.type === "Manifest"
                 );
-                if (entry) {
-                  entry.thumbnail = String(thumbUrl);
-                  if (typeof thumbWidth === "number")
-                    entry.thumbnailWidth = thumbWidth;
-                  if (typeof thumbHeight === "number")
-                    entry.thumbnailHeight = thumbHeight;
-                  await saveManifestIndex(idx);
+              if (entry) {
+                entry.thumbnail = String(thumbUrl);
+                if (typeof thumbWidth === "number")
+                  entry.thumbnailWidth = thumbWidth;
+                if (typeof thumbHeight === "number")
+                  entry.thumbnailHeight = thumbHeight;
+                if (heroMedia && heroMedia.heroThumbnail) {
+                  entry.heroThumbnail = heroMedia.heroThumbnail;
+                  if (typeof heroMedia.heroThumbnailWidth === "number")
+                    entry.heroThumbnailWidth = heroMedia.heroThumbnailWidth;
+                  if (typeof heroMedia.heroThumbnailHeight === "number")
+                    entry.heroThumbnailHeight = heroMedia.heroThumbnailHeight;
+                  if (heroMedia.heroThumbnailSrcset) {
+                    entry.heroThumbnailSrcset = heroMedia.heroThumbnailSrcset;
+                    entry.heroThumbnailSizes = HERO_IMAGE_SIZES_ATTR;
+                  }
+                }
+                if (heroMedia && heroMedia.ogImage) {
+                  entry.ogImage = heroMedia.ogImage;
+                  entry.ogImageWidth = OG_IMAGE_WIDTH;
+                  entry.ogImageHeight = OG_IMAGE_HEIGHT;
+                } else {
+                  try {
+                    if (entry.ogImage !== undefined) delete entry.ogImage;
+                    if (entry.ogImageWidth !== undefined)
+                      delete entry.ogImageWidth;
+                    if (entry.ogImageHeight !== undefined)
+                      delete entry.ogImageHeight;
+                  } catch (_) {}
                 }
+                await saveManifestIndex(idx);
+              }
               }
             }
           } catch (_) {}
@@ -1538,11 +1623,7 @@ async function buildIiifCollectionPages(CONFIG) {
             }
           }
           if (summaryOptions && summaryOptions.enabled) {
-            try {
-              summaryValue = extractSummaryValues(manifest);
-            } catch (_) {
-              summaryValue = "";
-            }
+            summaryValue = summaryRaw || "";
           }
           if (annotationsOptions && annotationsOptions.enabled) {
             try {

package/lib/build/mdx.js

@@ -471,10 +471,17 @@ async function compileMdxFile(filePath, outPath, Layout, extraProps = {}) {
     ? React.createElement(MDXProvider, { components: compMap }, withApp)
     : withApp;
   const body = ReactDOMServer.renderToStaticMarkup(page);
-  const head =
-    app && app.Head
-      ? ReactDOMServer.renderToStaticMarkup(React.createElement(app.Head))
-      : "";
+  let head = '';
+  if (app && app.Head) {
+    const headElement = React.createElement(app.Head, {
+      page: contextValue.page,
+      navigation: contextValue.navigation,
+    });
+    const wrappedHead = PageContext
+      ? React.createElement(PageContext.Provider, { value: contextValue }, headElement)
+      : headElement;
+    head = ReactDOMServer.renderToStaticMarkup(wrappedHead);
+  }
   return { body, head };
 }
 

package/lib/build/pages.js

@@ -3,6 +3,31 @@ const { log } = require('./log');
 const mdx = require('./mdx');
 const navigation = require('../components/navigation');
 
+function normalizeWhitespace(value) {
+  if (!value) return '';
+  return String(value).replace(/\s+/g, ' ').trim();
+}
+
+function truncateDescription(value, max = 240) {
+  const normalized = normalizeWhitespace(value);
+  if (!normalized) return '';
+  if (normalized.length <= max) return normalized;
+  const slice = normalized.slice(0, Math.max(0, max - 3)).trimEnd();
+  return `${slice}...`;
+}
+
+function isPlainObject(value) {
+  return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+
+function readFrontmatterString(data, key) {
+  if (!data) return '';
+  const raw = data[key];
+  if (raw == null) return '';
+  if (typeof raw === 'string') return raw.trim();
+  return '';
+}
+
 // Cache: dir -> frontmatter data for _layout.mdx in that dir
 const LAYOUT_META = new Map();
 
@@ -50,11 +75,60 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   const pageInfo = navigation.getPageInfo(normalizedRel);
   const navData = navigation.buildNavigationForFile(normalizedRel);
   const mergedProps = { ...(extraProps || {}) };
+  const frontmatter =
+    typeof mdx.parseFrontmatter === 'function'
+      ? mdx.parseFrontmatter(source)
+      : { data: null, content: source };
+  const frontmatterData = frontmatter && isPlainObject(frontmatter.data) ? frontmatter.data : null;
+  let layoutMeta = null;
+  try {
+    layoutMeta = await getNearestDirLayoutMeta(filePath);
+  } catch (_) {
+    layoutMeta = null;
+  }
+  const directType = frontmatterData && typeof frontmatterData.type === 'string' ? frontmatterData.type.trim() : '';
+  const layoutType = layoutMeta && typeof layoutMeta.type === 'string' ? String(layoutMeta.type).trim() : '';
+  const resolvedType = directType || layoutType || (!frontmatterData ? 'page' : '');
+  const frontmatterDescription = frontmatterData && typeof frontmatterData.description === 'string'
+    ? truncateDescription(frontmatterData.description)
+    : '';
+  const extractedPlain = typeof mdx.extractPlainText === 'function'
+    ? mdx.extractPlainText(source)
+    : '';
+  const derivedDescription = truncateDescription(extractedPlain);
+  const resolvedDescription = frontmatterDescription || derivedDescription;
+  const ogImageFrontmatter =
+    readFrontmatterString(frontmatterData, 'og:image') ||
+    readFrontmatterString(frontmatterData, 'ogImage');
+  const genericImage = readFrontmatterString(frontmatterData, 'image');
+  const resolvedImage = ogImageFrontmatter || genericImage;
+  const frontmatterMeta = frontmatterData && isPlainObject(frontmatterData.meta) ? frontmatterData.meta : null;
   const headings = mdx.extractHeadings(source);
-  if (pageInfo) {
+  const basePage = pageInfo ? { ...pageInfo } : {};
+  if (title) basePage.title = title;
+  if (resolvedType) basePage.type = resolvedType;
+  if (resolvedDescription) basePage.description = resolvedDescription;
+  if (basePage.href && !basePage.url) basePage.url = basePage.href;
+  if (resolvedImage) {
+    basePage.image = resolvedImage;
+    basePage.ogImage = ogImageFrontmatter || resolvedImage;
+  }
+  const existingMeta = basePage.meta && typeof basePage.meta === 'object' ? basePage.meta : {};
+  const pageMeta = { ...existingMeta };
+  if (title) pageMeta.title = title;
+  if (resolvedDescription) pageMeta.description = resolvedDescription;
+  if (resolvedType) pageMeta.type = resolvedType;
+  if (basePage.url || basePage.href) pageMeta.url = basePage.url || basePage.href || pageMeta.url;
+  if (resolvedImage) {
+    pageMeta.image = resolvedImage;
+    if (!pageMeta.ogImage) pageMeta.ogImage = resolvedImage;
+  }
+  if (frontmatterMeta) Object.assign(pageMeta, frontmatterMeta);
+  if (Object.keys(pageMeta).length) basePage.meta = pageMeta;
+  if (Object.keys(basePage).length) {
     mergedProps.page = mergedProps.page
-      ? { ...pageInfo, ...mergedProps.page }
-      : pageInfo;
+      ? { ...basePage, ...mergedProps.page }
+      : basePage;
   }
   if (navData && !mergedProps.navigation) {
     mergedProps.navigation = navData;
@@ -116,7 +190,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
     const { BASE_PATH } = require('../common');
     if (BASE_PATH) vendorTag = `<script>window.CANOPY_BASE_PATH=${JSON.stringify(BASE_PATH)}</script>` + vendorTag;
   } catch (_) {}
-  let headExtra = head;
+  const headSegments = [head];
   const extraScripts = [];
   if (heroRel && jsRel !== heroRel) extraScripts.push(`<script defer src="${heroRel}"></script>`);
   if (facetsRel && jsRel !== facetsRel) extraScripts.push(`<script defer src="${facetsRel}"></script>`);
@@ -133,9 +207,10 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
     } catch (_) {}
     extraStyles.push(`<link rel="stylesheet" href="${rel}">`);
   }
-  if (extraStyles.length) headExtra = extraStyles.join('') + headExtra;
-  if (extraScripts.length) headExtra = extraScripts.join('') + headExtra;
-  const html = htmlShell({ title, body, cssHref: null, scriptHref: jsRel, headExtra: vendorTag + headExtra });
+  if (extraStyles.length) headSegments.push(extraStyles.join(''));
+  if (extraScripts.length) headSegments.push(extraScripts.join(''));
+  const headExtra = headSegments.join('') + vendorTag;
+  const html = htmlShell({ title, body, cssHref: null, scriptHref: jsRel, headExtra });
   const { applyBaseToHtml } = require('../common');
   return applyBaseToHtml(html);
 }

package/lib/common.js

@@ -70,7 +70,9 @@ function htmlShell({ title, body, cssHref, scriptHref, headExtra }) {
   const cssTag = cssHref ? `<link rel="stylesheet" href="${cssHref}">` : '';
   const appearance = resolveThemeAppearance();
   const htmlClass = appearance === 'dark' ? ' class="dark"' : '';
-  return `<!doctype html><html lang="en"${htmlClass}><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>${title}</title>${extra}${cssTag}${scriptTag}</head><body>${body}</body></html>`;
+  const hasCustomTitle = /<title\b/i.test(extra);
+  const titleTag = hasCustomTitle ? '' : `<title>${title}</title>`;
+  return `<!doctype html><html lang="en"${htmlClass}><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/>${titleTag}${extra}${cssTag}${scriptTag}</head><body>${body}</body></html>`;
 }
 
 function withBase(href) {

package/lib/head.js

@@ -1,5 +1,6 @@
 const React = require('react');
-const { withBase, rootRelativeHref } = require('./common');
+const { withBase, rootRelativeHref, absoluteUrl } = require('./common');
+const { getPageContext } = require('./page-context');
 
 const DEFAULT_STYLESHEET_PATH = '/styles/styles.css';
 
@@ -14,8 +15,97 @@ function Stylesheet(props = {}) {
   return React.createElement('link', { rel, href: resolved, ...rest });
 }
 
+function normalizeText(value) {
+  if (!value) return '';
+  return String(value).replace(/\s+/g, ' ').trim();
+}
+
+function truncateText(value, max = 240) {
+  const normalized = normalizeText(value);
+  if (!normalized) return '';
+  if (normalized.length <= max) return normalized;
+  const slice = normalized.slice(0, Math.max(0, max - 3)).trimEnd();
+  return `${slice}...`;
+}
+
+function resolveOgType(pageType) {
+  const type = String(pageType || '').toLowerCase();
+  if (type === 'work' || type === 'article') return 'article';
+  if (type === 'docs' || type === 'documentation') return 'article';
+  return 'website';
+}
+
+function resolveUrl(value) {
+  if (!value) return '';
+  const raw = typeof value === 'string' ? value.trim() : String(value || '');
+  if (!raw) return '';
+  return absoluteUrl(raw);
+}
+
+function Meta(props = {}) {
+  const PageContext = getPageContext();
+  const context = PageContext ? React.useContext(PageContext) : null;
+  const ctxPage = context && context.page ? context.page : null;
+  const explicitPage = props.page || null;
+  const page = explicitPage || ctxPage || {};
+  const fallbackTitle = ctxPage && ctxPage.title ? ctxPage.title : '';
+  const metaFromPage = page && page.meta && typeof page.meta === 'object' ? page.meta : null;
+  const rawTitle =
+    props.title ||
+    (metaFromPage && metaFromPage.title) ||
+    page.title ||
+    fallbackTitle;
+  const pageTitle = normalizeText(rawTitle);
+  const siteTitle = normalizeText(props.siteTitle) || '';
+  const defaultTitle = siteTitle || 'Canopy IIIF';
+  const title = pageTitle ? pageTitle : defaultTitle;
+  const fullTitle = siteTitle ? (pageTitle ? `${pageTitle} | ${siteTitle}` : siteTitle) : title;
+  const rawDescription =
+    props.description ||
+    (metaFromPage && metaFromPage.description) ||
+    page.description ||
+    '';
+  const description = truncateText(rawDescription);
+  const resolvedType = props.type || (metaFromPage && metaFromPage.type) || page.type || '';
+  const ogType = resolveOgType(resolvedType);
+  const relativeUrl =
+    props.url ||
+    (metaFromPage && metaFromPage.url) ||
+    page.url ||
+    page.href ||
+    '';
+  const absolute = relativeUrl ? absoluteUrl(relativeUrl) : '';
+  const ogImageRaw =
+    props.image ||
+    props.ogImage ||
+    (metaFromPage && (metaFromPage.ogImage || metaFromPage.image)) ||
+    page.ogImage ||
+    page.image ||
+    '';
+  const image = ogImageRaw ? resolveUrl(ogImageRaw) : '';
+  const twitterImageRaw = props.twitterImage || ogImageRaw;
+  const twitterImage = twitterImageRaw ? resolveUrl(twitterImageRaw) : '';
+  const twitterCard = props.twitterCard || (twitterImage ? 'summary_large_image' : 'summary');
+
+  const nodes = [];
+  if (fullTitle) nodes.push(React.createElement('title', { key: 'meta-title' }, fullTitle));
+  if (description) nodes.push(React.createElement('meta', { key: 'meta-description', name: 'description', content: description }));
+  if (fullTitle) nodes.push(React.createElement('meta', { key: 'og-title', property: 'og:title', content: fullTitle }));
+  if (description) nodes.push(React.createElement('meta', { key: 'og-description', property: 'og:description', content: description }));
+  if (absolute) nodes.push(React.createElement('meta', { key: 'og-url', property: 'og:url', content: absolute }));
+  if (ogType) nodes.push(React.createElement('meta', { key: 'og-type', property: 'og:type', content: ogType }));
+  if (image) nodes.push(React.createElement('meta', { key: 'og-image', property: 'og:image', content: image }));
+  if (twitterCard) nodes.push(React.createElement('meta', { key: 'twitter-card', name: 'twitter:card', content: twitterCard }));
+  if (fullTitle) nodes.push(React.createElement('meta', { key: 'twitter-title', name: 'twitter:title', content: fullTitle }));
+  if (description) nodes.push(React.createElement('meta', { key: 'twitter-description', name: 'twitter:description', content: description }));
+  if (twitterImage) nodes.push(React.createElement('meta', { key: 'twitter-image', name: 'twitter:image', content: twitterImage }));
+
+  return React.createElement(React.Fragment, null, nodes);
+}
+
 module.exports = {
   stylesheetHref,
   Stylesheet,
   DEFAULT_STYLESHEET_PATH,
+  Meta,
 };

package/lib/iiif/thumbnail.js

@@ -199,6 +199,18 @@ function buildIiifImageUrlFromService(service, preferredSize = 800) {
   return buildIiifImageUrlFromNormalizedService(normalized, preferredSize);
 }
 
+function buildIiifImageUrlForDimensions(service, width = 1200, height = 630) {
+  const normalized = normalizeImageServiceCandidate(service);
+  if (!normalized || !isIiifImageService(normalized)) return '';
+  const baseId = normalizeServiceBaseId(normalized.id);
+  if (!baseId) return '';
+  const safeWidth = Math.max(1, Math.floor(Number(width) || 0));
+  const safeHeight = Math.max(1, Math.floor(Number(height) || 0));
+  const quality = selectServiceQuality(normalized);
+  const format = selectServiceFormat(normalized);
+  return `${baseId}/full/!${safeWidth},${safeHeight}/0/${quality}.${format}`;
+}
+
 function buildIiifImageSrcset(service, steps = [360, 640, 960, 1280, 1600]) {
   const normalized = normalizeImageServiceCandidate(service);
   if (!normalized || !isIiifImageService(normalized)) return '';
@@ -339,6 +351,7 @@ module.exports = {
   getThumbnail,
   getThumbnailUrl,
   buildIiifImageUrlFromService,
+  buildIiifImageUrlForDimensions,
   findPrimaryCanvasImage,
   buildIiifImageSrcset,
 };

package/lib/index.js

@@ -1,8 +1,9 @@
-const { stylesheetHref, Stylesheet } = require('./head');
+const { stylesheetHref, Stylesheet, Meta } = require('./head');
 
 module.exports = {
   build: require('./build/build').build,
   dev: require('./build/dev').dev,
   stylesheetHref,
   Stylesheet,
+  Meta,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",

package/ui/tailwind-config.js

@@ -33,7 +33,11 @@ const resolveProjectRoot = (metaUrl, explicitRoot) => {
     const href = typeof metaUrl === "string" ? metaUrl : metaUrl.href;
     if (href) {
       const fromUrl = fileURLToPath(href);
-      return path.join(path.dirname(fromUrl), "..", "..");
+      const dir = path.dirname(fromUrl);
+      if (dir.includes(`${path.sep}node_modules${path.sep}`)) {
+        return process.cwd();
+      }
+      return dir;
     }
   }
   return process.cwd();