@canopy-iiif/app 0.10.16 → 0.10.18

package/lib/build/build.js

@@ -20,6 +20,7 @@ const { ensureStyles } = require("./styles");
 const { copyAssets } = require("./assets");
 const { logLine } = require("./log");
 const navigation = require("../components/navigation");
+const referenced = require("../components/referenced");
 
 // hold records between builds if skipping IIIF
 let iiifRecordsCache = [];
@@ -42,6 +43,7 @@ async function build(options = {}) {
   logLine("• Reset MDX cache", "blue", { dim: true });
   mdx?.resetMdxCaches();
   navigation?.resetNavigationCache?.();
+  referenced?.resetReferenceIndex?.();
   if (!skipIiif) {
     await cleanDir(OUT_DIR);
     logLine(`• Cleaned output directory`, "blue", { dim: true });

package/lib/build/iiif.js

@@ -18,6 +18,7 @@ const mdx = require("./mdx");
 const {log, logLine, logResponse} = require("./log");
 const { getPageContext } = require("../page-context");
 const PageContext = getPageContext();
+const referenced = require("../components/referenced");
 const {
   getThumbnail,
   getRepresentativeImage,
@@ -1288,6 +1289,8 @@ async function buildIiifCollectionPages(CONFIG) {
     throw new Error(`Failed to compile content/works/_layout.mdx: ${message}`);
   }
 
+  referenced.ensureReferenceIndex();
+
   for (let ci = 0; ci < chunks; ci++) {
     const chunk = tasks.slice(ci * chunkSize, (ci + 1) * chunkSize);
     logLine(`• Chunk ${ci + 1}/${chunks}`, "blue", {dim: true});
@@ -1412,6 +1415,8 @@ async function buildIiifCollectionPages(CONFIG) {
           else idxMap.byId.push(newEntry);
           await saveManifestIndex(idxMap);
         }
+        const manifestId = manifest && manifest.id ? manifest.id : id;
+        const references = referenced.getReferencesForManifest(manifestId);
         const href = path.join("works", slug + ".html");
         const outPath = path.join(OUT_DIR, href);
         ensureDirSync(path.dirname(outPath));
@@ -1456,6 +1461,8 @@ async function buildIiifCollectionPages(CONFIG) {
             slug,
             type: "work",
             description: pageDescription,
+            manifestId,
+            referencedBy: references,
             meta: {
               title,
               description: pageDescription,
@@ -1471,7 +1478,11 @@ async function buildIiifCollectionPages(CONFIG) {
             pageDetails.meta.ogImage = ogImageForPage;
           }
           const pageContextValue = { navigation: null, page: pageDetails };
-          const mdxContent = React.createElement(WorksLayoutComp, {manifest});
+          const mdxContent = React.createElement(WorksLayoutComp, {
+            manifest,
+            references,
+            manifestId,
+          });
           const siteTree = mdxContent;
           const wrappedApp =
             app && app.App

package/lib/build/mdx.js

@@ -365,6 +365,18 @@ 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 markdownTableComponent =
+    components &&
+    (components.MarkdownTable ||
+      components.DocsMarkdownTable ||
+      components.MarkdownTables ||
+      components.MDXMarkdownTable);
+  const codeBlockComponent =
+    components &&
+    (components.DocsCodeBlock ||
+      components.CodeBlock ||
+      components.MarkdownCodeBlock ||
+      components.MDXCodeBlock);
   const rawHeadings = Array.isArray(extraProps && extraProps.page && extraProps.page.headings)
     ? extraProps.page.headings
         .map((heading) => (heading ? { ...heading } : heading))
@@ -467,6 +479,12 @@ async function compileMdxFile(filePath, outPath, Layout, extraProps = {}) {
     : withLayout;
   const withApp = React.createElement(app.App, null, withContext);
   const compMap = { ...components, ...headingComponents, a: Anchor };
+  if (markdownTableComponent && !compMap.table) {
+    compMap.table = markdownTableComponent;
+  }
+  if (codeBlockComponent && !compMap.pre) {
+    compMap.pre = codeBlockComponent;
+  }
   const page = MDXProvider
     ? React.createElement(MDXProvider, { components: compMap }, withApp)
     : withApp;

package/lib/build/pages.js

@@ -11,6 +11,7 @@ const {
 const { log } = require('./log');
 const mdx = require('./mdx');
 const navigation = require('../components/navigation');
+const referenced = require('../components/referenced');
 
 function normalizeWhitespace(value) {
   if (!value) return '';
@@ -89,6 +90,13 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
       ? mdx.parseFrontmatter(source)
       : { data: null, content: source };
   const frontmatterData = frontmatter && isPlainObject(frontmatter.data) ? frontmatter.data : null;
+  const referencedManifestIdsRaw = frontmatterData ? frontmatterData.referencedManifests : null;
+  const referencedManifestIds = referenced.normalizeReferencedManifestList(
+    referencedManifestIdsRaw
+  );
+  const referencedItems = referencedManifestIds.length
+    ? referenced.buildReferencedItems(referencedManifestIds)
+    : [];
   let layoutMeta = null;
   try {
     layoutMeta = await getNearestDirLayoutMeta(filePath);
@@ -134,11 +142,23 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   }
   if (frontmatterMeta) Object.assign(pageMeta, frontmatterMeta);
   if (Object.keys(pageMeta).length) basePage.meta = pageMeta;
+  if (referencedManifestIds.length) {
+    basePage.referencedManifests = referencedManifestIds;
+  }
+  if (referencedItems.length) {
+    basePage.referencedItems = referencedItems;
+  }
   if (Object.keys(basePage).length) {
     mergedProps.page = mergedProps.page
       ? { ...basePage, ...mergedProps.page }
       : basePage;
   }
+  if (referencedManifestIds.length) {
+    mergedProps.referencedManifests = referencedManifestIds;
+  }
+  if (referencedItems.length) {
+    mergedProps.referencedItems = referencedItems;
+  }
   if (navData && !mergedProps.navigation) {
     mergedProps.navigation = navData;
   }

package/lib/components/referenced.js

@@ -0,0 +1,212 @@
+const fs = require('fs');
+const path = require('path');
+const {
+  CONTENT_DIR,
+  rootRelativeHref,
+} = require('../common');
+const mdx = require('../build/mdx.js');
+const {
+  firstLabelString,
+  normalizeIiifId,
+  equalIiifId,
+  readJson,
+  findSlugByIdFromDiskSync,
+} = require('./featured');
+
+const IIIF_INDEX_PATH = path.resolve('.cache/iiif/index.json');
+const IIIF_MANIFESTS_DIR = path.resolve('.cache/iiif/manifests');
+let manifestReferenceIndex = null;
+let referenceIndexBuilt = false;
+
+function firstTextValue(value) {
+  if (value == null) return '';
+  if (typeof value === 'string') return value.trim();
+  if (Array.isArray(value)) {
+    for (const entry of value) {
+      const text = firstTextValue(entry);
+      if (text) return text;
+    }
+    return '';
+  }
+  if (typeof value === 'object') {
+    const keys = Object.keys(value);
+    for (const key of keys) {
+      const entry = value[key];
+      if (Array.isArray(entry)) {
+        for (const child of entry) {
+          const text = firstTextValue(child);
+          if (text) return text;
+        }
+      } else {
+        const text = firstTextValue(entry);
+        if (text) return text;
+      }
+    }
+  }
+  return '';
+}
+
+function normalizeReferencedManifestList(raw) {
+  const values = Array.isArray(raw) ? raw : raw ? [raw] : [];
+  const seen = new Set();
+  const out = [];
+  for (const entry of values) {
+    if (entry === undefined || entry === null) continue;
+    const normalized = normalizeIiifId(entry);
+    const key = normalized || String(entry).trim();
+    if (!key || seen.has(key)) continue;
+    seen.add(key);
+    out.push(key);
+  }
+  return out;
+}
+
+function readManifestBySlug(slug) {
+  if (!slug) return null;
+  const filename = `${slug}.json`;
+  const filePath = path.join(IIIF_MANIFESTS_DIR, filename);
+  return readJson(filePath);
+}
+
+function assignThumbnailFields(target, entry, manifest) {
+  if (!target) return target;
+  const heroThumb = entry && entry.heroThumbnail ? String(entry.heroThumbnail) : '';
+  const fallbackThumb = entry && entry.thumbnail ? String(entry.thumbnail) : '';
+  if (heroThumb) {
+    target.thumbnail = heroThumb;
+    if (typeof entry.heroThumbnailWidth === 'number') target.thumbnailWidth = entry.heroThumbnailWidth;
+    if (typeof entry.heroThumbnailHeight === 'number') target.thumbnailHeight = entry.heroThumbnailHeight;
+  } else if (fallbackThumb) {
+    target.thumbnail = fallbackThumb;
+    if (typeof entry.thumbnailWidth === 'number') target.thumbnailWidth = entry.thumbnailWidth;
+    if (typeof entry.thumbnailHeight === 'number') target.thumbnailHeight = entry.thumbnailHeight;
+  }
+  if (!target.thumbnail && manifest && manifest.thumbnail) {
+    const thumb = manifest.thumbnail;
+    if (Array.isArray(thumb) && thumb.length) {
+      const first = thumb[0] || {};
+      const id = first.id || first['@id'] || first.url || '';
+      if (id) target.thumbnail = String(id);
+      if (typeof first.width === 'number') target.thumbnailWidth = first.width;
+      if (typeof first.height === 'number') target.thumbnailHeight = first.height;
+    } else if (thumb && typeof thumb === 'object') {
+      const id = thumb.id || thumb['@id'] || thumb.url || '';
+      if (id) target.thumbnail = String(id);
+      if (typeof thumb.width === 'number') target.thumbnailWidth = thumb.width;
+      if (typeof thumb.height === 'number') target.thumbnailHeight = thumb.height;
+    }
+  }
+  return target;
+}
+
+function buildReferencedItems(referencedIds) {
+  const ids = normalizeReferencedManifestList(referencedIds);
+  if (!ids.length) return [];
+  const index = readJson(IIIF_INDEX_PATH) || {};
+  const byId = Array.isArray(index.byId) ? index.byId : [];
+  const items = [];
+  for (const id of ids) {
+    const entry = byId.find(
+      (candidate) => candidate && candidate.type === 'Manifest' && equalIiifId(candidate.id, id)
+    );
+    const slug = entry && entry.slug ? entry.slug : findSlugByIdFromDiskSync(id);
+    if (!slug) continue;
+    const manifest = readManifestBySlug(slug);
+    if (!manifest) continue;
+    const href = rootRelativeHref(path.join('works', `${slug}.html`).split(path.sep).join('/'));
+    const title = firstLabelString(manifest.label);
+    const summary = firstTextValue(manifest.summary);
+    const item = { id, slug, href, title };
+    if (summary) item.summary = summary;
+    assignThumbnailFields(item, entry, manifest);
+    items.push(item);
+  }
+  return items;
+}
+
+function isReservedContentFile(p) {
+  return mdx.isReservedFile ? mdx.isReservedFile(p) : path.basename(p).startsWith('_');
+}
+
+function resolveHrefFromContentPath(filePath) {
+  const rel = path.relative(CONTENT_DIR, filePath).replace(/\\/g, '/');
+  const htmlRel = rel.replace(/\.mdx$/i, '.html');
+  return rootRelativeHref(htmlRel);
+}
+
+function buildReferenceIndexSync() {
+  const map = new Map();
+  function record(filePath) {
+    let raw = '';
+    try {
+      raw = fs.readFileSync(filePath, 'utf8');
+    } catch (_) {
+      return;
+    }
+    const frontmatter = mdx.parseFrontmatter ? mdx.parseFrontmatter(raw) : { data: null };
+    const data = frontmatter && frontmatter.data && typeof frontmatter.data === 'object' ? frontmatter.data : null;
+    const ids = normalizeReferencedManifestList(data && data.referencedManifests);
+    if (!ids.length) return;
+    const title = (data && typeof data.title === 'string' && data.title.trim())
+      ? data.title.trim()
+      : mdx.extractTitle ? mdx.extractTitle(raw) : path.basename(filePath, path.extname(filePath));
+    const href = resolveHrefFromContentPath(filePath);
+    const entry = { title, href };
+    for (const id of ids) {
+      const normalized = normalizeIiifId(id);
+      if (!normalized) continue;
+      const list = map.get(normalized) || [];
+      if (!list.some((item) => item.href === entry.href)) list.push(entry);
+      map.set(normalized, list);
+    }
+  }
+  function walk(dir) {
+    let entries = [];
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true });
+    } catch (_) {
+      return;
+    }
+    for (const entry of entries) {
+      const filePath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        walk(filePath);
+      } else if (entry.isFile() && /\.mdx$/i.test(entry.name) && !isReservedContentFile(filePath)) {
+        record(filePath);
+      }
+    }
+  }
+  walk(CONTENT_DIR);
+  for (const [key, list] of map.entries()) {
+    list.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
+  }
+  manifestReferenceIndex = map;
+  referenceIndexBuilt = true;
+  return manifestReferenceIndex;
+}
+
+function ensureReferenceIndex() {
+  if (referenceIndexBuilt && manifestReferenceIndex) return manifestReferenceIndex;
+  return buildReferenceIndexSync();
+}
+
+function resetReferenceIndex() {
+  referenceIndexBuilt = false;
+  manifestReferenceIndex = null;
+}
+
+function getReferencesForManifest(manifestId) {
+  const normalized = normalizeIiifId(manifestId);
+  if (!normalized) return [];
+  const index = ensureReferenceIndex();
+  const list = index.get(normalized) || [];
+  return list.map((entry) => ({ ...entry }));
+}
+
+module.exports = {
+  normalizeReferencedManifestList,
+  buildReferencedItems,
+  ensureReferenceIndex,
+  resetReferenceIndex,
+  getReferencesForManifest,
+};

package/package.json

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

package/ui/dist/index.mjs

@@ -19,12 +19,14 @@ function Card({
   className,
   style,
   children,
+  lazy = true,
   ...rest
 }) {
   const containerRef = useRef(null);
-  const [inView, setInView] = useState(false);
-  const [imageLoaded, setImageLoaded] = useState(false);
+  const [inView, setInView] = useState(!lazy);
+  const [imageLoaded, setImageLoaded] = useState(!lazy);
   useEffect(() => {
+    if (!lazy) return;
     if (!containerRef.current) return;
     if (typeof IntersectionObserver !== "function") {
       setInView(true);
@@ -56,7 +58,7 @@ function Card({
       } catch (_) {
       }
     };
-  }, []);
+  }, [lazy]);
   const w = Number(imgWidth);
   const h = Number(imgHeight);
   const ratio = Number.isFinite(Number(aspectRatio)) && Number(aspectRatio) > 0 ? Number(aspectRatio) : Number.isFinite(w) && w > 0 && Number.isFinite(h) && h > 0 ? w / h : void 0;