domma-cms 0.40.2 → 0.41.0

package/server/services/renderer.js

@@ -9,6 +9,7 @@ import {getConfig} from '../config.js';
 import {getInjectionSnippets} from './plugins.js';
 import {applyTransforms} from './hooks.js';
 import {resolveLocation, resolveMenuDecorations} from './menus.js';
+import {getProjectForPage} from './projects.js';
 
 const VALID_LAYOUT_WIDTHS = new Set(['narrow', 'normal', 'wide', 'full']);
 const CUSTOM_CSS_PATH = new URL('../../content/custom.css', import.meta.url).pathname;
@@ -66,15 +67,23 @@ function filterHiddenNavItems(nav) {
  * @returns {Promise<string>}
  */
 export async function renderPage(page, opts = {}) {
+    // Page context for menu bindings — a menu bound to this URL or this page's
+    // project takes its slot over. `resolvedProject` is stamped by the content
+    // service; fall back to resolving it here for callers that skip that path.
+    const menuCtx = {
+        urlPath: page.urlPath || page.url || '/',
+        project: page.resolvedProject
+            || await getProjectForPage(page.urlPath || page.url || '/', page.project)
+    };
     const [template, site, presets, injection, customCss, navMenu, footerPrimary, footerLegal] = await Promise.all([
         getTemplate(),
         Promise.resolve(getConfig('site')),
         Promise.resolve(getConfig('presets')),
         getInjectionSnippets(),
         getCustomCss(),
-        resolveLocation('navbar',         opts.user || null),
-        resolveLocation('footer-primary', opts.user || null),
-        resolveLocation('footer-legal',   opts.user || null)
+        resolveLocation('navbar',         opts.user || null, menuCtx),
+        resolveLocation('footer-primary', opts.user || null, menuCtx),
+        resolveLocation('footer-legal',   opts.user || null, menuCtx)
     ]);
     const baseUrl = opts.baseUrl || site.baseUrl || '';
 
@@ -97,6 +106,11 @@ export async function renderPage(page, opts = {}) {
             items:    navItemsDecorated,
             variant:  navMenu.variant  || 'default',
             position: navMenu.position || 'sticky',
+            // Orientation drives the client-side layout class; `side` picks the
+            // edge a vertical rail docks to. Both are omitted when the menu is
+            // the horizontal default, so __CMS_NAV__ stays unchanged for
+            // existing sites.
+            ...(navMenu.orientation === 'vertical' && {orientation: 'vertical', side: navMenu.side === 'right' ? 'right' : 'left'}),
             ...(navMenu.appearOnHover && {appearOnHover: true}),
             ...(navMenu.style && {style: navMenu.style})
         }
@@ -107,7 +121,12 @@ export async function renderPage(page, opts = {}) {
     // Per-page `width:` frontmatter overrides the preset's width when valid.
     const pageWidth = VALID_LAYOUT_WIDTHS.has(page.width) ? page.width : null;
     const layoutWidth = pageWidth || (VALID_LAYOUT_WIDTHS.has(preset.width) ? preset.width : 'normal');
-    const layoutBodyClass = ['dm-layout-' + layoutWidth, preset.class || ''].filter(Boolean).join(' ');
+    // A vertical navbar docks as a side rail, so the body needs its gutter from
+    // the first paint — stamping the class client-side would shift the layout.
+    const verticalNavClass = navigation.orientation === 'vertical'
+        ? `dm-vnav dm-vnav-${navigation.side === 'right' ? 'right' : 'left'}`
+        : '';
+    const layoutBodyClass = ['dm-layout-' + layoutWidth, preset.class || '', verticalNavClass].filter(Boolean).join(' ');
     const pageBodyStyleParts = [];
     const BG_COLOR_SAFE = /^[a-zA-Z0-9#(),.\s%/-]+$/;
     if (preset.bgColor && BG_COLOR_SAFE.test(preset.bgColor)) pageBodyStyleParts.push(`background-color:${preset.bgColor}`);
@@ -398,7 +417,7 @@ function buildNavbarStyleTag(nav) {
     }
     const rules = [];
     const decls = [];
-    if (s.fontFamily) decls.push(`font-family: ${s.fontFamily}, sans-serif`);
+    if (s.fontFamily) decls.push(`font-family: ${fontFamilyValue(s.fontFamily)}`);
     if (s.fontSize) decls.push(`font-size: ${s.fontSize}`);
     if (s.fontWeight) decls.push(`font-weight: ${s.fontWeight}`);
     if (s.letterSpacing) decls.push(`letter-spacing: ${s.letterSpacing}`);
@@ -414,6 +433,33 @@ function buildNavbarStyleTag(nav) {
     return {navbarFontLink, navbarStyleTag};
 }
 
+// Families whose CSS fallback should be `serif`/`monospace` rather than the default `sans-serif`.
+const SERIF_FAMILIES = new Set([
+    'Merriweather', 'Playfair Display', 'Lora', 'Roboto Slab',
+    'Cormorant Garamond', 'DM Serif Display', 'IBM Plex Serif'
+]);
+const MONO_FAMILIES = new Set(['Fira Code', 'JetBrains Mono', 'IBM Plex Mono']);
+
+/**
+ * Build a `font-family` value for a configured family name.
+ *
+ * Family names are quoted: `Source Sans 3` is not a valid unquoted CSS identifier
+ * (a digit cannot start one), so the whole declaration would be dropped. The name is
+ * also stripped to letters/digits/space/hyphen because the navbar family is a free-text
+ * admin field that lands inside a `<style>` tag.
+ *
+ * @param {string} family - Configured family name, or the `system-ui`/`inherit` keywords
+ * @returns {string} CSS font-family value including its generic fallback
+ */
+function fontFamilyValue(family) {
+    if (family === 'inherit') return 'inherit';
+    if (family === 'system-ui') return 'system-ui, -apple-system, sans-serif';
+    const safe = String(family).replace(/[^\w\s-]/g, '').trim();
+    if (!safe) return 'inherit';
+    const generic = SERIF_FAMILIES.has(safe) ? 'serif' : MONO_FAMILIES.has(safe) ? 'monospace' : 'sans-serif';
+    return `'${safe}', ${generic}`;
+}
+
 function buildFontVars(fontFamily, fontSize) {
     const PRECONNECT = '<link rel="preconnect" href="https://fonts.googleapis.com">\n    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
     const family = fontFamily || 'Roboto';
@@ -424,13 +470,13 @@ function buildFontVars(fontFamily, fontSize) {
     let fontLink;
     if (family === 'system-ui') {
         fontLink = null;
-        rules.push('body, button, input, select, textarea { font-family: system-ui, -apple-system, sans-serif; }');
+        rules.push(`body, button, input, select, textarea { font-family: ${fontFamilyValue(family)}; }`);
     } else {
         const encoded = family.replace(/ /g, '+');
         const href = `https://fonts.googleapis.com/css2?family=${encoded}:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap`;
         fontLink = `${PRECONNECT}\n    <link rel="stylesheet" href="${href}">`;
         if (family !== 'Roboto') {
-            rules.push(`body, button, input, select, textarea { font-family: '${family}', sans-serif; }`);
+            rules.push(`body, button, input, select, textarea { font-family: ${fontFamilyValue(family)}; }`);
         }
     }
 
@@ -451,15 +497,20 @@ function buildFontVars(fontFamily, fontSize) {
  */
 export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
     const user = seoMeta.user || null;
+    // Plugin fragments know their own URL via seoMeta.urlPath — enough for a
+    // menu bound to that page or to the project the URL falls under.
+    const menuCtx = seoMeta.urlPath
+        ? {urlPath: seoMeta.urlPath, project: await getProjectForPage(seoMeta.urlPath)}
+        : {};
     const [fragment, template, site, injection, customCss, navMenu, footerPrimary, footerLegal] = await Promise.all([
         fs.readFile(templatePath, 'utf8'),
         getTemplate(),
         Promise.resolve(getConfig('site')),
         getInjectionSnippets(),
         getCustomCss(),
-        resolveLocation('navbar',         user),
-        resolveLocation('footer-primary', user),
-        resolveLocation('footer-legal',   user)
+        resolveLocation('navbar',         user, menuCtx),
+        resolveLocation('footer-primary', user, menuCtx),
+        resolveLocation('footer-legal',   user, menuCtx)
     ]);
     const baseUrl = seoMeta.baseUrl || site.baseUrl || '';
 
@@ -482,6 +533,11 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
             items:    navItemsDecorated,
             variant:  navMenu.variant  || 'default',
             position: navMenu.position || 'sticky',
+            // Orientation drives the client-side layout class; `side` picks the
+            // edge a vertical rail docks to. Both are omitted when the menu is
+            // the horizontal default, so __CMS_NAV__ stays unchanged for
+            // existing sites.
+            ...(navMenu.orientation === 'vertical' && {orientation: 'vertical', side: navMenu.side === 'right' ? 'right' : 'left'}),
             ...(navMenu.appearOnHover && {appearOnHover: true}),
             ...(navMenu.style && {style: navMenu.style})
         }
@@ -545,7 +601,9 @@ export async function renderBlogPage(templatePath, data = {}, seoMeta = {}) {
         fontLink,
         fontStyleTag,
         layout: 'default',
-        layoutBodyClass: 'dm-layout-normal',
+        layoutBodyClass: ['dm-layout-normal', navigation.orientation === 'vertical'
+            ? `dm-vnav dm-vnav-${navigation.side === 'right' ? 'right' : 'left'}`
+            : ''].filter(Boolean).join(' '),
         pageBodyStyle: '',
         showNavbar: true,
         showFooter: true,

package/server/services/sidebar-migration.js

@@ -9,6 +9,7 @@
 import fs from 'fs/promises';
 import path from 'path';
 import {fileURLToPath} from 'url';
+import {invalidateMenuIndex} from './menus.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const DEFAULT_CONFIG_DIR = path.resolve(path.dirname(__filename), '..', '..', 'config');
@@ -147,6 +148,9 @@ async function readJson(p) {
 
 async function writeJson(p, data) {
     await fs.writeFile(p, JSON.stringify(data, null, 2) + '\n', 'utf8');
+    // Menu files written outside the menus service — drop its cached index so
+    // binding resolution sees the seeded sidebar menu.
+    invalidateMenuIndex();
 }
 
 /**

package/server/templates/page.html

@@ -116,7 +116,7 @@
     </script>
 
     <!-- Site initialisation -->
-    <script src="/public/js/site.js?v=20260817-floating-menus" type="module"></script>
+    <script src="/public/js/site.js?v=20260817-menu-bindings" type="module"></script>
     <script src="/public/js/collection-context.js?v=20260722-ctx-cursor" defer></script>
 
     <!-- Interactive Collection Browser (used by [collection] shortcodes with