@canopy-iiif/app 1.6.18 → 1.6.20

package/lib/build/iiif.js

@@ -2169,6 +2169,7 @@ async function buildIiifCollectionPages(CONFIG) {
             body.includes("data-canopy-scroll") ||
             body.includes("data-canopy-image");
           const needsRelated = body.includes("data-canopy-related-items");
+          const needsImageStory = body.includes("data-canopy-image-story");
           const needsHeroSlider = body.includes("data-canopy-hero-slider");
           const needsTimeline = body.includes("data-canopy-timeline");
           const needsMap = body.includes("data-canopy-map");
@@ -2185,6 +2186,9 @@ async function buildIiifCollectionPages(CONFIG) {
           const sliderRel = needsRelated
             ? relativeRuntimeScript(outPath, "canopy-slider.js", true)
             : null;
+          const imageStoryRel = needsImageStory
+            ? relativeRuntimeScript(outPath, "canopy-image-story.js", true)
+            : null;
           const timelineRel = needsTimeline
             ? relativeRuntimeScript(outPath, "canopy-timeline.js", true)
             : null;
@@ -2213,6 +2217,7 @@ async function buildIiifCollectionPages(CONFIG) {
           const moduleScriptRels = [];
           if (viewerRel) moduleScriptRels.push(viewerRel);
           if (sliderRel) moduleScriptRels.push(sliderRel);
+          if (imageStoryRel) moduleScriptRels.push(imageStoryRel);
           const primaryClassicScripts = [];
           if (heroRel) primaryClassicScripts.push(heroRel);
           if (relatedRel) primaryClassicScripts.push(relatedRel);

package/lib/build/mdx.js

@@ -1263,6 +1263,10 @@ async function buildCloverHydrationRuntimes() {
   const entryPoints = {
     viewer: path.join(__dirname, "../components/viewer-runtime-entry.js"),
     slider: path.join(__dirname, "../components/slider-runtime-entry.js"),
+    "image-story": path.join(
+      __dirname,
+      "../components/image-story-runtime-entry.js",
+    ),
   };
   await esbuild.build({
     entryPoints,
@@ -1286,6 +1290,7 @@ async function buildCloverHydrationRuntimes() {
     const runtimeLabels = {
       viewer: "Viewer, Scroll, and Image runtime",
       slider: "Slider runtime",
+      "image-story": "ImageStory runtime",
     };
     Object.keys(entryPoints).forEach((key) => {
       const file = `canopy-${key}.js`;

package/lib/build/pages.js

@@ -219,6 +219,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
     body.includes('data-canopy-scroll') ||
     body.includes('data-canopy-image');
   const needsHydrateSlider = body.includes('data-canopy-slider');
+  const needsImageStory = body.includes('data-canopy-image-story');
   const needsHeroSlider = body.includes('data-canopy-hero-slider');
   const needsTimeline = body.includes('data-canopy-timeline');
   const needsMap = body.includes('data-canopy-map');
@@ -231,6 +232,9 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   const sliderRel = (needsHydrateSlider || needsFacets)
     ? relativeRuntimeScript(outPath, 'canopy-slider.js', true)
     : null;
+  const imageStoryRel = needsImageStory
+    ? relativeRuntimeScript(outPath, 'canopy-image-story.js', true)
+    : null;
   const heroRel = needsHeroSlider
     ? relativeRuntimeScript(outPath, 'canopy-hero-slider.js', true)
     : null;
@@ -271,6 +275,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, source
   const moduleScriptRels = [];
   if (viewerRel) moduleScriptRels.push(viewerRel);
   if (sliderRel) moduleScriptRels.push(sliderRel);
+  if (imageStoryRel) moduleScriptRels.push(imageStoryRel);
   if (customClientRel) moduleScriptRels.push(customClientRel);
   const primaryClassicScripts = [];
   if (heroRel) primaryClassicScripts.push(heroRel);

package/lib/components/image-story-runtime-entry.js

@@ -0,0 +1,69 @@
+import { mountImageStory } from '../../ui/dist/index.mjs';
+
+function ready(fn) {
+  if (typeof document === 'undefined') return;
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', fn, { once: true });
+  } else {
+    fn();
+  }
+}
+
+function parseProps(node) {
+  try {
+    const script = node.querySelector('script[type="application/json"]');
+    if (!script) return {};
+    const text = script.textContent || '{}';
+    return JSON.parse(text) || {};
+  } catch (_) {
+    return {};
+  }
+}
+
+function mount(node) {
+  if (!node || node.__canopyImageStoryMounted) return;
+  try {
+    const props = parseProps(node);
+    mountImageStory(node, props);
+    node.__canopyImageStoryMounted = true;
+  } catch (_) {}
+}
+
+function scan() {
+  try {
+    document
+      .querySelectorAll('[data-canopy-image-story]')
+      .forEach((node) => mount(node));
+  } 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-image-story]')) {
+              toMount.push(node);
+            }
+            const inner = node.querySelectorAll
+              ? node.querySelectorAll('[data-canopy-image-story]')
+              : [];
+            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(function onReady() {
+  scan();
+  observe();
+});

package/lib/components/navigation.js

@@ -41,7 +41,8 @@ function slugFromRelative(relativePath) {
 function pageSortKey(relativePath) {
   const normalized = normalizeRelativePath(relativePath).toLowerCase();
   if (!normalized) return "";
-  return normalized.replace(/(^|\/)index\.mdx$/i, "$1-index.mdx");
+  const withoutExtension = normalized.replace(/\.mdx$/i, "");
+  return withoutExtension.replace(/(^|\/)index$/i, "$1-index");
 }
 
 function extractTitleSafe(raw) {

package/package.json

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