@canopy-iiif/app 0.6.28 → 0.7.1

package/lib/build/styles.js

@@ -0,0 +1,141 @@
+const {
+  fs,
+  fsp,
+  path,
+  OUT_DIR,
+  CONTENT_DIR,
+  ensureDirSync,
+} = require("../common");
+
+async function ensureStyles() {
+  const stylesDir = path.join(OUT_DIR, "styles");
+  const dest = path.join(stylesDir, "styles.css");
+  const customContentCss = path.join(CONTENT_DIR, "_styles.css");
+  const appStylesDir = path.join(process.cwd(), "app", "styles");
+  const customAppCss = path.join(appStylesDir, "index.css");
+  ensureDirSync(stylesDir);
+
+  const root = process.cwd();
+  const twConfigsRoot = [
+    path.join(root, "tailwind.config.js"),
+    path.join(root, "tailwind.config.cjs"),
+    path.join(root, "tailwind.config.mjs"),
+    path.join(root, "tailwind.config.ts"),
+  ];
+  const twConfigsApp = [
+    path.join(appStylesDir, "tailwind.config.js"),
+    path.join(appStylesDir, "tailwind.config.cjs"),
+    path.join(appStylesDir, "tailwind.config.mjs"),
+    path.join(appStylesDir, "tailwind.config.ts"),
+  ];
+  let configPath = [...twConfigsApp, ...twConfigsRoot].find((p) => {
+    try {
+      return fs.existsSync(p);
+    } catch (_) {
+      return false;
+    }
+  });
+  if (!configPath) {
+    try {
+      const { CACHE_DIR } = require("../common");
+      const genDir = path.join(CACHE_DIR, "tailwind");
+      ensureDirSync(genDir);
+      const genCfg = path.join(genDir, "tailwind.config.js");
+      const cfg = `module.exports = {\n  presets: [require('@canopy-iiif/app/ui/canopy-iiif-preset')],\n  content: [\n    './content/**/*.{mdx,html}',\n    './site/**/*.html',\n    './site/**/*.js',\n    './packages/app/ui/**/*.{js,jsx,ts,tsx}',\n    './packages/app/lib/iiif/components/**/*.{js,jsx}',\n  ],\n  theme: { extend: {} },\n  plugins: [require('@canopy-iiif/app/ui/canopy-iiif-plugin')],\n};\n`;
+      fs.writeFileSync(genCfg, cfg, "utf8");
+      configPath = genCfg;
+    } catch (_) {
+      configPath = null;
+    }
+  }
+
+  const inputCss = fs.existsSync(customAppCss)
+    ? customAppCss
+    : fs.existsSync(customContentCss)
+    ? customContentCss
+    : null;
+
+  let generatedInput = null;
+  if (!inputCss) {
+    try {
+      const { CACHE_DIR } = require("../common");
+      const genDir = path.join(CACHE_DIR, "tailwind");
+      ensureDirSync(genDir);
+      generatedInput = path.join(genDir, "index.css");
+      const css = `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`;
+      fs.writeFileSync(generatedInput, css, "utf8");
+    } catch (_) {
+      generatedInput = null;
+    }
+  }
+
+  function resolveTailwindCli() {
+    try {
+      const cliJs = require.resolve("tailwindcss/lib/cli.js");
+      return { cmd: process.execPath, args: [cliJs] };
+    } catch (_) {}
+    try {
+      const localBin = path.join(
+        process.cwd(),
+        "node_modules",
+        ".bin",
+        process.platform === "win32" ? "tailwindcss.cmd" : "tailwindcss"
+      );
+      if (fs.existsSync(localBin)) return { cmd: localBin, args: [] };
+    } catch (_) {}
+    return null;
+  }
+  function buildTailwindCli({ input, output, config, minify = true }) {
+    try {
+      const cli = resolveTailwindCli();
+      if (!cli) return false;
+      const { spawnSync } = require("child_process");
+      const args = ["-i", input, "-o", output];
+      if (config) args.push("-c", config);
+      if (minify) args.push("--minify");
+      const res = spawnSync(cli.cmd, [...cli.args, ...args], {
+        stdio: "inherit",
+        env: { ...process.env, BROWSERSLIST_IGNORE_OLD_DATA: "1" },
+      });
+      return !!res && res.status === 0;
+    } catch (_) {
+      return false;
+    }
+  }
+
+  if (configPath && (inputCss || generatedInput)) {
+    const ok = buildTailwindCli({
+      input: inputCss || generatedInput,
+      output: dest,
+      config: configPath,
+      minify: true,
+    });
+    if (ok) return; // Tailwind compiled CSS
+  }
+
+  function isTailwindSource(p) {
+    try {
+      const s = fs.readFileSync(p, "utf8");
+      return /@tailwind\s+(base|components|utilities)/.test(s);
+    } catch (_) {
+      return false;
+    }
+  }
+  if (fs.existsSync(customAppCss)) {
+    if (!isTailwindSource(customAppCss)) {
+      await fsp.copyFile(customAppCss, dest);
+      return;
+    }
+  }
+  if (fs.existsSync(customContentCss)) {
+    if (!isTailwindSource(customContentCss)) {
+      await fsp.copyFile(customContentCss, dest);
+      return;
+    }
+  }
+
+  const css = `:root{--max-w:760px;--muted:#6b7280}*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;max-width:var(--max-w);margin:2rem auto;padding:0 1rem;line-height:1.6}a{color:#2563eb;text-decoration:none}a:hover{text-decoration:underline}.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:1rem 0;border-bottom:1px solid #e5e7eb}.site-footer{border-bottom:0;border-top:1px solid #e5e7eb;color:var(--muted)}.brand{font-weight:600}.content pre{background:#f6f8fa;padding:1rem;overflow:auto}.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;background:#f6f8fa;padding:.1rem .3rem;border-radius:4px}.tabs{display:flex;gap:.5rem;align-items:center;border-bottom:1px solid #e5e7eb;margin:.5rem 0}.tab{background:none;border:0;color:#374151;padding:.25rem .5rem;border-radius:.375rem;cursor:pointer}.tab:hover{color:#111827}.tab-active{color:#2563eb;border:1px solid #e5e7eb;border-bottom:0;background:#fff}.masonry{column-gap:1rem;column-count:1}@media(min-width:768px){.masonry{column-count:2}}@media(min-width:1024px){.masonry{column-count:3}}.masonry>*{break-inside:avoid;margin-bottom:1rem;display:block}[data-grid-variant=masonry]{column-gap:var(--grid-gap,1rem);column-count:var(--cols-base,1)}@media(min-width:768px){[data-grid-variant=masonry]{column-count:var(--cols-md,2)}}@media(min-width:1024px){[data-grid-variant=masonry]{column-count:var(--cols-lg,3)}}[data-grid-variant=masonry]>*{break-inside:avoid;margin-bottom:var(--grid-gap,1rem);display:block}[data-grid-variant=grid]{display:grid;grid-template-columns:repeat(var(--cols-base,1),minmax(0,1fr));gap:var(--grid-gap,1rem)}@media(min-width:768px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr))}}@media(min-width:1024px){[data-grid-variant=grid]{grid-template-columns:repeat(var(--cols-lg,3),minmax(0,1fr))}}`;
+  await fsp.writeFile(dest, css, "utf8");
+}
+
+module.exports = { ensureStyles };

