domma-cms 0.1.0 → 0.2.0

package/server/services/markdown.js

@@ -5,6 +5,7 @@
 import matter from 'gray-matter';
 import {marked} from 'marked';
 import sanitizeHtml from 'sanitize-html';
+import {applyTransforms, getSanitizeExtensions, getShortcodeProcessors} from './hooks.js';
 
 // Configure marked for safe output
 marked.setOptions({
@@ -17,7 +18,7 @@ marked.setOptions({
  * @param {string} attrStr
  * @returns {object}
  */
-function parseShortcodeAttrs(attrStr) {
+export function parseShortcodeAttrs(attrStr) {
   const attrs = {};
   for (const [, key, val] of attrStr.matchAll(/(\w+)=["']([^"']*)["']/g)) {
     attrs[key] = val;
@@ -26,136 +27,59 @@ function parseShortcodeAttrs(attrStr) {
 }
 
 /**
- * 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.*.
+ * Temporarily replace fenced code blocks and inline code spans with
+ * non-matching placeholders so shortcode regexes cannot fire inside them.
+ * Returns the scrubbed string and a restore function.
  *
  * @param {string} markdown
- * @returns {string}
+ * @returns {{ scrubbed: string, restore: (s: string) => 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>`;
-    }
-  );
+export function scrubCodeRegions(markdown) {
+  const store = [];
+  const placeholder = (s) => {
+    const idx = store.length;
+    store.push(s);
+    return `\x02SC${idx}\x03`;
+  };
 
-  // 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>`;
-    }
-  );
+  // Fenced code blocks (``` or ~~~, with optional language tag)
+  let scrubbed = markdown.replace(/^(`{3,}|~{3,})[^\n]*\n[\s\S]*?\n\1[ \t]*$/gm, placeholder);
+  // Inline code spans (single or multiple backticks, non-greedy)
+  scrubbed = scrubbed.replace(/`+[^`\n]+`+/g, placeholder);
 
-  // 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`
-  );
+  const restore = (s) => s.replace(/\x02SC(\d+)\x03/g, (_, i) => store[parseInt(i, 10)]);
+  return {scrubbed, restore};
+}
 
-  // 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`;
-    }
-  );
+/**
+ * Run all plugin-registered shortcode handlers against the markdown string.
+ * Self-closing ([name attrs /]) and wrapping ([name attrs]...[/name]) forms are both supported.
+ * Code regions are scrubbed first so shortcodes inside fenced blocks are never processed.
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processPluginShortcodes(markdown) {
+  const processors = getShortcodeProcessors();
+  if (!processors.length) return markdown;
 
-  // 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'];
+  const {scrubbed, restore} = scrubCodeRegions(markdown);
+  let result = scrubbed;
+  const context = {parseShortcodeAttrs, scrubCodeRegions, marked, processCardBlocks, processGridBlocks, escapeAttr};
 
-  for (const name of wrappingEffects) {
+  for (const {name, handler} of processors) {
+    // Self-closing: [name attrs /]
+    result = result.replace(
+      new RegExp(`\\[${name}([^\\]]*)\\s*\\/\\]`, 'gi'),
+      (_, attrStr) => handler(attrStr, null, context)
+    );
+    // Wrapping: [name attrs]...[/name]
     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`;
-      }
+      (_, attrStr, body) => handler(attrStr, body, context)
     );
   }
-
-  // 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;
+  return restore(result);
 }
 
 /**
@@ -185,7 +109,8 @@ function processGridBlocks(markdown) {
     (_, attrStr, body) => {
       const attrs = parseShortcodeAttrs(attrStr);
       const cls = attrs.span ? ` class="col-span-${attrs.span}"` : '';
-      return `<div${cls}>${marked.parse(processCardBlocks(body.trim()))}</div>`;
+      const id = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+      return `<div${cls}${id}>${marked.parse(processCardBlocks(body.trim()))}</div>`;
     }
   );
 
@@ -197,7 +122,8 @@ function processGridBlocks(markdown) {
       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`;
+      const id = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+      return `<div class="${classes.join(' ')}"${id}>${inner}</div>\n`;
     }
   );
 
@@ -210,13 +136,29 @@ function processGridBlocks(markdown) {
       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`;
+      const id = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+      return `<div class="${classes.join(' ')}"${id}>${inner}</div>\n`;
     }
   );
 
   return result;
 }
 
+/**
+ * Escape a string for safe use inside an HTML double-quoted attribute value.
+ * Prevents attribute-injection from shortcode attribute values.
+ *
+ * @param {string} str
+ * @returns {string}
+ */
+export function escapeAttr(str) {
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+}
+
 /**
  * Pre-process [card] shortcodes before running through marked.
  *
@@ -244,10 +186,396 @@ function processCardBlocks(markdown) {
         ? `<div class="card-header"><h2>${title}</h2></div>`
         : '';
       const bodyHtml = marked.parse(body.trim());
+      const id = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
       const extra = collapsible ? ' data-collapsible="true"' : '';
-      return `<div class="card mb-4"${extra}>${titleHtml}<div class="card-body">${bodyHtml}</div></div>\n`;
+      return `<div class="card mb-4"${extra}${id}>${titleHtml}<div class="card-body">${bodyHtml}</div></div>\n`;
+    }
+  );
+}
+
+/**
+ * Pre-process [tabs] / [tab] shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [tabs id="optional" style="pills"]
+ *   [tab title="First"]Content[/tab]
+ *   [tab title="Second"]Content[/tab]
+ *   [/tabs]
+ *
+ * Supported attributes on [tabs]:
+ *   style  - "pills" for pill-style nav (default: standard underline)
+ *   id     - optional id on the wrapper
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processTabsBlocks(markdown) {
+  const {scrubbed, restore} = scrubCodeRegions(markdown);
+  let counter = 0;
+  const processed = scrubbed.replace(
+    /\[tabs([^\]]*)\]([\s\S]*?)\[\/tabs\]/gi,
+    (_, attrStr, body) => {
+      counter++;
+      const prefix = `dm-tab-${counter}`;
+      const attrs = parseShortcodeAttrs(attrStr);
+      const pillsClass = attrs.style === 'pills' ? ' tabs-pills' : '';
+      const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+
+      // Parse inner [tab title="..."] items
+      let tabIdx = 0;
+      const items = [];
+      body.replace(/\[tab([^\]]*)\]([\s\S]*?)\[\/tab\]/gi, (__, tabAttr, tabBody) => {
+        tabIdx++;
+        const tabAttrs = parseShortcodeAttrs(tabAttr);
+        const title = tabAttrs.title || `Tab ${tabIdx}`;
+        const paneId = `${prefix}-${tabIdx}`;
+        const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(tabBody.trim())));
+        items.push({title, paneId, bodyHtml, first: tabIdx === 1});
+      });
+
+      if (!items.length) return '';
+
+      const navItems = items.map(t =>
+        `<button class="tab-item${t.first ? ' active' : ''}">${escapeAttr(t.title)}</button>`
+      ).join('\n    ');
+      const panes = items.map(t =>
+        `<div class="tab-panel${t.first ? ' active' : ''}">${t.bodyHtml}</div>`
+      ).join('\n    ');
+
+      return (
+        `<div class="tabs${pillsClass}"${idAttr}>\n` +
+        `  <div class="tab-list">\n    ${navItems}\n  </div>\n` +
+        `  <div class="tab-content">\n    ${panes}\n  </div>\n` +
+        `</div>\n`
+      );
     }
   );
+  return restore(processed);
+}
+
+/**
+ * Pre-process [accordion] / [item] shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [accordion multiple="true" id="optional"]
+ *   [item title="Section 1"]Content[/item]
+ *   [item title="Section 2"]Content[/item]
+ *   [/accordion]
+ *
+ * Supported attributes on [accordion]:
+ *   multiple - "true" to allow multiple panels open simultaneously
+ *   id       - optional id on the wrapper
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processAccordionBlocks(markdown) {
+  const {scrubbed, restore} = scrubCodeRegions(markdown);
+  const processed = scrubbed.replace(
+    /\[accordion([^\]]*)\]([\s\S]*?)\[\/accordion\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const multiAttr = attrs.multiple === 'true' ? ' data-multi="true"' : '';
+      const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+
+      let items = '';
+      body.replace(/\[item([^\]]*)\]([\s\S]*?)\[\/item\]/gi, (__, itemAttr, itemBody) => {
+        const itemAttrs = parseShortcodeAttrs(itemAttr);
+        const title = itemAttrs.title || 'Item';
+        const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(itemBody.trim())));
+        items += (
+          `<div class="accordion-item">\n` +
+          `  <h3 class="accordion-header"><button class="accordion-button" type="button">${escapeAttr(title)}` +
+          `<span class="accordion-icon" data-icon="chevron-down"></span></button></h3>\n` +
+          `  <div class="accordion-body"><div class="accordion-content">${bodyHtml}</div></div>\n` +
+          `</div>\n`
+        );
+      });
+
+      return `<div class="accordion"${idAttr}${multiAttr}>\n${items}</div>\n`;
+    }
+  );
+  return restore(processed);
+}
+
+/**
+ * Pre-process [carousel] / [slide] shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [carousel autoplay="true" interval="5000" loop="true" animation="slide" id="optional"]
+ *   [slide title="Optional" image="/media/photo.jpg"]Body content[/slide]
+ *   [slide]Text-only slide content[/slide]
+ *   [/carousel]
+ *
+ * Supported attributes on [carousel]:
+ *   autoplay  - "true" to auto-advance slides
+ *   interval  - milliseconds between slides (default 5000)
+ *   loop      - "false" to disable loop (default true)
+ *   animation - "fade" or "slide" (default slide)
+ *   id        - optional id on the wrapper
+ *
+ * Supported attributes on [slide]:
+ *   image - URL of a background/header image
+ *   title - slide heading text
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processCarouselBlocks(markdown) {
+  const {scrubbed, restore} = scrubCodeRegions(markdown);
+  const processed = scrubbed.replace(
+    /\[carousel([^\]]*)\]([\s\S]*?)\[\/carousel\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const dataAttrs = [
+        attrs.autoplay ? ` data-autoplay="${escapeAttr(attrs.autoplay)}"` : '',
+        attrs.interval ? ` data-interval="${escapeAttr(attrs.interval)}"` : '',
+        attrs.loop ? ` data-loop="${escapeAttr(attrs.loop)}"` : '',
+        attrs.animation ? ` data-animation="${escapeAttr(attrs.animation)}"` : ''
+      ].join('');
+      const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+
+      let slides = '';
+      body.replace(/\[slide([^\]]*)\]([\s\S]*?)\[\/slide\]/gi, (__, slideAttr, slideBody) => {
+        const slideAttrs = parseShortcodeAttrs(slideAttr);
+        let inner = '';
+        if (slideAttrs.image) {
+          inner += `<img src="${escapeAttr(slideAttrs.image)}" alt="${escapeAttr(slideAttrs.title || '')}">\n`;
+        }
+        const contentHtml = marked.parse(processCardBlocks(processGridBlocks(slideBody.trim())));
+        if (slideAttrs.title || slideBody.trim()) {
+          inner += `<div class="carousel-slide-content">`;
+          if (slideAttrs.title) inner += `<h2 class="carousel-slide-title">${escapeAttr(slideAttrs.title)}</h2>`;
+          if (slideBody.trim()) inner += `<div class="carousel-slide-description">${contentHtml}</div>`;
+          inner += `</div>`;
+        }
+        slides += `<div class="carousel-slide">${inner}</div>\n`;
+      });
+
+      return `<div class="carousel"${idAttr}${dataAttrs}><div class="carousel-track">${slides}</div></div>\n`;
+    }
+  );
+  return restore(processed);
+}
+
+/**
+ * Pre-process [countdown] self-closing shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [countdown to="2026-12-31" format="DD:HH:mm:ss" /]
+ *   [countdown duration="300" format="mm:ss" /]
+ *
+ * Supported attributes:
+ *   to       - ISO date string for a fixed target date
+ *   duration - seconds to count down from (used if to is absent)
+ *   format   - display format: "mm:ss", "HH:mm:ss", "DD:HH:mm:ss" (default mm:ss)
+ *   id       - optional id on the element
+ *
+ * Client-side site.js initialises .dm-countdown elements via E.timer().
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processCountdownBlocks(markdown) {
+  return markdown.replace(
+    /\[countdown([^\]]*?)\/\]/gi,
+    (_, attrStr) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const dataAttrs = [
+        attrs.to ? ` data-to="${escapeAttr(attrs.to)}"` : '',
+        attrs.duration ? ` data-duration="${escapeAttr(attrs.duration)}"` : '',
+        attrs.format ? ` data-format="${escapeAttr(attrs.format)}"` : ''
+      ].join('');
+      const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+      return `<div class="dm-countdown"${idAttr}${dataAttrs}></div>`;
+    }
+  );
+}
+
+/**
+ * Pre-process [table] shortcodes before running through marked.
+ *
+ * Wraps a GFM Markdown table with Domma CSS classes and a responsive container.
+ *
+ * Syntax:
+ *   [table striped="true" bordered="true" compact="true" caption="Sales Data"]
+ *   | Product | Price |
+ *   | ------- | ----: |
+ *   | Widget  | $9.99 |
+ *   [/table]
+ *
+ * Supported attributes:
+ *   striped  - "true" → .table-striped
+ *   bordered - "true" → .table-bordered
+ *   compact  - "true" → .table-compact
+ *   caption  - text inserted as <caption>
+ *   class    - extra classes appended to .table
+ *   id       - id attribute on the <table>
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processTableBlocks(markdown) {
+  return markdown.replace(
+    /\[table([^\]]*)\]([\s\S]*?)\[\/table\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const classes = ['table'];
+      if (attrs.striped === 'true') classes.push('table-striped');
+      if (attrs.bordered === 'true') classes.push('table-bordered');
+      if (attrs.compact === 'true') classes.push('table-compact');
+      if (attrs.class) classes.push(attrs.class);
+
+      const caption = attrs.caption
+        ? `<caption>${escapeAttr(attrs.caption)}</caption>`
+        : '';
+      const idAttr = attrs.id ? ` id="${escapeAttr(attrs.id)}"` : '';
+
+      let tableHtml = marked.parse(body.trim());
+
+      tableHtml = tableHtml.replace(
+        '<table>',
+        `<table class="${classes.join(' ')}"${idAttr}>${caption}`
+      );
+
+      return `<div class="table-responsive">${tableHtml}</div>\n`;
+    }
+  );
+}
+
+/**
+ * Pre-process [hero] shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [hero title="Welcome" tagline="Build something great" size="lg" variant="gradient-blue"]
+ *   Optional body content with **Markdown** support.
+ *   [/hero]
+ *
+ * Supported attributes:
+ *   title   - Hero heading (.hero-title)
+ *   tagline - Subtitle text (.hero-subtitle)
+ *   size    - "sm", "lg", "full" → .hero-sm / .hero-lg / .hero-full
+ *   variant - "dark", "primary", "gradient-blue", "gradient-purple",
+ *             "gradient-sunset", "gradient-ocean" → .hero-{variant}
+ *   image   - URL for background-image + adds .hero-cover
+ *   overlay - "light", "dark", "darker", "gradient", "gradient-reverse" → .hero-overlay-{overlay}
+ *   align   - "center" (default) or "left" → .hero-center / .hero-left
+ *   class   - Extra classes appended to .hero
+ *   id      - Element id attribute
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processHeroBlocks(markdown) {
+  return markdown.replace(
+    /\[hero([^\]]*)\]([\s\S]*?)\[\/hero\]/gi,
+    (_, attrStr, body) => {
+      const attrs = parseShortcodeAttrs(attrStr);
+      const title = attrs.title || '';
+      const tagline = attrs.tagline || '';
+      const size = attrs.size || '';
+      const variant = attrs.variant || '';
+      const image = attrs.image || '';
+      const overlay = attrs.overlay || '';
+      const align = attrs.align || 'center';
+      const fullwidth = attrs.fullwidth === 'true';
+      const cls = attrs.class || '';
+      const id = attrs.id || '';
+
+      const classes = ['hero'];
+      if (size) classes.push(`hero-${size}`);
+      if (variant) classes.push(`hero-${variant}`);
+      if (align) classes.push(`hero-${align}`);
+      if (image) classes.push('hero-cover');
+      if (overlay) classes.push(`hero-overlay-${overlay}`);
+      if (fullwidth) classes.push('hero-breakout');
+      if (cls) classes.push(cls);
+
+      const style = image ? ` style="background-image:url('${escapeAttr(image)}')"` : '';
+      const idAttr = id ? ` id="${escapeAttr(id)}"` : '';
+
+      const processedBody = processCardBlocks(processGridBlocks(body.trim()));
+
+      let inner = '<div class="hero-content">';
+      if (title) inner += `<h1 class="hero-title hero-title-responsive">${escapeAttr(title)}</h1>`;
+      if (tagline) inner += `<p class="hero-subtitle hero-subtitle-responsive">${escapeAttr(tagline)}</p>`;
+      if (processedBody) inner += `<div class="hero-body">${marked.parse(processedBody)}</div>`;
+      inner += '</div>';
+
+      return `<div class="${classes.join(' ')}"${idAttr}${style}>${inner}</div>\n`;
+    }
+  );
+}
+
+/**
+ * Pre-process [slideover] shortcodes before running through marked.
+ *
+ * Syntax:
+ *   [slideover title="More Info" trigger="Read more" size="md" position="right"]
+ *   Markdown body here.
+ *   [/slideover]
+ *
+ * Outputs a trigger button and a hidden content div with data attributes.
+ * Client-side site.js wires up the click handler to open a Domma slideover.
+ * Attribute values are HTML-escaped to prevent injection.
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processSlideoverBlocks(markdown) {
+  const {scrubbed, restore} = scrubCodeRegions(markdown);
+  let counter = 0;
+  const processed = scrubbed.replace(
+    /\[slideover([^\]]*)\]([\s\S]*?)\[\/slideover\]/gi,
+    (_, attrStr, body) => {
+      counter++;
+      const id = `dm-so-${counter}`;
+      const attrs = parseShortcodeAttrs(attrStr);
+      const title = escapeAttr(attrs.title || '');
+      const trigger = escapeAttr(attrs.trigger || 'Open');
+      const size = escapeAttr(attrs.size || 'md');
+      const position = escapeAttr(attrs.position || 'right');
+      const bodyHtml = marked.parse(processCardBlocks(processGridBlocks(body.trim())));
+      return (
+        `<button class="btn btn-link dm-so-trigger" data-so-target="${id}">${trigger}</button>\n` +
+        `<div class="dm-so-content" id="${id}" style="display:none" ` +
+        `data-so-title="${title}" data-so-size="${size}" data-so-position="${position}">${bodyHtml}</div>\n`
+      );
+    }
+  );
+  return restore(processed);
+}
+
+/**
+ * Pre-process [dconfig] shortcodes before running through marked.
+ *
+ * Extracts JSON config blocks and base64-encodes them into hidden divs.
+ * Multiple blocks on one page are supported and merged client-side.
+ * Invalid JSON blocks are silently dropped (no render output).
+ *
+ * Syntax:
+ *   [dconfig]
+ *   { "#btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }
+ *   [/dconfig]
+ *
+ * @param {string} markdown
+ * @returns {string}
+ */
+function processDConfigBlocks(markdown) {
+  const {scrubbed, restore} = scrubCodeRegions(markdown);
+  const processed = scrubbed.replace(
+    /\[dconfig\]([\s\S]*?)\[\/dconfig\]/gi,
+    (_, jsonStr) => {
+      try {
+        JSON.parse(jsonStr.trim()); // validate before encoding
+        const encoded = Buffer.from(jsonStr.trim(), 'utf8').toString('base64');
+        return `<div class="dm-page-config" style="display:none" data-config="${encoded}"></div>\n`;
+      } catch {
+        return ''; // invalid JSON — drop silently
+      }
+    }
+  );
+  return restore(processed);
 }
 
 /**
@@ -257,32 +585,55 @@ function processCardBlocks(markdown) {
  * @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 };
+  const {data, content} = matter(raw);
+  const extensions = getSanitizeExtensions();
+
+  // Pipeline:
+  // beforeParse → dconfig → plugin shortcodes → tabs → accordion → carousel → countdown
+  //   → hero → grid → card → slideover → marked → sanitize → afterParse
+  const preprocessed = applyTransforms('markdown:beforeParse', content);
+  const withDconfig = processDConfigBlocks(preprocessed);
+  const withPluginShortcodes = processPluginShortcodes(withDconfig);
+  const withTabs = processTabsBlocks(withPluginShortcodes);
+  const withAccordion = processAccordionBlocks(withTabs);
+  const withCarousel = processCarouselBlocks(withAccordion);
+  const withCountdown = processCountdownBlocks(withCarousel);
+  const withHero = processHeroBlocks(withCountdown);
+  const withTable = processTableBlocks(withHero);
+  const withGrid = processGridBlocks(withTable);
+  const withCard = processCardBlocks(withGrid);
+  const withSlideover = processSlideoverBlocks(withCard);
+  const rendered = marked.parse(withSlideover);
+
+  const sanitized = sanitizeHtml(rendered, {
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat([
+      'img', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+      'form', 'input', 'textarea', 'select', 'option', 'optgroup',
+      'button', 'label', 'fieldset', 'legend',
+      ...extensions.tags
+    ]),
+    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'],
+      ...extensions.attributes
+    }
+  });
+
+  const html = applyTransforms('markdown:afterParse', sanitized);
+  return {data, content, html};
 }
 
 /**