@canopy-iiif/app 0.12.1 → 0.12.3

package/lib/build/mdx.js

@@ -81,6 +81,21 @@ function parseFrontmatter(src) {
   return {data, content};
 }
 
+function isRoadmapEntry(frontmatterData) {
+  if (!frontmatterData || typeof frontmatterData !== "object") return false;
+  if (!Object.prototype.hasOwnProperty.call(frontmatterData, "roadmap")) return false;
+  const raw = frontmatterData.roadmap;
+  if (typeof raw === "boolean") return raw;
+  if (typeof raw === "number") return raw !== 0;
+  if (typeof raw === "string") {
+    const normalized = raw.trim().toLowerCase();
+    if (!normalized) return false;
+    if (["false", "0", "no", "off", "none"].includes(normalized)) return false;
+    return true;
+  }
+  return !!raw;
+}
+
 // ESM-only in v3; load dynamically from CJS
 let MDXProviderCached = null;
 async function getMdxProvider() {
@@ -1159,6 +1174,7 @@ module.exports = {
   extractMarkdownSummary,
   isReservedFile,
   parseFrontmatter,
+  isRoadmapEntry,
   compileMdxFile,
   compileMdxToComponent,
   loadCustomLayout,

package/lib/build/pages.js

@@ -77,8 +77,9 @@ function mapContentPathToOutput(filePath) {
   return path.join(OUT_DIR, outRel);
 }
 
-async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
-  const source = await fsp.readFile(filePath, 'utf8');
+async function renderContentMdxToHtml(filePath, outPath, extraProps = {}, sourceOverride = null) {
+  const sourceRaw = sourceOverride != null ? sourceOverride : await fsp.readFile(filePath, 'utf8');
+  const source = typeof sourceRaw === 'string' ? sourceRaw : String(sourceRaw || '');
   const title = mdx.extractTitle(source);
   const relContentPath = path.relative(CONTENT_DIR, filePath);
   const normalizedRel = navigation.normalizeRelativePath(relContentPath);
@@ -259,12 +260,27 @@ async function processContentEntry(absPath, pagesMetadata = []) {
   if (/\.mdx$/i.test(absPath)) {
     if (mdx.isReservedFile(absPath)) return;
     const outPath = mapContentPathToOutput(absPath);
-    ensureDirSync(path.dirname(outPath));
     try {
+      const source = await fsp.readFile(absPath, 'utf8');
+      const frontmatter = typeof mdx.parseFrontmatter === 'function'
+        ? mdx.parseFrontmatter(source)
+        : { data: null };
+      const frontmatterData = frontmatter && isPlainObject(frontmatter.data) ? frontmatter.data : null;
+      const isRoadmap = frontmatterData && typeof mdx.isRoadmapEntry === 'function'
+        ? mdx.isRoadmapEntry(frontmatterData)
+        : false;
+      if (isRoadmap) {
+        try { await fsp.rm(outPath, { force: true }); } catch (_) {}
+        try {
+          log(`• Skipped roadmap page ${path.relative(process.cwd(), absPath)}\n`, 'yellow', { dim: true });
+        } catch (_) {}
+        return;
+      }
+      ensureDirSync(path.dirname(outPath));
       try { log(`• Processing MDX ${absPath}\n`, 'blue'); } catch (_) {}
       const base = path.basename(absPath);
       const extra = base.toLowerCase() === 'sitemap.mdx' ? { pages: pagesMetadata } : {};
-      const html = await renderContentMdxToHtml(absPath, outPath, extra);
+      const html = await renderContentMdxToHtml(absPath, outPath, extra, source);
       await fsp.writeFile(outPath, html || '', 'utf8');
       try { log(`✓ Built ${path.relative(process.cwd(), outPath)}\n`, 'green'); } catch (_) {}
     } catch (err) {

package/lib/components/navigation.js

@@ -88,6 +88,20 @@ function collectPagesSync() {
       } catch (_) {
         raw = "";
       }
+      let frontmatterData = null;
+      if (raw && typeof mdx.parseFrontmatter === "function") {
+        try {
+          const parsed = mdx.parseFrontmatter(raw);
+          if (parsed && parsed.data && typeof parsed.data === "object") {
+            frontmatterData = parsed.data;
+          }
+        } catch (_) {
+          frontmatterData = null;
+        }
+      }
+      const isRoadmap = frontmatterData && typeof mdx.isRoadmapEntry === "function"
+        ? mdx.isRoadmapEntry(frontmatterData)
+        : false;
       const {
         slug,
         segments: slugSegments,
@@ -114,6 +128,7 @@ function collectPagesSync() {
         fallbackTitle,
         sortKey: pageSortKey(normalizedRel),
         topSegment: slugSegments[0] || firstSegment || "",
+        isRoadmap,
       };
       pages.push(page);
     }
@@ -138,6 +153,7 @@ function createNode(slug) {
     sortKey: slug || name,
     sourcePage: null,
     children: [],
+    isRoadmap: false,
   };
 }
 
@@ -173,6 +189,7 @@ function getNavigationCache() {
       node.relativePath = page.relativePath;
       node.sortKey = page.sortKey || node.sortKey;
       node.hasContent = true;
+      node.isRoadmap = !!page.isRoadmap;
     }
   }
 
@@ -240,6 +257,7 @@ function cloneNode(node, currentSlug) {
     hasContent: node.hasContent,
     relativePath: node.relativePath,
     children,
+    isRoadmap: !!node.isRoadmap,
   };
 }
 

package/package.json

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

package/ui/dist/server.mjs

@@ -358,6 +358,7 @@ __export(interstitials_exports, {
 // ui/src/interstitials/Hero.jsx
 import React9 from "react";
 import helpers from "@canopy-iiif/app/lib/components/featured.js";
+import navigationHelpers from "@canopy-iiif/app/lib/components/navigation.js";
 
 // ui/src/interstitials/hero-utils.js
 function computeHeroHeightStyle(height) {
@@ -520,11 +521,26 @@ function normalizeBackground(value) {
     return "theme";
   }
 }
+function findNodePathBySlug(node, targetSlug) {
+  if (!node || !targetSlug) return null;
+  const normalizedTarget = String(targetSlug || "");
+  if (!normalizedTarget) return null;
+  if (node.slug === normalizedTarget) return [node];
+  const children = Array.isArray(node.children) ? node.children : [];
+  for (const child of children) {
+    const path = findNodePathBySlug(child, normalizedTarget);
+    if (path && path.length) {
+      return [node, ...path];
+    }
+  }
+  return null;
+}
 function normalizeVariant(value) {
   try {
     const raw = value == null ? "" : String(value);
     const normalized = raw.trim().toLowerCase();
-    return normalized === "text" ? "text" : "featured";
+    if (normalized === "breadcrumb" || normalized === "text") return "breadcrumb";
+    return "featured";
   } catch (_) {
     return "featured";
   }
@@ -542,12 +558,15 @@ function Hero({
   style = {},
   background = "theme",
   variant = "featured",
+  homeLabel = "Home",
   ...rest
 }) {
   const normalizedVariant = normalizeVariant(variant);
-  const isTextVariant = normalizedVariant === "text";
+  const isBreadcrumbVariant = normalizedVariant === "breadcrumb";
+  const PageContext = navigationHelpers && typeof navigationHelpers.getPageContext === "function" ? navigationHelpers.getPageContext() : null;
+  const pageContext = PageContext ? React9.useContext(PageContext) : null;
   let orderedSlides = [];
-  if (!isTextVariant) {
+  if (!isBreadcrumbVariant) {
     const resolved = resolveFeaturedItem({ item, index, random });
     const helpersList = helpers && helpers.readFeaturedFromCacheSync ? helpers.readFeaturedFromCacheSync() : [];
     const slides = [];
@@ -582,15 +601,15 @@ function Hero({
   }
   const heroHeight = computeHeroHeightStyle(height);
   const heroStyles = { ...style || {} };
-  if (heroHeight && heroHeight.height && !isTextVariant) {
+  if (heroHeight && heroHeight.height && !isBreadcrumbVariant) {
     heroStyles["--hero-height"] = heroHeight.height;
   }
-  if (isTextVariant) {
+  if (isBreadcrumbVariant) {
     heroStyles["--hero-height"] = "auto";
   }
   const derivedDescription = description ? String(description) : "";
   const normalizedLinks = normalizeLinks(links);
-  const primarySlide = !isTextVariant ? orderedSlides[0] || null : null;
+  const primarySlide = !isBreadcrumbVariant ? orderedSlides[0] || null : null;
   const overlayTitle = headline || primarySlide && primarySlide.title || "";
   const defaultLinkHref = applyBasePath(
     primarySlide && primarySlide.href ? primarySlide.href : "#"
@@ -602,10 +621,46 @@ function Hero({
       type: "primary"
     }
   ].filter(Boolean);
-  const finalOverlayLinks = isTextVariant ? normalizedLinks : overlayLinks;
+  const finalOverlayLinks = isBreadcrumbVariant ? normalizedLinks : overlayLinks;
+  const breadcrumbItems = React9.useMemo(() => {
+    if (!isBreadcrumbVariant) return [];
+    const items = [];
+    const label = typeof homeLabel === "string" ? homeLabel.trim() : "";
+    if (label) {
+      items.push({ title: label, href: applyBasePath("/") });
+    }
+    const navigation = pageContext && pageContext.navigation ? pageContext.navigation : null;
+    const page = pageContext && pageContext.page ? pageContext.page : null;
+    const slug = page && page.slug || navigation && navigation.currentSlug || "";
+    const rootNode = navigation && navigation.root ? navigation.root : null;
+    if (!slug || !rootNode) return items;
+    const path = findNodePathBySlug(rootNode, slug);
+    if (!path || !path.length) return items;
+    path.forEach((node) => {
+      if (!node) return;
+      const title = node.title || node.slug || "";
+      if (!title) return;
+      const href = node.href ? applyBasePath(node.href) : null;
+      items.push({ title, href });
+    });
+    return items;
+  }, [isBreadcrumbVariant, pageContext, homeLabel]);
+  const breadcrumbNode = isBreadcrumbVariant && breadcrumbItems.length ? /* @__PURE__ */ React9.createElement("nav", { className: "canopy-interstitial__breadcrumb", "aria-label": "Breadcrumb" }, breadcrumbItems.map((item2, idx) => {
+    const isLast = idx === breadcrumbItems.length - 1;
+    const key = `${item2.title || idx}-${idx}`;
+    const content = !isLast && item2.href ? /* @__PURE__ */ React9.createElement("a", { href: item2.href }, item2.title) : /* @__PURE__ */ React9.createElement("span", { className: "canopy-interstitial__breadcrumb-current" }, item2.title);
+    return /* @__PURE__ */ React9.createElement(React9.Fragment, { key }, idx > 0 ? /* @__PURE__ */ React9.createElement(
+      "span",
+      {
+        className: "canopy-interstitial__breadcrumb-separator",
+        "aria-hidden": "true"
+      },
+      ">"
+    ) : null, content);
+  })) : null;
   const normalizedBackground = normalizeBackground(background);
   const backgroundClassName = normalizedBackground === "transparent" ? "canopy-interstitial--bg-transparent" : "";
-  const variantClassName = isTextVariant ? "canopy-interstitial--hero-text" : "canopy-interstitial--hero-featured";
+  const variantClassName = isBreadcrumbVariant ? "canopy-interstitial--hero-breadcrumb" : "canopy-interstitial--hero-featured";
   const containerClassName = [
     "canopy-interstitial",
     "canopy-interstitial--hero",
@@ -704,20 +759,21 @@ function Hero({
     style: heroStyles,
     ...cleanedProps
   };
-  if (!isTextVariant) {
+  if (!isBreadcrumbVariant) {
     sectionProps["data-canopy-hero-slider"] = "1";
     sectionProps["data-transition"] = normalizedTransition;
   } else {
-    sectionProps["data-canopy-hero-variant"] = "text";
+    sectionProps["data-canopy-hero-variant"] = "breadcrumb";
   }
-  return /* @__PURE__ */ React9.createElement("section", { ...sectionProps }, isTextVariant ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__layout canopy-interstitial__layout--text" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__body" }, overlayContent))) : /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" }))));
+  return /* @__PURE__ */ React9.createElement("section", { ...sectionProps }, isBreadcrumbVariant ? /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__layout canopy-interstitial__layout--breadcrumb" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__body" }, breadcrumbNode, overlayContent))) : /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__layout" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__panel" }, /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__body" }, overlayContent)), /* @__PURE__ */ React9.createElement("div", { className: "canopy-interstitial__media-group" }, renderSlider({ showVeil: false, captionVariant: "static" }))));
 }
 
 // ui/src/layout/SubNavigation.jsx
 import React10 from "react";
-import navigationHelpers from "@canopy-iiif/app/lib/components/navigation.js";
+import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
 function resolveRelativeCandidate(page, current) {
-  if (page && typeof page.relativePath === "string" && page.relativePath) return page.relativePath;
+  if (page && typeof page.relativePath === "string" && page.relativePath)
+    return page.relativePath;
   if (page && typeof page.slug === "string" && page.slug) return page.slug;
   if (typeof current === "string" && current) return current;
   return "";
@@ -731,32 +787,33 @@ function renderNodes(nodes, parentKey = "node") {
     const showChildren = hasChildren && (node.isExpanded || node.depth === 0);
     const depth = typeof node.depth === "number" ? Math.max(0, node.depth) : 0;
     const depthClass = `depth-${Math.min(depth, 5)}`;
-    const classes = [
-      "canopy-sub-navigation__link",
-      depthClass
-    ];
-    if (!node.href) classes.push("is-label");
+    const isRoadmap = !!node.isRoadmap;
+    const isInteractive = !!(node.href && !isRoadmap);
+    const classes = ["canopy-sub-navigation__link", depthClass];
+    if (!node.href && !isRoadmap) classes.push("is-label");
+    if (isRoadmap) classes.push("is-disabled");
     if (node.isActive) classes.push("is-active");
     const linkClass = classes.join(" ");
-    const Tag = node.href ? "a" : "span";
-    return /* @__PURE__ */ React10.createElement(
-      "li",
+    const Tag = isInteractive ? "a" : "span";
+    const badge = isRoadmap ? /* @__PURE__ */ React10.createElement("span", { className: "canopy-sub-navigation__badge" }, "Beta") : null;
+    return /* @__PURE__ */ React10.createElement("li", { key, className: "canopy-sub-navigation__item", "data-depth": depth }, /* @__PURE__ */ React10.createElement(
+      Tag,
       {
-        key,
-        className: "canopy-sub-navigation__item",
-        "data-depth": depth
+        className: linkClass,
+        href: isInteractive ? node.href : void 0,
+        "aria-current": node.isActive ? "page" : void 0,
+        tabIndex: isInteractive ? void 0 : -1
       },
-      /* @__PURE__ */ React10.createElement(
-        Tag,
-        {
-          className: linkClass,
-          href: node.href || void 0,
-          "aria-current": node.isActive ? "page" : void 0
-        },
-        node.title || node.slug
-      ),
-      showChildren ? /* @__PURE__ */ React10.createElement("ul", { className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested", role: "list" }, renderNodes(node.children, key)) : null
-    );
+      node.title || node.slug,
+      badge
+    ), showChildren ? /* @__PURE__ */ React10.createElement(
+      "ul",
+      {
+        className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested",
+        role: "list"
+      },
+      renderNodes(node.children, key)
+    ) : null);
   });
 }
 function SubNavigation({
@@ -768,20 +825,21 @@ function SubNavigation({
   heading,
   ariaLabel
 }) {
-  const PageContext = navigationHelpers && navigationHelpers.getPageContext ? navigationHelpers.getPageContext() : null;
+  const PageContext = navigationHelpers2 && navigationHelpers2.getPageContext ? navigationHelpers2.getPageContext() : null;
   const context = PageContext ? React10.useContext(PageContext) : null;
   const contextNavigation = context && context.navigation ? context.navigation : null;
   const contextPage = context && context.page ? context.page : null;
   const effectiveNavigation = navigationProp || contextNavigation;
   const effectivePage = page || contextPage;
   const resolvedNavigation = React10.useMemo(() => {
-    if (effectiveNavigation && effectiveNavigation.root) return effectiveNavigation;
+    if (effectiveNavigation && effectiveNavigation.root)
+      return effectiveNavigation;
     const candidate = resolveRelativeCandidate(effectivePage, current);
     if (!candidate) return effectiveNavigation || null;
-    const helpers2 = navigationHelpers && navigationHelpers.buildNavigationForFile ? navigationHelpers : null;
+    const helpers2 = navigationHelpers2 && navigationHelpers2.buildNavigationForFile ? navigationHelpers2 : null;
     if (!helpers2) return effectiveNavigation || null;
     try {
-      const normalized = navigationHelpers.normalizeRelativePath ? navigationHelpers.normalizeRelativePath(candidate) : candidate;
+      const normalized = navigationHelpers2.normalizeRelativePath ? navigationHelpers2.normalizeRelativePath(candidate) : candidate;
       const built = helpers2.buildNavigationForFile(normalized);
       if (built) return built;
     } catch (_) {
@@ -798,12 +856,21 @@ function SubNavigation({
   if (!Object.prototype.hasOwnProperty.call(inlineStyle, "--sub-nav-indent")) {
     inlineStyle["--sub-nav-indent"] = "0.85rem";
   }
-  return /* @__PURE__ */ React10.createElement("nav", { className: combinedClassName, style: inlineStyle, "aria-label": navLabel }, finalHeading ? /* @__PURE__ */ React10.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null, /* @__PURE__ */ React10.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root")));
+  return /* @__PURE__ */ React10.createElement(
+    "nav",
+    {
+      className: combinedClassName,
+      style: inlineStyle,
+      "aria-label": navLabel
+    },
+    finalHeading ? /* @__PURE__ */ React10.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null,
+    /* @__PURE__ */ React10.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root"))
+  );
 }
 
 // ui/src/layout/Layout.jsx
 import React12 from "react";
-import navigationHelpers2 from "@canopy-iiif/app/lib/components/navigation.js";
+import navigationHelpers3 from "@canopy-iiif/app/lib/components/navigation.js";
 
 // ui/src/layout/ContentNavigation.jsx
 import React11 from "react";
@@ -1203,7 +1270,7 @@ function Layout({
   contentNavigationClassName = "",
   ...rest
 }) {
-  const PageContext = navigationHelpers2 && typeof navigationHelpers2.getPageContext === "function" ? navigationHelpers2.getPageContext() : null;
+  const PageContext = navigationHelpers3 && typeof navigationHelpers3.getPageContext === "function" ? navigationHelpers3.getPageContext() : null;
   const context = PageContext ? React12.useContext(PageContext) : null;
   const pageHeadings = React12.useMemo(() => {
     const headings = context && context.page ? context.page.headings : null;
@@ -2018,7 +2085,7 @@ function Container({
 
 // ui/src/content/ReferencedItems.jsx
 import React23 from "react";
-import navigationHelpers3 from "@canopy-iiif/app/lib/components/navigation.js";
+import navigationHelpers4 from "@canopy-iiif/app/lib/components/navigation.js";
 
 // ui/src/layout/Card.jsx
 import React22, { useEffect as useEffect5, useRef, useState as useState5 } from "react";
@@ -2125,7 +2192,7 @@ function Card({
 // ui/src/content/ReferencedItems.jsx
 function useReferencedItems(itemsProp) {
   if (Array.isArray(itemsProp)) return itemsProp;
-  const PageContext = navigationHelpers3 && typeof navigationHelpers3.getPageContext === "function" ? navigationHelpers3.getPageContext() : null;
+  const PageContext = navigationHelpers4 && typeof navigationHelpers4.getPageContext === "function" ? navigationHelpers4.getPageContext() : null;
   if (!PageContext) return [];
   const context = React23.useContext(PageContext);
   const items = context && context.page ? context.page.referencedItems : null;
@@ -2171,13 +2238,13 @@ function ReferencedItems({
 
 // ui/src/content/References.jsx
 import React24 from "react";
-import navigationHelpers4 from "@canopy-iiif/app/lib/components/navigation.js";
+import navigationHelpers5 from "@canopy-iiif/app/lib/components/navigation.js";
 function getPageContext() {
-  if (!navigationHelpers4 || typeof navigationHelpers4.getPageContext !== "function") {
+  if (!navigationHelpers5 || typeof navigationHelpers5.getPageContext !== "function") {
     return null;
   }
   try {
-    return navigationHelpers4.getPageContext();
+    return navigationHelpers5.getPageContext();
   } catch (_) {
     return null;
   }
@@ -2437,6 +2504,7 @@ function DocsCodeBlock(props = {}) {
     display: "inline"
   };
   const showFilename = Boolean(filename);
+  const showHeader = showFilename || enableCopy;
   const { style: preStyleOverride, className: preClassName, ...preRest } = rest;
   const mergedPreStyle = Object.assign({}, preStyle, preStyleOverride || {});
   const lineElements = lines.map((line, index) => {
@@ -2453,7 +2521,7 @@ function DocsCodeBlock(props = {}) {
   return React30.createElement(
     "div",
     { style: containerStyle },
-    React30.createElement(
+    showHeader ? React30.createElement(
       "div",
       { style: headerStyle },
       React30.createElement("span", null, showFilename ? filename : null),
@@ -2475,7 +2543,7 @@ function DocsCodeBlock(props = {}) {
         },
         copied ? "Copied" : "Copy"
       ) : null
-    ),
+    ) : null,
     React30.createElement(
       "pre",
       { ...preRest, className: preClassName, style: mergedPreStyle },