domma-cms 0.52.0 → 0.54.0

package/server/services/menuRender.js

@@ -11,6 +11,10 @@
  * resolution happen before this - callers hand in the items they want drawn.
  */
 import {colourToCss, floatToCss, floatBehaviour, spacerSize} from './menus.js';
+// Highlight helpers live once, in the browser module, and are imported here -
+// the same shared-module arrangement collection-export.mjs has with
+// collections.js. Nothing in them touches the DOM.
+import {highlightAttrs, isCurrentItem} from '../../public/js/menu-decor.mjs';
 
 /** Attribute-safe escaping - mirrors escapeAttr in markdown.js. */
 function esc(str) {
@@ -28,10 +32,13 @@ function esc(str) {
  * children are drawn inline. Returns '' for an empty list so callers can
  * decide whether an empty menu is worth a wrapper at all.
  *
- * @param   {Array} items
+ * @param   {Array}  items
+ * @param   {string} [currentPath] The URL path being rendered. Items pointing at
+ *   it are marked `is-active` + `aria-current` so a `highlight.active` effect
+ *   has something to style. Omitted (the default) marks nothing.
  * @returns {string}
  */
-export function renderMenuItemsAsUl(items) {
+export function renderMenuItemsAsUl(items, currentPath = '') {
     if (!items || !items.length) return '';
     const lis = items.map(it => {
         if (it && it.type === 'separator') return '<li class="dm-menu-sep" role="separator"><hr></li>';
@@ -42,7 +49,13 @@ export function renderMenuItemsAsUl(items) {
         }
         const href  = esc(it.url || '#');
         const text  = esc(it.text || '');
-        const child = Array.isArray(it.items) && it.items.length ? renderMenuItemsAsUl(it.items) : '';
+        const child = Array.isArray(it.items) && it.items.length ? renderMenuItemsAsUl(it.items, currentPath) : '';
+
+        // The item for the page we are on. Both markers are emitted because
+        // sanitize-html keeps the class on every path while the aria attribute
+        // needs an explicit allowlist entry.
+        const current   = isCurrentItem(it.url, currentPath);
+        const classAttr = current ? ' class="is-active" aria-current="page"' : '';
 
         // Colour override (the server sanitiser allows inline style on <a>).
         const colourCss = it.colour ? colourToCss(it.colour) : '';
@@ -56,7 +69,7 @@ export function renderMenuItemsAsUl(items) {
             badge = `<span class="dm-menu-badge"${badgeStyle}>${esc(String(it.badge.text))}</span>`;
         }
 
-        return `<li><a href="${href}"${styleAttr}>${text}${badge}</a>${child}</li>`;
+        return `<li><a href="${href}"${classAttr}${styleAttr}>${text}${badge}</a>${child}</li>`;
     }).join('');
     return `<ul>${lis}</ul>`;
 }
@@ -71,6 +84,8 @@ export function renderMenuItemsAsUl(items) {
  * @param {string} [opts.variant]     Adds `dm-menu--variant-<x>`
  * @param {string} [opts.class]       Extra classes on the wrapper
  * @param {boolean}[opts.noFloat]     Render inline even if the menu floats in its slot
+ * @param {string} [opts.currentPath] URL path of the page being rendered, for
+ *   marking the current item. Callers that know it should always pass it.
  * @returns {string}
  */
 export function buildMenuNav(menu, items, opts = {}) {
@@ -86,8 +101,8 @@ export function buildMenuNav(menu, items, opts = {}) {
 
     const floatCss   = opts.noFloat ? '' : floatToCss(menu);
     const floatClass = floatCss ? ' dm-menu-floating' : '';
-    const floatAttrs = floatCss
-        ? ` style="${esc(floatCss)}" data-float-anchor="${esc(menu.float?.anchor || 'TL')}"`
+    const floatAnchorAttr = floatCss
+        ? ` data-float-anchor="${esc(menu.float?.anchor || 'TL')}"`
         : '';
 
     // Panel behaviour - only ever applies where the menu actually floats, so a
@@ -104,10 +119,25 @@ export function buildMenuNav(menu, items, opts = {}) {
 
     const flexClass = hasFlexSpacer(items) ? ' dm-menu--has-flex-spacer' : '';
 
+    // Item highlighting - two data attributes and an optional accent custom
+    // property; public/css/menu-highlight.css does the rest. A menu with no
+    // `highlight` block emits nothing here and renders as it always has.
+    const hl = highlightAttrs(menu);
+    const hlAttrs = [
+        hl.hover  && ` data-menu-hover="${esc(hl.hover)}"`,
+        hl.active && ` data-menu-active="${esc(hl.active)}"`
+    ].filter(Boolean).join('');
+    // The accent joins whatever floatToCss already put in the style attribute
+    // rather than opening a second one.
+    const hlStyle = hl.accent ? `--dm-menu-highlight:${hl.accent}` : '';
+    const styleAttr = (floatCss || hlStyle)
+        ? ` style="${esc([floatCss, hlStyle].filter(Boolean).join(';'))}"`
+        : '';
+
     return `<nav class="dm-menu dm-menu--${esc(menu.slug)}${orientClass}${variantClass}${floatClass}${collapsedClass}${flexClass}${klass}"`
-        + ` data-menu="${esc(menu.slug)}"${floatAttrs}${behAttrs}>`
+        + ` data-menu="${esc(menu.slug)}"${styleAttr}${floatAnchorAttr}${behAttrs}${hlAttrs}>`
         + buildFloatChrome(menu, beh)
-        + renderMenuItemsAsUl(items)
+        + renderMenuItemsAsUl(items, opts.currentPath || '')
         + `</nav>`;
 }
 

package/server/services/menus.js

@@ -14,6 +14,12 @@ import {fileURLToPath} from 'url';
 import {checkVisibility} from '../middleware/auth.js';
 import {listEntries} from './collections.js';
 import * as cache from './cache/index.js';
+// The highlight vocabularies are defined once, in the browser module, and
+// imported here so validation and the renderer can never drift apart.
+import {
+    HIGHLIGHT_HOVER, HIGHLIGHT_ACTIVE,
+    LEGACY_STYLE_HOVER, LEGACY_STYLE_ACTIVE, legacyStyleHighlight
+} from '../../public/js/menu-decor.mjs';
 
 /**
  * Bust the response-cache tags that menu changes affect. Public pages are
@@ -444,6 +450,7 @@ export async function createMenu(input) {
         ...(input.side     != null && {side:     input.side}),
         ...(input.appearOnHover != null && {appearOnHover: !!input.appearOnHover}),
         ...(input.float    != null && {float:    input.float}),
+        ...(input.highlight != null && {highlight: input.highlight}),
         ...(input.style    != null && {style:    input.style}),
         ...(binding != null && {binding}),
         items: Array.isArray(input.items) ? input.items : [],
@@ -487,6 +494,7 @@ export async function updateMenu(slug, input) {
         ...(input.side     != null && {side:     input.side}),
         ...(input.appearOnHover != null && {appearOnHover: !!input.appearOnHover}),
         ...(input.float    != null && {float:    input.float}),
+        ...(input.highlight != null && {highlight: input.highlight}),
         ...(input.style    != null && {style:    input.style}),
         ...(binding != null && {binding}),
         items: Array.isArray(input.items) ? input.items : [],
@@ -604,6 +612,24 @@ export function validateMenu(menu) {
     if (menu.side != null && !SIDES.has(menu.side)) {
         errors.push(`Invalid side "${menu.side}" - expected one of: ${[...SIDES].join(', ')}`);
     }
+    if (menu.style != null) {
+        if (typeof menu.style !== 'object' || Array.isArray(menu.style)) {
+            errors.push('style must be an object');
+        } else {
+            // `style.hover` / `style.active` are the deprecated spelling of the
+            // `highlight` block - see LEGACY_STYLE_HOVER in menu-decor.mjs.
+            // Judged against the same vocabulary the resolver accepts, so a file
+            // that validates is a file that renders.
+            if (menu.style.hover != null && menu.style.hover !== ''
+                && !legacyStyleHighlight(menu.style).hover) {
+                errors.push(`style.hover must be one of: ${Object.keys(LEGACY_STYLE_HOVER).join(', ')}`);
+            }
+            if (menu.style.active != null && menu.style.active !== ''
+                && !legacyStyleHighlight(menu.style).active) {
+                errors.push(`style.active must be one of: ${Object.keys(LEGACY_STYLE_ACTIVE).join(', ')}`);
+            }
+        }
+    }
     if (menu.binding != null) {
         if (typeof menu.binding !== 'object' || Array.isArray(menu.binding)) {
             errors.push('binding must be an object');
@@ -661,6 +687,22 @@ export function validateMenu(menu) {
             }
         }
     }
+    if (menu.highlight != null) {
+        if (typeof menu.highlight !== 'object' || Array.isArray(menu.highlight)) {
+            errors.push('highlight must be an object');
+        } else {
+            const {hover, active, accent} = menu.highlight;
+            if (hover != null && hover !== '' && !HIGHLIGHT_HOVER.includes(hover)) {
+                errors.push(`highlight.hover must be one of: ${HIGHLIGHT_HOVER.join(', ')}`);
+            }
+            if (active != null && active !== '' && !HIGHLIGHT_ACTIVE.includes(active)) {
+                errors.push(`highlight.active must be one of: ${HIGHLIGHT_ACTIVE.join(', ')}`);
+            }
+            if (accent != null && accent !== '' && !isValidColour(accent)) {
+                errors.push('highlight.accent must be a preset key or #rrggbb');
+            }
+        }
+    }
     if (!Array.isArray(menu.items)) {
         errors.push('items must be an array');
     } else {

package/server/services/renderer.js

@@ -70,7 +70,8 @@ async function buildOverlayMenus(menuCtx, user) {
     const overlays = await resolveOverlaysForPage(menuCtx, user);
     if (!overlays.length) return '';
     const navs = await Promise.all(overlays.map(async (menu) =>
-        buildMenuNav(menu, await resolveMenuDecorations(menu.items))));
+        buildMenuNav(menu, await resolveMenuDecorations(menu.items),
+            {currentPath: menuCtx?.urlPath || ''})));
     return navs.join('');
 }
 
@@ -141,6 +142,9 @@ export async function renderPage(page, opts = {}) {
             ...(navMenu.orientation === 'vertical' && {orientation: 'vertical', side: navMenu.side === 'right' ? 'right' : 'left'}),
             ...(navMenu.float && {float: navMenu.float}),
             ...(navMenu.appearOnHover && {appearOnHover: true}),
+            // Item highlighting: the navbar is built in the browser, so the
+            // config has to travel to site.js rather than being rendered here.
+            ...(navMenu.highlight && {highlight: navMenu.highlight}),
             ...(navMenu.style && {style: navMenu.style})
         }
         : (await readLegacyNavBackup()) || {brand: site.brand || {}, items: []};
@@ -209,7 +213,10 @@ export async function renderPage(page, opts = {}) {
     const footer = {
         primary:   footerPrimaryDecorated,
         legal:     footerLegalDecorated,
-        copyright: site.footer?.copyright || ''
+        copyright: site.footer?.copyright || '',
+        // Highlighting is per menu, and the two footer columns are two menus.
+        ...(footerPrimary?.highlight && {primaryHighlight: footerPrimary.highlight}),
+        ...(footerLegal?.highlight   && {legalHighlight:   footerLegal.highlight})
     };
     const footerJson = JSON.stringify(footer).replace(/<\/script>/gi, '<\\/script>');
 
@@ -711,6 +718,9 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
             // existing sites.
             ...(navMenu.orientation === 'vertical' && {orientation: 'vertical', side: navMenu.side === 'right' ? 'right' : 'left'}),
             ...(navMenu.appearOnHover && {appearOnHover: true}),
+            // Item highlighting: the navbar is built in the browser, so the
+            // config has to travel to site.js rather than being rendered here.
+            ...(navMenu.highlight && {highlight: navMenu.highlight}),
             ...(navMenu.style && {style: navMenu.style})
         }
         : (await readLegacyNavBackup()) || {brand: site.brand || {}, items: []};
@@ -755,7 +765,10 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
     const footer = {
         primary:   footerPrimaryDecorated,
         legal:     footerLegalDecorated,
-        copyright: site.footer?.copyright || ''
+        copyright: site.footer?.copyright || '',
+        // Highlighting is per menu, and the two footer columns are two menus.
+        ...(footerPrimary?.highlight && {primaryHighlight: footerPrimary.highlight}),
+        ...(footerLegal?.highlight   && {legalHighlight:   footerLegal.highlight})
     };
     const footerJson = JSON.stringify(footer).replace(/<\/script>/gi, '<\\/script>');
 

package/server/templates/page.html

@@ -24,8 +24,11 @@
     <link rel="stylesheet" href="/dist/domma/themes/domma-themes.css">
 
     <!-- Site CSS -->
-    <link rel="stylesheet" href="/public/css/site.css?v=20260822-vertical-menu">
+    <link rel="stylesheet" href="/public/css/site.css?v=20260905-menu-highlight">
     <link rel="stylesheet" href="/public/css/forms.css?v=20260821-wizard-steps">
+    <!-- Menu item hover / current-page effects. Loaded after site.css so a
+         menu's own highlight wins over the blanket link styling there. -->
+    <link rel="stylesheet" href="/public/css/menu-highlight.css?v=20260905-menu-highlight">
 
   <!-- Font overrides -->
   {{fontStyleTag}}