@canopy-iiif/app 0.10.20 → 0.10.22

package/lib/build/mdx.js

@@ -247,6 +247,21 @@ function extractPlainText(mdxSource) {
   return content;
 }
 
+function extractMarkdownSummary(mdxSource) {
+  let { content } = parseFrontmatter(String(mdxSource || ''));
+  if (!content) return '';
+  content = content.replace(/^import[^\n]+$/gm, ' ');
+  content = content.replace(/^export[^\n]+$/gm, ' ');
+  content = content.replace(/```[\s\S]*?```/g, ' ');
+  content = content.replace(/<[A-Za-z][^>]*?>[\s\S]*?<\/[A-Za-z][^>]*?>/g, ' ');
+  content = content.replace(/<[A-Za-z][^>]*?\/>/g, ' ');
+  content = content.replace(/\{\/[A-Za-z0-9_.-]+\}/g, ' ');
+  content = content.replace(/\{[^{}]*\}/g, ' ');
+  content = content.replace(/^#{1,6}\s+.*$/gm, ' ');
+  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()) {
@@ -1006,6 +1021,7 @@ module.exports = {
   extractTitle,
   extractHeadings,
   extractPlainText,
+  extractMarkdownSummary,
   isReservedFile,
   parseFrontmatter,
   compileMdxFile,

package/lib/build/search-index.js

@@ -8,12 +8,17 @@ function pagesToRecords(pageRecords) {
     .filter((p) => p && p.href && p.searchInclude)
     .map((p) => {
       const summary = typeof p.searchSummary === 'string' ? p.searchSummary.trim() : '';
+      const summaryMarkdown =
+        typeof p.searchSummaryMarkdown === 'string'
+          ? p.searchSummaryMarkdown.trim()
+          : '';
       const record = {
         title: p.title || p.href,
         href: rootRelativeHref(p.href),
         type: p.searchType || 'page',
       };
       if (summary) record.summaryValue = summary;
+      if (summaryMarkdown) record.summaryMarkdown = summaryMarkdown;
       return record;
     });
 }

package/lib/build/search.js

@@ -210,6 +210,7 @@ async function collectMdxPageRecords() {
         if (base !== 'sitemap.mdx') {
           const href = rootRelativeHref(rel.split(path.sep).join('/'));
           const plainText = mdx.extractPlainText(src);
+          const markdownSummary = mdx.extractMarkdownSummary(src);
           const summary = plainText || '';
           const underSearch = /^search\//i.test(href) || href.toLowerCase() === 'search.html';
           let include = !underSearch;
@@ -234,6 +235,7 @@ async function collectMdxPageRecords() {
             searchInclude: include && !!trimmedType,
             searchType: trimmedType || undefined,
             searchSummary: summary,
+            searchSummaryMarkdown: markdownSummary,
           });
         }
       }

package/lib/search/search-form-runtime.js

@@ -186,6 +186,18 @@ function groupLabel(type) {
   return type.charAt(0).toUpperCase() + type.slice(1);
 }
 
+function hidePanel(panel) {
+  if (!panel) return;
+  panel.classList.add('is-empty');
+  panel.setAttribute('hidden', 'hidden');
+}
+
+function showPanel(panel) {
+  if (!panel) return;
+  panel.classList.remove('is-empty');
+  panel.removeAttribute('hidden');
+}
+
 function getItems(list) {
   try {
     return Array.prototype.slice.call(list.querySelectorAll('[data-canopy-item]'));
@@ -196,7 +208,12 @@ function getItems(list) {
 
 function renderList(list, records, groupOrder) {
   list.innerHTML = '';
-  if (!records.length) return;
+  const panel = list.closest('[data-canopy-search-form-panel]');
+  if (!records.length) {
+    hidePanel(panel);
+    return;
+  }
+  showPanel(panel);
   const groups = new Map();
   records.forEach((record) => {
     const type = String(record && record.type || 'page');
@@ -207,8 +224,8 @@ function renderList(list, records, groupOrder) {
   const orderedKeys = [...desiredOrder.filter((key) => groups.has(key)), ...Array.from(groups.keys()).filter((key) => !desiredOrder.includes(key))];
   orderedKeys.forEach((key) => {
     const header = document.createElement('div');
+    header.className = 'canopy-search-teaser__label';
     header.textContent = groupLabel(key);
-    header.style.cssText = 'padding:6px 12px;font-weight:600;color:#374151';
     list.appendChild(header);
     const entries = groups.get(key) || [];
     entries.forEach((record) => {
@@ -217,44 +234,39 @@ function renderList(list, records, groupOrder) {
       item.setAttribute('data-canopy-item', '');
       item.href = href;
       item.tabIndex = 0;
-      item.className = 'canopy-card canopy-card--teaser';
-      item.style.cssText = 'display:flex;gap:12px;padding:8px 12px;text-decoration:none;color:#030712;border-radius:8px;align-items:center;outline:none;';
+      item.className = 'canopy-card canopy-card--teaser canopy-search-teaser__item';
 
       const showThumb = String(record && record.type || '') === 'work' && record && record.thumbnail;
       if (showThumb) {
         const media = document.createElement('div');
-        media.style.cssText = 'flex:0 0 48px;height:48px;border-radius:6px;overflow:hidden;background:#f1f5f9;display:flex;align-items:center;justify-content:center;';
+        media.className = 'canopy-search-teaser__thumb';
         const img = document.createElement('img');
         img.src = record.thumbnail;
         img.alt = '';
         img.loading = 'lazy';
-        img.style.cssText = 'width:100%;height:100%;object-fit:cover;';
+        img.className = 'canopy-search-teaser__thumb-img';
         media.appendChild(img);
         item.appendChild(media);
       }
 
       const textWrap = document.createElement('div');
-      textWrap.style.cssText = 'display:flex;flex-direction:column;gap:2px;min-width:0;';
+      textWrap.className = 'canopy-search-teaser__text';
       const title = document.createElement('span');
       title.textContent = record.title || record.href || '';
-      title.style.cssText = 'font-weight:600;font-size:0.95rem;line-height:1.3;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+      title.className = 'canopy-search-teaser__title';
       textWrap.appendChild(title);
       const meta = Array.isArray(record && record.metadata) ? record.metadata : [];
       if (meta.length) {
         const metaLine = document.createElement('span');
         metaLine.textContent = meta.slice(0, 2).join(' • ');
-        metaLine.style.cssText = 'font-size:0.8rem;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+        metaLine.className = 'canopy-search-teaser__meta';
         textWrap.appendChild(metaLine);
       }
       item.appendChild(textWrap);
 
-      item.onmouseenter = () => { item.style.background = '#f8fafc'; };
-      item.onmouseleave = () => { item.style.background = 'transparent'; };
       item.onfocus = () => {
-        item.style.background = '#eef2ff';
         try { item.scrollIntoView({ block: 'nearest' }); } catch (_) {}
       };
-      item.onblur = () => { item.style.background = 'transparent'; };
       list.appendChild(item);
     });
   });
@@ -275,15 +287,19 @@ function focusLast(list, resetTarget) {
   items[items.length - 1].focus();
 }
 
-function bindKeyboardNavigation({ input, list, panel }) {
+function bindKeyboardNavigation({ input, list, panel, ensureResults }) {
+  const ensure = () => {
+    if (typeof ensureResults === 'function') ensureResults();
+    return getItems(list).length > 0;
+  };
   input.addEventListener('keydown', (event) => {
     if (event.key === 'ArrowDown') {
       event.preventDefault();
-      panel.style.display = 'block';
+      if (!ensure()) return;
       focusFirst(list);
     } else if (event.key === 'ArrowUp') {
       event.preventDefault();
-      panel.style.display = 'block';
+      if (!ensure()) return;
       focusLast(list, input);
     }
   });
@@ -311,7 +327,7 @@ function bindKeyboardNavigation({ input, list, panel }) {
       event.preventDefault();
       try { current.click(); } catch (_) {}
     } else if (event.key === 'Escape') {
-      panel.style.display = 'none';
+      hidePanel(panel);
       try { input && input.focus && input.focus(); } catch (_) {}
     }
   });
@@ -336,7 +352,7 @@ async function attachSearchForm(host) {
     } catch (_) {}
   }
 
-  if (onSearchPage) panel.style.display = 'none';
+  if (onSearchPage) hidePanel(panel);
 
   const list = (() => {
     try { return panel.querySelector('#cplist'); } catch (_) { return null; }
@@ -357,13 +373,7 @@ async function attachSearchForm(host) {
   const records = await loadRecords();
 
   function render(items) {
-    list.innerHTML = '';
-    if (!items.length) {
-      panel.style.display = onSearchPage ? 'none' : 'block';
-      return;
-    }
     renderList(list, items, groupOrder);
-    panel.style.display = 'block';
   }
 
   function filterAndShow(query) {
@@ -371,7 +381,7 @@ async function attachSearchForm(host) {
       const q = toLower(query);
       if (!q) {
         list.innerHTML = '';
-        panel.style.display = onSearchPage ? 'none' : 'block';
+        hidePanel(panel);
         return;
       }
       const out = [];
@@ -404,18 +414,27 @@ async function attachSearchForm(host) {
     filterAndShow(input.value || '');
   });
 
-  bindKeyboardNavigation({ input, list, panel });
+  bindKeyboardNavigation({
+    input,
+    list,
+    panel,
+    ensureResults: () => {
+      if (!getItems(list).length) {
+        filterAndShow(input.value || '');
+      }
+    },
+  });
 
   document.addEventListener('keydown', (event) => {
     if (event.key === 'Escape') {
-      panel.style.display = 'none';
+      hidePanel(panel);
     }
   });
 
   document.addEventListener('mousedown', (event) => {
     try {
       if (!panel.contains(event.target) && !host.contains(event.target)) {
-        panel.style.display = 'none';
+        hidePanel(panel);
       }
     } catch (_) {}
   });
@@ -433,7 +452,6 @@ async function attachSearchForm(host) {
             try { window.dispatchEvent(new CustomEvent('canopy:search:setQuery', { detail: { hotkey: true } })); } catch (_) {}
             return;
           }
-          panel.style.display = 'block';
           if (input && input.focus) input.focus();
           filterAndShow(input && input.value || '');
         }
@@ -446,7 +464,6 @@ async function attachSearchForm(host) {
       try { window.dispatchEvent(new CustomEvent('canopy:search:setQuery', { detail: {} })); } catch (_) {}
       return;
     }
-    panel.style.display = 'block';
     if (input && input.focus) input.focus();
     filterAndShow(input && input.value || '');
   }

package/lib/search/search.js

@@ -354,6 +354,15 @@ function sanitizeRecordForDisplay(r) {
   const out = { ...base };
   if (out.metadata) delete out.metadata;
   if (out.summary) out.summary = toSafeString(out.summary, '');
+  const summaryMarkdown = toSafeString(
+    (r && r.summaryMarkdown) ||
+      (r && r.searchSummaryMarkdown) ||
+      (r && r.search && r.search.summaryMarkdown),
+    ''
+  ).trim();
+  if (summaryMarkdown) {
+    out.summaryMarkdown = summaryMarkdown;
+  }
   const hrefRaw = toSafeString(r && r.href, '');
   out.href = rootRelativeHref(hrefRaw);
   const thumbnail = toSafeString(r && r.thumbnail, '');

package/package.json

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

package/ui/dist/index.mjs

@@ -111,41 +111,158 @@ import React3, { useMemo } from "react";
 function escapeRegExp(str = "") {
   return String(str).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
 }
-function buildSnippet({ text = "", query = "", maxLength = 240 }) {
+function buildSnippet({ text = "", query = "", maxLength = 360 }) {
   const clean = String(text || "").replace(/\s+/g, " ").trim();
   if (!clean) return "";
+  const safeMax = Math.max(60, Number(maxLength) || 360);
   const term = String(query || "").trim();
   if (!term)
-    return clean.length > maxLength ? clean.slice(0, maxLength) + "\u2026" : clean;
+    return clean.length > safeMax ? clean.slice(0, safeMax).trimEnd() + "\u2026" : clean;
   const lower = clean.toLowerCase();
   const termLower = term.toLowerCase();
   const idx = lower.indexOf(termLower);
-  if (idx === -1) {
-    return clean.length > maxLength ? clean.slice(0, maxLength) + "\u2026" : clean;
+  if (idx === -1)
+    return clean.length > safeMax ? clean.slice(0, safeMax).trimEnd() + "\u2026" : clean;
+  const padding = Math.max(0, Math.floor((safeMax - term.length) / 2));
+  let start = Math.max(0, idx - padding);
+  let end = start + safeMax;
+  if (end > clean.length) {
+    end = clean.length;
+    start = Math.max(0, end - safeMax);
   }
-  const context = Math.max(0, maxLength / 2);
-  const start = Math.max(0, idx - context);
-  const end = Math.min(clean.length, idx + term.length + context);
-  let snippet = clean.slice(start, end);
+  let snippet = clean.slice(start, end).trim();
   if (start > 0) snippet = "\u2026" + snippet;
   if (end < clean.length) snippet = snippet + "\u2026";
   return snippet;
 }
-function highlightSnippet(snippet, query) {
-  if (!query) return snippet;
+function highlightTextNode(text, query, keyPrefix = "") {
+  if (!query) return text;
   const term = String(query).trim();
-  if (!term) return snippet;
-  const parts = String(snippet).split(
-    new RegExp(`(${escapeRegExp(term)})`, "gi")
-  );
+  if (!term) return text;
+  const regex = new RegExp(`(${escapeRegExp(term)})`, "gi");
+  const parts = String(text).split(regex);
   const termLower = term.toLowerCase();
-  return parts.map(
-    (part, idx) => part.toLowerCase() === termLower ? /* @__PURE__ */ React3.createElement("mark", { key: idx }, part) : /* @__PURE__ */ React3.createElement(React3.Fragment, { key: idx }, part)
-  );
+  return parts.map((part, idx) => {
+    if (!part) return null;
+    if (part.toLowerCase() === termLower) {
+      return /* @__PURE__ */ React3.createElement("mark", { key: `${keyPrefix}-${idx}` }, part);
+    }
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, { key: `${keyPrefix}-${idx}` }, part);
+  });
+}
+function tokenizeInlineMarkdown(input = "") {
+  const tokens = [];
+  let text = input;
+  while (text.length) {
+    if (text.startsWith("\n")) {
+      tokens.push({ type: "break" });
+      text = text.slice(1);
+      continue;
+    }
+    if (text.startsWith("**")) {
+      const closing = text.indexOf("**", 2);
+      if (closing !== -1) {
+        const inner = text.slice(2, closing);
+        tokens.push({ type: "strong", children: tokenizeInlineMarkdown(inner) });
+        text = text.slice(closing + 2);
+        continue;
+      }
+    }
+    if (text.startsWith("__")) {
+      const closing = text.indexOf("__", 2);
+      if (closing !== -1) {
+        const inner = text.slice(2, closing);
+        tokens.push({ type: "strong", children: tokenizeInlineMarkdown(inner) });
+        text = text.slice(closing + 2);
+        continue;
+      }
+    }
+    if (text.startsWith("*")) {
+      if (!text.startsWith("**")) {
+        const closing = text.indexOf("*", 1);
+        if (closing !== -1) {
+          const inner = text.slice(1, closing);
+          tokens.push({ type: "em", children: tokenizeInlineMarkdown(inner) });
+          text = text.slice(closing + 1);
+          continue;
+        }
+      }
+    }
+    if (text.startsWith("_")) {
+      if (!text.startsWith("__")) {
+        const closing = text.indexOf("_", 1);
+        if (closing !== -1) {
+          const inner = text.slice(1, closing);
+          tokens.push({ type: "em", children: tokenizeInlineMarkdown(inner) });
+          text = text.slice(closing + 1);
+          continue;
+        }
+      }
+    }
+    if (text.startsWith("`")) {
+      const closing = text.indexOf("`", 1);
+      if (closing !== -1) {
+        const inner = text.slice(1, closing);
+        tokens.push({ type: "code", value: inner });
+        text = text.slice(closing + 1);
+        continue;
+      }
+    }
+    if (text.startsWith("[")) {
+      const endLabel = text.indexOf("]");
+      const startHref = endLabel !== -1 ? text.indexOf("(", endLabel) : -1;
+      const endHref = startHref !== -1 ? text.indexOf(")", startHref) : -1;
+      if (endLabel !== -1 && startHref === endLabel + 1 && endHref !== -1) {
+        const label = text.slice(1, endLabel);
+        const href = text.slice(startHref + 1, endHref);
+        tokens.push({
+          type: "link",
+          href,
+          children: tokenizeInlineMarkdown(label)
+        });
+        text = text.slice(endHref + 1);
+        continue;
+      }
+    }
+    const specials = ["**", "__", "*", "_", "`", "[", "\n"];
+    const nextIndex = specials.map(
+      (needle) => needle === "\n" ? text.indexOf("\n") : text.indexOf(needle)
+    ).filter((idx) => idx > 0).reduce((min, idx) => min === -1 || idx < min ? idx : min, -1);
+    if (nextIndex === -1) {
+      tokens.push({ type: "text", value: text });
+      break;
+    }
+    tokens.push({ type: "text", value: text.slice(0, nextIndex) });
+    text = text.slice(nextIndex);
+  }
+  return tokens;
+}
+function renderMarkdownTokens(tokens, query, keyPrefix = "token") {
+  return tokens.map((token, idx) => {
+    const key = `${keyPrefix}-${idx}`;
+    switch (token.type) {
+      case "strong":
+        return /* @__PURE__ */ React3.createElement("strong", { key }, renderMarkdownTokens(token.children || [], query, key));
+      case "em":
+        return /* @__PURE__ */ React3.createElement("em", { key }, renderMarkdownTokens(token.children || [], query, key));
+      case "code":
+        return /* @__PURE__ */ React3.createElement("code", { key }, token.value);
+      case "link":
+        return /* @__PURE__ */ React3.createElement("a", { key, href: token.href, target: "_blank", rel: "noreferrer" }, renderMarkdownTokens(token.children || [], query, key));
+      case "break":
+        return /* @__PURE__ */ React3.createElement("br", { key });
+      case "text":
+      default:
+        return /* @__PURE__ */ React3.createElement(React3.Fragment, { key }, highlightTextNode(token.value || "", query, key));
+    }
+  });
 }
 function formatDisplayUrl(href = "") {
   try {
-    const url = new URL(href, href.startsWith("http") ? void 0 : "http://example.com");
+    const url = new URL(
+      href,
+      href.startsWith("http") ? void 0 : "http://example.com"
+    );
     if (!href.startsWith("http")) return href;
     const displayPath = url.pathname.replace(/\/$/, "");
     return `${url.host}${displayPath}${url.search}`.replace(/\/$/, "");
@@ -158,21 +275,22 @@ function ArticleCard({
   title = "Untitled",
   annotation = "",
   summary = "",
+  summaryMarkdown = "",
   metadata = [],
   query = ""
 }) {
-  const snippetSource = annotation || summary;
+  const snippetSource = summaryMarkdown || annotation || summary;
   const snippet = useMemo(
     () => buildSnippet({ text: snippetSource, query }),
     [snippetSource, query]
   );
-  const highlighted = useMemo(
-    () => highlightSnippet(snippet, query),
-    [snippet, query]
+  const snippetTokens = useMemo(
+    () => tokenizeInlineMarkdown(snippet),
+    [snippet]
   );
   const metaList = Array.isArray(metadata) ? metadata.map((m) => String(m || "")).filter(Boolean) : [];
   const displayUrl = useMemo(() => formatDisplayUrl(href), [href]);
-  return /* @__PURE__ */ React3.createElement("a", { href, className: "canopy-article-card" }, /* @__PURE__ */ React3.createElement("article", null, displayUrl ? /* @__PURE__ */ React3.createElement("p", { className: "canopy-article-card__url" }, displayUrl) : null, /* @__PURE__ */ React3.createElement("h3", null, title), snippet ? /* @__PURE__ */ React3.createElement("p", { className: "canopy-article-card__snippet" }, highlighted) : null, metaList.length ? /* @__PURE__ */ React3.createElement("ul", { className: "canopy-article-card__meta" }, metaList.slice(0, 3).map((item, idx) => /* @__PURE__ */ React3.createElement("li", { key: `${item}-${idx}` }, item))) : null));
+  return /* @__PURE__ */ React3.createElement("a", { href, className: "canopy-article-card" }, /* @__PURE__ */ React3.createElement("article", null, /* @__PURE__ */ React3.createElement("h3", null, title), displayUrl ? /* @__PURE__ */ React3.createElement("span", { className: "canopy-article-card__url" }, displayUrl) : null, snippet ? /* @__PURE__ */ React3.createElement("p", { className: "canopy-article-card__snippet" }, renderMarkdownTokens(snippetTokens, query)) : null, metaList.length ? /* @__PURE__ */ React3.createElement("ul", { className: "canopy-article-card__meta" }, metaList.slice(0, 3).map((item, idx) => /* @__PURE__ */ React3.createElement("li", { key: `${item}-${idx}` }, item))) : null));
 }
 
 // ui/src/layout/Grid.jsx
@@ -494,15 +612,16 @@ function SearchPanelForm(props = {}) {
 import React10 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
-  const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
+  const classes = ["canopy-search-teaser", "is-empty", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ React10.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
+      hidden: true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React10.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React10.createElement("div", { id: "cplist", className: "canopy-search-teaser__list" })
   );
 }
 
@@ -1235,6 +1354,7 @@ function DefaultArticleTemplate({ record, query }) {
       title: record.title || record.href || "Untitled",
       annotation: record.annotation,
       summary: record.summary || record.summaryValue || "",
+      summaryMarkdown: record.summaryMarkdown || record.summary || record.summaryValue || "",
       metadata,
       query
     }