@canopy-iiif/app 0.9.0 → 0.9.2

package/lib/build/mdx.js

@@ -139,6 +139,67 @@ async function loadUiComponents() {
   return UI_COMPONENTS;
 }
 
+function slugifyHeading(text) {
+  try {
+    return String(text || '')
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9\s-]/g, '')
+      .replace(/\s+/g, '-');
+  } catch (_) {
+    return '';
+  }
+}
+
+function extractHeadings(mdxSource) {
+  const { content } = parseFrontmatter(String(mdxSource || ''));
+  const cleaned = content.replace(/```[\s\S]*?```/g, '');
+  const headingRegex = /^ {0,3}(#{1,6})\s+(.+?)\s*$/gm;
+  const seen = new Map();
+  const headings = [];
+  let match;
+  while ((match = headingRegex.exec(cleaned))) {
+    const hashes = match[1] || '';
+    const depth = hashes.length;
+    let raw = match[2] || '';
+    let explicitId = null;
+    const idMatch = raw.match(/\s*\{#([A-Za-z0-9_-]+)\}\s*$/);
+    if (idMatch) {
+      explicitId = idMatch[1];
+      raw = raw.slice(0, raw.length - idMatch[0].length);
+    }
+    const title = raw.replace(/\<[^>]*\>/g, '').replace(/\[([^\]]+)\]\([^)]*\)/g, '$1').trim();
+    if (!title) continue;
+    const baseId = explicitId || slugifyHeading(title) || `section-${headings.length + 1}`;
+    const count = seen.get(baseId) || 0;
+    seen.set(baseId, count + 1);
+    const id = count === 0 ? baseId : `${baseId}-${count + 1}`;
+    headings.push({
+      id,
+      title,
+      depth,
+    });
+  }
+  return headings;
+}
+
+function extractPlainText(mdxSource) {
+  let { content } = parseFrontmatter(String(mdxSource || ''));
+  if (!content) return '';
+  content = content.replace(/```[\s\S]*?```/g, ' ');
+  content = content.replace(/`{1,3}([^`]+)`{1,3}/g, '$1');
+  content = content.replace(/!\[[^\]]*\]\([^)]*\)/g, ' ');
+  content = content.replace(/\[[^\]]*\]\([^)]*\)/g, '$1');
+  content = content.replace(/<[^>]+>/g, ' ');
+  content = content.replace(/\{#([^}]+)\}/g, ' ');
+  content = content.replace(/\{\/[A-Za-z0-9_.-]+\}/g, ' ');
+  content = content.replace(/\{[^{}]*\}/g, ' ');
+  content = content.replace(/[#>*~_\-]+/g, ' ');
+  content = content.replace(/\n+/g, ' ');
+  content = content.replace(/\s+/g, ' ').trim();
+  return content;
+}
+
 function extractTitle(mdxSource) {
   const { data, content } = parseFrontmatter(String(mdxSource || ""));
   if (data && typeof data.title === "string" && data.title.trim()) {
@@ -271,6 +332,84 @@ async function compileMdxFile(filePath, outPath, Layout, extraProps = {}) {
   const mod = await import(pathToFileURL(tmpFile).href + bust);
   const MDXContent = mod.default || mod.MDXContent || mod;
   const components = await loadUiComponents();
+  const rawHeadings = Array.isArray(extraProps && extraProps.page && extraProps.page.headings)
+    ? extraProps.page.headings
+        .map((heading) => (heading ? { ...heading } : heading))
+        .filter(Boolean)
+    : [];
+  const headingQueue = rawHeadings.slice();
+  const headingIdCounts = new Map();
+  headingQueue.forEach((heading) => {
+    if (heading && heading.id) {
+      const key = String(heading.id);
+      headingIdCounts.set(key, (headingIdCounts.get(key) || 0) + 1);
+    }
+  });
+
+  function reserveHeadingId(base) {
+    const fallback = base || 'section';
+    let candidate = fallback;
+    let attempt = 1;
+    while (headingIdCounts.has(candidate)) {
+      attempt += 1;
+      candidate = `${fallback}-${attempt}`;
+    }
+    headingIdCounts.set(candidate, 1);
+    return candidate;
+  }
+
+  function extractTextFromChildren(children) {
+    if (children == null) return '';
+    if (typeof children === 'string' || typeof children === 'number') return String(children);
+    if (Array.isArray(children)) return children.map((child) => extractTextFromChildren(child)).join('');
+    if (React.isValidElement(children)) return extractTextFromChildren(children.props && children.props.children);
+    return '';
+  }
+
+  function takeHeading(level, children) {
+    if (!headingQueue.length) return null;
+    const idx = headingQueue.findIndex((item) => {
+      if (!item || typeof item !== 'object') return false;
+      const depth = typeof item.depth === 'number' ? item.depth : item.level;
+      return depth === level;
+    });
+    if (idx === -1) return null;
+    const [heading] = headingQueue.splice(idx, 1);
+    if (!heading.id) {
+      const text = heading.title || extractTextFromChildren(children);
+      const baseId = slugifyHeading(text);
+      heading.id = reserveHeadingId(baseId);
+    }
+    if (!heading.title) {
+      heading.title = extractTextFromChildren(children);
+    }
+    return heading;
+  }
+
+  function createHeadingComponent(level) {
+    const tag = `h${level}`;
+    const Base = components && components[tag] ? components[tag] : tag;
+    return function HeadingComponent(props) {
+      const heading = takeHeading(level, props && props.children);
+      const id = props && props.id ? props.id : heading && heading.id;
+      const finalProps = id ? { ...props, id } : props;
+      return React.createElement(Base, finalProps, props && props.children);
+    };
+  }
+
+  const levelsPresent = Array.from(
+    new Set(
+      headingQueue
+        .map((heading) => (heading ? heading.depth || heading.level : null))
+        .filter((level) => typeof level === 'number' && level >= 1 && level <= 6)
+    )
+  );
+  const headingComponents = levelsPresent.length
+    ? levelsPresent.reduce((acc, level) => {
+        acc[`h${level}`] = createHeadingComponent(level);
+        return acc;
+      }, {})
+    : {};
   const MDXProvider = await getMdxProvider();
   // Base path support for anchors
   const Anchor = function A(props) {
@@ -294,7 +433,7 @@ async function compileMdxFile(filePath, outPath, Layout, extraProps = {}) {
     ? React.createElement(PageContext.Provider, { value: contextValue }, withLayout)
     : withLayout;
   const withApp = React.createElement(app.App, null, withContext);
-  const compMap = { ...components, a: Anchor };
+  const compMap = { ...components, ...headingComponents, a: Anchor };
   const page = MDXProvider
     ? React.createElement(MDXProvider, { components: compMap }, withApp)
     : withApp;
@@ -811,6 +950,8 @@ async function ensureHeroRuntime() {
 
 module.exports = {
   extractTitle,
+  extractHeadings,
+  extractPlainText,
   isReservedFile,
   parseFrontmatter,
   compileMdxFile,

package/lib/build/pages.js

@@ -50,6 +50,7 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   const pageInfo = navigation.getPageInfo(normalizedRel);
   const navData = navigation.buildNavigationForFile(normalizedRel);
   const mergedProps = { ...(extraProps || {}) };
+  const headings = mdx.extractHeadings(source);
   if (pageInfo) {
     mergedProps.page = mergedProps.page
       ? { ...pageInfo, ...mergedProps.page }
@@ -58,6 +59,11 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   if (navData && !mergedProps.navigation) {
     mergedProps.navigation = navData;
   }
+  if (headings && headings.length) {
+    mergedProps.page = mergedProps.page
+      ? { ...mergedProps.page, headings }
+      : { headings };
+  }
   const { body, head } = await mdx.compileMdxFile(filePath, outPath, null, mergedProps);
   const needsHydrateViewer =
     body.includes('data-canopy-viewer') || body.includes('data-canopy-scroll');

package/lib/build/search-index.js

@@ -6,11 +6,16 @@ function pagesToRecords(pageRecords) {
   const list = Array.isArray(pageRecords) ? pageRecords : [];
   return list
     .filter((p) => p && p.href && p.searchInclude)
-    .map((p) => ({
-      title: p.title || p.href,
-      href: rootRelativeHref(p.href),
-      type: p.searchType || 'page',
-    }));
+    .map((p) => {
+      const summary = typeof p.searchSummary === 'string' ? p.searchSummary.trim() : '';
+      const record = {
+        title: p.title || p.href,
+        href: rootRelativeHref(p.href),
+        type: p.searchType || 'page',
+      };
+      if (summary) record.summaryValue = summary;
+      return record;
+    });
 }
 
 function maybeMockRecords() {

package/lib/build/search.js

@@ -184,6 +184,8 @@ async function collectMdxPageRecords() {
         const rel = path.relative(CONTENT_DIR, p).replace(/\.mdx$/i, '.html');
         if (base !== 'sitemap.mdx') {
           const href = rootRelativeHref(rel.split(path.sep).join('/'));
+          const plainText = mdx.extractPlainText(src);
+          const summary = plainText || '';
           const underSearch = /^search\//i.test(href) || href.toLowerCase() === 'search.html';
           let include = !underSearch;
           let resolvedType = null;
@@ -201,7 +203,13 @@ async function collectMdxPageRecords() {
             resolvedType = 'page';
           }
           const trimmedType = resolvedType && String(resolvedType).trim();
-          pages.push({ title, href, searchInclude: include && !!trimmedType, searchType: trimmedType || undefined });
+          pages.push({
+            title,
+            href,
+            searchInclude: include && !!trimmedType,
+            searchType: trimmedType || undefined,
+            searchSummary: summary,
+          });
         }
       }
     }

package/lib/search/search.js

@@ -231,8 +231,7 @@ function sanitizeRecordForIndex(r) {
     ''
   ).trim();
   if (summaryVal) {
-    const clipped = summaryVal.length > 1000 ? summaryVal.slice(0, 1000) + '…' : summaryVal;
-    out.summary = clipped;
+    out.summary = summaryVal;
   }
   return out;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",
@@ -19,6 +19,7 @@
     "./head": "./lib/head.js",
     "./orchestrator": {
       "types": "./types/orchestrator.d.ts",
+      "import": "./lib/orchestrator.js",
       "require": "./lib/orchestrator.js",
       "default": "./lib/orchestrator.js"
     }

package/ui/dist/index.mjs

@@ -104,7 +104,7 @@ function Card({
   );
 }
 
-// ui/src/layout/AnnotationCard.jsx
+// ui/src/layout/TextCard.jsx
 import React3, { useMemo } from "react";
 function escapeRegExp(str = "") {
   return String(str).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
@@ -141,7 +141,7 @@ function highlightSnippet(snippet, query) {
     (part, idx) => part.toLowerCase() === termLower ? /* @__PURE__ */ React3.createElement("mark", { key: idx }, part) : /* @__PURE__ */ React3.createElement(React3.Fragment, { key: idx }, part)
   );
 }
-function AnnotationCard({
+function TextCard({
   href = "#",
   title = "Untitled",
   annotation = "",
@@ -428,26 +428,36 @@ function SearchResults({
   if (!results.length) {
     return /* @__PURE__ */ React12.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React12.createElement("em", null, "No results"));
   }
-  const isAnnotationView = String(type).toLowerCase() === "annotation";
+  const normalizedType = String(type || "all").toLowerCase();
+  const isAnnotationView = normalizedType === "annotation";
   if (isAnnotationView) {
     return /* @__PURE__ */ React12.createElement("div", { id: "search-results", className: "space-y-4" }, results.map((r, i) => {
-      if (!r || !r.annotation) return null;
-      return /* @__PURE__ */ React12.createElement(
-        AnnotationCard,
-        {
-          key: r.id || i,
-          href: r.href,
-          title: r.title || r.href || "Untitled",
-          annotation: r.annotation,
-          summary: r.summary,
-          metadata: Array.isArray(r.metadata) ? r.metadata : [],
-          query
-        }
-      );
+      if (!r) return null;
+      return renderTextCard(r, r.id || i);
     }));
   }
+  const renderTextCard = (record, key) => {
+    if (!record) return null;
+    return /* @__PURE__ */ React12.createElement(
+      TextCard,
+      {
+        key,
+        href: record.href,
+        title: record.title || record.href || "Untitled",
+        annotation: record.annotation,
+        summary: record.summary || record.summaryValue || "",
+        metadata: Array.isArray(record.metadata) ? record.metadata : [],
+        query
+      }
+    );
+  };
+  const isWorkRecord = (record) => String(record && record.type).toLowerCase() === "work";
+  const shouldRenderAsTextCard = (record) => !isWorkRecord(record) || normalizedType !== "work";
   if (layout === "list") {
     return /* @__PURE__ */ React12.createElement("ul", { id: "search-results", className: "space-y-3" }, results.map((r, i) => {
+      if (shouldRenderAsTextCard(r)) {
+        return /* @__PURE__ */ React12.createElement("li", { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
+      }
       const hasDims = Number.isFinite(Number(r.thumbnailWidth)) && Number(r.thumbnailWidth) > 0 && Number.isFinite(Number(r.thumbnailHeight)) && Number(r.thumbnailHeight) > 0;
       const aspect = hasDims ? Number(r.thumbnailWidth) / Number(r.thumbnailHeight) : void 0;
       return /* @__PURE__ */ React12.createElement(
@@ -472,6 +482,9 @@ function SearchResults({
     }));
   }
   return /* @__PURE__ */ React12.createElement("div", { id: "search-results" }, /* @__PURE__ */ React12.createElement(Grid, null, results.map((r, i) => {
+    if (shouldRenderAsTextCard(r)) {
+      return /* @__PURE__ */ React12.createElement(GridItem, { key: i, className: `search-result ${r && r.type}` }, renderTextCard(r, i));
+    }
     const hasDims = Number.isFinite(Number(r.thumbnailWidth)) && Number(r.thumbnailWidth) > 0 && Number.isFinite(Number(r.thumbnailHeight)) && Number(r.thumbnailHeight) > 0;
     const aspect = hasDims ? Number(r.thumbnailWidth) / Number(r.thumbnailHeight) : void 0;
     return /* @__PURE__ */ React12.createElement(
@@ -957,7 +970,6 @@ function SearchPanel(props = {}) {
   return /* @__PURE__ */ React19.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React19.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React19.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React19.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React19.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 export {
-  AnnotationCard,
   Card,
   Grid,
   GridItem,
@@ -975,6 +987,7 @@ export {
   MdxSearchTabs as SearchTabs,
   SearchTabs as SearchTabsUI,
   Slider,
+  TextCard,
   Viewer
 };
 //# sourceMappingURL=index.mjs.map