@canopy-iiif/app 0.12.2 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.12.2",
+  "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,18 +759,18 @@ 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;
@@ -770,7 +825,7 @@ 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;
@@ -781,10 +836,10 @@ function SubNavigation({
       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 (_) {
@@ -815,7 +870,7 @@ function SubNavigation({
 
 // 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";
@@ -1215,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;
@@ -2030,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";
@@ -2137,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;
@@ -2183,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;
   }