package/lib/{thumbnail.js → iiif/thumbnail.js}

@@ -84,4 +84,3 @@ async function getThumbnailUrl(resource, preferredSize = 1200, unsafe = false) {
 }
 
 module.exports = { getRepresentativeImage, getThumbnail, getThumbnailUrl };
-

package/lib/index.js

@@ -1,5 +1,4 @@
 module.exports = {
-  build: require('./build').build,
-  dev: require('./dev').dev
+  build: require('./build/build').build,
+  dev: require('./build/dev').dev
 };
-

package/lib/{search.js → search/search.js}

@@ -1,8 +1,8 @@
 const React = require('react');
 const ReactDOMServer = require('react-dom/server');
 const crypto = require('crypto');
-const { path, withBase } = require('./common');
-const { ensureDirSync, OUT_DIR, htmlShell, fsp } = require('./common');
+const { path, withBase } = require('../common');
+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';
@@ -200,10 +200,10 @@ if (typeof document !== 'undefined') {
 `;
 
 async function ensureSearchRuntime() {
-  const { fs, path } = require('./common');
+  const { fs, path } = require('../common');
   ensureDirSync(OUT_DIR);
   let esbuild = null;
-  try { esbuild = require('../ui/node_modules/esbuild'); } catch (_) { try { esbuild = require('esbuild'); } catch (_) {} }
+  try { esbuild = require('../../ui/node_modules/esbuild'); } catch (_) { try { esbuild = require('esbuild'); } catch (_) {} }
   if (!esbuild) { console.warn('Search: skipped bundling (no esbuild)'); return; }
   const entry = path.join(__dirname, 'search-app.jsx');
   const scriptsDir = path.join(OUT_DIR, 'scripts');
@@ -327,7 +327,7 @@ async function ensureSearchRuntime() {
     return;
   }
   try {
-    const { logLine } = require('./log');
+    const { logLine } = require('../build/log');
     let size = 0; try { const st = fs.statSync(outFile); size = st.size || 0; } catch (_) {}
     const kb = size ? ` (${(size/1024).toFixed(1)} KB)` : '';
     const rel = path.relative(process.cwd(), outFile).split(path.sep).join('/');
@@ -343,9 +343,9 @@ async function buildSearchPage() {
     const searchLayoutPath = path.join(path.resolve('content'), 'search', '_layout.mdx');
     let body = '';
     let head = '';
-    if (require('./common').fs.existsSync(searchLayoutPath)) {
+    if (require('../common').fs.existsSync(searchLayoutPath)) {
       try {
-        const mdx = require('./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 : '';
@@ -361,7 +361,7 @@ async function buildSearchPage() {
         React.createElement('h1', null, 'Search'),
         React.createElement('div', { id: 'search-root' })
       );
-      const { loadAppWrapper } = require('./mdx');
+      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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canopy-iiif/app",
-  "version": "0.6.28",
+  "version": "0.7.1",
   "private": false,
   "license": "MIT",
   "author": "Mat Jordan <mat@northwestern.edu>",
@@ -29,6 +29,7 @@
     "@iiif/helpers": "^1.4.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
+    "charm": "^1.0.2",
     "cmdk": "^1.1.1",
     "js-yaml": "^4.1.0",
     "react-masonry-css": "^1.0.16",