domma-cms 0.1.0 → 0.2.1

package/server/services/plugins.js

@@ -14,6 +14,7 @@ import fs from 'fs/promises';
 import path from 'path';
 import {getConfig, saveConfig} from '../config.js';
 import {authenticate, requireAdmin, requireRole} from '../middleware/auth.js';
+import {hooks, registerSanitizeRules, registerShortcode, registerTransform} from './hooks.js';
 
 const PLUGINS_DIR = path.resolve('plugins');
 
@@ -153,7 +154,11 @@ export async function registerPlugins(fastify) {
             const { default: plugin } = await import(entryPath);
           await loadConfigDefaults(manifest.name);
           const prefix = `/api/plugins/${manifest.name}`;
-          await fastify.register(plugin, {prefix, auth: {authenticate, requireRole, requireAdmin}});
+          await fastify.register(plugin, {
+            prefix,
+            auth: {authenticate, requireRole, requireAdmin},
+            hooks: {registerShortcode, registerSanitizeRules, registerTransform, on: hooks.on.bind(hooks)}
+          });
             loaded.push(manifest.name);
         } catch (err) {
             fastify.log.error(`Plugin "${manifest.name}" server failed to load: ${err.message}`);

package/server/services/renderer.js

@@ -7,6 +7,17 @@ import path from 'path';
 import {fileURLToPath} from 'url';
 import {getConfig} from '../config.js';
 import {getInjectionSnippets} from './plugins.js';
+import {applyTransforms} from './hooks.js';
+
+const CUSTOM_CSS_PATH = new URL('../../content/custom.css', import.meta.url).pathname;
+
+async function getCustomCss() {
+    try {
+        return await fs.readFile(CUSTOM_CSS_PATH, 'utf8');
+    } catch {
+        return '';
+    }
+}
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const TEMPLATE_PATH = path.join(__dirname, '../templates/page.html');
@@ -26,12 +37,13 @@ let _templateCache = null;
  * @returns {Promise<string>}
  */
 export async function renderPage(page) {
-    const [template, site, navigation, presets, injection] = await Promise.all([
+    const [template, site, navigation, presets, injection, customCss] = await Promise.all([
         getTemplate(),
         Promise.resolve(getConfig('site')),
         Promise.resolve(getConfig('navigation')),
         Promise.resolve(getConfig('presets')),
-        getInjectionSnippets()
+        getInjectionSnippets(),
+        getCustomCss()
     ]);
 
     const preset = presets[page.layout] || presets['default'] || {};
@@ -40,6 +52,24 @@ export async function renderPage(page) {
     const seoDescription = page.seo?.description || site.seo?.defaultDescription || '';
     const ogImage = page.seo?.image || site.seo?.defaultImage || '';
 
+    const dconfig = page.dconfig || null;
+    // Escape </script> to prevent injection via dconfig values in the inline script block
+    const dconfigJson = dconfig
+      ? JSON.stringify(dconfig).replace(/<\/script>/gi, '<\\/script>')
+      : null;
+    const dconfigScript = dconfigJson
+      ? `window.__CMS_DCONFIG__ = ${dconfigJson};`
+      : '';
+
+    const {fontLink, fontOverride} = buildFontVars(site.fontFamily, site.fontSize);
+    const fontStyleTag = fontOverride
+      ? `<style>${fontOverride}</style>`
+      : '';
+
+    const customCssTag = customCss.trim()
+        ? `<style>${customCss.replace(/<\/style>/gi, '<\\/style>')}</style>`
+        : '';
+
     const vars = {
         seoTitle,
         seoDescription,
@@ -47,18 +77,54 @@ export async function renderPage(page) {
         title: page.title,
         html: page.html,
         theme: site.theme || 'charcoal-dark',
+        fontLink,
+        fontStyleTag,
         layout: page.layout || 'default',
         showNavbar: preset.navbar !== false,
         showFooter: preset.footer !== false,
         showSidebar: preset.sidebar === true || page.sidebar === true,
-        navJson: JSON.stringify(navigation),
-        siteJson: JSON.stringify({ title: site.title, footer: site.footer }),
+        navJson: JSON.stringify(navigation).replace(/<\/script>/gi, '<\\/script>'),
+        siteJson: JSON.stringify(Object.assign(
+            { title: site.title, footer: site.footer, social: site.social || null },
+            site.backToTop?.enabled    ? { backToTop: site.backToTop }         : {},
+            site.cookieConsent?.enabled ? { cookieConsent: site.cookieConsent } : {}
+        )).replace(/<\/script>/gi, '<\\/script>'),
         headInject: injection.head,
-      headInjectLate: injection.headLate,
-        bodyEndInject: injection.bodyEnd
+        headInjectLate: [injection.headLate, customCssTag].filter(Boolean).join('\n'),
+        bodyEndInject: [
+            injection.bodyEnd,
+            site.backToTop?.enabled    ? '<script src="/public/js/btt.js"></script>'             : '',
+            site.cookieConsent?.enabled ? '<script src="/public/js/cookie-consent.js"></script>' : ''
+        ].filter(Boolean).join('\n'),
+        dconfigScript,
     };
 
-    return interpolate(template, vars);
+    const finalVars = applyTransforms('render:beforeRender', vars, {page});
+    const html = interpolate(template, finalVars);
+    return applyTransforms('render:afterRender', html, {page});
+}
+
+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';
+    const rules = [];
+
+    if (fontSize && fontSize !== 16) rules.push(`html { font-size: ${fontSize}px; }`);
+
+    let fontLink;
+    if (family === 'system-ui') {
+        fontLink = null;
+        rules.push('body, button, input, select, textarea { font-family: system-ui, -apple-system, sans-serif; }');
+    } 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; }`);
+        }
+    }
+
+    return {fontLink, fontOverride: rules.length ? rules.join(' ') : null};
 }
 
 /**

package/server/templates/page.html

@@ -8,9 +8,7 @@
     {{#if ogImage}}<meta property="og:image" content="{{ogImage}}">{{/if}}
 
     <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap">
+  {{#if fontLink}}{{fontLink}}{{/if}}
 
     <!-- DommaJS CSS -->
     <link rel="stylesheet" href="/dist/domma/domma.css">
@@ -21,6 +19,9 @@
     <!-- Site CSS -->
     <link rel="stylesheet" href="/public/css/site.css">
 
+  <!-- Font overrides -->
+  {{fontStyleTag}}
+
     <!-- Plugin head injection -->
     {{headInject}}
 
@@ -59,6 +60,39 @@
 
     <!-- Initialise DommaJS before module loads -->
     <script>
+      (function () {
+        var _stored;
+        try {
+          _stored = JSON.parse(localStorage.getItem('domma:reduced_motion'));
+        } catch (e) {
+        }
+        if (_stored === true) {
+          document.documentElement.classList.add('dm-reduced-motion');
+        }
+        // Override window.matchMedia so Domma JS effects (scribe, breathe, etc.)
+        // respect the stored preference. When explicitly set to false the user is
+        // overriding the OS "reduce" preference to allow motion on this site.
+        if (_stored !== null && _stored !== undefined && window.matchMedia) {
+          var _orig = window.matchMedia.bind(window);
+          window.matchMedia = function (q) {
+            if (q === '(prefers-reduced-motion: reduce)') {
+              return {
+                matches: !!_stored, media: q, onchange: null,
+                addListener: function () {
+                }, removeListener: function () {
+                },
+                addEventListener: function () {
+                }, removeEventListener: function () {
+                },
+                dispatchEvent: function () {
+                  return false;
+                }
+              };
+            }
+            return _orig(q);
+          };
+        }
+      }());
         if (window.Domma && typeof window.Domma.init === 'function') {
             window.Domma.init();
         }
@@ -67,6 +101,7 @@
         }
         window.__CMS_NAV__ = {{navJson}};
         window.__CMS_SITE__ = {{siteJson}};
+      {{dconfigScript}}
     </script>
 
     <!-- Site initialisation -->

package/plugins/back-to-top/admin/templates/back-to-top-settings.html

@@ -1,55 +0,0 @@
-<div class="view-header">
-  <h1><span data-icon="arrow-up"></span> Back to Top</h1>
-  <div>
-    <button id="save-settings-btn" class="btn btn-primary">
-      <span data-icon="save"></span> Save
-    </button>
-  </div>
-</div>
-
-<div class="card mb-4">
-  <div class="card-header"><h2>Appearance</h2></div>
-  <div class="card-body">
-    <div class="row mb-3">
-      <div class="col-6">
-        <label class="form-label">Position</label>
-        <select id="field-position" class="form-select">
-          <option value="bottom-right">Bottom right</option>
-          <option value="bottom-left">Bottom left</option>
-        </select>
-      </div>
-      <div class="col-6">
-        <label class="form-label">Edge offset (px)</label>
-        <input id="field-offset" type="number" class="form-input" min="0" max="200" placeholder="32">
-      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <label class="form-label">Button label <span class="text-muted">(optional text beside icon)</span></label>
-        <input id="field-label" type="text" class="form-input" placeholder="Leave empty for icon only">
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="card mb-4">
-  <div class="card-header"><h2>Behaviour</h2></div>
-  <div class="card-body">
-    <div class="row mb-3">
-      <div class="col-6">
-        <label class="form-label">Scroll threshold (px)</label>
-        <input id="field-threshold" type="number" class="form-input" min="0" max="9999" placeholder="300">
-        <span class="form-hint">Button appears after scrolling this far down.</span>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <label class="form-check-label">
-          <input id="field-smooth" type="checkbox">
-          Smooth scroll
-        </label>
-        <span class="form-hint">Animates scroll to top instead of jumping instantly.</span>
-      </div>
-    </div>
-  </div>
-</div>

package/plugins/back-to-top/admin/views/back-to-top-settings.js

@@ -1,44 +0,0 @@
-/**
- * Back to Top Plugin — Admin Settings View
- */
-import {apiRequest} from '/admin/js/api.js';
-
-export const backToTopSettingsView = {
-  templateUrl: '/plugins/back-to-top/admin/templates/back-to-top-settings.html',
-
-  async onMount($container) {
-    let settings = {};
-    try {
-      settings = await apiRequest('/plugins/back-to-top/settings');
-    } catch {
-      E.toast('Could not load settings.', {type: 'error'});
-    }
-
-    $container.find('#field-threshold').val(settings.scrollThreshold ?? 300);
-    $container.find('#field-position').val(settings.position || 'bottom-right');
-    $container.find('#field-label').val(settings.label || '');
-    $container.find('#field-smooth').prop('checked', settings.smooth !== false);
-    $container.find('#field-offset').val(settings.offset ?? 32);
-
-    $container.find('#save-settings-btn').off('click').on('click', async () => {
-      const data = {
-        scrollThreshold: parseInt($container.find('#field-threshold').val(), 10) || 300,
-        position: $container.find('#field-position').val(),
-        label: $container.find('#field-label').val().trim(),
-        smooth: $container.find('#field-smooth').prop('checked'),
-        offset: parseInt($container.find('#field-offset').val(), 10) || 32
-      };
-      try {
-        await apiRequest('/plugins/back-to-top/settings', {
-          method: 'PUT',
-          body: JSON.stringify(data)
-        });
-        E.toast('Settings saved.', {type: 'success'});
-      } catch {
-        E.toast('Failed to save settings.', {type: 'error'});
-      }
-    });
-
-    Domma.icons.scan();
-  }
-};

package/plugins/back-to-top/config.js

@@ -1,10 +0,0 @@
-/**
- * Back to Top Plugin — Default Configuration
- */
-export default {
-  scrollThreshold: 300,
-  position: 'bottom-right',
-  label: '',
-  smooth: true,
-  offset: 32
-};

package/plugins/back-to-top/plugin.js

@@ -1,24 +0,0 @@
-/**
- * Back to Top Plugin — Server
- *
- * Endpoints (prefix: /api/plugins/back-to-top):
- *   GET  /settings  — public (called from public site IIFE)
- *   PUT  /settings  — admin-auth — saves user overrides
- */
-import {getPluginSettings, savePluginState} from '../../server/services/plugins.js';
-
-export default async function backToTopPlugin(fastify, options) {
-  const {authenticate, requireAdmin} = options.auth;
-
-  // GET /settings — no auth, public read (returns non-sensitive display config)
-  fastify.get('/settings', async () => {
-    return getPluginSettings('back-to-top');
-  });
-
-  // PUT /settings — admin only
-  fastify.put('/settings', {preHandler: [authenticate, requireAdmin]}, async (request) => {
-    const body = request.body || {};
-    savePluginState('back-to-top', {settings: body});
-    return {ok: true};
-  });
-}

package/plugins/back-to-top/plugin.json

@@ -1,36 +0,0 @@
-{
-  "name": "back-to-top",
-  "displayName": "Back to Top",
-  "version": "1.0.0",
-  "description": "Injects a configurable scroll-to-top button into every public page.",
-  "author": "Darryl Waterhouse",
-  "date": "2026-03-02",
-  "icon": "arrow-up",
-  "admin": {
-    "sidebar": [
-      {
-        "id": "back-to-top",
-        "text": "Back to Top",
-        "icon": "arrow-up",
-        "url": "#/plugins/back-to-top",
-        "section": "#/plugins/back-to-top"
-      }
-    ],
-    "routes": [
-      {
-        "path": "/plugins/back-to-top",
-        "view": "plugin-back-to-top-settings",
-        "title": "Back to Top - Domma CMS"
-      }
-    ],
-    "views": {
-      "plugin-back-to-top-settings": {
-        "entry": "back-to-top/admin/views/back-to-top-settings.js",
-        "exportName": "backToTopSettingsView"
-      }
-    }
-  },
-  "inject": {
-    "bodyEnd": "public/inject-body.html"
-  }
-}

package/plugins/back-to-top/public/inject-body.html

@@ -1,105 +0,0 @@
-<script>
-  (function () {
-    'use strict';
-
-    var BTN_ID = 'back-to-top-btn';
-
-    fetch('/api/plugins/back-to-top/settings')
-      .then(function (r) {
-        return r.json();
-      })
-      .then(function (cfg) {
-        var threshold = cfg.scrollThreshold || 300;
-        var position = cfg.position || 'bottom-right';
-        var label = cfg.label || '';
-        var smooth = cfg.smooth !== false;
-        var offset = cfg.offset || 32;
-
-        var btn = document.createElement('button');
-        btn.id = BTN_ID;
-        btn.type = 'button';
-        btn.setAttribute('aria-label', 'Back to top');
-        btn.setAttribute('title', 'Back to top');
-
-        // Inline SVG — arrow-up (Domma icon set path)
-        var svgNS = 'http://www.w3.org/2000/svg';
-        var svg = document.createElementNS(svgNS, 'svg');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('width', '20');
-        svg.setAttribute('height', '20');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('stroke', 'currentColor');
-        svg.setAttribute('stroke-width', '2');
-        svg.setAttribute('stroke-linecap', 'round');
-        svg.setAttribute('stroke-linejoin', 'round');
-        var path = document.createElementNS(svgNS, 'path');
-        path.setAttribute('d', 'M12 19V5M5 12l7-7 7 7');
-        svg.appendChild(path);
-        btn.appendChild(svg);
-
-        if (label) {
-          var span = document.createElement('span');
-          span.textContent = label;
-          span.style.marginLeft = '6px';
-          btn.appendChild(span);
-        }
-
-        // Inline styles — self-contained, no site.css dependency
-        var isRight = position !== 'bottom-left';
-        Object.assign(btn.style, {
-          position: 'fixed',
-          bottom: offset + 'px',
-          right: isRight ? offset + 'px' : 'auto',
-          left: isRight ? 'auto' : offset + 'px',
-          zIndex: '9999',
-          display: 'flex',
-          alignItems: 'center',
-          padding: '10px',
-          borderRadius: '50%',
-          border: 'none',
-          cursor: 'pointer',
-          background: 'rgba(0,0,0,0.5)',
-          color: '#fff',
-          backdropFilter: 'blur(4px)',
-          opacity: '0',
-          transform: 'translateY(12px)',
-          transition: 'opacity .25s, transform .25s',
-          pointerEvents: 'none'
-        });
-
-        if (label) {
-          btn.style.borderRadius = '999px';
-          btn.style.padding = '10px 16px';
-        }
-
-        document.body.appendChild(btn);
-
-        function show() {
-          btn.style.opacity = '1';
-          btn.style.transform = 'translateY(0)';
-          btn.style.pointerEvents = 'auto';
-        }
-
-        function hide() {
-          btn.style.opacity = '0';
-          btn.style.transform = 'translateY(12px)';
-          btn.style.pointerEvents = 'none';
-        }
-
-        window.addEventListener('scroll', function () {
-          if (window.scrollY > threshold) {
-            show();
-          } else {
-            hide();
-          }
-        }, {passive: true});
-
-        btn.addEventListener('click', function () {
-          window.scrollTo({top: 0, behavior: smooth ? 'smooth' : 'auto'});
-        });
-      })
-      .catch(function () {
-        // Settings fetch failed — don't inject button
-      });
-  })();
-</script>

package/plugins/cookie-consent/admin/templates/cookie-consent-settings.html

@@ -1,113 +0,0 @@
-<div class="view-header">
-  <h1><span data-icon="shield"></span> Cookie Consent</h1>
-  <div>
-    <button id="save-settings-btn" class="btn btn-primary">
-      <span data-icon="save"></span> Save
-    </button>
-  </div>
-</div>
-
-<div class="card mb-4">
-  <div class="card-header"><h2>Banner Wording</h2></div>
-  <div class="card-body">
-    <div class="row mb-3">
-      <div class="col">
-        <label class="form-label">Message</label>
-        <textarea id="field-message" class="form-input" rows="3"></textarea>
-      </div>
-    </div>
-    <div class="row mb-3">
-      <div class="col-6">
-        <label class="form-label">Accept All button</label>
-        <input id="field-accept-all-text" type="text" class="form-input">
-      </div>
-      <div class="col-6">
-        <label class="form-label">Reject All button</label>
-        <input id="field-reject-all-text" type="text" class="form-input">
-      </div>
-    </div>
-    <div class="row mb-3">
-      <div class="col-6">
-        <label class="form-label">Customize button</label>
-        <input id="field-customize-text" type="text" class="form-input">
-      </div>
-      <div class="col-6">
-        <label class="form-label">Save Preferences button</label>
-        <input id="field-save-preferences-text" type="text" class="form-input">
-      </div>
-    </div>
-    <div class="row mb-3">
-      <div class="col-6">
-        <label class="form-label">Privacy Policy link text</label>
-        <input id="field-privacy-policy-text" type="text" class="form-input">
-      </div>
-      <div class="col-6">
-        <label class="form-label">Privacy Policy URL</label>
-        <input id="field-privacy-policy-url" type="text" class="form-input" placeholder="/privacy-policy">
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-6">
-        <label class="form-label">Cookie Policy link text</label>
-        <input id="field-cookie-policy-text" type="text" class="form-input">
-      </div>
-      <div class="col-6">
-        <label class="form-label">Cookie Policy URL <span class="text-muted">(leave empty to hide)</span></label>
-        <input id="field-cookie-policy-url" type="text" class="form-input" placeholder="/cookie-policy">
-      </div>
-    </div>
-  </div>
-</div>
-
-<div class="card mb-4">
-  <div class="card-header"><h2>Appearance &amp; Categories</h2></div>
-  <div class="card-body">
-    <div class="row mb-3">
-      <div class="col-4">
-        <label class="form-label">Position</label>
-        <select id="field-position" class="form-select">
-          <option value="bottom">Bottom</option>
-          <option value="top">Top</option>
-        </select>
-      </div>
-      <div class="col-4">
-        <label class="form-label">Layout</label>
-        <select id="field-layout" class="form-select">
-          <option value="bar">Bar</option>
-          <option value="modal">Modal</option>
-        </select>
-      </div>
-      <div class="col-4">
-        <label class="form-label">Theme</label>
-        <select id="field-theme" class="form-select">
-          <option value="dark">Dark</option>
-          <option value="light">Light</option>
-        </select>
-      </div>
-    </div>
-    <div class="row mb-3">
-      <div class="col">
-        <label class="form-label">Cookie categories shown in Customize panel</label>
-        <span class="form-hint">Necessary cookies are always shown and always required.</span>
-        <div style="margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem;">
-          <label class="form-check-label">
-            <input id="field-show-functional" type="checkbox"> Functional Cookies
-          </label>
-          <label class="form-check-label">
-            <input id="field-show-analytics" type="checkbox"> Analytics Cookies
-          </label>
-          <label class="form-check-label">
-            <input id="field-show-marketing" type="checkbox"> Marketing Cookies
-          </label>
-        </div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-4">
-        <label class="form-label">Consent version</label>
-        <input id="field-consent-version" type="text" class="form-input" placeholder="1.0">
-        <span class="form-hint">Increment to re-prompt users who already accepted.</span>
-      </div>
-    </div>
-  </div>
-</div>