@canopy-iiif/app 0.12.4 → 0.12.5

package/lib/build/iiif.js

@@ -1525,6 +1525,7 @@ async function buildIiifCollectionPages(CONFIG) {
             body.includes("data-canopy-image");
           const needsRelated = body.includes("data-canopy-related-items");
           const needsHeroSlider = body.includes("data-canopy-hero-slider");
+          const needsTimeline = body.includes("data-canopy-timeline");
           const needsSearchForm = body.includes("data-canopy-search-form");
           const needsHydrate =
             body.includes("data-canopy-hydrate") ||
@@ -1550,6 +1551,15 @@ async function buildIiifCollectionPages(CONFIG) {
                 .split(path.sep)
                 .join("/")
             : null;
+          const timelineRel = needsTimeline
+            ? path
+                .relative(
+                  path.dirname(outPath),
+                  path.join(OUT_DIR, "scripts", "canopy-timeline.js")
+                )
+                .split(path.sep)
+                .join("/")
+            : null;
           const heroRel = needsHeroSlider
             ? path
                 .relative(
@@ -1581,12 +1591,14 @@ async function buildIiifCollectionPages(CONFIG) {
           let jsRel = null;
           if (needsHeroSlider && heroRel) jsRel = heroRel;
           else if (needsRelated && sliderRel) jsRel = sliderRel;
+          else if (needsTimeline && timelineRel) jsRel = timelineRel;
           else if (viewerRel) jsRel = viewerRel;
 
           const headSegments = [head];
           const needsReact = !!(
             needsHydrateViewer ||
-            needsRelated
+            needsRelated ||
+            needsTimeline
           );
           let vendorTag = "";
           if (needsReact) {
@@ -1612,6 +1624,8 @@ async function buildIiifCollectionPages(CONFIG) {
             extraScripts.push(`<script defer src="${heroRel}"></script>`);
           if (relatedRel && jsRel !== relatedRel)
             extraScripts.push(`<script defer src="${relatedRel}"></script>`);
+          if (timelineRel && jsRel !== timelineRel)
+            extraScripts.push(`<script defer src="${timelineRel}"></script>`);
           if (viewerRel && jsRel !== viewerRel)
             extraScripts.push(`<script defer src="${viewerRel}"></script>`);
           if (sliderRel && jsRel !== sliderRel)

package/lib/build/mdx.js

@@ -1167,6 +1167,106 @@ async function ensureHeroRuntime() {
   } catch (_) {}
 }
 
+async function ensureTimelineRuntime() {
+  let esbuild = null;
+  try {
+    esbuild = require("../ui/node_modules/esbuild");
+  } catch (_) {
+    try {
+      esbuild = require("esbuild");
+    } catch (_) {}
+  }
+  if (!esbuild)
+    throw new Error(
+      "Timeline 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-timeline.js");
+  const entryFile = path.join(
+    __dirname,
+    "..",
+    "components",
+    "timeline-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 rdomClientShim = `
+    const RDC = (typeof window !== 'undefined' && window.ReactDOMClient) || {};
+    export const createRoot = RDC.createRoot;
+    export const hydrateRoot = RDC.hydrateRoot;
+  `;
+  const plugin = {
+    name: "canopy-react-shims-timeline",
+    setup(build) {
+      const ns = "canopy-timeline-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: "export default (typeof window !== 'undefined' && window.ReactDOM) || {};",
+        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],
+  });
+  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 (_) {}
+}
+
 module.exports = {
   extractTitle,
   extractHeadings,
@@ -1181,6 +1281,7 @@ module.exports = {
   loadAppWrapper,
   ensureClientRuntime,
   ensureSliderRuntime,
+  ensureTimelineRuntime,
   ensureHeroRuntime,
   ensureFacetsRuntime,
   ensureReactGlobals,

package/lib/build/pages.js

@@ -175,6 +175,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
     body.includes('data-canopy-image');
   const needsHydrateSlider = body.includes('data-canopy-slider');
   const needsHeroSlider = body.includes('data-canopy-hero-slider');
+  const needsTimeline = body.includes('data-canopy-timeline');
   const needsSearchForm = true; // search form runtime is global
   const needsFacets = body.includes('data-canopy-related-items');
   const viewerRel = needsHydrateViewer
@@ -189,6 +190,9 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   const heroCssRel = needsHeroSlider
     ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-hero-slider.css')).split(path.sep).join('/')
     : null;
+  const timelineRel = needsTimeline
+    ? path.relative(path.dirname(outPath), path.join(OUT_DIR, 'scripts', 'canopy-timeline.js')).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;
@@ -202,10 +206,11 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   let jsRel = null;
   if (needsHeroSlider && heroRel) jsRel = heroRel;
   else if (needsFacets && sliderRel) jsRel = sliderRel;
+  else if (needsTimeline && timelineRel) jsRel = timelineRel;
   else if (viewerRel) jsRel = viewerRel;
   else if (sliderRel) jsRel = sliderRel;
   else if (facetsRel) jsRel = facetsRel;
-  const needsReact = !!(needsHydrateViewer || needsHydrateSlider || needsFacets);
+  const needsReact = !!(needsHydrateViewer || needsHydrateSlider || needsFacets || needsTimeline);
   let vendorTag = '';
   if (needsReact) {
     try {
@@ -223,6 +228,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   const headSegments = [head];
   const extraScripts = [];
   if (heroRel && jsRel !== heroRel) extraScripts.push(`<script defer src="${heroRel}"></script>`);
+  if (timelineRel && jsRel !== timelineRel) extraScripts.push(`<script defer src="${timelineRel}"></script>`);
   if (facetsRel && jsRel !== facetsRel) extraScripts.push(`<script defer src="${facetsRel}"></script>`);
   if (viewerRel && jsRel !== viewerRel) extraScripts.push(`<script defer src="${viewerRel}"></script>`);
   if (sliderRel && jsRel !== sliderRel) extraScripts.push(`<script defer src="${sliderRel}"></script>`);

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.ensureSliderRuntime === 'function') await mdx.ensureSliderRuntime(); } catch (_) {}
+  try { if (typeof mdx.ensureTimelineRuntime === 'function') await mdx.ensureTimelineRuntime(); } 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/components/timeline-runtime.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import Timeline from '../../ui/src/content/timeline/Timeline.jsx';
+
+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-timeline-mounted') === '1') return;
+    const props = parseProps(el);
+    const dataNode = el.querySelector('script[type="application/json"]');
+    if (dataNode && dataNode.parentNode === el) {
+      dataNode.parentNode.removeChild(dataNode);
+    }
+    if (el.childElementCount > 0) {
+      hydrateRoot(el, React.createElement(Timeline, props));
+    } else {
+      const root = createRoot(el);
+      root.render(React.createElement(Timeline, props));
+    }
+    el.setAttribute('data-canopy-timeline-mounted', '1');
+  } catch (error) {
+    try {
+      console.warn('[canopy][timeline] failed to mount timeline', error);
+    } catch (_) {}
+  }
+}
+
+function scan() {
+  try {
+    document
+      .querySelectorAll('[data-canopy-timeline]:not([data-canopy-timeline-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-timeline]')) toMount.push(node);
+            const inner = node.querySelectorAll
+              ? node.querySelectorAll('[data-canopy-timeline]')
+              : [];
+            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();
+});

package/lib/search/search-form-runtime.js

@@ -234,7 +234,7 @@ function renderList(list, records, groupOrder) {
       item.setAttribute('data-canopy-item', '');
       item.href = href;
       item.tabIndex = 0;
-      item.className = 'canopy-card canopy-card--teaser canopy-search-teaser__item';
+      item.className = 'canopy-card canopy-card--teaser canopy-search-teaser__item canopy-teaser-card';
 
       const showThumb = String(record && record.type || '') === 'work' && record && record.thumbnail;
       if (showThumb) {

package/package.json

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