@canopy-iiif/app 1.3.6 → 1.4.0

package/lib/build/iiif.js

@@ -20,6 +20,7 @@ const {log, logLine, logResponse} = require("./log");
 const { getPageContext } = require("../page-context");
 const PageContext = getPageContext();
 const referenced = require("../components/referenced");
+const navPlace = require("../components/nav-place");
 const {
   getThumbnail,
   getRepresentativeImage,
@@ -1387,6 +1388,7 @@ async function buildIiifCollectionPages(CONFIG) {
     );
   } catch (_) {}
   const iiifRecords = [];
+  const navPlaceRecords = [];
   const {size: thumbSize, unsafe: unsafeThumbs} = resolveThumbnailPreferences();
 
   // Compile the works layout component once per run
@@ -1543,9 +1545,13 @@ async function buildIiifCollectionPages(CONFIG) {
         try {
           let components = {};
           try {
-            components = await import("@canopy-iiif/app/ui");
+            components = await import("@canopy-iiif/app/ui/server");
           } catch (_) {
-            components = {};
+            try {
+              components = await import("@canopy-iiif/app/ui");
+            } catch (_) {
+              components = {};
+            }
           }
           const {withBase} = require("../common");
           const Anchor = function A(props) {
@@ -1658,6 +1664,7 @@ async function buildIiifCollectionPages(CONFIG) {
           const needsRelated = body.includes("data-canopy-related-items");
           const needsHeroSlider = body.includes("data-canopy-hero-slider");
           const needsTimeline = body.includes("data-canopy-timeline");
+          const needsMap = body.includes("data-canopy-map");
           const needsSearchForm = body.includes("data-canopy-search-form");
           const needsHydrate =
             body.includes("data-canopy-hydrate") ||
@@ -1692,6 +1699,24 @@ async function buildIiifCollectionPages(CONFIG) {
                 .split(path.sep)
                 .join("/")
             : null;
+          const mapRel = needsMap
+            ? path
+                .relative(
+                  path.dirname(outPath),
+                  path.join(OUT_DIR, "scripts", "canopy-map.js")
+                )
+                .split(path.sep)
+                .join("/")
+            : null;
+          const mapCssRel = needsMap
+            ? path
+                .relative(
+                  path.dirname(outPath),
+                  path.join(OUT_DIR, "scripts", "canopy-map.css")
+                )
+                .split(path.sep)
+                .join("/")
+            : null;
           const heroRel = needsHeroSlider
             ? path
                 .relative(
@@ -1727,6 +1752,7 @@ async function buildIiifCollectionPages(CONFIG) {
           if (heroRel) primaryClassicScripts.push(heroRel);
           if (relatedRel) primaryClassicScripts.push(relatedRel);
           if (timelineRel) primaryClassicScripts.push(timelineRel);
+          if (mapRel) primaryClassicScripts.push(mapRel);
           const secondaryClassicScripts = [];
           if (searchFormRel) secondaryClassicScripts.push(searchFormRel);
           let jsRel = null;
@@ -1741,7 +1767,8 @@ async function buildIiifCollectionPages(CONFIG) {
           const needsReact = !!(
             needsHydrateViewer ||
             needsRelated ||
-            needsTimeline
+            needsTimeline ||
+            needsMap
           );
           let vendorTag = "";
           if (needsReact) {
@@ -1782,6 +1809,17 @@ async function buildIiifCollectionPages(CONFIG) {
                 )}</script>` + vendorTag;
           } catch (_) {}
           let pageBody = body;
+          const extraStyles = [];
+          if (mapCssRel) {
+            let rel = mapCssRel;
+            try {
+              const mapCssAbs = path.join(OUT_DIR, "scripts", "canopy-map.css");
+              const st = fs.statSync(mapCssAbs);
+              rel += `?v=${Math.floor(st.mtimeMs || Date.now())}`;
+            } catch (_) {}
+            extraStyles.push(`<link rel="stylesheet" href="${rel}">`);
+          }
+          if (extraStyles.length) headSegments.push(extraStyles.join(""));
           if (vendorTag) headSegments.push(vendorTag);
           if (extraScripts.length) headSegments.push(extraScripts.join(""));
           const headExtra = headSegments.join("");
@@ -1878,10 +1916,36 @@ async function buildIiifCollectionPages(CONFIG) {
               annotationValue = "";
             }
           }
+          const navThumbnail =
+            thumbUrl || (heroMedia && heroMedia.heroThumbnail) || "";
+          const navThumbWidth =
+            typeof thumbWidth === "number"
+              ? thumbWidth
+              : heroMedia && typeof heroMedia.heroThumbnailWidth === "number"
+              ? heroMedia.heroThumbnailWidth
+              : undefined;
+          const navThumbHeight =
+            typeof thumbHeight === "number"
+              ? thumbHeight
+              : heroMedia && typeof heroMedia.heroThumbnailHeight === "number"
+              ? heroMedia.heroThumbnailHeight
+              : undefined;
+          const navRecord = navPlace.buildManifestNavPlaceRecord({
+            manifest,
+            slug,
+            href: pageHref,
+            title,
+            summary: summaryRaw,
+            thumbnail: navThumbnail,
+            thumbnailWidth: navThumbWidth,
+            thumbnailHeight: navThumbHeight,
+          });
+          if (navRecord) navPlaceRecords.push(navRecord);
+
           iiifRecords.push({
             id: String(manifest.id || id),
             title,
-            href: rootRelativeHref(href.split(path.sep).join("/")),
+            href: pageHref,
             type: "work",
             thumbnail: thumbUrl || undefined,
             thumbnailWidth:
@@ -1915,6 +1979,16 @@ async function buildIiifCollectionPages(CONFIG) {
     );
     await Promise.all(workers);
   }
+  try {
+    await navPlace.writeNavPlaceDataset(navPlaceRecords);
+  } catch (error) {
+    try {
+      console.warn(
+        '[canopy][navPlace] failed to write dataset:',
+        error && error.message ? error.message : error
+      );
+    } catch (_) {}
+  }
   return {iiifRecords};
 }
 

package/lib/build/mdx.js

@@ -1739,6 +1739,128 @@ async function ensureTimelineRuntime() {
     logLevel: "silent",
     minify: true,
     plugins: [plugin],
+    loader: {
+      ".png": "dataurl",
+      ".svg": "dataurl",
+      ".gif": "dataurl",
+    },
+  });
+  try {
+    const {logLine} = require("./log");
+    let size = 0;
+    try {
+      const st = fs.statSync(outFile);
+      size = (st && st.size) || 0;
+    } catch (_) {}
+    const kb = size ? ` (${(size / 1024).toFixed(1)} KB)` : "";
+    const rel = path.relative(process.cwd(), outFile).split(path.sep).join("/");
+    logLine(`✓ Wrote ${rel}${kb}`, "cyan");
+  } catch (_) {}
+}
+
+async function ensureMapRuntime() {
+  let esbuild = null;
+  try {
+    esbuild = require("../ui/node_modules/esbuild");
+  } catch (_) {
+    try {
+      esbuild = require("esbuild");
+    } catch (_) {}
+  }
+  if (!esbuild)
+    throw new Error(
+      "Map runtime bundling requires esbuild. Install dependencies before building."
+    );
+  ensureDirSync(OUT_DIR);
+  const scriptsDir = path.join(OUT_DIR, "scripts");
+  ensureDirSync(scriptsDir);
+  const outFile = path.join(scriptsDir, "canopy-map.js");
+  const entryFile = path.join(
+    __dirname,
+    "..",
+    "components",
+    "map-runtime.js"
+  );
+  const reactShim = `
+    const React = (typeof window !== 'undefined' && window.React) || {};
+    export default React;
+    export const Children = React.Children;
+    export const Component = React.Component;
+    export const Fragment = React.Fragment;
+    export const createElement = React.createElement;
+    export const cloneElement = React.cloneElement;
+    export const createContext = React.createContext;
+    export const forwardRef = React.forwardRef;
+    export const memo = React.memo;
+    export const startTransition = React.startTransition;
+    export const isValidElement = React.isValidElement;
+    export const useEffect = React.useEffect;
+    export const useLayoutEffect = React.useLayoutEffect;
+    export const useMemo = React.useMemo;
+    export const useState = React.useState;
+    export const useRef = React.useRef;
+    export const useCallback = React.useCallback;
+    export const useContext = React.useContext;
+    export const useReducer = React.useReducer;
+    export const useId = React.useId;
+  `;
+  const rdomShim = `
+    const ReactDOM = (typeof window !== 'undefined' && window.ReactDOM) || {};
+    export default ReactDOM;
+    export const render = ReactDOM.render;
+    export const hydrate = ReactDOM.hydrate;
+    export const findDOMNode = ReactDOM.findDOMNode;
+    export const unmountComponentAtNode = ReactDOM.unmountComponentAtNode;
+    export const createPortal = ReactDOM.createPortal;
+    export const flushSync = ReactDOM.flushSync;
+    export const unstable_batchedUpdates = ReactDOM.unstable_batchedUpdates;
+    export const unstable_renderSubtreeIntoContainer = ReactDOM.unstable_renderSubtreeIntoContainer;
+  `;
+  const rdomClientShim = `
+    const RDC = (typeof window !== 'undefined' && window.ReactDOMClient) || {};
+    export const createRoot = RDC.createRoot;
+    export const hydrateRoot = RDC.hydrateRoot;
+  `;
+  const plugin = {
+    name: "canopy-react-shims-map",
+    setup(build) {
+      const ns = "canopy-map-shim";
+      build.onResolve({filter: /^react$/}, () => ({path: "react", namespace: ns}));
+      build.onResolve({filter: /^react-dom$/}, () => ({path: "react-dom", namespace: ns}));
+      build.onResolve({filter: /^react-dom\/client$/}, () => ({
+        path: "react-dom-client",
+        namespace: ns,
+      }));
+      build.onLoad({filter: /^react$/, namespace: ns}, () => ({
+        contents: reactShim,
+        loader: "js",
+      }));
+      build.onLoad({filter: /^react-dom$/, namespace: ns}, () => ({
+        contents: rdomShim,
+        loader: "js",
+      }));
+      build.onLoad({filter: /^react-dom-client$/, namespace: ns}, () => ({
+        contents: rdomClientShim,
+        loader: "js",
+      }));
+    },
+  };
+  await esbuild.build({
+    entryPoints: [entryFile],
+    outfile: outFile,
+    platform: "browser",
+    format: "iife",
+    bundle: true,
+    sourcemap: false,
+    target: ["es2018"],
+    logLevel: "silent",
+    minify: true,
+    plugins: [plugin],
+    loader: {
+      ".png": "dataurl",
+      ".svg": "dataurl",
+      ".gif": "dataurl",
+    },
   });
   try {
     const {logLine} = require("./log");
@@ -1768,6 +1890,7 @@ module.exports = {
   ensureClientRuntime,
   ensureSliderRuntime,
   ensureTimelineRuntime,
+  ensureMapRuntime,
   ensureHeroRuntime,
   ensureFacetsRuntime,
   ensureReactGlobals,

package/lib/build/pages.js

@@ -176,6 +176,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   const needsHydrateSlider = body.includes('data-canopy-slider');
   const needsHeroSlider = body.includes('data-canopy-hero-slider');
   const needsTimeline = body.includes('data-canopy-timeline');
+  const needsMap = body.includes('data-canopy-map');
   const needsSearchForm = true; // search form runtime is global
   const needsFacets = body.includes('data-canopy-related-items');
   const needsCustomClients = body.includes('data-canopy-client-component');
@@ -194,6 +195,12 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   const timelineRel = needsTimeline
     ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-timeline.js')).split(path.sep).join('/')
     : null;
+  const mapRel = needsMap
+    ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-map.js')).split(path.sep).join('/')
+    : null;
+  const mapCssRel = needsMap
+    ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-map.css')).split(path.sep).join('/')
+    : null;
   const facetsRel = needsFacets
     ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-related-items.js')).split(path.sep).join('/')
     : null;
@@ -226,6 +233,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   const primaryClassicScripts = [];
   if (heroRel) primaryClassicScripts.push(heroRel);
   if (timelineRel) primaryClassicScripts.push(timelineRel);
+  if (mapRel) primaryClassicScripts.push(mapRel);
   if (facetsRel) primaryClassicScripts.push(facetsRel);
   const secondaryClassicScripts = [];
   if (searchFormRel) secondaryClassicScripts.push(searchFormRel);
@@ -239,6 +247,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
     needsHydrateSlider ||
     needsFacets ||
     needsTimeline ||
+    needsMap ||
     (customClientRel && needsCustomClients)
   );
   let vendorTag = '';
@@ -279,6 +288,15 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
     } catch (_) {}
     extraStyles.push(`<link rel="stylesheet" href="${rel}">`);
   }
+  if (mapCssRel) {
+    let rel = mapCssRel;
+    try {
+      const mapCssAbs = path.join(OUT_DIR, 'scripts', 'canopy-map.css');
+      const st = fs.statSync(mapCssAbs);
+      rel += `?v=${Math.floor(st.mtimeMs || Date.now())}`;
+    } catch (_) {}
+    extraStyles.push(`<link rel="stylesheet" href="${rel}">`);
+  }
   if (extraStyles.length) headSegments.push(extraStyles.join(''));
   if (vendorTag) headSegments.push(vendorTag);
   if (extraScripts.length) headSegments.push(extraScripts.join(''));

package/lib/build/runtimes.js

@@ -5,6 +5,7 @@ async function prepareAllRuntimes() {
   const mdx = require('./mdx');
   try { await mdx.ensureClientRuntime(); } catch (_) {}
   try { if (typeof mdx.ensureTimelineRuntime === 'function') await mdx.ensureTimelineRuntime(); } catch (_) {}
+  try { if (typeof mdx.ensureMapRuntime === 'function') await mdx.ensureMapRuntime(); } catch (_) {}
   try { if (typeof mdx.ensureHeroRuntime === 'function') await mdx.ensureHeroRuntime(); } catch (_) {}
   try { if (typeof mdx.ensureFacetsRuntime === 'function') await mdx.ensureFacetsRuntime(); } catch (_) {}
   try { if (typeof mdx.ensureReactGlobals === 'function') await mdx.ensureReactGlobals(); } catch (_) {}

package/lib/build/sitemap.js

@@ -106,10 +106,68 @@ async function cleanupLegacySitemaps() {
   await Promise.all(deletions);
 }
 
+async function ensureNoExtensionGuards(fileNames) {
+  const guards = new Map();
+  (Array.isArray(fileNames) ? fileNames : []).forEach((file) => {
+    const raw = typeof file === 'string' ? file.trim() : '';
+    if (!raw || !/\.xml$/i.test(raw)) return;
+    const base = raw.replace(/\.xml$/i, '');
+    if (!base || base === raw) return;
+    guards.set(base, raw);
+  });
+
+  let entries;
+  try {
+    entries = await fsp.readdir(OUT_DIR, { withFileTypes: true });
+  } catch (_) {
+    entries = [];
+  }
+
+  const markerName = '.canopy-xml-guard';
+  const staleRemovals = [];
+  for (const entry of entries) {
+    if (!entry || !entry.isDirectory()) continue;
+    const dirName = entry.name;
+    const dirPath = path.join(OUT_DIR, dirName);
+    const markerPath = path.join(dirPath, markerName);
+    let hasMarker = false;
+    try {
+      const stat = await fsp.stat(markerPath);
+      hasMarker = stat.isFile();
+    } catch (_) {}
+    if (!hasMarker) continue;
+    if (guards.has(dirName)) {
+      guards.delete(dirName);
+      continue;
+    }
+    staleRemovals.push(
+      fsp
+        .rm(dirPath, { recursive: true, force: true })
+        .catch(() => {})
+    );
+  }
+  await Promise.all(staleRemovals);
+
+  if (!guards.size) return;
+
+  const creations = [];
+  for (const base of guards.keys()) {
+    const dirPath = path.join(OUT_DIR, base);
+    const markerPath = path.join(dirPath, markerName);
+    creations.push(
+      fsp
+        .mkdir(dirPath, { recursive: true })
+        .then(() => fsp.writeFile(markerPath, '', 'utf8').catch(() => {}))
+    );
+  }
+  await Promise.all(creations);
+}
+
 async function writeSitemap(iiifRecords, pageRecords) {
   const urls = collectAbsoluteUrls(iiifRecords, pageRecords);
   if (!urls.length) {
     await cleanupLegacySitemaps();
+    await ensureNoExtensionGuards([]);
     logLine('• No URLs to write to sitemap', 'yellow');
     return;
   }
@@ -117,15 +175,19 @@ async function writeSitemap(iiifRecords, pageRecords) {
 
   const chunks = chunkList(urls, MAX_URLS_PER_SITEMAP);
   const indexEntries = [];
+  const writtenFiles = [];
   for (let i = 0; i < chunks.length; i += 1) {
     const fileName = `sitemap-${i + 1}.xml`;
     const dest = path.join(OUT_DIR, fileName);
     await fsp.writeFile(dest, buildUrlsetXml(chunks[i]), 'utf8');
     indexEntries.push({ loc: absoluteUrl(fileName) });
+    writtenFiles.push(fileName);
   }
 
   const indexDest = path.join(OUT_DIR, SITEMAP_INDEX_BASENAME);
   await fsp.writeFile(indexDest, buildSitemapIndexXml(indexEntries), 'utf8');
+  writtenFiles.push(SITEMAP_INDEX_BASENAME);
+  await ensureNoExtensionGuards(writtenFiles);
   logLine(
     `✓ Wrote sitemap index (${chunks.length} files, ${urls.length} urls total)`,
     'cyan'

package/lib/components/map-runtime.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Map } from '../../ui/dist/index.mjs';
+import Leaflet from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import 'leaflet.markercluster';
+import 'leaflet.markercluster/dist/MarkerCluster.css';
+import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
+
+function broadcastLeafletReady() {
+  let updated = false;
+  try {
+    if (typeof globalThis !== 'undefined' && !globalThis.L) {
+      globalThis.L = Leaflet;
+      updated = true;
+    }
+  } catch (_) {}
+  try {
+    if (typeof window !== 'undefined' && !window.L) {
+      window.L = Leaflet;
+      updated = true;
+    }
+  } catch (_) {}
+  if (updated && typeof document !== 'undefined') {
+    try {
+      document.dispatchEvent(new CustomEvent('canopy:leaflet-ready'));
+    } catch (_) {
+      const evt = document.createEvent('CustomEvent');
+      evt.initCustomEvent('canopy:leaflet-ready', false, false, {});
+      document.dispatchEvent(evt);
+    }
+  }
+}
+
+broadcastLeafletReady();
+
+function ready(fn) {
+  if (typeof document === 'undefined') return;
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+
+function parseProps(el) {
+  try {
+    const script = el.querySelector('script[type="application/json"]');
+    if (script) return JSON.parse(script.textContent || '{}');
+    const raw = el.getAttribute('data-props') || '{}';
+    return JSON.parse(raw);
+  } catch (_) {
+    return {};
+  }
+}
+
+function mount(el) {
+  try {
+    if (!el || el.getAttribute('data-canopy-map-mounted') === '1') return;
+    const props = parseProps(el);
+    const script = el.querySelector('script[type="application/json"]');
+    if (script && script.parentNode === el) {
+      script.parentNode.removeChild(script);
+    }
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+    const root = createRoot(el);
+    root.render(React.createElement(Map, props));
+    el.setAttribute('data-canopy-map-mounted', '1');
+  } catch (error) {
+    try {
+      console.warn('[canopy][map] failed to mount map', error);
+    } catch (_) {}
+  }
+}
+
+function scan() {
+  try {
+    document
+      .querySelectorAll('[data-canopy-map]:not([data-canopy-map-mounted="1"])')
+      .forEach(mount);
+  } catch (_) {}
+}
+
+function observe() {
+  try {
+    const obs = new MutationObserver((mutations) => {
+      const toMount = [];
+      mutations.forEach((mutation) => {
+        mutation.addedNodes &&
+          mutation.addedNodes.forEach((node) => {
+            if (!(node instanceof Element)) return;
+            if (node.matches && node.matches('[data-canopy-map]')) toMount.push(node);
+            const inner = node.querySelectorAll
+              ? node.querySelectorAll('[data-canopy-map]')
+              : [];
+            inner && inner.forEach && inner.forEach((el) => toMount.push(el));
+          });
+      });
+      if (toMount.length) Promise.resolve().then(() => toMount.forEach(mount));
+    });
+    obs.observe(document.documentElement || document.body, {
+      childList: true,
+      subtree: true,
+    });
+  } catch (_) {}
+}
+
+ready(() => {
+  if (typeof document === 'undefined') return;
+  scan();
+  observe();
+});