@canopy-iiif/app 0.10.15 → 0.10.17

package/lib/build/iiif.js

@@ -12,6 +12,7 @@ const {
   ensureDirSync,
   htmlShell,
   rootRelativeHref,
+  canopyBodyClassForType,
 } = require("../common");
 const mdx = require("./mdx");
 const {log, logLine, logResponse} = require("./log");
@@ -1618,12 +1619,15 @@ async function buildIiifCollectionPages(CONFIG) {
           } catch (_) {}
           let pageBody = body;
           const headExtra = headSegments.join("") + vendorTag;
+          const pageType = (pageDetails && pageDetails.type) || "work";
+          const bodyClass = canopyBodyClassForType(pageType);
           let html = htmlShell({
             title,
             body: pageBody,
             cssHref: null,
             scriptHref: jsRel,
             headExtra,
+            bodyClass,
           });
           try {
             html = require("../common").applyBaseToHtml(html);

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

@@ -1,4 +1,13 @@
-const { fs, fsp, path, CONTENT_DIR, OUT_DIR, ensureDirSync, htmlShell } = require('../common');
+const {
+  fs,
+  fsp,
+  path,
+  CONTENT_DIR,
+  OUT_DIR,
+  ensureDirSync,
+  htmlShell,
+  canopyBodyClassForType,
+} = require('../common');
 const { log } = require('./log');
 const mdx = require('./mdx');
 const navigation = require('../components/navigation');
@@ -210,7 +219,16 @@ async function renderContentMdxToHtml(filePath, outPath, extraProps = {}) {
   if (extraStyles.length) headSegments.push(extraStyles.join(''));
   if (extraScripts.length) headSegments.push(extraScripts.join(''));
   const headExtra = headSegments.join('') + vendorTag;
-  const html = htmlShell({ title, body, cssHref: null, scriptHref: jsRel, headExtra });
+  const typeForClass = resolvedType || 'page';
+  const bodyClass = canopyBodyClassForType(typeForClass);
+  const html = htmlShell({
+    title,
+    body,
+    cssHref: null,
+    scriptHref: jsRel,
+    headExtra,
+    bodyClass,
+  });
   const { applyBaseToHtml } = require('../common');
   return applyBaseToHtml(html);
 }

package/lib/common.js

@@ -64,7 +64,35 @@ async function cleanDir(dir) {
   await fsp.mkdir(dir, { recursive: true });
 }
 
-function htmlShell({ title, body, cssHref, scriptHref, headExtra }) {
+function normalizeClassList(value) {
+  if (!value) return '';
+  const list = Array.isArray(value) ? value : [value];
+  const classes = [];
+  for (const entry of list) {
+    if (!entry && entry !== 0) continue;
+    const raw = String(entry)
+      .split(/\s+/)
+      .map((segment) => segment.trim())
+      .filter(Boolean);
+    classes.push(...raw);
+  }
+  const unique = classes.filter(Boolean);
+  return unique.length ? unique.join(' ') : '';
+}
+
+function canopyBodyClassForType(type) {
+  const raw = String(type == null || type === '' ? 'page' : type)
+    .trim()
+    .toLowerCase();
+  const slug = raw
+    .replace(/[^a-z0-9_-]+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '');
+  if (!slug) return 'canopy-type-page';
+  return `canopy-type-${slug}`;
+}
+
+function htmlShell({ title, body, cssHref, scriptHref, headExtra, bodyClass }) {
   const scriptTag = scriptHref ? `<script defer src="${scriptHref}"></script>` : '';
   const extra = headExtra ? String(headExtra) : '';
   const cssTag = cssHref ? `<link rel="stylesheet" href="${cssHref}">` : '';
@@ -72,7 +100,9 @@ function htmlShell({ title, body, cssHref, scriptHref, headExtra }) {
   const htmlClass = appearance === 'dark' ? ' class="dark"' : '';
   const hasCustomTitle = /<title\b/i.test(extra);
   const titleTag = hasCustomTitle ? '' : `<title>${title}</title>`;
-  return `<!doctype html><html lang="en"${htmlClass}><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/>${titleTag}${extra}${cssTag}${scriptTag}</head><body>${body}</body></html>`;
+  const bodyClassName = normalizeClassList(bodyClass);
+  const bodyAttr = bodyClassName ? ` class="${bodyClassName}"` : '';
+  return `<!doctype html><html lang="en"${htmlClass}><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/>${titleTag}${extra}${cssTag}${scriptTag}</head><body${bodyAttr}>${body}</body></html>`;
 }
 
 function withBase(href) {
@@ -173,4 +203,5 @@ module.exports = {
   absoluteUrl,
   applyBaseToHtml,
   rootRelativeHref,
+  canopyBodyClassForType,
 };

package/lib/search/search.js

@@ -1,7 +1,16 @@
 const React = require('react');
 const ReactDOMServer = require('react-dom/server');
 const crypto = require('crypto');
-const { path, withBase, rootRelativeHref, ensureDirSync, OUT_DIR, htmlShell, fsp } = require('../common');
+const {
+  path,
+  withBase,
+  rootRelativeHref,
+  ensureDirSync,
+  OUT_DIR,
+  htmlShell,
+  fsp,
+  canopyBodyClassForType,
+} = require('../common');
 
 async function ensureSearchRuntime() {
   const { fs, path } = require('../common');
@@ -172,7 +181,8 @@ async function buildSearchPage() {
         headExtra = `<script>window.CANOPY_BASE_PATH=${JSON.stringify(BASE_PATH)}</script>` + headExtra;
       }
     } catch (_) {}
-    let html = htmlShell({ title: 'Search', body, cssHref: null, scriptHref: jsRel, headExtra });
+    const bodyClass = canopyBodyClassForType('search');
+    let html = htmlShell({ title: 'Search', body, cssHref: null, scriptHref: jsRel, headExtra, bodyClass });
     try { html = require('../common').applyBaseToHtml(html); } catch (_) {}
     await fsp.writeFile(outPath, html, 'utf8');
     console.log('Search: Built', path.relative(process.cwd(), outPath));

package/package.json

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

package/ui/dist/index.mjs

@@ -228,9 +228,23 @@ function Grid({
 
 // ui/src/layout/Container.jsx
 import React5 from "react";
-function Container({ className = "", children, ...rest }) {
-  const classes = ["mx-auto", "max-w-content", "w-full", "px-6", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React5.createElement("div", { className: classes, ...rest }, children);
+function Container({
+  className = "",
+  variant = "content",
+  children,
+  ...rest
+}) {
+  const variantClass = variant === "wide" ? "max-w-wide" : "max-w-content";
+  const classes = ["mx-auto", variantClass, "w-full", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      className: classes,
+      ...rest,
+      style: { ...rest.style, padding: "1.618rem" }
+    },
+    children
+  );
 }
 
 // ui/src/layout/Button.jsx