domma-cms 0.1.0

package/server/services/markdown.js

@@ -0,0 +1,297 @@
+/**
+ * Markdown Service
+ * Parses frontmatter with gray-matter and renders Markdown to HTML with marked.
+ */
+import matter from 'gray-matter';
+import {marked} from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
+// Configure marked for safe output
+marked.setOptions({
+    gfm: true,
+    breaks: false
+});
+
+/**
+ * Parse key="value" or key='value' pairs from a shortcode attribute string.
+ * @param {string} attrStr
+ * @returns {object}
+ */
+function parseShortcodeAttrs(attrStr) {
+  const attrs = {};
+  for (const [, key, val] of attrStr.matchAll(/(\w+)=["']([^"']*)["']/g)) {
+    attrs[key] = val;
+  }
+  return attrs;
+}
+
+/**
+ * Pre-process Domma Effects shortcodes before running through marked.
+ *
+ * Wrapping shortcodes output <div class="dm-fx-{name}" data-fx-*="...">...</div>.
+ * Self-closing [counter /] outputs a <span class="dm-fx-counter"> with formatted text.
+ * CSS-only shortcodes ([animate], [ambient]) apply utility classes with no JS needed.
+ *
+ * Without the domma-effects plugin enabled, content is visible but static.
+ * With the plugin, inject-body.html scans dm-fx-* classes and calls Domma.effects.*.
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processEffectShortcodes(markdown) {
+  let result = markdown;
+
+  // Process inline/self-closing shortcodes FIRST so they survive marked.parse()
+  // inside wrapping shortcode bodies.
+
+  // Self-closing: [counter to="100" from="0" prefix="$" suffix="+" duration="2000" /]
+  result = result.replace(
+    /\[counter([^\]]*?)\/\]/gi,
+    (_, attrStr) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const to = attrs.to || '0';
+      const prefix = attrs.prefix || '';
+      const suffix = attrs.suffix || '';
+      const dataAttrs = Object.entries(attrs)
+        .map(([k, v]) => ` data-fx-${k}="${v}"`)
+        .join('');
+      return `<span class="dm-fx-counter"${dataAttrs}>${prefix}${to}${suffix}</span>`;
+    }
+  );
+
+  // Self-closing: [firework type="burst" colour="rainbow" size="lg" continuous="true" /]
+  // (?!s) prevents matching [fireworks (plural) which is handled separately below.
+  result = result.replace(
+    /\[firework(?!s)([^\]]*?)\/\]/gi,
+    (_, attrStr) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const classes = ['firework'];
+      if (attrs.type) classes.push(`firework-${attrs.type}`);
+      if (attrs.colour) classes.push(`firework-${attrs.colour}`);
+      if (attrs.size) classes.push(`firework-${attrs.size}`);
+      if (attrs.continuous === 'true') classes.push('firework-continuous');
+      if (attrs.hover === 'true') classes.push('firework-on-hover');
+      return `<div class="${classes.join(' ')}"></div>`;
+    }
+  );
+
+  // Self-closing: [celebrate theme="christmas" intensity="medium" /]
+  result = result.replace(
+    /\[celebrate([^\]]*?)\/\]/gi,
+    (_, attrStr) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const dataAttrs = Object.entries(attrs)
+        .map(([k, v]) => ` data-fx-${k}="${v}"`)
+        .join('');
+      return `<div class="dm-fx-celebrate"${dataAttrs}></div>`;
+    }
+  );
+
+  // Wrapping container: [fireworks]...[/fireworks]
+  // Body is already-processed HTML (firework self-closing ran above) — passed raw, no marked.parse.
+  result = result.replace(
+    /\[fireworks([^\]]*)\]([\s\S]*?)\[\/fireworks\]/gi,
+    (_, _attrStr, body) => `<div class="fireworks-container">${body.trim()}</div>\n`
+  );
+
+  // Wrapping: [firework type="sparkle" colour="info"]Click me[/firework]
+  result = result.replace(
+    /\[firework(?!s)([^\]]*)\]([\s\S]*?)\[\/firework\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const classes = ['firework'];
+      if (attrs.type) classes.push(`firework-${attrs.type}`);
+      if (attrs.colour) classes.push(`firework-${attrs.colour}`);
+      if (attrs.size) classes.push(`firework-${attrs.size}`);
+      if (attrs.continuous === 'true') classes.push('firework-continuous');
+      if (attrs.hover === 'true') classes.push('firework-on-hover');
+      const innerHtml = marked.parse(processCardBlocks(processGridBlocks(body.trim())));
+      return `<div class="${classes.join(' ')}">${innerHtml}</div>\n`;
+    }
+  );
+
+  // Wrapping effects: [name attr="val"]...[/name]
+  // Counter spans and firework divs are already HTML at this point so marked.parse() preserves them.
+  const wrappingEffects = ['reveal', 'breathe', 'pulse', 'shake', 'scribe', 'scramble', 'ripple', 'twinkle'];
+
+  for (const name of wrappingEffects) {
+    result = result.replace(
+      new RegExp(`\\[${name}([^\\]]*)\\]([\\s\\S]*?)\\[\\/${name}\\]`, 'gi'),
+      (_, attrStr, body) => {
+        const attrs = parseShortcodeAttrs(attrStr);
+        const dataAttrs = Object.entries(attrs)
+          .map(([k, v]) => ` data-fx-${k}="${v}"`)
+          .join('');
+        const innerHtml = marked.parse(processCardBlocks(processGridBlocks(body.trim())));
+        return `<div class="dm-fx-${name}"${dataAttrs}>${innerHtml}</div>\n`;
+      }
+    );
+  }
+
+  // CSS-only: [animate type="fade-in-up" duration="slow"]...[/animate]
+  result = result.replace(
+    /\[animate([^\]]*)\]([\s\S]*?)\[\/animate\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const classes = [];
+      if (attrs.type) classes.push(`animate-${attrs.type}`);
+      if (attrs.duration) classes.push(`animate-duration-${attrs.duration}`);
+      if (attrs.delay) classes.push(`animate-delay-${attrs.delay}`);
+      if (attrs.repeat) classes.push(`animate-${attrs.repeat}`);
+      return `<div class="${classes.join(' ')}">${marked.parse(processCardBlocks(processGridBlocks(body.trim())))}</div>\n`;
+    }
+  );
+
+  // CSS-only: [ambient type="float-blobs" speed="slow" intensity="subtle"]...[/ambient]
+  result = result.replace(
+    /\[ambient([^\]]*)\]([\s\S]*?)\[\/ambient\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const classes = [];
+      if (attrs.type) classes.push(`bg-ambient-${attrs.type}`);
+      if (attrs.speed) classes.push(`bg-ambient-${attrs.speed}`);
+      if (attrs.intensity) classes.push(`bg-ambient-${attrs.intensity}`);
+      return `<div class="${classes.join(' ')}">${marked.parse(processCardBlocks(processGridBlocks(body.trim())))}</div>\n`;
+    }
+  );
+
+  return result;
+}
+
+/**
+ * Pre-process [row], [grid], and [col] shortcodes before running through marked.
+ *
+ * Uses Domma's native CSS Grid system — NOT the .col compatibility layer.
+ *
+ * Supported shortcodes:
+ *
+ *   [grid cols="N" gap="N"]
+ *     [col span="N"] Content [/col]
+ *   [/grid]
+ *   → <div class="grid grid-cols-N gap-N"><div class="col-span-N">…</div></div>
+ *
+ *   [row gap="N"]
+ *     [col] Content [/col]
+ *   [/row]
+ *   → <div class="row gap-N"><div>…</div></div>
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processGridBlocks(markdown) {
+  // Pass 1: [col span="N"]...[/col] → <div class="col-span-N">...</div>
+  let result = markdown.replace(
+    /\[col([^\]]*)\]([\s\S]*?)\[\/col\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const cls = attrs.span ? ` class="col-span-${attrs.span}"` : '';
+      return `<div${cls}>${marked.parse(processCardBlocks(body.trim()))}</div>`;
+    }
+  );
+
+  // Pass 2: [row gap="N" class="extra"]...[/row] → <div class="row ...">...</div>
+  result = result.replace(
+    /\[row([^\]]*)\]([\s\S]*?)\[\/row\]/gi,
+    (_, attrStr, inner) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const classes = ['row'];
+      if (attrs.gap) classes.push(`gap-${attrs.gap}`);
+      if (attrs.class) classes.push(attrs.class);
+      return `<div class="${classes.join(' ')}">${inner}</div>\n`;
+    }
+  );
+
+  // Pass 3: [grid cols="N" gap="N"]...[/grid] → <div class="grid grid-cols-N ...">...</div>
+  result = result.replace(
+    /\[grid([^\]]*)\]([\s\S]*?)\[\/grid\]/gi,
+    (_, attrStr, inner) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const classes = ['grid'];
+      if (attrs.cols) classes.push(`grid-cols-${attrs.cols}`);
+      if (attrs.gap) classes.push(`gap-${attrs.gap}`);
+      if (attrs.class) classes.push(attrs.class);
+      return `<div class="${classes.join(' ')}">${inner}</div>\n`;
+    }
+  );
+
+  return result;
+}
+
+/**
+ * Pre-process [card] shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [card title="Optional Title" collapsible="true"]
+ *   Body content (supports Markdown).
+ *   [/card]
+ *
+ * Supported attributes:
+ *   title        - Card header title (omit for no header)
+ *   collapsible  - "true" to make the card body toggle on header click
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processCardBlocks(markdown) {
+  return markdown.replace(
+    /\[card([^\]]*)\]([\s\S]*?)\[\/card\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const title = attrs.title?.trim() || '';
+      const collapsible = attrs.collapsible === 'true';
+
+      const titleHtml = title
+        ? `<div class="card-header"><h2>${title}</h2></div>`
+        : '';
+      const bodyHtml = marked.parse(body.trim());
+      const extra = collapsible ? ' data-collapsible="true"' : '';
+      return `<div class="card mb-4"${extra}>${titleHtml}<div class="card-body">${bodyHtml}</div></div>\n`;
+    }
+  );
+}
+
+/**
+ * Parse a Markdown file string into frontmatter data and rendered HTML.
+ *
+ * @param {string} raw - Raw file content (frontmatter + Markdown body)
+ * @returns {{ data: object, content: string, html: string }}
+ */
+export function parseMarkdown(raw) {
+    const { data, content } = matter(raw);
+  const html = sanitizeHtml(marked.parse(processCardBlocks(processGridBlocks(processEffectShortcodes(content)))), {
+      allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+        'img', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+        'form', 'input', 'textarea', 'select', 'option', 'optgroup',
+        'button', 'label', 'fieldset', 'legend'
+      ]),
+        allowedAttributes: {
+            ...sanitizeHtml.defaults.allowedAttributes,
+          '*': ['class', 'id', 'style', 'data-*'],
+          img: ['src', 'alt', 'title', 'width', 'height', 'loading'],
+          form: ['action', 'method'],
+          input: ['type', 'name', 'placeholder', 'value', 'required', 'disabled',
+            'readonly', 'min', 'max', 'step', 'pattern', 'maxlength',
+            'minlength', 'checked', 'autocomplete'],
+          textarea: ['name', 'placeholder', 'rows', 'cols', 'required',
+            'disabled', 'readonly', 'maxlength'],
+          select: ['name', 'required', 'disabled', 'multiple'],
+          option: ['value', 'selected', 'disabled'],
+          optgroup: ['label', 'disabled'],
+          button: ['type', 'disabled'],
+          label: ['for'],
+          fieldset: ['disabled']
+        }
+    });
+    return { data, content, html };
+}
+
+/**
+ * Serialise a page object back to a Markdown file string.
+ *
+ * @param {object} frontmatter - Page metadata fields
+ * @param {string} body - Markdown body
+ * @returns {string}
+ */
+export function serialiseMarkdown(frontmatter, body) {
+    return matter.stringify(body || '', frontmatter);
+}

