@canopy-iiif/app 0.8.3 → 0.8.4

package/lib/build/build.js

@@ -20,6 +20,7 @@ const { ensureStyles } = require("./styles");
 const { copyAssets } = require("./assets");
 const { logLine } = require("./log");
 const { verifyBuildOutput } = require("./verify");
+const navigation = require("../components/navigation");
 
 // hold records between builds if skipping IIIF
 let iiifRecordsCache = [];
@@ -41,6 +42,7 @@ async function build(options = {}) {
   });
   logLine("• Reset MDX cache", "blue", { dim: true });
   mdx?.resetMdxCaches();
+  navigation?.resetNavigationCache?.();
   if (!skipIiif) {
     await cleanDir(OUT_DIR);
     logLine(`• Cleaned output directory`, "blue", { dim: true });

package/lib/build/dev.js

@@ -617,29 +617,45 @@ function startServer() {
     }
     if (pathname === "/") pathname = "/index.html";
 
-    // Resolve candidate paths in order:
-    // 1) as-is
-    // 2) add .html for extensionless
-    // 3) if a directory, use its index.html
-    let filePath = null;
-    const candidateA = path.join(OUT_DIR, pathname);
-    const candidateB = path.join(OUT_DIR, pathname + ".html");
-    if (fs.existsSync(candidateA)) {
-      filePath = candidateA;
-    } else if (fs.existsSync(candidateB)) {
-      filePath = candidateB;
+    function toSitePath(p) {
+      const rel = p.startsWith("/") ? `.${p}` : p;
+      return path.resolve(OUT_DIR, rel);
     }
-    if (!filePath) {
-      // Try directory index for extensionless or folder routes
-      const maybeDir = path.join(OUT_DIR, pathname);
-      if (fs.existsSync(maybeDir)) {
-        try {
-          const st = fs.statSync(maybeDir);
-          if (st.isDirectory()) {
-            const idx = path.join(maybeDir, "index.html");
-            if (fs.existsSync(idx)) filePath = idx;
-          }
-        } catch (_) {}
+
+    const ensureLeadingSlash = (p) => (p.startsWith("/") ? p : `/${p}`);
+    const basePath = ensureLeadingSlash(pathname);
+    const noTrailing = basePath !== "/" ? basePath.replace(/\/+$/, "") : basePath;
+    const attempts = [];
+
+    const primaryPath = noTrailing === "/" ? "/index.html" : noTrailing;
+    attempts.push(toSitePath(primaryPath));
+
+    if (!/\.html$/i.test(primaryPath)) {
+      attempts.push(toSitePath(`${primaryPath}.html`));
+    }
+
+    const withoutHtml = primaryPath.replace(/\.html$/i, "");
+    attempts.push(toSitePath(`${withoutHtml}/index.html`));
+
+    let filePath = null;
+    for (const candidate of attempts) {
+      if (!candidate) continue;
+      let stat;
+      try {
+        stat = fs.statSync(candidate);
+      } catch (_) {
+        continue;
+      }
+      if (stat.isFile()) {
+        filePath = candidate;
+        break;
+      }
+      if (stat.isDirectory()) {
+        const idx = path.join(candidate, "index.html");
+        if (fs.existsSync(idx)) {
+          filePath = idx;
+          break;
+        }
       }
     }
     if (!filePath) {

package/lib/build/mdx.js

@@ -12,6 +12,7 @@ const {
   withBase,
 } = require("../common");
 const yaml = require("js-yaml");
+const { getPageContext } = require("../page-context");
 
 function parseFrontmatter(src) {
   let input = String(src || "");
@@ -280,10 +281,19 @@ async function compileMdxFile(filePath, outPath, Layout, extraProps = {}) {
   const app = await loadAppWrapper();
   const dirLayout = await getNearestDirLayout(filePath);
   const contentNode = React.createElement(MDXContent, extraProps);
+  const layoutProps = dirLayout ? { ...extraProps } : null;
   const withLayout = dirLayout
-    ? React.createElement(dirLayout, null, contentNode)
+    ? React.createElement(dirLayout, layoutProps, contentNode)
     : contentNode;
-  const withApp = React.createElement(app.App, null, withLayout);
+  const PageContext = getPageContext();
+  const contextValue = {
+    navigation: extraProps && extraProps.navigation ? extraProps.navigation : null,
+    page: extraProps && extraProps.page ? extraProps.page : null,
+  };
+  const withContext = PageContext
+    ? React.createElement(PageContext.Provider, { value: contextValue }, withLayout)
+    : withLayout;
+  const withApp = React.createElement(app.App, null, withContext);
   const compMap = { ...components, a: Anchor };
   const page = MDXProvider
     ? React.createElement(MDXProvider, { components: compMap }, withApp)

package/lib/build/pages.js

@@ -1,6 +1,7 @@
 const { fs, fsp, path, CONTENT_DIR, OUT_DIR, ensureDirSync, htmlShell } = require('../common');
 const { log } = require('./log');
 const mdx = require('./mdx');
+const navigation = require('../components/navigation');
 
 // Cache: dir -> frontmatter data for _layout.mdx in that dir
 const LAYOUT_META = new Map();
@@ -44,7 +45,20 @@ function mapContentPathToOutput(filePath) {
 async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   const source = await fsp.readFile(filePath, 'utf8');
   const title = mdx.extractTitle(source);
-  const { body, head } = await mdx.compileMdxFile(filePath, outPath, null, extraProps);
+  const relContentPath = path.relative(CONTENT_DIR, filePath);
+  const normalizedRel = navigation.normalizeRelativePath(relContentPath);
+  const pageInfo = navigation.getPageInfo(normalizedRel);
+  const navData = navigation.buildNavigationForFile(normalizedRel);
+  const mergedProps = { ...(extraProps || {}) };
+  if (pageInfo) {
+    mergedProps.page = mergedProps.page
+      ? { ...pageInfo, ...mergedProps.page }
+      : pageInfo;
+  }
+  if (navData && !mergedProps.navigation) {
+    mergedProps.navigation = navData;
+  }
+  const { body, head } = await mdx.compileMdxFile(filePath, outPath, null, mergedProps);
   const needsHydrateViewer = body.includes('data-canopy-viewer');
   const needsHydrateSlider = body.includes('data-canopy-slider');
   const needsSearchForm = true; // search form runtime is global

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/package.json

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

package/ui/dist/index.mjs

@@ -120,7 +120,7 @@ function GridItem({ children, className = "", style = {}, ...rest }) {
 }
 function Grid({
   breakpointCols,
-  gap = "2rem",
+  gap = "1.618rem",
   paddingY = "0",
   className = "",
   style = {},
@@ -391,12 +391,12 @@ function SearchTabs({
   const toLabel = (t) => t && t.length ? t.charAt(0).toUpperCase() + t.slice(1) : "";
   const hasFilters = typeof onOpenFilters === "function";
   const filterBadge = activeFilterCount > 0 ? ` (${activeFilterCount})` : "";
-  return /* @__PURE__ */ React11.createElement("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-1" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { className: "canopy-search-tabs-wrapper" }, /* @__PURE__ */ React11.createElement(
     "div",
     {
       role: "tablist",
       "aria-label": "Search types",
-      className: "flex items-center gap-2"
+      className: "canopy-search-tabs"
     },
     orderedTypes.map((t) => {
       const active = String(type).toLowerCase() === String(t).toLowerCase();
@@ -409,8 +409,7 @@ function SearchTabs({
           role: "tab",
           "aria-selected": active,
           type: "button",
-          onClick: () => onTypeChange && onTypeChange(t),
-          className: "px-3 py-2 text-sm rounded-t-md border-b-2 -mb-px transition-colors " + (active ? "border-brand-600 text-brand-700" : "border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300")
+          onClick: () => onTypeChange && onTypeChange(t)
         },
         toLabel(t),
         " (",