domma-cms 0.117.0 → 0.119.0

package/server/routes/api/forms.js

@@ -26,7 +26,7 @@ import path from 'path';
 import {deleteForm, ensureCollectionForForm, ensureFormsDir, listForms, readForm, slugify, writeForm} from '../../services/forms.js';
 import {executeAction} from '../../services/actions.js';
 // The same rules the browser draws the buttons by (a Cancel link must be safe).
-import {buttonSettingsProblems, publicButtonSettings} from '../../../public/js/form-submit.mjs';
+import {buttonSettingsProblems, formClassProblems, publicButtonSettings} from '../../../public/js/form-submit.mjs';
 import {createTransport, sendFormEmail} from '../../services/email.js';
 import {formActionFailed, formTriggerNotice} from '../../services/notification-sources.js';
 import {
@@ -429,7 +429,7 @@ export async function formsRoutes(fastify) {
 
         const now  = new Date().toISOString();
         const body = request.body || {};
-        const buttonProblems = buttonSettingsProblems(body.settings);
+        const buttonProblems = [...buttonSettingsProblems(body.settings), ...formClassProblems(body.settings, body.fields)];
         if (buttonProblems.length) return reply.status(400).send({ error: buttonProblems[0] });
         const form = {
             slug,
@@ -527,7 +527,7 @@ export async function formsRoutes(fastify) {
         const body    = request.body || {};
         // Only a Cancel link's address can do harm; refuse it rather than
         // store something the page will not draw.
-        const buttonProblems = buttonSettingsProblems(body.settings);
+        const buttonProblems = [...buttonSettingsProblems(body.settings), ...formClassProblems(body.settings, body.fields)];
         if (buttonProblems.length) return reply.status(400).send({ error: buttonProblems[0] });
         const updated = {
             ...existing,

package/server/services/forms.js

@@ -7,7 +7,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import {fileURLToPath} from 'url';
 import * as cache from './cache/index.js';
-import {buttonSettingsProblems} from '../../public/js/form-submit.mjs';
+import {buttonSettingsProblems, formClassProblems} from '../../public/js/form-submit.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ROOT      = path.resolve(__dirname, '..', '..');
@@ -134,7 +134,7 @@ export async function createForm(data) {
     }
 
     // A Cancel link to javascript: and the like (public/js/form-submit.mjs).
-    const buttonProblems = buttonSettingsProblems(settings);
+    const buttonProblems = [...buttonSettingsProblems(settings), ...formClassProblems(settings, fields)];
     if (buttonProblems.length) throw new Error(buttonProblems[0]);
 
     // Throw if a form with this slug already exists

package/server/services/menuRender.js

@@ -14,7 +14,7 @@ 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, itemHighlightAttrs, isCurrentItem, menuAlign} from '../../public/js/menu-decor.mjs';
+import {highlightAttrs, itemHighlightAttrs, isCurrentItem, menuAlign, cssClasses} from '../../public/js/menu-decor.mjs';
 
 /** Attribute-safe escaping - mirrors escapeAttr in markdown.js. */
 function esc(str) {
@@ -56,6 +56,10 @@ export function renderMenuItemsAsUl(items, currentPath = '') {
         // needs an explicit allowlist entry.
         const current   = isCurrentItem(it.url, currentPath);
         const classAttr = current ? ' class="is-active" aria-current="page"' : '';
+        // The designer's own classes go on the <li>, so they can lay the item
+        // out (push it right, size it) as well as style its link.
+        const liClasses = cssClasses(it.class);
+        const liAttr    = liClasses.length ? ` class="${esc(liClasses.join(' '))}"` : '';
 
         // Per-item highlight override. `data-menu-item-*` rather than the
         // menu's `data-menu-*` so the CSS can let the item win without the two
@@ -86,7 +90,7 @@ export function renderMenuItemsAsUl(items, currentPath = '') {
             badge = `<span class="dm-menu-badge"${badgeStyle}>${esc(String(it.badge.text))}</span>`;
         }
 
-        return `<li><a href="${href}"${classAttr}${styleAttr}${ihlAttrs}>${text}${badge}</a>${child}</li>`;
+        return `<li${liAttr}><a href="${href}"${classAttr}${styleAttr}${ihlAttrs}>${text}${badge}</a>${child}</li>`;
     }).join('');
     return `<ul>${lis}</ul>`;
 }
@@ -106,7 +110,9 @@ export function renderMenuItemsAsUl(items, currentPath = '') {
  * @returns {string}
  */
 export function buildMenuNav(menu, items, opts = {}) {
-    const klass        = opts.class   ? ` ${esc(opts.class)}`                    : '';
+    // The menu's own designer classes, then this placement's `[menu class=…]`.
+    const menuClasses  = cssClasses(menu.class).join(' ');
+    const klass        = [menuClasses, opts.class].filter(Boolean).map(c => ` ${esc(c)}`).join('');
     const variantClass = opts.variant ? ` dm-menu--variant-${esc(opts.variant)}` : '';
 
     // A menu that declares no orientation emits no class at all and keeps the

package/server/services/menus.js

@@ -19,7 +19,7 @@ import * as cache from './cache/index.js';
 import {
     HIGHLIGHT_HOVER, HIGHLIGHT_ACTIVE, MENU_ALIGN,
     LEGACY_STYLE_HOVER, LEGACY_STYLE_ACTIVE, legacyStyleHighlight,
-    PRESET_COLOUR_VARS, PRESET_COLOUR_FALLBACKS, colourToCss
+    PRESET_COLOUR_VARS, PRESET_COLOUR_FALLBACKS, colourToCss, cssClassProblems
 } from '../../public/js/menu-decor.mjs';
 
 /**
@@ -722,6 +722,8 @@ export function validateMenu(menu) {
             }
         }
     }
+    // Designer classes on the menu's outer element - see cssClasses in menu-decor.mjs.
+    for (const p of cssClassProblems(menu.class)) errors.push(`class: ${p}`);
     if (menu.align != null && menu.align !== '' && !MENU_ALIGN.includes(menu.align)) {
         errors.push(`align must be one of: ${MENU_ALIGN.join(', ')}`);
     }
@@ -815,6 +817,7 @@ export function validateMenu(menu) {
             if (item.colour != null && !isValidColour(item.colour)) {
                 errors.push(`Item ${path}: colour must be a preset key or #rrggbb`);
             }
+            for (const p of cssClassProblems(item.class)) errors.push(`Item ${path}: class: ${p}`);
             // Per-item highlight override. Same shape and same value sets as
             // the menu-level `highlight` block validated above - an item that
             // omits a half falls through to the menu's choice for that half.

package/server/services/renderer.js

@@ -266,6 +266,8 @@ export async function renderPage(page, opts = {}) {
             // 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}),
+            // Designer classes for the navbar element itself (site.js adds them).
+            ...(navMenu.class && {class: navMenu.class}),
             ...(navMenu.style && {style: navMenu.style})
         }
         : (await readLegacyNavBackup()) || {brand: site.brand || {}, items: []};
@@ -333,7 +335,10 @@ export async function renderPage(page, opts = {}) {
         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})
+        ...(footerLegal?.highlight   && {legalHighlight:   footerLegal.highlight}),
+        // Each column's menu-level designer classes, for its <nav>.
+        ...(footerPrimary?.class && {primaryClass: footerPrimary.class}),
+        ...(footerLegal?.class   && {legalClass:   footerLegal.class})
     };
     const footerJson = JSON.stringify(footer).replace(/<\/script>/gi, '<\\/script>');
 
@@ -993,6 +998,8 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
             // 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}),
+            // Designer classes for the navbar element itself (site.js adds them).
+            ...(navMenu.class && {class: navMenu.class}),
             ...(navMenu.style && {style: navMenu.style})
         }
         : (await readLegacyNavBackup()) || {brand: site.brand || {}, items: []};
@@ -1048,7 +1055,10 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
         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})
+        ...(footerLegal?.highlight   && {legalHighlight:   footerLegal.highlight}),
+        // Each column's menu-level designer classes, for its <nav>.
+        ...(footerPrimary?.class && {primaryClass: footerPrimary.class}),
+        ...(footerLegal?.class   && {legalClass:   footerLegal.class})
     };
     const footerJson = JSON.stringify(footer).replace(/<\/script>/gi, '<\\/script>');
 

package/server/templates/page.html

@@ -137,7 +137,7 @@
     </script>
 
     <!-- Site initialisation -->
-    <script src="/public/js/site.js?v=20261004-countdown" type="module"></script>
+    <script src="/public/js/site.js?v=20261009-form-classes" type="module"></script>
     <script src="/public/js/collection-context.js?v=20260927-ctx" type="module"></script>
     {{ctxMenusModule}}
 
@@ -152,7 +152,7 @@
 
     <!-- Core Forms (logic engine must load before renderer) -->
     <script src="/public/js/form-logic-engine.js?v=20260927-submit-btn"></script>
-    <script src="/public/js/forms.js?v=20260927-submit-btn" type="module"></script>
+    <script src="/public/js/forms.js?v=20261009-form-classes" type="module"></script>
 
     <!-- Core effects runtime -->
     <script src="/public/js/effects.js?v=20261003-characters"></script>