@canopy-iiif/app 0.8.2 → 0.8.4

package/lib/build/verify.js

@@ -21,10 +21,10 @@ function verifyHomepageElements(outDir) {
   const idx = path.join(outDir, 'index.html');
   const html = readFileSafe(idx);
   const okHero = /class=\"[^\"]*canopy-hero/.test(html) || /<div[^>]+canopy-hero/.test(html);
-  const okCommand = /data-canopy-command=/.test(html);
-  const okCommandTrigger = /data-canopy-command-trigger/.test(html);
-  const okCommandScriptRef = /<script[^>]+canopy-command\.js/.test(html);
-  return { okHero, okCommand, okCommandTrigger, okCommandScriptRef, htmlPath: idx };
+  const okSearchForm = /data-canopy-search-form=/.test(html);
+  const okSearchFormTrigger = /data-canopy-search-form-trigger/.test(html);
+  const okSearchFormScriptRef = /<script[^>]+canopy-search-form\.js/.test(html);
+  return { okHero, okSearchForm, okSearchFormTrigger, okSearchFormScriptRef, htmlPath: idx };
 }
 
 function verifyBuildOutput(options = {}) {
@@ -34,7 +34,7 @@ function verifyBuildOutput(options = {}) {
   const okAny = total > 0;
   const indexPath = path.join(outDir, 'index.html');
   const hasIndex = fs.existsSync(indexPath) && fs.statSync(indexPath).size > 0;
-  const { okHero, okCommand, okCommandTrigger, okCommandScriptRef } = verifyHomepageElements(outDir);
+  const { okHero, okSearchForm, okSearchFormTrigger, okSearchFormScriptRef } = verifyHomepageElements(outDir);
 
   const ck = (label, ok, extra) => {
     const status = ok ? '✓' : '✗';
@@ -44,12 +44,12 @@ function verifyBuildOutput(options = {}) {
   ck('HTML pages exist', okAny, okAny ? `(${total})` : '');
   ck('homepage exists', hasIndex, hasIndex ? `(${indexPath})` : '');
   ck('homepage: Hero present', okHero);
-  ck('homepage: Command present', okCommand);
-  ck('homepage: Command trigger present', okCommandTrigger);
-  ck('homepage: Command script referenced', okCommandScriptRef);
+  ck('homepage: Search form present', okSearchForm);
+  ck('homepage: Search form trigger present', okSearchFormTrigger);
+  ck('homepage: Search form script referenced', okSearchFormScriptRef);
 
   // Do not fail build on missing SSR trigger; the client runtime injects a default.
-  const ok = okAny && hasIndex && okHero && okCommand && okCommandScriptRef;
+  const ok = okAny && hasIndex && okHero && okSearchForm && okSearchFormScriptRef;
   if (!ok) {
     const err = new Error('Build verification failed');
     err.outDir = outDir;

package/lib/components/featured.js

@@ -105,9 +105,23 @@ function readFeaturedFromCacheSync() {
         href: rootRelativeHref(path.join('works', slug + '.html').split(path.sep).join('/')),
         type: 'work',
       };
-      if (entry && entry.thumbnail) rec.thumbnail = String(entry.thumbnail);
-      if (entry && typeof entry.thumbnailWidth === 'number') rec.thumbnailWidth = entry.thumbnailWidth;
-      if (entry && typeof entry.thumbnailHeight === 'number') rec.thumbnailHeight = entry.thumbnailHeight;
+      if (entry && entry.heroThumbnail) {
+        rec.thumbnail = String(entry.heroThumbnail);
+        if (typeof entry.heroThumbnailWidth === 'number') {
+          rec.thumbnailWidth = entry.heroThumbnailWidth;
+        } else if (typeof entry.thumbnailWidth === 'number') {
+          rec.thumbnailWidth = entry.thumbnailWidth;
+        }
+        if (typeof entry.heroThumbnailHeight === 'number') {
+          rec.thumbnailHeight = entry.heroThumbnailHeight;
+        } else if (typeof entry.thumbnailHeight === 'number') {
+          rec.thumbnailHeight = entry.thumbnailHeight;
+        }
+      } else {
+        if (entry && entry.thumbnail) rec.thumbnail = String(entry.thumbnail);
+        if (entry && typeof entry.thumbnailWidth === 'number') rec.thumbnailWidth = entry.thumbnailWidth;
+        if (entry && typeof entry.thumbnailHeight === 'number') rec.thumbnailHeight = entry.thumbnailHeight;
+      }
       if (!rec.thumbnail) {
         try {
           const t = m && m.thumbnail;

package/lib/components/navigation.js

@@ -0,0 +1,308 @@
+const {fs, path, CONTENT_DIR, rootRelativeHref} = require("../common");
+const mdx = require("../build/mdx.js");
+const {getPageContext} = require("../page-context");
+
+const EXCLUDED_ROOTS = new Set(["works", "search"]);
+
+let NAV_CACHE = null;
+
+function normalizeRelativePath(rel) {
+  if (!rel) return "";
+  let normalized = String(rel).replace(/\\+/g, "/");
+  while (normalized.startsWith("./")) normalized = normalized.slice(2);
+  while (normalized.startsWith("../")) normalized = normalized.slice(3);
+  if (normalized.startsWith("/")) {
+    normalized = normalized.replace(/^\/+/, "");
+  }
+  return normalized;
+}
+
+function humanizeSegment(seg) {
+  if (!seg) return "";
+  const cleaned = String(seg).replace(/[-_]+/g, " ");
+  return cleaned.replace(/(^|\s)([a-z])/g, (match) => match.toUpperCase());
+}
+
+function slugFromRelative(relativePath) {
+  const normalized = normalizeRelativePath(relativePath);
+  if (!normalized) {
+    return {slug: "", segments: [], isIndex: false};
+  }
+  const parts = normalized.split("/");
+  const fileName = parts.pop() || "";
+  const baseName = fileName.replace(/\.mdx$/i, "");
+  const isIndex = baseName.toLowerCase() === "index";
+  const dirSegments = parts.filter(Boolean);
+  const segments = isIndex ? dirSegments : dirSegments.concat(baseName);
+  const slug = segments.join("/");
+  return {slug, segments, isIndex};
+}
+
+function pageSortKey(relativePath) {
+  const normalized = normalizeRelativePath(relativePath).toLowerCase();
+  if (!normalized) return "";
+  return normalized.replace(/(^|\/)index\.mdx$/i, "$1-index.mdx");
+}
+
+function extractTitleSafe(raw) {
+  try {
+    return mdx.extractTitle(raw);
+  } catch (_) {
+    return "Untitled";
+  }
+}
+
+function collectPagesSync() {
+  const pages = [];
+
+  function walk(dir) {
+    let entries = [];
+    try {
+      entries = fs.readdirSync(dir, {withFileTypes: true});
+    } catch (_) {
+      return;
+    }
+    for (const entry of entries) {
+      if (!entry) continue;
+      const name = entry.name || "";
+      if (!name) continue;
+      if (name.startsWith(".")) continue;
+      const absPath = path.join(dir, name);
+      const relPath = path.relative(CONTENT_DIR, absPath);
+      const normalizedRel = normalizeRelativePath(relPath);
+      if (!normalizedRel) continue;
+      const segments = normalizedRel.split("/");
+      const firstRaw = segments[0] || "";
+      const firstSegment = firstRaw.replace(/\.mdx$/i, "");
+      if (EXCLUDED_ROOTS.has(firstSegment)) continue;
+      if (segments.some((segment) => segment.startsWith("_"))) continue;
+      if (entry.isDirectory()) {
+        walk(absPath);
+        continue;
+      }
+      if (!entry.isFile()) continue;
+      if (!/\.mdx$/i.test(name)) continue;
+      let raw = "";
+      try {
+        raw = fs.readFileSync(absPath, "utf8");
+      } catch (_) {
+        raw = "";
+      }
+      const {
+        slug,
+        segments: slugSegments,
+        isIndex,
+      } = slugFromRelative(normalizedRel);
+      const titleRaw = extractTitleSafe(raw);
+      const fallbackTitle = humanizeSegment(
+        slugSegments.slice(-1)[0] || firstSegment || ""
+      );
+      const title =
+        titleRaw && titleRaw !== "Untitled"
+          ? titleRaw
+          : fallbackTitle || titleRaw;
+      const htmlRel = normalizedRel.replace(/\.mdx$/i, ".html");
+      const href = rootRelativeHref(htmlRel);
+      const page = {
+        filePath: absPath,
+        relativePath: normalizedRel,
+        slug,
+        segments: slugSegments,
+        isIndex,
+        href,
+        title,
+        fallbackTitle,
+        sortKey: pageSortKey(normalizedRel),
+        topSegment: slugSegments[0] || firstSegment || "",
+      };
+      pages.push(page);
+    }
+  }
+
+  walk(CONTENT_DIR);
+  pages.sort((a, b) => a.sortKey.localeCompare(b.sortKey));
+  return pages;
+}
+
+function createNode(slug) {
+  const segments = slug ? slug.split("/") : [];
+  const name = segments.slice(-1)[0] || "";
+  return {
+    slug,
+    segments,
+    name,
+    title: humanizeSegment(name),
+    href: null,
+    hasContent: false,
+    relativePath: null,
+    sortKey: slug || name,
+    sourcePage: null,
+    children: [],
+  };
+}
+
+function getNavigationCache() {
+  if (NAV_CACHE) return NAV_CACHE;
+  const pages = collectPagesSync();
+  const pagesByRelative = new Map();
+  const nodes = new Map();
+
+  for (const page of pages) {
+    const {slug, segments} = page;
+    pagesByRelative.set(page.relativePath, page);
+    if (!segments.length) continue;
+    for (let i = 0; i < segments.length; i += 1) {
+      const key = segments.slice(0, i + 1).join("/");
+      if (key && !nodes.has(key)) {
+        nodes.set(key, createNode(key));
+      }
+    }
+  }
+
+  for (const page of pages) {
+    if (!page.slug) continue;
+    const node = nodes.get(page.slug);
+    if (!node) continue;
+    if (
+      !node.sourcePage ||
+      (node.sourcePage && node.sourcePage.isIndex && !page.isIndex)
+    ) {
+      node.sourcePage = page;
+      node.title = page.title || node.title;
+      node.href = page.href || node.href;
+      node.relativePath = page.relativePath;
+      node.sortKey = page.sortKey || node.sortKey;
+      node.hasContent = true;
+    }
+  }
+
+  for (const node of nodes.values()) {
+    const {segments} = node;
+    if (!segments.length) continue;
+    const parentSlug = segments.slice(0, -1).join("/");
+    if (!parentSlug) continue;
+    const parent = nodes.get(parentSlug);
+    if (!parent) continue;
+    if (!parent.children.some((child) => child.slug === node.slug)) {
+      parent.children.push(node);
+    }
+  }
+
+  const sortChildren = (node) => {
+    node.children.sort((a, b) => a.sortKey.localeCompare(b.sortKey));
+    for (const child of node.children) sortChildren(child);
+  };
+  for (const node of nodes.values()) {
+    sortChildren(node);
+  }
+
+  const roots = new Map();
+  for (const node of nodes.values()) {
+    if (node.segments.length === 1) {
+      roots.set(node.slug, node);
+    }
+  }
+
+  NAV_CACHE = {
+    pages,
+    pagesByRelative,
+    nodes,
+    roots,
+  };
+  return NAV_CACHE;
+}
+
+function cloneNode(node, currentSlug) {
+  if (!node) return null;
+  const slug = node.slug;
+  const isActive = currentSlug && slug === currentSlug;
+  const isAncestor = !!(
+    currentSlug &&
+    slug &&
+    slug.length < currentSlug.length &&
+    currentSlug.startsWith(slug + "/")
+  );
+  const children = node.children
+    .map((child) => cloneNode(child, currentSlug))
+    .filter(Boolean);
+  if (!node.hasContent && !children.length) {
+    return null;
+  }
+  return {
+    slug,
+    title: node.title,
+    href: node.href,
+    segments: node.segments.slice(),
+    depth: Math.max(0, node.segments.length - 1),
+    isActive: !!isActive,
+    isAncestor,
+    isExpanded: !!(isActive || isAncestor),
+    hasContent: node.hasContent,
+    relativePath: node.relativePath,
+    children,
+  };
+}
+
+function getPageInfo(relativePath) {
+  const cache = getNavigationCache();
+  const normalized = normalizeRelativePath(relativePath);
+  const page = cache.pagesByRelative.get(normalized);
+  if (page) {
+    return {
+      title: page.title,
+      href: page.href,
+      slug: page.slug,
+      segments: page.segments.slice(),
+      relativePath: page.relativePath,
+      rootSegment: page.segments[0] || "",
+      isIndex: page.isIndex,
+    };
+  }
+  const {slug, segments} = slugFromRelative(normalized);
+  const htmlRel = normalized.replace(/\.mdx$/i, ".html");
+  return {
+    title: humanizeSegment(segments.slice(-1)[0] || slug || ""),
+    href: rootRelativeHref(htmlRel),
+    slug,
+    segments,
+    relativePath: normalized,
+    rootSegment: segments[0] || "",
+    isIndex: false,
+  };
+}
+
+function buildNavigationForFile(relativePath) {
+  const cache = getNavigationCache();
+  const normalized = normalizeRelativePath(relativePath);
+  const page = cache.pagesByRelative.get(normalized);
+  const fallback = slugFromRelative(normalized);
+  const slug = page ? page.slug : fallback.slug;
+  const rootSegment = page
+    ? page.segments[0] || ""
+    : fallback.segments[0] || "";
+  if (!slug || !rootSegment || EXCLUDED_ROOTS.has(rootSegment)) {
+    return null;
+  }
+  const rootNode = cache.roots.get(rootSegment);
+  if (!rootNode) return null;
+  const cloned = cloneNode(rootNode, slug);
+  if (!cloned) return null;
+  return {
+    rootSegment,
+    currentSlug: slug,
+    root: cloned,
+    title: cloned.title,
+  };
+}
+
+function resetNavigationCache() {
+  NAV_CACHE = null;
+}
+
+module.exports = {
+  normalizeRelativePath,
+  getPageInfo,
+  buildNavigationForFile,
+  resetNavigationCache,
+  getPageContext,
+};

package/lib/page-context.js

@@ -0,0 +1,14 @@
+const React = require('react');
+
+let PageContext = null;
+
+function getPageContext() {
+  if (!PageContext) {
+    PageContext = React.createContext({ navigation: null, page: null });
+  }
+  return PageContext;
+}
+
+module.exports = {
+  getPageContext,
+};

package/lib/search/search-app.jsx

@@ -681,7 +681,7 @@ function parseProps(el) {
 function bindSearchInputToStore() {
   if (!store || typeof document === "undefined") return;
   try {
-    const input = document.querySelector("[data-canopy-command-input]");
+    const input = document.querySelector("[data-canopy-search-form-input]");
     if (!input || input.dataset.canopySearchSync === "1") return;
     input.dataset.canopySearchSync = "1";
 
@@ -764,7 +764,7 @@ if (typeof document !== "undefined") {
           const q =
             ev && ev.detail && typeof ev.detail.query === "string"
               ? ev.detail.query
-              : document.querySelector("[data-canopy-command-input]")?.value ||
+              : document.querySelector("[data-canopy-search-form-input]")?.value ||
                 "";
           if (typeof q === "string") store.setQuery(q);
         } catch (_) {}

package/lib/search/{command-runtime.js → search-form-runtime.js}

@@ -217,7 +217,7 @@ function bindKeyboardNavigation({ input, list, panel }) {
   });
 }
 
-async function attachCommand(host) {
+async function attachSearchForm(host) {
   const config = parseProps(host) || {};
   const maxResults = Number(config.maxResults || 8) || 8;
   const groupOrder = Array.isArray(config.groupOrder) ? config.groupOrder : ['work', 'page'];
@@ -225,14 +225,14 @@ async function attachCommand(host) {
   const onSearchPage = isOnSearchPage();
 
   const panel = (() => {
-    try { return host.querySelector('[data-canopy-command-panel]'); } catch (_) { return null; }
+    try { return host.querySelector('[data-canopy-search-form-panel]'); } catch (_) { return null; }
   })();
   if (!panel) return;
 
   if (!onSearchPage) {
     try {
       const wrapper = host.querySelector('.relative');
-      if (wrapper) wrapper.setAttribute('data-canopy-panel-auto', '1');
+      if (wrapper) wrapper.setAttribute('data-canopy-search-form-auto', '1');
     } catch (_) {}
   }
 
@@ -244,7 +244,7 @@ async function attachCommand(host) {
   if (!list) return;
 
   const input = (() => {
-    try { return host.querySelector('[data-canopy-command-input]'); } catch (_) { return null; }
+    try { return host.querySelector('[data-canopy-search-form-input]'); } catch (_) { return null; }
   })();
   if (!input) return;
 
@@ -345,9 +345,9 @@ async function attachCommand(host) {
   }
 
   host.addEventListener('click', (event) => {
-    const trigger = event.target && event.target.closest && event.target.closest('[data-canopy-command-trigger]');
+    const trigger = event.target && event.target.closest && event.target.closest('[data-canopy-search-form-trigger]');
     if (!trigger) return;
-    const mode = (trigger.dataset && trigger.dataset.canopyCommandTrigger) || '';
+    const mode = (trigger.dataset && trigger.dataset.canopySearchFormTrigger) || '';
     if (mode === 'submit' || mode === 'form') return;
     event.preventDefault();
     openPanel();
@@ -359,12 +359,12 @@ async function attachCommand(host) {
 }
 
 ready(() => {
-  const hosts = Array.from(document.querySelectorAll('[data-canopy-command]'));
+  const hosts = Array.from(document.querySelectorAll('[data-canopy-search-form]'));
   if (!hosts.length) return;
   hosts.forEach((host) => {
-    attachCommand(host).catch((err) => {
+    attachSearchForm(host).catch((err) => {
       try {
-        console.warn('[canopy][command] failed to initialise', err && (err.message || err));
+        console.warn('[canopy][search-form] failed to initialise', err && (err.message || err));
       } catch (_) {}
     });
   });

package/lib/search/search.js

@@ -158,13 +158,13 @@ async function buildSearchPage() {
     // Include react-globals vendor shim before search.js to provide window.React globals
     const vendorReactAbs = path.join(OUT_DIR, 'scripts', 'react-globals.js');
     const vendorFlexAbs = path.join(OUT_DIR, 'scripts', 'flexsearch-globals.js');
-    const vendorCommandAbs = path.join(OUT_DIR, 'scripts', 'canopy-command.js');
+    const vendorSearchFormAbs = path.join(OUT_DIR, 'scripts', 'canopy-search-form.js');
     function verRel(abs) {
       let rel = path.relative(path.dirname(outPath), abs).split(path.sep).join('/');
       try { const st = require('fs').statSync(abs); rel += `?v=${Math.floor(st.mtimeMs || Date.now())}`; } catch (_) {}
       return rel;
     }
-    const vendorTags = `<script src="${verRel(vendorReactAbs)}"></script><script src="${verRel(vendorFlexAbs)}"></script><script src="${verRel(vendorCommandAbs)}"></script>`;
+    const vendorTags = `<script src="${verRel(vendorReactAbs)}"></script><script src="${verRel(vendorFlexAbs)}"></script><script src="${verRel(vendorSearchFormAbs)}"></script>`;
     let headExtra = vendorTags + head + importMap;
     try {
       const { BASE_PATH } = require('../common');

package/package.json

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