package/server/services/plugins.js

@@ -0,0 +1,246 @@
+/**
+ * Plugin Service
+ * Discovers, loads, and manages CMS plugins.
+ *
+ * Plugin structure:
+ *   plugins/{name}/plugin.json   — manifest (required)
+ *   plugins/{name}/plugin.js     — Fastify plugin, default export (required)
+ *   plugins/{name}/config.js     — default settings, default export (required)
+ *   plugins/{name}/admin/        — optional admin views/templates
+ *   plugins/{name}/public/       — optional injection HTML snippets
+ *   plugins/{name}/data/         — optional plugin-specific data store
+ */
+import fs from 'fs/promises';
+import path from 'path';
+import {getConfig, saveConfig} from '../config.js';
+import {authenticate, requireAdmin, requireRole} from '../middleware/auth.js';
+
+const PLUGINS_DIR = path.resolve('plugins');
+
+const REQUIRED_MANIFEST_FIELDS = ['name', 'displayName', 'version', 'description', 'author', 'date', 'icon'];
+
+/**
+ * Scan the plugins/ directory and return all valid manifests.
+ * Validates mandatory fields and required files (plugin.js, config.js).
+ *
+ * @returns {Promise<object[]>} Array of validated plugin manifests
+ */
+export async function discoverPlugins() {
+    await fs.mkdir(PLUGINS_DIR, { recursive: true });
+    let entries;
+    try {
+        entries = await fs.readdir(PLUGINS_DIR, { withFileTypes: true });
+    } catch {
+        return [];
+    }
+
+    const plugins = [];
+    for (const entry of entries.filter(e => e.isDirectory())) {
+        const dir = entry.name;
+        const pluginDir = path.join(PLUGINS_DIR, dir);
+        const manifestPath = path.join(pluginDir, 'plugin.json');
+
+        let manifest;
+        try {
+            const raw = await fs.readFile(manifestPath, 'utf8');
+            manifest = JSON.parse(raw);
+        } catch {
+            // Skip directories without a valid manifest
+            continue;
+        }
+
+        // Validate mandatory fields
+        let valid = true;
+        for (const field of REQUIRED_MANIFEST_FIELDS) {
+            if (!manifest[field]) {
+                console.warn(`Plugin "${dir}": missing required field "${field}" in plugin.json — skipping`);
+                valid = false;
+                break;
+            }
+        }
+        if (!valid) continue;
+
+        // Validate required files
+        const pluginJsPath = path.join(pluginDir, 'plugin.js');
+        const configJsPath = path.join(pluginDir, 'config.js');
+
+        try {
+            await fs.access(pluginJsPath);
+        } catch {
+            console.warn(`Plugin "${dir}": missing required file plugin.js — skipping`);
+            continue;
+        }
+
+        try {
+            await fs.access(configJsPath);
+        } catch {
+            console.warn(`Plugin "${dir}": missing required file config.js — skipping`);
+            continue;
+        }
+
+      plugins.push({...manifest, name: dir});
+    }
+  return plugins;
+}
+
+const _configDefaultsCache = new Map();
+
+/**
+ * Load and cache config.js defaults for a single plugin.
+ * Only called for enabled plugins at registration time.
+ *
+ * @param {string} name - Plugin directory name
+ * @returns {Promise<object>} Defaults object from config.js
+ */
+async function loadConfigDefaults(name) {
+  if (_configDefaultsCache.has(name)) return _configDefaultsCache.get(name);
+  const configJsPath = path.join(PLUGINS_DIR, name, 'config.js');
+  let defaults = {};
+  try {
+    const {default: exported} = await import(configJsPath);
+    defaults = exported || {};
+  } catch (err) {
+    console.warn(`Plugin "${name}": failed to load config.js — ${err.message}`);
+  }
+  _configDefaultsCache.set(name, defaults);
+  return defaults;
+}
+
+/**
+ * Read the enabled/disabled state for all plugins from config/plugins.json.
+ *
+ * @returns {object} Map of plugin name → { enabled, settings }
+ */
+export function getPluginStates() {
+    try {
+        return getConfig('plugins');
+    } catch {
+        return {};
+    }
+}
+
+/**
+ * Persist enabled/disabled state and settings for a single plugin.
+ *
+ * @param {string} name
+ * @param {object} state - { enabled, settings }
+ * @returns {void}
+ */
+export function savePluginState(name, state) {
+    const states = getPluginStates();
+    states[name] = { ...states[name], ...state };
+    saveConfig('plugins', states);
+}
+
+/**
+ * Register server-side Fastify plugins for all enabled plugins.
+ * Always loads plugin.js as the entry point.
+ *
+ * @param {import('fastify').FastifyInstance} fastify
+ * @returns {Promise<void>}
+ */
+export async function registerPlugins(fastify) {
+    const manifests = await discoverPlugins();
+    const states = getPluginStates();
+
+    const loaded = [];
+    for (const manifest of manifests) {
+        const state = states[manifest.name] || {};
+        if (!state.enabled) continue;
+
+        const entryPath = path.join(PLUGINS_DIR, manifest.name, 'plugin.js');
+        try {
+            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}});
+            loaded.push(manifest.name);
+        } catch (err) {
+            fastify.log.error(`Plugin "${manifest.name}" server failed to load: ${err.message}`);
+        }
+    }
+
+    if (loaded.length) {
+        fastify.log.info(`[plugins] Loaded ${loaded.length} plugin${loaded.length === 1 ? '' : 's'}: ${loaded.join(', ')}`);
+    } else {
+        fastify.log.info('[plugins] No plugins enabled.');
+    }
+}
+
+/**
+ * Return merged settings for a plugin: config.js defaults + user overrides from config/plugins.json.
+ *
+ * @param {string} name - Plugin name
+ * @returns {Promise<object>} Merged settings object
+ */
+export async function getPluginSettings(name) {
+  const defaults = await loadConfigDefaults(name);
+    const states = getPluginStates();
+    const userOverrides = states[name]?.settings || {};
+  return {...defaults, ...userOverrides};
+}
+
+/**
+ * Read and concatenate HTML injection snippets from all enabled plugins.
+ *
+ * @returns {Promise<{ head: string, bodyEnd: string }>}
+ */
+export async function getInjectionSnippets() {
+    const manifests = await discoverPlugins();
+    const states = getPluginStates();
+
+    let head = '';
+  let headLate = '';
+    let bodyEnd = '';
+
+    for (const manifest of manifests) {
+        const state = states[manifest.name] || {};
+        if (!state.enabled || !manifest.inject) continue;
+
+      const pluginRoot = path.resolve(PLUGINS_DIR, manifest.name);
+
+      for (const [key, target] of [['head', 'head'], ['headLate', 'headLate'], ['bodyEnd', 'bodyEnd']]) {
+        if (!manifest.inject[key]) continue;
+        const filePath = path.resolve(PLUGINS_DIR, manifest.name, manifest.inject[key]);
+        if (!filePath.startsWith(pluginRoot + path.sep)) {
+          console.warn(`Plugin "${manifest.name}": inject.${key} path escapes plugin directory — skipping`);
+          continue;
+        }
+            try {
+              const content = await fs.readFile(filePath, 'utf8');
+              if (target === 'head') head += content + '\n';
+              if (target === 'headLate') headLate += content + '\n';
+              if (target === 'bodyEnd') bodyEnd += content + '\n';
+            } catch { /* snippet not found — skip */
+            }
+        }
+    }
+
+  return {head, headLate, bodyEnd};
+}
+
+/**
+ * Return merged sidebar items, routes, and views from all enabled plugins.
+ * Used by the frontend to dynamically extend the admin panel.
+ *
+ * @returns {Promise<{ sidebar: object[], routes: object[], views: object }>}
+ */
+export async function getAdminPluginConfig() {
+    const manifests = await discoverPlugins();
+    const states = getPluginStates();
+
+    const sidebar = [];
+    const routes = [];
+    const views = {};
+
+    for (const manifest of manifests) {
+        const state = states[manifest.name] || {};
+        if (!state.enabled || !manifest.admin) continue;
+
+        if (manifest.admin.sidebar) sidebar.push(...manifest.admin.sidebar);
+        if (manifest.admin.routes) routes.push(...manifest.admin.routes);
+        if (manifest.admin.views) Object.assign(views, manifest.admin.views);
+    }
+
+    return { sidebar, routes, views };
+}

