@canopy-iiif/app 0.8.3 → 0.8.5

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/build/styles.js

@@ -97,6 +97,52 @@ async function ensureStyles() {
     }
   }
 
+  function injectThemeTokens(targetPath) {
+    try {
+      const { loadCanopyTheme } = require("@canopy-iiif/app/ui/theme");
+      const theme = loadCanopyTheme();
+      const themeCss = theme && theme.css ? theme.css.trim() : "";
+      if (!themeCss) return;
+
+      let existing = "";
+      try {
+        existing = fs.readFileSync(targetPath, "utf8");
+      } catch (_) {}
+
+      const marker = "/* canopy-theme */";
+      const markerEnd = "/* canopy-theme:end */";
+      const markerRegex = new RegExp(`${marker}[\\s\\S]*?${markerEnd}\\n?`, "g");
+      const sanitized = existing.replace(markerRegex, "");
+
+      const layerRegex = /@layer properties\{([\s\S]*?)\}(?=@|$)/;
+      const match = layerRegex.exec(sanitized);
+      let before = sanitized;
+      let after = "";
+      let customRulesBlock = "";
+
+      if (match) {
+        before = sanitized.slice(0, match.index);
+        after = sanitized.slice(match.index + match[0].length);
+        const layerBody = match[1] || "";
+        const boundaryMatch = /}\s*:/.exec(layerBody);
+        if (boundaryMatch) {
+          const start = boundaryMatch.index + boundaryMatch[0].length - 1;
+          const customSegment = layerBody.slice(start).trim();
+          if (customSegment) {
+            const normalized = customSegment.endsWith("}")
+              ? customSegment
+              : `${customSegment}}`;
+            customRulesBlock = `@layer properties {\n  ${normalized}\n}\n`;
+          }
+        }
+      }
+
+      const themeBlock = `${marker}\n${themeCss}\n${markerEnd}\n`;
+      const next = `${before}${themeBlock}${customRulesBlock}${after}`;
+      fs.writeFileSync(targetPath, next, "utf8");
+    } catch (_) {}
+  }
+
   if (configPath && (inputCss || generatedInput)) {
     const ok = buildTailwindCli({
       input: inputCss || generatedInput,
@@ -104,7 +150,10 @@ async function ensureStyles() {
       config: configPath,
       minify: true,
     });
-    if (ok) return; // Tailwind compiled CSS
+    if (ok) {
+      injectThemeTokens(dest);
+      return; // Tailwind compiled CSS
+    }
   }
 
   function isTailwindSource(p) {
@@ -118,18 +167,21 @@ async function ensureStyles() {
   if (fs.existsSync(customAppCss)) {
     if (!isTailwindSource(customAppCss)) {
       await fsp.copyFile(customAppCss, dest);
+      injectThemeTokens(dest);
       return;
     }
   }
   if (fs.existsSync(customContentCss)) {
     if (!isTailwindSource(customContentCss)) {
       await fsp.copyFile(customContentCss, dest);
+      injectThemeTokens(dest);
       return;
     }
   }
 
   const css = `:root{--max-w:760px;--muted:#6b7280}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;max-width:var(--max-w);margin:2rem auto;padding:0 1rem;line-height:1.6}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 0;border-bottom:1px solid #e5e7eb}.site-footer{border-bottom:0;border-top:1px solid #e5e7eb;color:var(--muted)}.brand{font-weight:600}.content pre{background:#f6f8fa;padding:1rem;overflow:auto}.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f6f8fa;padding:.1rem .3rem;border-radius:4px}.tabs{display:flex;gap:.5rem;align-items:center;border-bottom:1px solid #e5e7eb;margin:.5rem 0}.tab{background:none;border:0;color:#374151;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer}.tab:hover{color:#111827}.tab-active{color:#2563eb;border:1px solid #e5e7eb;border-bottom:0;background:#fff}.masonry{column-gap:1rem;column-count:1}@media(min-width:768px){.masonry{column-count:2}}@media(min-width:1024px){.masonry{column-count:3}}.masonry>*{break-inside:avoid;margin-bottom:1rem;display:block}[data-grid-variant=masonry]{column-gap:var(--grid-gap,1rem);column-count:var(--cols-base,1)}@media(min-width:768px){[data-grid-variant=masonry]{column-count:var(--cols-md,2)}}@media(min-width:1024px){[data-grid-variant=masonry]{column-count:var(--cols-lg,3)}}[data-grid-variant=masonry]>*{break-inside:avoid;margin-bottom:var(--grid-gap,1rem);display:block}[data-grid-variant=grid]{display:grid;grid-template-columns:repeat(var(--cols-base,1),minmax(0,1fr));gap:var(--grid-gap,1rem)}@media(min-width:768px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr))}}@media(min-width:1024px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-lg,3),minmax(0,1fr))}}`;
   await fsp.writeFile(dest, css, "utf8");
+  injectThemeTokens(dest);
 }
 
 module.exports = { ensureStyles };

package/lib/common.js

@@ -8,6 +8,23 @@ const CACHE_DIR = path.resolve('.cache/mdx');
 const ASSETS_DIR = path.resolve('assets');
 
 const BASE_PATH = String(process.env.CANOPY_BASE_PATH || '').replace(/\/$/, '');
+let cachedAppearance = null;
+
+function resolveThemeAppearance() {
+  if (cachedAppearance) return cachedAppearance;
+  cachedAppearance = 'light';
+  try {
+    const { loadCanopyTheme } = require('@canopy-iiif/app/ui/theme');
+    if (typeof loadCanopyTheme === 'function') {
+      const theme = loadCanopyTheme();
+      const appearance = theme && theme.appearance ? String(theme.appearance) : '';
+      if (appearance.toLowerCase() === 'dark') {
+        cachedAppearance = 'dark';
+      }
+    }
+  } catch (_) {}
+  return cachedAppearance;
+}
 
 function readYamlConfigBaseUrl() {
   try {
@@ -51,7 +68,9 @@ function htmlShell({ title, body, cssHref, scriptHref, headExtra }) {
   const scriptTag = scriptHref ? `<script defer src="${scriptHref}"></script>` : '';
   const extra = headExtra ? String(headExtra) : '';
   const cssTag = cssHref ? `<link rel="stylesheet" href="${cssHref}">` : '';
-  return `<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>${title}</title>${extra}${cssTag}${scriptTag}</head><body>${body}</body></html>`;
+  const appearance = resolveThemeAppearance();
+  const htmlClass = appearance === 'dark' ? ' class="dark"' : '';
+  return `<!doctype html><html lang="en"${htmlClass}><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>${title}</title>${extra}${cssTag}${scriptTag}</head><body>${body}</body></html>`;
 }
 
 function withBase(href) {
@@ -111,16 +130,19 @@ function absoluteUrl(p) {
   }
 }
 
-// Apply BASE_PATH to any absolute href/src attributes found in an HTML string.
+// Apply BASE_PATH to key URL-bearing attributes (href/src/action/formaction) in an HTML string.
 function applyBaseToHtml(html) {
   if (!BASE_PATH) return html;
   try {
     const out = String(html || '');
-    const normalizedBase = BASE_PATH.startsWith('/')
-      ? BASE_PATH.replace(/\/$/, '')
-      : `/${BASE_PATH.replace(/\/$/, '')}`;
+    const baseRaw = BASE_PATH.startsWith('/') ? BASE_PATH : `/${BASE_PATH}`;
+    const normalizedBase = baseRaw.replace(/\/$/, '');
     if (!normalizedBase || normalizedBase === '/') return out;
-    const pattern = /(href|src)=(['"])(\/(?!\/)[^'"\s]*)\2/g;
+
+    const attrPattern = '(?:href|src|action|formaction)';
+    const pathPattern = "\\/(?!\\/)[^'\"\\s<]*";
+    const pattern = new RegExp(`(${attrPattern})=(["'])((${pathPattern}))\\2`, 'g');
+
     return out.replace(pattern, (match, attr, quote, path) => {
       if (path === normalizedBase || path.startsWith(`${normalizedBase}/`)) {
         return match;

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,
+};