@canopy-iiif/app 0.7.9 → 0.7.11

package/lib/components/featured.js

@@ -0,0 +1,144 @@
+const fs = require('fs');
+const path = require('path');
+const yaml = require('js-yaml');
+
+function firstLabelString(label) {
+  if (!label) return 'Untitled';
+  if (typeof label === 'string') return label;
+  try {
+    const keys = Object.keys(label || {});
+    if (!keys.length) return 'Untitled';
+    const arr = label[keys[0]];
+    if (Array.isArray(arr) && arr.length) return String(arr[0]);
+  } catch (_) {}
+  return 'Untitled';
+}
+
+function normalizeIiifId(raw) {
+  try {
+    const s = String(raw || '');
+    if (!/^https?:\/\//i.test(s)) return s;
+    const u = new URL(s);
+    const entries = Array.from(u.searchParams.entries()).sort(
+      (a, b) => a[0].localeCompare(b[0]) || a[1].localeCompare(b[1])
+    );
+    u.search = '';
+    for (const [k, v] of entries) u.searchParams.append(k, v);
+    return u.toString();
+  } catch (_) {
+    return String(raw || '');
+  }
+}
+
+function equalIiifId(a, b) {
+  try {
+    const an = normalizeIiifId(a);
+    const bn = normalizeIiifId(b);
+    if (an === bn) return true;
+    const ua = new URL(an);
+    const ub = new URL(bn);
+    return ua.origin === ub.origin && ua.pathname === ub.pathname;
+  } catch (_) {
+    return String(a || '') === String(b || '');
+  }
+}
+
+function readYaml(p) {
+  try {
+    if (!fs.existsSync(p)) return null;
+    const raw = fs.readFileSync(p, 'utf8');
+    return yaml.load(raw) || null;
+  } catch (_) {
+    return null;
+  }
+}
+
+function readJson(p) {
+  try {
+    if (!fs.existsSync(p)) return null;
+    const raw = fs.readFileSync(p, 'utf8');
+    return JSON.parse(raw);
+  } catch (_) {
+    return null;
+  }
+}
+
+function findSlugByIdFromDiskSync(nid) {
+  try {
+    const dir = path.resolve('.cache/iiif/manifests');
+    if (!fs.existsSync(dir)) return null;
+    const names = fs.readdirSync(dir);
+    for (const name of names) {
+      if (!name || !name.toLowerCase().endsWith('.json')) continue;
+      const fp = path.join(dir, name);
+      try {
+        const obj = readJson(fp);
+        const mid = normalizeIiifId(String((obj && (obj.id || obj['@id'])) || ''));
+        if (mid && equalIiifId(mid, nid)) return name.replace(/\.json$/i, '');
+      } catch (_) {}
+    }
+  } catch (_) {}
+  return null;
+}
+
+function readFeaturedFromCacheSync() {
+  try {
+    const debug = !!process.env.CANOPY_DEBUG_FEATURED;
+    const cfg = readYaml(path.resolve('canopy.yml')) || {};
+    const featured = Array.isArray(cfg && cfg.featured) ? cfg.featured : [];
+    if (!featured.length) return [];
+    const idx = readJson(path.resolve('.cache/iiif/index.json')) || {};
+    const byId = Array.isArray(idx && idx.byId) ? idx.byId : [];
+    const out = [];
+    for (const id of featured) {
+      const nid = normalizeIiifId(id);
+      if (debug) { try { console.log('[featured] id:', id); } catch (_) {} }
+      const entry = byId.find((e) => e && e.type === 'Manifest' && equalIiifId(e.id, nid));
+      const slug = entry && entry.slug ? String(entry.slug) : findSlugByIdFromDiskSync(nid);
+      if (debug) { try { console.log('[featured]  - slug:', slug || '(none)'); } catch (_) {} }
+      if (!slug) continue;
+      const m = readJson(path.resolve('.cache/iiif/manifests', slug + '.json'));
+      if (!m) continue;
+      const rec = {
+        title: firstLabelString(m && m.label),
+        href: path.join('works', slug + '.html').split(path.sep).join('/'),
+        type: 'work',
+      };
+      if (entry && entry.thumbnail) rec.thumbnail = String(entry.thumbnail);
+      if (entry && typeof entry.thumbnailWidth === 'number') rec.thumbnailWidth = entry.thumbnailWidth;
+      if (entry && typeof entry.thumbnailHeight === 'number') rec.thumbnailHeight = entry.thumbnailHeight;
+      if (!rec.thumbnail) {
+        try {
+          const t = m && m.thumbnail;
+          if (Array.isArray(t) && t.length) {
+            const first = t[0] || {};
+            const tid = first.id || first['@id'] || first.url || '';
+            if (tid) rec.thumbnail = String(tid);
+            if (typeof first.width === 'number') rec.thumbnailWidth = first.width;
+            if (typeof first.height === 'number') rec.thumbnailHeight = first.height;
+          } else if (t && typeof t === 'object') {
+            const tid = t.id || t['@id'] || t.url || '';
+            if (tid) rec.thumbnail = String(tid);
+            if (typeof t.width === 'number') rec.thumbnailWidth = t.width;
+            if (typeof t.height === 'number') rec.thumbnailHeight = t.height;
+          }
+        } catch (_) {}
+      }
+      out.push(rec);
+    }
+    if (debug) { try { console.log('[featured] total:', out.length); } catch (_) {} }
+    return out;
+  } catch (_) {
+    return [];
+  }
+}
+
+module.exports = {
+  firstLabelString,
+  normalizeIiifId,
+  equalIiifId,
+  readYaml,
+  readJson,
+  findSlugByIdFromDiskSync,
+  readFeaturedFromCacheSync,
+};

package/lib/search/search-app.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useSyncExternalStore, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { SearchFormUI, SearchResultsUI } from '@canopy-iiif/app/ui';
+import { SearchResultsUI, SearchTabsUI } from '@canopy-iiif/app/ui';
 
 // Lightweight IndexedDB utilities (no deps) with graceful fallback
 function hasIDB() {
@@ -133,11 +133,14 @@ function createSearchStore() {
       // Broadcast new index installs to other tabs
       let bc = null;
       try { if (typeof BroadcastChannel !== 'undefined') bc = new BroadcastChannel('canopy-search'); } catch (_) {}
-      // Try to load meta version for cache-busting; fall back to hash of JSON
+      // Try to load meta for cache-busting and tab order; fall back to hash of JSON
       let version = '';
+      let tabsOrder = [];
       try {
         const meta = await fetch('./api/index.json').then((r) => (r && r.ok ? r.json() : null)).catch(() => null);
         if (meta && typeof meta.version === 'string') version = meta.version;
+        const ord = meta && meta.search && meta.search.tabs && Array.isArray(meta.search.tabs.order) ? meta.search.tabs.order : [];
+        tabsOrder = ord.map((s) => String(s)).filter(Boolean);
       } catch (_) {}
       const res = await fetch('./api/search-index.json' + (version ? `?v=${encodeURIComponent(version)}` : ''));
       const text = await res.text();
@@ -198,8 +201,22 @@ function createSearchStore() {
       } catch (_) {}
 
       const ts = Array.from(new Set(data.map((r) => String((r && r.type) || 'page'))));
-      const order = ['work', 'docs', 'page'];
+      const order = Array.isArray(tabsOrder) && tabsOrder.length ? tabsOrder : ['work', 'docs', 'page'];
       ts.sort((a, b) => { const ia = order.indexOf(a); const ib = order.indexOf(b); return (ia<0?99:ia)-(ib<0?99:ib) || a.localeCompare(b); });
+      // Default to configured first tab if no type param present
+      try {
+        const p = new URLSearchParams(location.search);
+        const hasType = p.has('type');
+        if (!hasType) {
+          let def = (order && order.length ? order[0] : 'all');
+          if (!ts.includes(def)) def = ts[0] || 'all';
+          if (def && def !== 'all') {
+            p.set('type', def);
+            history.replaceState(null, '', `${location.pathname}?${p.toString()}`);
+          }
+          set({ type: def });
+        }
+      } catch (_) {}
       set({ index: idx, records: data, types: ts, loading: false });
     } catch (_) { set({ loading: false }); }
   })();
