@canopy-iiif/app 0.12.5 → 0.12.7

package/lib/AGENTS.md

@@ -65,6 +65,7 @@ Logbook
 - 2025-09-27 / chatgpt: Documented Tailwind token flow in `app/styles/tailwind.config.mts`, compiled UI Sass variables during config load, and exposed `stylesheetHref`/`Stylesheet` helpers via `@canopy-iiif/app/head` so `_app.mdx` can reference the generated CSS directly.
 - 2025-09-27 / chatgpt: Expanded search indexing to harvest MDX pages (respecting frontmatter/layout types), injected BASE_PATH hydration data into search.html, and reworked `mdx.extractTitle()` so generated records surface real headings instead of `Untitled`.
 - 2025-10-19 / chatgpt: Embedded the Tailwind preset/plugin in a packaged config so dev/build fall back automatically; removed `app/styles/tailwind.config.*` from the default app and switched the public stylesheet to Tailwind’s CSS-first (`@import 'tailwindcss'; @theme { ... }`) workflow.
+- 2025-10-20 / chatgpt: Added `lib/config-path.js` to resolve `canopy.yml` from the workspace root (preferring `options.cwd`, then npm `INIT_CWD`, then `process.cwd()`) and updated all loaders (theme, common base URL, search metadata, IIIF builder, featured manifests) to use it so hosted builds and Tailwind runs inside `node_modules/@canopy-iiif/app/ui` pick up user theme settings.
 
 Verification Commands
 ---------------------

package/lib/build/iiif.js

@@ -14,6 +14,7 @@ const {
   rootRelativeHref,
   canopyBodyClassForType,
 } = require("../common");
+const {resolveCanopyConfigPath} = require("../config-path");
 const mdx = require("./mdx");
 const {log, logLine, logResponse} = require("./log");
 const { getPageContext } = require("../page-context");
