domma-cms 0.21.0 → 0.22.2

package/scripts/verify-assets.mjs

@@ -0,0 +1,190 @@
+/**
+ * Asset Import Verifier — build/publish gate
+ *
+ * Statically resolves every local ESM import under the browser-facing code
+ * (admin/ + public/) against the files that actually exist, and fails if any
+ * specifier points at a missing file ("dangling import").
+ *
+ * Why this exists
+ * ---------------
+ * The admin SPA and public site ship UNMINIFIED-then-minified ESM that browsers
+ * import natively (no bundler). If a release ships consumer code that imports a
+ * new module but forgets to include the module file (as 0.22.1 did with
+ * /public/js/menu-decor.mjs), every page 404s on the import and the whole site
+ * breaks — with no signal but a browser console error, and it cascades to every
+ * downstream project that copies these dirs on update. A bundler would catch
+ * this at build time; because we don't bundle, this gate stands in for that.
+ *
+ * Usage
+ * -----
+ *   node scripts/verify-assets.mjs [root]      # default root: repo root
+ * Exits 1 (with a report) on any dangling import, 0 otherwise. Wired into
+ * scripts/build.js so `make pack` / `make release-npm` cannot ship a broken set.
+ *
+ * Scope (deliberately conservative — zero false positives is the whole point):
+ * only STATIC, LOCAL specifiers with an explicit extension are checked — the
+ * only kind this codebase emits. Bare (npm) specifiers, URLs, dynamic/template
+ * specifiers, commented-out imports, and extension-less paths are all ignored.
+ */
+
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+
+const SCAN_EXTS = new Set(['.js', '.mjs']);
+const CHECK_EXTS = new Set(['.js', '.mjs', '.css']);
+
+const FROM_RE = /\bfrom\s*(['"])([^'"]+)\1/g;
+const SIDE_EFFECT_RE = /(?:^|[;{}\s])import\s*(['"])([^'"]+)\1/g;
+const DYNAMIC_RE = /\bimport\s*\(\s*(['"])([^'"]+)\1\s*\)/g;
+
+function isCheckableSpecifier(spec) {
+    if (typeof spec !== 'string' || !spec) return false;
+    if (!(spec.startsWith('/') || spec.startsWith('./') || spec.startsWith('../'))) return false;
+    const clean = spec.replace(/[?#].*$/, '');
+    return CHECK_EXTS.has(path.extname(clean).toLowerCase());
+}
+
+function resolveSpecifier(spec, importer, projectRoot) {
+    const clean = spec.replace(/[?#].*$/, '');
+    if (clean.startsWith('/')) return path.join(projectRoot, clean); // served /public/... → root/public/...
+    return path.resolve(path.dirname(importer), clean);
+}
+
+/**
+ * Strip // and /* *\/ comments while preserving string-literal bodies, so a
+ * commented-out import isn't flagged and a "https://…" URL isn't mistaken for a
+ * comment. Both are false positives, fatal for a publish gate.
+ */
+function stripComments(source) {
+    let out = '';
+    let state = 'code';
+    for (let i = 0; i < source.length; i++) {
+        const c = source[i];
+        const n = source[i + 1];
+        switch (state) {
+            case 'code':
+                if (c === '/' && n === '/') { state = 'line'; i++; }
+                else if (c === '/' && n === '*') { state = 'block'; i++; }
+                else if (c === "'") { state = 'single'; out += c; }
+                else if (c === '"') { state = 'double'; out += c; }
+                else if (c === '`') { state = 'template'; out += c; }
+                else out += c;
+                break;
+            case 'line':
+                if (c === '\n') { state = 'code'; out += c; }
+                break;
+            case 'block':
+                if (c === '*' && n === '/') { state = 'code'; i++; }
+                break;
+            case 'single':
+            case 'double':
+            case 'template': {
+                out += c;
+                const quote = state === 'single' ? "'" : state === 'double' ? '"' : '`';
+                if (c === '\\') { out += source[i + 1] ?? ''; i++; }
+                else if (c === quote) state = 'code';
+                break;
+            }
+        }
+    }
+    return out;
+}
+
+function extractSpecifiers(rawSource) {
+    const source = stripComments(rawSource);
+    const out = new Set();
+    for (const re of [FROM_RE, SIDE_EFFECT_RE, DYNAMIC_RE]) {
+        re.lastIndex = 0;
+        let m;
+        while ((m = re.exec(source)) !== null) {
+            if (isCheckableSpecifier(m[2])) out.add(m[2]);
+        }
+    }
+    return out;
+}
+
+async function listScannable(dir) {
+    const result = [];
+    let entries;
+    try {
+        entries = await fs.readdir(dir, { withFileTypes: true });
+    } catch {
+        return result;
+    }
+    for (const entry of entries) {
+        const full = path.join(dir, entry.name);
+        let isDir = entry.isDirectory();
+        let isFile = entry.isFile();
+        if (entry.isSymbolicLink()) {
+            try {
+                const st = await fs.stat(full);
+                isDir = st.isDirectory();
+                isFile = st.isFile();
+            } catch { continue; }
+        }
+        if (isDir) {
+            if (entry.name === 'node_modules' || entry.name.startsWith('.')) continue;
+            result.push(...await listScannable(full));
+        } else if (isFile && SCAN_EXTS.has(path.extname(entry.name).toLowerCase())) {
+            result.push(full);
+        }
+    }
+    return result;
+}
+
+export async function verifyAssetImports({ projectRoot, roots = ['admin', 'public'] }) {
+    const missing = [];
+    let scanned = 0;
+    for (const rel of roots) {
+        const rootAbs = path.join(projectRoot, rel);
+        if (!existsSync(rootAbs)) continue;
+        for (const file of await listScannable(rootAbs)) {
+            scanned++;
+            let source;
+            try { source = await fs.readFile(file, 'utf8'); } catch { continue; }
+            for (const spec of extractSpecifiers(source)) {
+                const resolved = resolveSpecifier(spec, file, projectRoot);
+                if (!existsSync(resolved)) {
+                    missing.push({
+                        importer: path.relative(projectRoot, file),
+                        specifier: spec,
+                        resolved: path.relative(projectRoot, resolved),
+                    });
+                }
+            }
+        }
+    }
+    return { ok: missing.length === 0, scanned, missing };
+}
+
+export function formatReport(result, label) {
+    if (result.ok) {
+        return `[verify-assets] OK — ${result.scanned} files scanned, all local imports resolve (${label}).`;
+    }
+    const lines = [
+        '',
+        '  ╔════════════════════════════════════════════════════════════════╗',
+        '  ║  ASSET INTEGRITY FAILURE — dangling front-end imports detected  ║',
+        '  ╚════════════════════════════════════════════════════════════════╝',
+        `  Context: ${label}`,
+        `  ${result.missing.length} import(s) reference files that do not exist:`,
+        '',
+    ];
+    for (const m of result.missing) {
+        lines.push(`    ✗ ${m.importer}`);
+        lines.push(`        imports "${m.specifier}"  →  missing ${m.resolved}`);
+    }
+    lines.push('');
+    lines.push('  A page that loads one of these modules will 404 and fail to render.');
+    lines.push('  Add the missing file (or remove the import) before building/publishing.');
+    lines.push('');
+    return lines.join('\n');
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+    const projectRoot = path.resolve(process.argv[2] || process.cwd());
+    const result = await verifyAssetImports({ projectRoot });
+    console.log(formatReport(result, projectRoot));
+    process.exit(result.ok ? 0 : 1);
+}

package/server/services/markdown.js

@@ -11,7 +11,7 @@ import {fileURLToPath} from 'url';
 import {applyTransforms, getSanitizeExtensions, getShortcodeProcessors} from './hooks.js';
 import {getConfig} from '../config.js';
 import {getCollection, listEntries} from './collections.js';
-import {getMenu, resolveLocation} from './menus.js';
+import {getMenu, resolveLocation, resolveMenuDecorations, colourToCss} from './menus.js';
 import {checkVisibility} from '../middleware/auth.js';
 
 const __dirname_md = path.dirname(fileURLToPath(import.meta.url));
@@ -3385,7 +3385,8 @@ async function processMenuBlocks(markdown, user) {
         const capped = Number.isFinite(depth) && depth > 0 ? capDepth(items, depth) : items;
         const klass        = attrs.class   ? ` ${escapeAttr(attrs.class)}`                    : '';
         const variantClass = attrs.variant ? ` dm-menu--variant-${escapeAttr(attrs.variant)}` : '';
-        const html = `<nav class="dm-menu dm-menu--${escapeAttr(menu.slug)}${variantClass}${klass}" data-menu="${escapeAttr(menu.slug)}">${renderMenuItemsAsUl(capped)}</nav>`;
+        const decorated = await resolveMenuDecorations(capped);
+        const html = `<nav class="dm-menu dm-menu--${escapeAttr(menu.slug)}${variantClass}${klass}" data-menu="${escapeAttr(menu.slug)}">${renderMenuItemsAsUl(decorated)}</nav>`;
         out = out.replace(m[0], html);
     }
     return out;
@@ -3394,10 +3395,25 @@ async function processMenuBlocks(markdown, user) {
 function renderMenuItemsAsUl(items) {
     if (!items.length) return '';
     const lis = items.map(it => {
+        // Separator items render as a list-style <hr> divider.
+        if (it && it.type === 'separator') return '<li class="dm-menu-sep" role="separator"><hr></li>';
         const href  = escapeAttr(it.url || '#');
         const text  = escapeAttr(it.text || '');
         const child = Array.isArray(it.items) && it.items.length ? renderMenuItemsAsUl(it.items) : '';
-        return `<li><a href="${href}">${text}</a>${child}</li>`;
+
+        // Colour override (server sanitiser allows inline style on <a>).
+        const colourCss = it.colour ? colourToCss(it.colour) : '';
+        const styleAttr = colourCss ? ` style="color:${colourCss}"` : '';
+
+        // Badge (static text or resolver-stamped count). Background from variant.
+        let badge = '';
+        if (it.badge && it.badge.text != null && it.badge.text !== '') {
+            const bg = it.badge.variant ? colourToCss(it.badge.variant) : '';
+            const badgeStyle = bg ? ` style="background:${bg};color:#fff"` : '';
+            badge = `<span class="dm-menu-badge"${badgeStyle}>${escapeAttr(String(it.badge.text))}</span>`;
+        }
+
+        return `<li><a href="${href}"${styleAttr}>${text}${badge}</a>${child}</li>`;
     }).join('');
     return `<ul>${lis}</ul>`;
 }

package/server/services/menus.js

@@ -12,6 +12,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import {fileURLToPath} from 'url';
 import {checkVisibility} from '../middleware/auth.js';
+import {listEntries} from './collections.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname  = path.dirname(__filename);
@@ -37,6 +38,71 @@ export function validateSlug(slug) {
     return typeof slug === 'string' && SLUG_RE.test(slug);
 }
 
+// ---------------------------------------------------------------------------
+// Decoration colour convention — preset key → theme CSS var, or #rrggbb hex.
+// A "colour value" is one of these preset keys or a 6-digit hex.
+// Keep PRESET_COLOUR_VARS in sync with the copy in public/js/menu-decor.mjs.
+// ---------------------------------------------------------------------------
+export const PRESET_COLOUR_VARS = {
+    primary: '--dm-primary',
+    success: '--dm-success',
+    danger:  '--dm-danger',
+    warning: '--dm-warning',
+    info:    '--dm-info',
+    neutral: '--dm-text-muted'
+};
+
+const HEX_COLOUR_RE = /^#[0-9a-fA-F]{6}$/;
+
+/** True if value is a known preset key or a 6-digit hex colour. */
+export function isValidColour(value) {
+    return typeof value === 'string'
+        && (Object.prototype.hasOwnProperty.call(PRESET_COLOUR_VARS, value) || HEX_COLOUR_RE.test(value));
+}
+
+/** Map a colour value to inline-CSS-ready text: var(--dm-…) | #hex | ''. */
+export function colourToCss(value) {
+    if (typeof value !== 'string') return '';
+    if (PRESET_COLOUR_VARS[value]) return `var(${PRESET_COLOUR_VARS[value]})`;
+    if (HEX_COLOUR_RE.test(value)) return value;
+    return '';
+}
+
+/**
+ * Walk a menu tree and resolve live badge counts. For any item whose
+ * `badge.countFrom` names a collection, the entry count replaces `badge.text`.
+ * Static badges and all other fields are left untouched. Failures (missing /
+ * unreadable collection) drop only that count, never the menu.
+ *
+ * @param {Array} items  Menu items (may be nested via `items`).
+ * @param {{countEntries?: (slug:string)=>Promise<number>}} [opts]
+ *        countEntries is injectable for testing; defaults to listEntries().length.
+ * @returns {Promise<Array>} A decorated copy (inputs are not mutated).
+ */
+export async function resolveMenuDecorations(items, opts = {}) {
+    const countEntries = opts.countEntries
+        || (async (slug) => (await listEntries(slug)).length);
+
+    async function walk(list) {
+        return Promise.all((list || []).map(async (it) => {
+            if (!it || it.type === 'separator') return it;
+            const next = {...it};
+            if (it.badge && it.badge.countFrom) {
+                try {
+                    const n = await countEntries(it.badge.countFrom);
+                    next.badge = {...it.badge, text: String(n)};
+                } catch {
+                    next.badge = {...it.badge};   // keep variant/etc; drop the count
+                }
+            }
+            if (Array.isArray(it.items)) next.items = await walk(it.items);
+            return next;
+        }));
+    }
+
+    return walk(items);
+}
+
 /**
  * Ensure MENUS_DIR exists. Safe to call repeatedly.
  *
@@ -253,6 +319,10 @@ export function validateMenu(menu) {
         errors.push('items must be an array');
     } else {
         walkItems(menu.items, (item, path) => {
+            // Separator items are purely visual dividers — no text/url required.
+            // Renderers translate them into <hr> / structural breaks.
+            if (item && item.type === 'separator') return;
+
             if (!item.text || typeof item.text !== 'string') {
                 errors.push(`Item ${path}: text is required`);
             }
@@ -272,6 +342,38 @@ export function validateMenu(menu) {
             if (item.items != null && !Array.isArray(item.items)) {
                 errors.push(`Item ${path}: items must be an array if present`);
             }
+
+            // --- Decoration shape checks (all optional) ---
+            if (item.badge != null) {
+                if (typeof item.badge !== 'object' || Array.isArray(item.badge)) {
+                    errors.push(`Item ${path}: badge must be an object`);
+                } else {
+                    if (item.badge.text != null && typeof item.badge.text !== 'string') {
+                        errors.push(`Item ${path}: badge.text must be a string`);
+                    }
+                    if (item.badge.countFrom != null && typeof item.badge.countFrom !== 'string') {
+                        errors.push(`Item ${path}: badge.countFrom must be a collection slug`);
+                    }
+                    if (item.badge.variant != null && !isValidColour(item.badge.variant)) {
+                        errors.push(`Item ${path}: badge.variant must be a preset key or #rrggbb`);
+                    }
+                }
+            }
+            if (item.pill != null) {
+                if (typeof item.pill !== 'object' || Array.isArray(item.pill)) {
+                    errors.push(`Item ${path}: pill must be an object`);
+                } else {
+                    if (item.pill.style != null && item.pill.style !== 'filled' && item.pill.style !== 'outline') {
+                        errors.push(`Item ${path}: pill.style must be "filled" or "outline"`);
+                    }
+                    if (item.pill.variant != null && !isValidColour(item.pill.variant)) {
+                        errors.push(`Item ${path}: pill.variant must be a preset key or #rrggbb`);
+                    }
+                }
+            }
+            if (item.colour != null && !isValidColour(item.colour)) {
+                errors.push(`Item ${path}: colour must be a preset key or #rrggbb`);
+            }
         });
     }
     return errors;

package/server/services/renderer.js

@@ -8,7 +8,7 @@ import {fileURLToPath} from 'url';
 import {getConfig} from '../config.js';
 import {getInjectionSnippets} from './plugins.js';
 import {applyTransforms} from './hooks.js';
-import {resolveLocation} from './menus.js';
+import {resolveLocation, resolveMenuDecorations} from './menus.js';
 
 const VALID_LAYOUT_WIDTHS = new Set(['narrow', 'normal', 'wide', 'full']);
 const CUSTOM_CSS_PATH = new URL('../../content/custom.css', import.meta.url).pathname;
@@ -78,6 +78,14 @@ export async function renderPage(page, opts = {}) {
     ]);
     const baseUrl = opts.baseUrl || site.baseUrl || '';
 
+    // Resolve live badge counts (countFrom) before the menus are injected as
+    // globals. Static badges/colours/pills pass through unchanged.
+    const [navItemsDecorated, footerPrimaryDecorated, footerLegalDecorated] = await Promise.all([
+        resolveMenuDecorations(navMenu ? navMenu.items : []),
+        resolveMenuDecorations(footerPrimary ? footerPrimary.items : []),
+        resolveMenuDecorations(footerLegal ? footerLegal.items : [])
+    ]);
+
     // Compose the navigation object the public site script expects:
     // brand from site.json.brand (parallel to adminBrand); items + variant +
     // position + style from the menu mapped to the navbar slot.
@@ -86,7 +94,7 @@ export async function renderPage(page, opts = {}) {
     const navigation = navMenu
         ? {
             brand:    site.brand || {},
-            items:    navMenu.items,
+            items:    navItemsDecorated,
             variant:  navMenu.variant  || 'default',
             position: navMenu.position || 'sticky',
             ...(navMenu.style && {style: navMenu.style})
@@ -147,8 +155,8 @@ export async function renderPage(page, opts = {}) {
 
     // Compose window.__CMS_FOOTER__ from the menus mapped to footer-primary / footer-legal.
     const footer = {
-        primary:   footerPrimary ? footerPrimary.items : [],
-        legal:     footerLegal   ? footerLegal.items   : [],
+        primary:   footerPrimaryDecorated,
+        legal:     footerLegalDecorated,
         copyright: site.footer?.copyright || ''
     };
     const footerJson = JSON.stringify(footer).replace(/<\/script>/gi, '<\\/script>');
@@ -454,6 +462,14 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
     ]);
     const baseUrl = seoMeta.baseUrl || site.baseUrl || '';
 
+    // Resolve live badge counts (countFrom) before the menus are injected as
+    // globals. Static badges/colours/pills pass through unchanged.
+    const [navItemsDecorated, footerPrimaryDecorated, footerLegalDecorated] = await Promise.all([
+        resolveMenuDecorations(navMenu ? navMenu.items : []),
+        resolveMenuDecorations(footerPrimary ? footerPrimary.items : []),
+        resolveMenuDecorations(footerLegal ? footerLegal.items : [])
+    ]);
+
     // Compose the navigation object the public site script expects:
     // brand from site.json.brand (parallel to adminBrand); items + variant +
     // position + style from the menu mapped to the navbar slot.
@@ -462,7 +478,7 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
     const navigation = navMenu
         ? {
             brand:    site.brand || {},
-            items:    navMenu.items,
+            items:    navItemsDecorated,
             variant:  navMenu.variant  || 'default',
             position: navMenu.position || 'sticky',
             ...(navMenu.style && {style: navMenu.style})
@@ -507,8 +523,8 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
 
     // Compose window.__CMS_FOOTER__ from the menus mapped to footer-primary / footer-legal.
     const footer = {
-        primary:   footerPrimary ? footerPrimary.items : [],
-        legal:     footerLegal   ? footerLegal.items   : [],
+        primary:   footerPrimaryDecorated,
+        legal:     footerLegalDecorated,
         copyright: site.footer?.copyright || ''
     };
     const footerJson = JSON.stringify(footer).replace(/<\/script>/gi, '<\\/script>');