@@ -216,16 +233,16 @@ function useStore() {
   return { ...snap, setQuery: store.setQuery, setType: store.setType };
 }
 
-function FormMount() {
-  const { query, setQuery, type, setType, types, counts } = useStore();
-  return <SearchFormUI query={query} onQueryChange={setQuery} type={type} onTypeChange={setType} types={types} counts={counts} />;
-}
 function ResultsMount(props = {}) {
   const { results, type, loading } = useStore();
   if (loading) return <div className="text-slate-600">Loading…</div>;
   const layout = (props && props.layout) || 'grid';
   return <SearchResultsUI results={results} type={type} layout={layout} />;
 }
+function TabsMount() {
+  const { type, setType, types, counts } = useStore();
+  return <SearchTabsUI type={type} onTypeChange={setType} types={types} counts={counts} />;
+}
 function SummaryMount() {
   const { query, type, shown, total } = useStore();
   const text = useMemo(() => {
@@ -234,10 +251,6 @@ function SummaryMount() {
   }, [query, type, shown, total]);
   return <div className="text-sm text-slate-600">{text}</div>;
 }
-function TotalMount() {
-  const { shown } = useStore();
-  return <span>{shown}</span>;
-}
 
 function parseProps(el) {
   try {
@@ -263,10 +276,19 @@ function mountAt(selector, Comp) {
 
 if (typeof document !== 'undefined') {
   const run = () => {
-    mountAt('[data-canopy-search-form]', FormMount);
+    // Mount tabs and other search UI pieces
+    mountAt('[data-canopy-search-tabs]', TabsMount);
     mountAt('[data-canopy-search-results]', ResultsMount);
     mountAt('[data-canopy-search-summary]', SummaryMount);
-    mountAt('[data-canopy-search-total]', TotalMount);
+    // Total mount removed
+    try {
+      window.addEventListener('canopy:search:setQuery', (ev) => {
+        try {
+          const q = ev && ev.detail && typeof ev.detail.query === 'string' ? ev.detail.query : (document.querySelector('[data-canopy-command-input]')?.value || '');
+          if (typeof q === 'string') store.setQuery(q);
+        } catch (_) {}
+      });
+    } catch (_) {}
   };
   if (document.readyState !== 'loading') run();
   else document.addEventListener('DOMContentLoaded', run, { once: true });

package/lib/search/search.js

@@ -6,7 +6,7 @@ const { ensureDirSync, OUT_DIR, htmlShell, fsp } = require('../common');
 
 const FALLBACK_SEARCH_APP = `import React, { useEffect, useMemo, useSyncExternalStore, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { SearchFormUI, SearchResultsUI } from '@canopy-iiif/app/ui';
+import { SearchResultsUI } from '@canopy-iiif/app/ui';
 
 function hasIDB(){ try { return typeof indexedDB !== 'undefined'; } catch (_) { return false; } }
 function idbOpen(){ return new Promise((resolve)=>{ if(!hasIDB()) return resolve(null); try{ const req = indexedDB.open('canopy-search',1); req.onupgradeneeded=()=>{ const db=req.result; if(!db.objectStoreNames.contains('indexes')) db.createObjectStore('indexes',{keyPath:'version'}); }; req.onsuccess=()=>resolve(req.result); req.onerror=()=>resolve(null);}catch(_){ resolve(null);} }); }
@@ -153,10 +153,6 @@ function useStore() {
   return { ...snap, setQuery: store.setQuery, setType: store.setType };
 }
 
-function FormMount() {
-  const { query, setQuery, type, setType, types, counts } = useStore();
-  return <SearchFormUI query={query} onQueryChange={setQuery} type={type} onTypeChange={setType} types={types} counts={counts} />;
-}
 function ResultsMount() {
   const { results, type, loading } = useStore();
   if (loading) return <div className=\"text-slate-600\">Loading…</div>;
@@ -170,10 +166,7 @@ function SummaryMount() {
   }, [query, type, shown, total]);
   return <div className=\"text-sm text-slate-600\">{text}</div>;
 }
-function TotalMount() {
-  const { shown } = useStore();
-  return <span>{shown}</span>;
-}
+ 
 
 function mountAt(selector, Comp) {
   const nodes = document.querySelectorAll(selector);
@@ -189,10 +182,9 @@ function mountAt(selector, Comp) {
 
 if (typeof document !== 'undefined') {
   const run = () => {
-    mountAt('[data-canopy-search-form]', FormMount);
     mountAt('[data-canopy-search-results]', ResultsMount);
     mountAt('[data-canopy-search-summary]', SummaryMount);
-    mountAt('[data-canopy-search-total]', TotalMount);
+    
   };
   if (document.readyState !== 'loading') run();
   else document.addEventListener('DOMContentLoaded', run, { once: true });
@@ -314,14 +306,8 @@ async function ensureSearchRuntime() {
       plugins: [shimReactPlugin],
       external: ['@samvera/clover-iiif/*'],
     };
-    if (entryExists) {
-      await esbuild.build({ entryPoints: [entry], ...commonBuild });
-    } else {
-      await esbuild.build({
-        stdin: { contents: FALLBACK_SEARCH_APP, resolveDir: process.cwd(), loader: 'jsx', sourcefile: 'fallback-search-app.jsx' },
-        ...commonBuild,
-      });
-    }
+    if (!entryExists) throw new Error('Search runtime entry missing: ' + entry);
+    await esbuild.build({ entryPoints: [entry], ...commonBuild });
   } catch (e) {
     console.error('Search: bundle error:', e && e.message ? e.message : e);
     return;
@@ -339,34 +325,18 @@ async function buildSearchPage() {
   try {
     const outPath = path.join(OUT_DIR, 'search.html');
     ensureDirSync(path.dirname(outPath));
-    // If the author provided content/search/_layout.mdx, render it via MDX; otherwise fall back.
+    // Require author-provided content/search/_layout.mdx; do not fall back to a generated page.
     const searchLayoutPath = path.join(path.resolve('content'), 'search', '_layout.mdx');
     let body = '';
     let head = '';
-    if (require('../common').fs.existsSync(searchLayoutPath)) {
-      try {
-        const mdx = require('../build/mdx');
-        const rendered = await mdx.compileMdxFile(searchLayoutPath, outPath, {});
-        body = rendered && rendered.body ? rendered.body : '';
-        head = rendered && rendered.head ? rendered.head : '';
-      } catch (e) {
-        console.warn('Search: Failed to render content/search/_layout.mdx, falling back:', e && e.message ? e.message : e);
-      }
-    }
-    if (!body) {
-      // Minimal mount container; React SearchApp mounts into #search-root
-      let content = React.createElement(
-        'div',
-        null,
-        React.createElement('h1', null, 'Search'),
-        React.createElement('div', { id: 'search-root' })
-      );
-      const { loadAppWrapper } = require('../build/mdx');
-      const app = await loadAppWrapper();
-      const wrappedApp = app && app.App ? React.createElement(app.App, null, content) : content;
-      body = ReactDOMServer.renderToStaticMarkup(wrappedApp);
-      head = app && app.Head ? ReactDOMServer.renderToStaticMarkup(React.createElement(app.Head)) : '';
+    if (!require('../common').fs.existsSync(searchLayoutPath)) {
+      throw new Error('Missing required file: content/search/_layout.mdx');
     }
+    const mdx = require('../build/mdx');
+    const rendered = await mdx.compileMdxFile(searchLayoutPath, outPath, {});
+    body = rendered && rendered.body ? rendered.body : '';
+    head = rendered && rendered.head ? rendered.head : '';
+    if (!body) throw new Error('Search: content/search/_layout.mdx produced empty output');
     const importMap = '';
     const cssRel = path.relative(path.dirname(outPath), path.join(OUT_DIR, 'styles', 'styles.css')).split(path.sep).join('/');
     const jsAbs = path.join(OUT_DIR, 'scripts', 'search.js');
@@ -389,7 +359,8 @@ async function buildSearchPage() {
     await fsp.writeFile(outPath, html, 'utf8');
     console.log('Search: Built', path.relative(process.cwd(), outPath));
   } catch (e) {
-    console.warn('Search: Failed to build page', e.message);
+    console.warn('Search: Failed to build page', e && (e.message || e));
+    throw e;
   }
 }
 

package/package.json

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