@@ -1109,7 +1110,7 @@ async function rebuildManifestIndexFromCache() {
 }
 
 async function loadConfig() {
-  const cfgPath = path.resolve("canopy.yml");
+  const cfgPath = resolveCanopyConfigPath();
   if (!fs.existsSync(cfgPath)) return {};
   const raw = await fsp.readFile(cfgPath, "utf8");
   let cfg = {};

package/lib/common.js

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const fsp = fs.promises;
 const path = require('path');
+const { resolveCanopyConfigPath } = require('./config-path');
 
 const CONTENT_DIR = path.resolve('content');
 const OUT_DIR = path.resolve('site');
@@ -29,7 +30,7 @@ function resolveThemeAppearance() {
 function readYamlConfigBaseUrl() {
   try {
     const y = require('js-yaml');
-    const p = path.resolve(process.env.CANOPY_CONFIG || 'canopy.yml');
+    const p = resolveCanopyConfigPath();
     if (!fs.existsSync(p)) return '';
     const raw = fs.readFileSync(p, 'utf8');
     const data = y.load(raw) || {};

package/lib/components/featured.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const yaml = require('js-yaml');
 const { rootRelativeHref } = require('../common');
+const { resolveCanopyConfigPath } = require('../config-path');
 
 function firstLabelString(label) {
   if (!label) return 'Untitled';
@@ -85,7 +86,7 @@ function findSlugByIdFromDiskSync(nid) {
 function readFeaturedFromCacheSync() {
   try {
     const debug = !!process.env.CANOPY_DEBUG_FEATURED;
-    const cfg = readYaml(path.resolve('canopy.yml')) || {};
+    const cfg = readYaml(resolveCanopyConfigPath()) || {};
     const featured = Array.isArray(cfg && cfg.featured) ? cfg.featured : [];
     if (!featured.length) return [];
     const idx = readJson(path.resolve('.cache/iiif/index.json')) || {};

package/lib/config-path.js

@@ -0,0 +1,28 @@
+const path = require('path');
+
+const DEFAULT_CONFIG_NAME = 'canopy.yml';
+
+function resolveWorkspaceRoot(options = {}) {
+  const rawCwd = options && options.cwd ? String(options.cwd).trim() : '';
+  if (rawCwd) return path.resolve(rawCwd);
+  const initCwd = String(process.env.INIT_CWD || '').trim();
+  if (initCwd) return path.resolve(initCwd);
+  return process.cwd();
+}
+
+function resolveCanopyConfigPath(options = {}) {
+  const root = resolveWorkspaceRoot(options);
+  const explicit = options && options.configPath ? String(options.configPath).trim() : '';
+  if (explicit) {
+    return path.isAbsolute(explicit) ? explicit : path.resolve(root, explicit);
+  }
+  const override = options && options.configFile ? String(options.configFile).trim() : '';
+  const envOverride = String(process.env.CANOPY_CONFIG || '').trim();
+  const fileName = override || envOverride || DEFAULT_CONFIG_NAME;
+  return path.resolve(root, fileName);
+}
+
+module.exports = {
+  resolveWorkspaceRoot,
+  resolveCanopyConfigPath,
+};

package/lib/search/search.js

@@ -12,6 +12,7 @@ const {
   htmlShell,
   canopyBodyClassForType,
 } = require('../common');
+const { resolveCanopyConfigPath } = require('../config-path');
 
 const SEARCH_TEMPLATES_ALIAS = '__CANOPY_SEARCH_RESULT_TEMPLATES__';
 const SEARCH_TEMPLATES_CACHE_DIR = path.resolve('.cache/search');
@@ -444,10 +445,9 @@ async function writeSearchIndex(records) {
     let resultsConfigEntries = [];
     try {
       const yaml = require('js-yaml');
-      const common = require('../common');
-      const cfgPath = common.path.resolve(process.env.CANOPY_CONFIG || 'canopy.yml');
-      if (common.fs.existsSync(cfgPath)) {
-        const raw = common.fs.readFileSync(cfgPath, 'utf8');
+      const cfgPath = resolveCanopyConfigPath();
+      if (fs.existsSync(cfgPath)) {
+        const raw = fs.readFileSync(cfgPath, 'utf8');
         const data = yaml.load(raw) || {};
         const searchCfg = data && data.search ? data.search : {};
         const tabs = searchCfg && searchCfg.tabs ? searchCfg.tabs : {};

package/package.json

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

package/ui/dist/index.mjs

@@ -2187,6 +2187,8 @@ function clampProgress(value) {
 
 // ui/src/content/timeline/Timeline.jsx
 var DAY_MS = 24 * 60 * 60 * 1e3;
+var DEFAULT_TRACK_HEIGHT = 640;
+var MIN_HEIGHT_PER_POINT = 220;
 function getThresholdMs(threshold, granularity) {
   const value = Number(threshold);
   if (!Number.isFinite(value) || value <= 0) return 0;
@@ -2316,6 +2318,31 @@ function sanitizePoints(points) {
     };
   }).filter(Boolean);
 }
+function resolveTrackHeight(height, pointCount) {
+  const minimumPx = Math.max(
+    DEFAULT_TRACK_HEIGHT,
+    pointCount * MIN_HEIGHT_PER_POINT
+  );
+  const fallback = `${minimumPx}px`;
+  if (height == null) return fallback;
+  if (typeof height === "number") {
+    const numeric = Number(height);
+    if (Number.isFinite(numeric)) {
+      return `${Math.max(numeric, pointCount * MIN_HEIGHT_PER_POINT)}px`;
+    }
+    return fallback;
+  }
+  if (typeof height === "string") {
+    const trimmed = height.trim();
+    if (!trimmed) return fallback;
+    const numeric = Number(trimmed);
+    if (Number.isFinite(numeric)) {
+      return `${Math.max(numeric, pointCount * MIN_HEIGHT_PER_POINT)}px`;
+    }
+    return trimmed;
+  }
+  return fallback;
+}
 function TimelineConnector({ side, isActive, highlight }) {
   const connectorClasses = [
     "canopy-timeline__connector",
@@ -2332,7 +2359,7 @@ function renderResourceSection(point) {
   const manifestCards = Array.isArray(point.manifests) ? point.manifests.filter(Boolean) : [];
   const legacyResources = Array.isArray(point.resources) ? point.resources.filter(Boolean) : [];
   if (!manifestCards.length && !legacyResources.length) return null;
-  return /* @__PURE__ */ React31.createElement("div", { className: "canopy-timeline__resources" }, /* @__PURE__ */ React31.createElement("ul", { className: "canopy-timeline__resources-list" }, manifestCards.map((manifest) => /* @__PURE__ */ React31.createElement("li", { key: manifest.id || manifest.href }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React31.createElement("div", { className: "canopy-timeline__resources" }, /* @__PURE__ */ React31.createElement("div", { className: "canopy-timeline__resources-list" }, manifestCards.map((manifest) => /* @__PURE__ */ React31.createElement("div", { key: manifest.id || manifest.href }, /* @__PURE__ */ React31.createElement(
     TeaserCard,
     {
       href: manifest.href,
@@ -2342,7 +2369,7 @@ function renderResourceSection(point) {
       thumbnail: manifest.thumbnail,
       type: manifest.type || "work"
     }
-  ))), legacyResources.map((resource, idx) => /* @__PURE__ */ React31.createElement("li", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React31.createElement(
+  ))), legacyResources.map((resource, idx) => /* @__PURE__ */ React31.createElement("div", { key: resource.id || resource.href || `legacy-${idx}` }, /* @__PURE__ */ React31.createElement(
     TeaserCard,
     {
       href: resource.href,
@@ -2359,7 +2386,7 @@ function Timeline({
   description,
   range: rangeProp,
   locale: localeProp = "en-US",
-  height = 640,
+  height = DEFAULT_TRACK_HEIGHT,
   threshold: thresholdProp = null,
   steps = null,
   points: pointsProp,
@@ -2377,7 +2404,10 @@ function Timeline({
     [rawPoints]
   );
   const localeValue = payload && payload.locale ? payload.locale : localeProp;
-  const baseLocale = React31.useMemo(() => createLocale(localeValue), [localeValue]);
+  const baseLocale = React31.useMemo(
+    () => createLocale(localeValue),
+    [localeValue]
+  );
   const rangeInput = payload && payload.range ? payload.range : rangeProp || {};
   const rangeOverrides = React31.useMemo(
     () => deriveRangeOverrides(sanitizedPoints, rangeInput),
@@ -2425,7 +2455,9 @@ function Timeline({
     }),
     [pointsWithPosition, thresholdMs, effectiveRange.granularity, baseLocale]
   );
-  const [expandedGroupIds, setExpandedGroupIds] = React31.useState(() => /* @__PURE__ */ new Set());
+  const [expandedGroupIds, setExpandedGroupIds] = React31.useState(
+    () => /* @__PURE__ */ new Set()
+  );
   React31.useEffect(() => {
     setExpandedGroupIds((prev) => {
       if (!prev || prev.size === 0) return prev;
@@ -2449,8 +2481,7 @@ function Timeline({
       return next;
     });
   }, []);
-  const resolvedHeight = Number.isFinite(Number(height)) ? Number(height) : 640;
-  const trackHeight = Math.max(resolvedHeight, pointsWithPosition.length * 220);
+  const trackHeight = resolveTrackHeight(height, pointsWithPosition.length);
   const containerClasses = ["canopy-timeline", className].filter(Boolean).join(" ");
   const rangeLabel = formatRangeLabel(effectiveRange);
   function renderPointEntry(point) {
@@ -2459,7 +2490,7 @@ function Timeline({
       "canopy-timeline__point-wrapper",
       point.side === "left" ? "canopy-timeline__point-wrapper--left" : "canopy-timeline__point-wrapper--right"
     ].filter(Boolean).join(" ");
-    const wrapperStyle = { top: `calc(${point.progress * 100}% - 1rem)` };
+    const wrapperStyle = { top: `${point.progress * 100}%` };
     const cardClasses = [
       "canopy-timeline__point",
       point.id === activeId ? "is-active" : "",
@@ -2491,7 +2522,7 @@ function Timeline({
       "canopy-timeline__point-wrapper",
       entry.side === "left" ? "canopy-timeline__point-wrapper--left" : "canopy-timeline__point-wrapper--right"
     ].filter(Boolean).join(" ");
-    const wrapperStyle = { top: `calc(${entry.progress * 100}% - 1rem)` };
+    const wrapperStyle = { top: `${entry.progress * 100}%` };
     const isExpanded = expandedGroupIds.has(entry.id);
     const hasActivePoint = entry.points.some((point) => point.id === activeId);
     const connector = /* @__PURE__ */ React31.createElement(
@@ -2508,7 +2539,7 @@ function Timeline({
       hasActivePoint ? "is-active" : ""
     ].filter(Boolean).join(" ");
     const countLabel = `${entry.count} event${entry.count > 1 ? "s" : ""}`;
-    const header = /* @__PURE__ */ React31.createElement("div", { className: "canopy-timeline__group-header" }, /* @__PURE__ */ React31.createElement("div", { className: "canopy-timeline__group-summary" }, /* @__PURE__ */ React31.createElement("span", { className: "canopy-timeline__group-count" }, countLabel), /* @__PURE__ */ React31.createElement("span", { className: "canopy-timeline__group-range" }, entry.label)), /* @__PURE__ */ React31.createElement(
+    const header = /* @__PURE__ */ React31.createElement("div", { className: "canopy-timeline__group-header" }, /* @__PURE__ */ React31.createElement("div", { className: "canopy-timeline__group-summary" }, /* @__PURE__ */ React31.createElement("span", { className: "canopy-timeline__point-date" }, entry.label), /* @__PURE__ */ React31.createElement("span", { className: "canopy-timeline__group-count" }, countLabel)), /* @__PURE__ */ React31.createElement(
       "button",
       {
         type: "button",
@@ -2529,7 +2560,7 @@ function Timeline({
         ].filter(Boolean).join(" "),
         onClick: () => setActiveId(point.id)
       },
-      /* @__PURE__ */ React31.createElement("span", { className: "canopy-timeline__group-point-date" }, point.meta.label),
+      /* @__PURE__ */ React31.createElement("span", { className: "canopy-timeline__point-date" }, point.meta.label),
       /* @__PURE__ */ React31.createElement("span", { className: "canopy-timeline__group-point-title" }, point.title)
     ))) : null;
     const groupCard = /* @__PURE__ */ React31.createElement("div", { className: groupClasses }, header, groupPoints);
@@ -2549,7 +2580,7 @@ function Timeline({
     {
       className: "canopy-timeline__list",
       role: "list",
-      style: { minHeight: `${trackHeight}px` }
+      style: { minHeight: trackHeight }
     },
     /* @__PURE__ */ React31.createElement("div", { className: "canopy-timeline__spine", "aria-hidden": "true" }),
     renderSteps(stepsValue, effectiveRange),
@@ -2570,7 +2601,7 @@ function renderSteps(stepSize, range) {
         "span",
         {
           key: "timeline-step-start",
-          className: "canopy-timeline__step canopy-timeline__step--edge",
+          className: "canopy-timeline__step canopy-timeline__step--start",
           style: { top: "0%" },
           "aria-hidden": "true"
         },
@@ -2583,8 +2614,8 @@ function renderSteps(stepSize, range) {
         "span",
         {
           key: "timeline-step-end",
-          className: "canopy-timeline__step canopy-timeline__step--edge",
-          style: { top: "calc(100% - 1px)" },
+          className: "canopy-timeline__step canopy-timeline__step--end",
+          style: { top: "100%" },
           "aria-hidden": "true"
         },
         /* @__PURE__ */ React31.createElement("span", { className: "canopy-timeline__step-line" }),