package/server/services/renderer.js

@@ -0,0 +1,80 @@
+/**
+ * Renderer Service
+ * Assembles the full HTML page shell from the template + page data + site config.
+ */
+import fs from 'fs/promises';
+import path from 'path';
+import {fileURLToPath} from 'url';
+import {getConfig} from '../config.js';
+import {getInjectionSnippets} from './plugins.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_PATH = path.join(__dirname, '../templates/page.html');
+
+async function getTemplate() {
+    if (process.env.NODE_ENV !== 'development') {
+        return _templateCache || (_templateCache = await fs.readFile(TEMPLATE_PATH, 'utf8'));
+    }
+    return fs.readFile(TEMPLATE_PATH, 'utf8');
+}
+let _templateCache = null;
+
+/**
+ * Render a page to a full HTML string.
+ *
+ * @param {object} page - Parsed page from content service
+ * @returns {Promise<string>}
+ */
+export async function renderPage(page) {
+    const [template, site, navigation, presets, injection] = await Promise.all([
+        getTemplate(),
+        Promise.resolve(getConfig('site')),
+        Promise.resolve(getConfig('navigation')),
+        Promise.resolve(getConfig('presets')),
+        getInjectionSnippets()
+    ]);
+
+    const preset = presets[page.layout] || presets['default'] || {};
+
+    const seoTitle = page.seo?.title || `${page.title}${site.seo?.titleSeparator || ' | '}${site.seo?.defaultTitle || site.title}`;
+    const seoDescription = page.seo?.description || site.seo?.defaultDescription || '';
+    const ogImage = page.seo?.image || site.seo?.defaultImage || '';
+
+    const vars = {
+        seoTitle,
+        seoDescription,
+        ogImage,
+        title: page.title,
+        html: page.html,
+        theme: site.theme || 'charcoal-dark',
+        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 }),
+        headInject: injection.head,
+      headInjectLate: injection.headLate,
+        bodyEndInject: injection.bodyEnd
+    };
+
+    return interpolate(template, vars);
+}
+
+/**
+ * Simple template interpolation.
+ * Handles {{variable}}, {{#if flag}}...{{/if}}.
+ */
+function interpolate(template, vars) {
+    let html = template.replace(/\{\{#if (\w+)\}\}([\s\S]*?)\{\{\/if\}\}/g, (_, key, inner) => {
+        return vars[key] ? inner : '';
+    });
+
+    html = html.replace(/\{\{(\w+)\}\}/g, (_, key) => {
+        const val = vars[key];
+        if (val === undefined || val === null) return '';
+        return String(val);
+    });
+
+    return html;
+}