domma-cms 0.1.0 → 0.2.0

package/plugins/domma-effects/plugin.js

@@ -1,6 +1,10 @@
 /**
  * Domma Effects Plugin — Server
  *
+ * Registers all [effect] shortcodes via the hooks API at startup.
+ * Shortcodes are only active when this plugin is enabled — disabling the plugin
+ * means [reveal], [counter], etc. pass through as plain text.
+ *
  * Endpoints (prefix: /api/plugins/domma-effects):
  *   GET  /settings  — public (called from public site IIFE)
  *   PUT  /settings  — admin-auth — saves user overrides
@@ -9,6 +13,127 @@ import {getPluginSettings, savePluginState} from '../../server/services/plugins.
 
 export default async function dommaEffectsPlugin(fastify, options) {
   const {authenticate, requireAdmin} = options.auth;
+  const {registerShortcode} = options.hooks;
+
+  // -------------------------------------------------------------------------
+  // Shortcode registrations
+  // -------------------------------------------------------------------------
+
+  // Self-closing: [counter to="100" from="0" prefix="$" suffix="+" duration="2000" /]
+  registerShortcode('counter', (attrStr, _body, ctx) => {
+    const attrs = ctx.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>`;
+  }, {priority: 5});
+
+  // Self-closing: [celebrate theme="christmas" intensity="medium" /]
+  registerShortcode('celebrate', (attrStr, _body, ctx) => {
+    const attrs = ctx.parseShortcodeAttrs(attrStr);
+    const dataAttrs = Object.entries(attrs).map(([k, v]) => ` data-fx-${k}="${v}"`).join('');
+    return `<div class="dm-fx-celebrate"${dataAttrs}></div>`;
+  }, {priority: 5});
+
+  // [firework] — self-closing and wrapping forms.
+  // Self-closing: [firework type="burst" colour="rainbow" size="lg" continuous="true" /]
+  // Wrapping:     [firework type="sparkle" colour="info"]Click me[/firework]
+  // Note: [fireworks] (plural) is registered separately below.
+  registerShortcode('firework', (attrStr, body, ctx) => {
+    const attrs = ctx.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');
+    if (body === null) {
+      return `<div class="${classes.join(' ')}"></div>`;
+    }
+    const innerHtml = ctx.marked.parse(ctx.processCardBlocks(ctx.processGridBlocks(body.trim())));
+    return `<div class="${classes.join(' ')}">${innerHtml}</div>\n`;
+  }, {priority: 5});
+
+  // Wrapping container: [fireworks]...[/fireworks]
+  // Body contains already-processed firework HTML from the firework handler above.
+  registerShortcode('fireworks', (attrStr, body, _ctx) => {
+    if (body === null) return '';
+    return `<div class="fireworks-container">${body.trim()}</div>\n`;
+  }, {priority: 10});
+
+  // Dedicated scribe handler — supports both simple wrapping and action-script syntax.
+  // Simple: [scribe speed="fast"]Hello world[/scribe]
+  // Script: [scribe][render effect="fade"]Hello[/render][wait]1s[/wait][undo /][/scribe]
+  registerShortcode('scribe', (attrStr, body, ctx) => {
+    if (body === null) return '';
+    const attrs = ctx.parseShortcodeAttrs(attrStr);
+    const dataAttrs = Object.entries(attrs).map(([k, v]) => ` data-fx-${k}="${ctx.escapeAttr(v)}"`).join('');
+    const hasActions = /\[\s*(render|wait|undo)\b/.test(body);
+    if (!hasActions) {
+      const innerHtml = ctx.marked.parse(ctx.processCardBlocks(ctx.processGridBlocks(body.trim())));
+      return `<div class="dm-fx-scribe"${dataAttrs}>${innerHtml}</div>\n`;
+    }
+    const actions = [];
+    const actionRe = /\[render([^\]]*)\]([\s\S]*?)\[\/render\]|\[wait\]([\s\S]*?)\[\/wait\]|\[undo([^\]]*?)\/\]/gi;
+    for (const match of body.matchAll(actionRe)) {
+      if (match[0].startsWith('[render')) {
+        const rAttrs = ctx.parseShortcodeAttrs(match[1] || '');
+        const action = {render: match[2].trim()};
+        if (rAttrs.effect) action.effect = rAttrs.effect;
+        actions.push(action);
+      } else if (match[0].startsWith('[wait')) {
+        const val = match[3].trim();
+        actions.push({wait: isNaN(val) ? val : parseInt(val, 10)});
+      } else {
+        const uAttrs = ctx.parseShortcodeAttrs(match[4] || '');
+        if (uAttrs.all === 'true') actions.push({undoRender: 'all'});
+        else if (uAttrs.count) actions.push({undoRender: parseInt(uAttrs.count, 10)});
+        else actions.push({undoRender: true});
+      }
+    }
+    if (!actions.length) return '';
+    const actionsJson = ctx.escapeAttr(JSON.stringify(actions));
+    return `<span class="dm-fx-scribe"${dataAttrs} data-fx-actions="${actionsJson}"></span>\n`;
+  }, {priority: 5});
+
+  // Wrapping animation effects — all follow the same dm-fx-{name} pattern.
+  for (const name of ['reveal', 'breathe', 'pulse', 'shake', 'scramble', 'ripple', 'twinkle']) {
+    registerShortcode(name, (attrStr, body, ctx) => {
+      if (body === null) return '';
+      const attrs = ctx.parseShortcodeAttrs(attrStr);
+      const dataAttrs = Object.entries(attrs).map(([k, v]) => ` data-fx-${k}="${v}"`).join('');
+      const innerHtml = ctx.marked.parse(ctx.processCardBlocks(ctx.processGridBlocks(body.trim())));
+      return `<div class="dm-fx-${name}"${dataAttrs}>${innerHtml}</div>\n`;
+    });
+  }
+
+  // CSS-only: [animate type="fade-in-up" duration="slow" delay="200ms" repeat="infinite"]...[/animate]
+  registerShortcode('animate', (attrStr, body, ctx) => {
+    if (body === null) return '';
+    const attrs = ctx.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(' ')}">${ctx.marked.parse(ctx.processCardBlocks(ctx.processGridBlocks(body.trim())))}</div>\n`;
+  });
+
+  // CSS-only: [ambient type="float-blobs" speed="slow" intensity="subtle"]...[/ambient]
+  registerShortcode('ambient', (attrStr, body, ctx) => {
+    if (body === null) return '';
+    const attrs = ctx.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(' ')}">${ctx.marked.parse(ctx.processCardBlocks(ctx.processGridBlocks(body.trim())))}</div>\n`;
+  });
+
+  // -------------------------------------------------------------------------
+  // Settings routes
+  // -------------------------------------------------------------------------
 
   fastify.get('/settings', async () => {
     return getPluginSettings('domma-effects');

package/plugins/domma-effects/public/inject-body.html

@@ -218,9 +218,28 @@
           body.querySelectorAll('.dm-fx-scribe').forEach(function (el) {
             var opts = {};
             if (attr(el, 'speed')) opts.speed = numAttr(el, 'speed', 50);
+            if (attr(el, 'delete-speed')) opts.deleteSpeed = numAttr(el, 'delete-speed', 30);
             if (attr(el, 'cursor')) opts.cursor = boolAttr(el, 'cursor', true);
+            if (attr(el, 'cursor-char')) opts.cursorChar = attr(el, 'cursor-char');
+            if (attr(el, 'cursor-type')) opts.cursorType = attr(el, 'cursor-type');
             if (attr(el, 'mode')) opts.mode = attr(el, 'mode');
             if (attr(el, 'loop')) opts.loop = boolAttr(el, 'loop', false);
+            if (attr(el, 'loop-delay')) opts.loopDelay = numAttr(el, 'loop-delay', 1000);
+            if (attr(el, 'pause-on-hover')) opts.pauseOnHover = boolAttr(el, 'pause-on-hover', false);
+            // Script mode: data-fx-actions contains JSON action array
+            var actionsRaw = attr(el, 'actions');
+            if (actionsRaw) {
+              try {
+                opts.actions = JSON.parse(actionsRaw);
+              } catch (e) {
+                return;
+              }
+            } else {
+              var text = el.textContent.trim();
+              if (!text) return;
+              el.textContent = '';
+              opts.actions = [{render: text}];
+            }
             E.scribe(el, opts);
           });
 

package/plugins/example-analytics/admin/views/analytics.js

@@ -43,8 +43,8 @@ async function loadStats($container) {
     T.create('#analytics-table', {
         data: stats,
         columns: [
-            { key: 'url',  label: 'Page URL', render: (val) => `<code>${val}</code>` },
-            { key: 'hits', label: 'Page views' }
+          {key: 'url', title: 'Page URL', render: (val) => `<code>${val}</code>`},
+          {key: 'hits', title: 'Page views'}
         ],
         emptyMessage: 'No page views recorded yet.'
     });

package/plugins/example-analytics/plugin.json

@@ -23,5 +23,13 @@
     "inject": {
         "head": "public/inject-head.html",
         "bodyEnd": "public/inject-body.html"
+    },
+    "scaffold": {
+        "reset": [
+            {
+                "path": "stats.json",
+                "content": "{}"
+            }
+        ]
     }
 }

package/plugins/example-analytics/stats.json

@@ -1 +1,15 @@
-{}
+{
+  "/": 30,
+  "/about": 28,
+  "/blog": 11,
+  "/contact": 10,
+  "/resources/typography": 3,
+  "/resources": 2,
+  "/resources/shortcodes": 5,
+  "/resources/cards": 1,
+  "/resources/interactive": 12,
+  "/resources/grid": 4,
+  "/forms": 14,
+  "/resources/effects": 3,
+  "/blog/hello-world": 14
+}

package/plugins/form-builder/admin/templates/form-editor.html

@@ -42,13 +42,26 @@
         <div class="card mb-4">
             <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
                 <h2>Fields</h2>
-                <div style="display:flex;gap:.4rem;">
-                    <button id="add-field-btn" class="btn btn-ghost btn-sm">
-                        <span data-icon="plus"></span> Add Field
-                    </button>
-                    <button id="add-page-break-btn" class="btn btn-ghost btn-sm" title="Add a wizard step separator">
-                        <span data-icon="minus"></span> Add Page Break
+              <div id="add-element-dropdown" style="position:relative;">
+                <button id="add-element-btn" class="btn btn-ghost btn-sm" type="button">
+                  <span data-icon="plus"></span> Add <span
+                    style="font-size:.65rem;opacity:.6;margin-left:.1rem;">▾</span>
                     </button>
+                <div id="add-element-menu"
+                     style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--card-bg,#1e1e2e);border:1px solid var(--border-color,#333);border-radius:6px;min-width:140px;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.3);overflow:hidden;">
+                  <button id="add-field-btn" type="button"
+                          style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
+                    Field
+                  </button>
+                  <button id="add-spacer-btn" type="button"
+                          style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--border-color,#333);">
+                    Spacer
+                  </button>
+                  <button id="add-page-break-btn" type="button"
+                          style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;">
+                    Page Break
+                  </button>
+                </div>
                 </div>
             </div>
             <div class="card-body" style="padding:0;">