domma-cms 0.1.0

package/plugins/domma-effects/admin/templates/domma-effects.html

@@ -0,0 +1,488 @@
+<div class="view-header">
+  <h1><span data-icon="sparkles"></span> Domma Effects</h1>
+  <div>
+    <button id="save-settings-btn" class="btn btn-primary">
+      <span data-icon="save"></span> Save
+    </button>
+  </div>
+</div>
+
+<!-- Settings Card -->
+<div class="card mb-4">
+  <div class="card-header"><h2>Settings</h2></div>
+  <div class="card-body">
+    <div class="row mb-3">
+      <div class="col">
+        <label class="form-check-label">
+          <input id="field-respect-motion" type="checkbox">
+          Respect <code>prefers-reduced-motion</code>
+        </label>
+        <span class="form-hint">When enabled, JS effects are skipped for users who prefer reduced motion. Content remains visible.</span>
+      </div>
+    </div>
+    <div class="row mb-3">
+      <div class="col-6">
+        <label class="form-label">Default animation duration (ms)</label>
+        <input id="field-default-duration" type="number" class="form-input" min="0" max="10000" placeholder="600">
+        <span class="form-hint">Used by reveal when no <code>duration</code> attribute is specified.</span>
+      </div>
+      <div class="col-6">
+        <label class="form-label">Default reveal animation</label>
+        <select id="field-default-animation" class="form-select">
+          <option value="fade">Fade</option>
+          <option value="slide-up">Slide up</option>
+          <option value="slide-down">Slide down</option>
+          <option value="zoom">Zoom</option>
+          <option value="flip">Flip</option>
+        </select>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-6">
+        <label class="form-label">Default scroll threshold</label>
+        <input id="field-default-threshold" type="number" class="form-input" min="0" max="1" step="0.05"
+               placeholder="0.1">
+        <span class="form-hint">Fraction of element visible before reveal fires (0.0–1.0).</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Shortcode Reference Card -->
+<div class="card mb-4">
+  <div class="card-header"><h2>Shortcode Reference</h2></div>
+  <div class="card-body">
+    <p class="text-muted mb-3">Use these shortcodes in any page's Markdown content. The <strong>Effects</strong> toolbar
+      button in the editor inserts them automatically.</p>
+
+    <!-- Tabs -->
+    <div class="mb-3" style="display:flex;gap:6px;flex-wrap:wrap;">
+      <button class="btn btn-sm effects-tab-btn active" data-tab="entrance">Entrance</button>
+      <button class="btn btn-sm effects-tab-btn" data-tab="animation">Animation</button>
+      <button class="btn btn-sm effects-tab-btn" data-tab="text">Text</button>
+      <button class="btn btn-sm effects-tab-btn" data-tab="visual">Visual</button>
+      <button class="btn btn-sm effects-tab-btn" data-tab="examples">Examples</button>
+      <button class="btn btn-sm effects-tab-btn" data-tab="celebrations">Celebrations</button>
+    </div>
+
+    <!-- Entrance tab -->
+    <div id="tab-entrance" class="effects-tab-panel">
+      <h3 class="mb-2">Reveal</h3>
+      <p class="text-muted mb-2">Triggers a scroll-activated entrance animation when the element enters the viewport.
+        Great for headers, cards, and feature sections.</p>
+      <pre class="code-block mb-2">[reveal animation="fade" duration="600" delay="0" threshold="0.1" once="true"]
+## Your heading or content
+
+Markdown **works** inside.
+[/reveal]</pre>
+      <table class="table mb-3">
+        <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Default</th>
+          <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td><code>animation</code></td>
+          <td>fade</td>
+          <td>fade, slide-up, slide-down, zoom, flip</td>
+        </tr>
+        <tr>
+          <td><code>duration</code></td>
+          <td>600</td>
+          <td>Animation duration in milliseconds</td>
+        </tr>
+        <tr>
+          <td><code>delay</code></td>
+          <td>0</td>
+          <td>Delay before animation starts (ms)</td>
+        </tr>
+        <tr>
+          <td><code>threshold</code></td>
+          <td>0.1</td>
+          <td>Fraction visible before triggering (0–1)</td>
+        </tr>
+        <tr>
+          <td><code>once</code></td>
+          <td>true</td>
+          <td>Only animate once (true/false)</td>
+        </tr>
+        </tbody>
+      </table>
+      <p class="text-muted" style="font-size:.85rem;"><strong>Tip:</strong> Use <code>delay</code> to stagger multiple
+        reveal blocks for a cascade effect.</p>
+    </div>
+
+    <!-- Animation tab -->
+    <div id="tab-animation" class="effects-tab-panel">
+      <h3 class="mb-2">Breathe</h3>
+      <p class="text-muted mb-2">Continuous gentle scaling — makes elements feel alive. Ideal for hero images or
+        call-to-action buttons.</p>
+      <pre class="code-block mb-3">[breathe amplitude="8" duration="3000"]
+Content that breathes.
+[/breathe]</pre>
+
+      <h3 class="mb-2">Pulse</h3>
+      <p class="text-muted mb-2">A repeating scale pulse — stronger than breathe, good for alerts or badges.</p>
+      <pre class="code-block mb-3">[pulse scale="1.05" duration="1000"]
+Pulsing content.
+[/pulse]</pre>
+
+      <h3 class="mb-2">Shake</h3>
+      <p class="text-muted mb-2">One-shot horizontal or vertical shake. Use for error states or attention-grabbing
+        elements.</p>
+      <pre class="code-block mb-3">[shake intensity="5" duration="500" direction="horizontal"]
+This will shake.
+[/shake]</pre>
+
+      <h3 class="mb-2">CSS Animate</h3>
+      <p class="text-muted mb-2">Applies Domma CSS animation utility classes — no JavaScript required. Works without the
+        plugin enabled.</p>
+      <pre class="code-block mb-2">[animate type="fade-in-up" duration="normal" delay="200" repeat="once"]
+Content here.
+[/animate]</pre>
+      <table class="table mb-3">
+        <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Values</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td><code>type</code></td>
+          <td>fade-in, fade-out, fade-in-up, fade-in-down, fade-in-left, fade-in-right, slide-in-up, slide-in-down,
+            slide-in-left, slide-in-right, zoom-in, zoom-out, bounce, pulse, shake, spin, rotate-in, flip
+          </td>
+        </tr>
+        <tr>
+          <td><code>duration</code></td>
+          <td>fast, normal, slow, slower</td>
+        </tr>
+        <tr>
+          <td><code>delay</code></td>
+          <td>100, 200, 300, 500, 1000</td>
+        </tr>
+        <tr>
+          <td><code>repeat</code></td>
+          <td>once, infinite, repeat-2, repeat-3</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Text tab -->
+    <div id="tab-text" class="effects-tab-panel">
+      <h3 class="mb-2">Typewriter (Scribe)</h3>
+      <p class="text-muted mb-2">Types text character by character. Perfect for hero taglines or code
+        demonstrations.</p>
+      <pre class="code-block mb-3">[scribe speed="50" cursor="true" loop="false"]
+Your text appears letter by letter.
+[/scribe]</pre>
+
+      <h3 class="mb-2">Scramble</h3>
+      <p class="text-muted mb-2">Reveals text through a character-scramble animation. Great for tech/data
+        aesthetics.</p>
+      <pre class="code-block mb-3">[scramble speed="50" loop="false"]
+Scrambled reveal text.
+[/scramble]</pre>
+
+      <h3 class="mb-2">Counter</h3>
+      <p class="text-muted mb-2">Animates a number from <code>from</code> to <code>to</code>. Use in stat sections. This
+        shortcode is self-closing.</p>
+      <pre class="code-block mb-2">[counter to="100" from="0" prefix="$" suffix="+" duration="2000" /]</pre>
+      <table class="table mb-3">
+        <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Default</th>
+          <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td><code>to</code></td>
+          <td>0</td>
+          <td>Target number</td>
+        </tr>
+        <tr>
+          <td><code>from</code></td>
+          <td>0</td>
+          <td>Starting number</td>
+        </tr>
+        <tr>
+          <td><code>duration</code></td>
+          <td>2000</td>
+          <td>Animation duration (ms)</td>
+        </tr>
+        <tr>
+          <td><code>prefix</code></td>
+          <td>—</td>
+          <td>Text before the number (e.g. $)</td>
+        </tr>
+        <tr>
+          <td><code>suffix</code></td>
+          <td>—</td>
+          <td>Text after the number (e.g. +)</td>
+        </tr>
+        <tr>
+          <td><code>decimals</code></td>
+          <td>0</td>
+          <td>Decimal places to display</td>
+        </tr>
+        <tr>
+          <td><code>separator</code></td>
+          <td>—</td>
+          <td>Thousands separator (e.g. ,)</td>
+        </tr>
+        </tbody>
+      </table>
+      <p class="text-muted" style="font-size:.85rem;"><strong>Tip:</strong> Counters work great in a grid — place 3–4
+        counter spans in a <code>[grid cols="4"]</code> for a stats section.</p>
+    </div>
+
+    <!-- Visual tab -->
+    <div id="tab-visual" class="effects-tab-panel">
+      <h3 class="mb-2">Ripple</h3>
+      <p class="text-muted mb-2">Click-triggered ripple effect on the element. Good for interactive content blocks.</p>
+      <pre class="code-block mb-3">[ripple colour="#7c6af7" duration="600" opacity="0.3"]
+Click this area for a ripple.
+[/ripple]</pre>
+
+      <h3 class="mb-2">Twinkle</h3>
+      <p class="text-muted mb-2">Generates animated particle effects inside the element. Use for hero sections or
+        decorative areas.</p>
+      <pre class="code-block mb-3">[twinkle count="80" shape="star" colour="#fff" min-size="2" max-size="6"]
+Content beneath the particles.
+[/twinkle]</pre>
+
+      <h3 class="mb-2">Ambient Background</h3>
+      <p class="text-muted mb-2">Applies animated CSS background classes — no JavaScript needed. Works without the
+        plugin.</p>
+      <pre class="code-block mb-2">[ambient type="float-blobs" speed="slow" intensity="subtle"]
+Content on animated background.
+[/ambient]</pre>
+      <table class="table mb-3">
+        <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Values</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td><code>type</code></td>
+          <td>rotate-glow, rotate-dual, rotate-spotlight, float-blobs, float-orbs, float-particles, wave, ripple,
+            aurora
+          </td>
+        </tr>
+        <tr>
+          <td><code>speed</code></td>
+          <td>slow, normal, fast</td>
+        </tr>
+        <tr>
+          <td><code>intensity</code></td>
+          <td>subtle, intense</td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Examples tab -->
+    <div id="tab-examples" class="effects-tab-panel">
+      <h3 class="mb-2">Hero section with typewriter</h3>
+      <pre class="code-block mb-3">[reveal animation="fade"]
+# Welcome to our site
+
+[scribe speed="40" cursor="true"]
+We build things that matter.
+[/scribe]
+[/reveal]</pre>
+
+      <h3 class="mb-2">Stats row with counters</h3>
+      <pre class="code-block mb-3">[reveal animation="slide-up"]
+[grid cols="3" gap="4"]
+[col]
+## [counter to="500" suffix="+" /]
+Happy clients
+[/col]
+[col]
+## [counter to="12" suffix=" years" /]
+In business
+[/col]
+[col]
+## [counter to="98" suffix="%" /]
+Satisfaction
+[/col]
+[/grid]
+[/reveal]</pre>
+
+      <h3 class="mb-2">Staggered card reveal</h3>
+      <pre class="code-block mb-3">[reveal animation="fade-in-up" delay="0"]
+[card title="Feature One"]First card content.[/card]
+[/reveal]
+
+[reveal animation="fade-in-up" delay="150"]
+[card title="Feature Two"]Second card content.[/card]
+[/reveal]
+
+[reveal animation="fade-in-up" delay="300"]
+[card title="Feature Three"]Third card content.[/card]
+[/reveal]</pre>
+
+      <h3 class="mb-2">Hero with ambient background</h3>
+      <pre class="code-block mb-3">[ambient type="aurora" speed="slow" intensity="subtle"]
+[reveal animation="zoom"]
+# Your headline here
+
+A compelling subheading that draws users in.
+[/reveal]
+[/ambient]</pre>
+
+      <h3 class="mb-2">Christmas page with fireworks</h3>
+      <pre class="code-block mb-3">[celebrate theme="christmas" intensity="medium" /]
+
+[fireworks]
+[firework type="burst" colour="rainbow" /]
+[firework type="sparkle" colour="primary" /]
+[/fireworks]
+
+[reveal animation="fade"]
+# Merry Christmas!
+[/reveal]</pre>
+    </div>
+
+    <!-- Celebrations tab -->
+    <div id="tab-celebrations" class="effects-tab-panel">
+      <h3 class="mb-2">Firework <span class="badge badge-info">CSS only</span></h3>
+      <p class="text-muted mb-2">Pure CSS particle effect — no JavaScript required. Works even without the plugin
+        enabled. Use self-closing for standalone particles, or wrapping to apply the firework classes to content.</p>
+      <pre class="code-block mb-2">[firework type="burst" colour="rainbow" size="lg" continuous="true" /]</pre>
+      <pre class="code-block mb-2">[firework type="sparkle" colour="primary"]
+Click me for a burst!
+[/firework]</pre>
+      <table class="table mb-3">
+        <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Values</th>
+          <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td><code>type</code></td>
+          <td>burst, sparkle, trail</td>
+          <td>Firework particle shape</td>
+        </tr>
+        <tr>
+          <td><code>colour</code></td>
+          <td>rainbow, primary, info, success, warning, danger</td>
+          <td>Particle colour theme</td>
+        </tr>
+        <tr>
+          <td><code>size</code></td>
+          <td>sm, md, lg</td>
+          <td>Particle size (default: md)</td>
+        </tr>
+        <tr>
+          <td><code>continuous</code></td>
+          <td>true / false</td>
+          <td>Loop the animation continuously</td>
+        </tr>
+        <tr>
+          <td><code>hover</code></td>
+          <td>true / false</td>
+          <td>Only animate on mouse hover</td>
+        </tr>
+        </tbody>
+      </table>
+
+      <h3 class="mb-2">Fireworks Container <span class="badge badge-info">CSS only</span></h3>
+      <p class="text-muted mb-2">Groups multiple firework elements into a positioned overlay container.</p>
+      <pre class="code-block mb-3">[fireworks]
+[firework type="burst" colour="rainbow" /]
+[firework type="sparkle" colour="primary" /]
+[firework type="trail" colour="warning" /]
+[/fireworks]</pre>
+
+      <h3 class="mb-2">Celebrate <span class="badge badge-warning">Requires plugin JS</span></h3>
+      <p class="text-muted mb-2">Canvas-based seasonal particle system. Auto-detects the active celebration based on
+        today's date, or specify a theme manually. Skipped automatically when
+        <code>prefers-reduced-motion</code> is active.</p>
+      <pre class="code-block mb-2">[celebrate theme="auto" intensity="medium" /]</pre>
+      <pre class="code-block mb-2">[celebrate theme="christmas" intensity="heavy" /]</pre>
+      <table class="table mb-3">
+        <thead>
+        <tr>
+          <th>Theme</th>
+          <th>Active dates</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td><code>auto</code></td>
+          <td>Detects automatically from the table below</td>
+        </tr>
+        <tr>
+          <td><code>christmas</code></td>
+          <td>1 Dec – 1 Jan (snowflakes)</td>
+        </tr>
+        <tr>
+          <td><code>halloween</code></td>
+          <td>26 Oct – 31 Oct (bats &amp; pumpkins)</td>
+        </tr>
+        <tr>
+          <td><code>valentines</code></td>
+          <td>9 Feb – 14 Feb (hearts)</td>
+        </tr>
+        <tr>
+          <td><code>guy-fawkes</code></td>
+          <td>1 Nov – 5 Nov (fireworks)</td>
+        </tr>
+        <tr>
+          <td><code>st-patricks</code></td>
+          <td>12 Mar – 17 Mar (shamrocks)</td>
+        </tr>
+        <tr>
+          <td><code>st-davids</code></td>
+          <td>24 Feb – 1 Mar (daffodils)</td>
+        </tr>
+        <tr>
+          <td><code>st-georges</code></td>
+          <td>18 Apr – 23 Apr (roses)</td>
+        </tr>
+        <tr>
+          <td><code>st-andrews</code></td>
+          <td>25 Nov – 30 Nov (thistles)</td>
+        </tr>
+        </tbody>
+      </table>
+      <table class="table mb-3">
+        <thead>
+        <tr>
+          <th>Attribute</th>
+          <th>Values</th>
+          <th>Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td><code>theme</code></td>
+          <td>auto, christmas, halloween, valentines, guy-fawkes, st-patricks, st-davids, st-georges, st-andrews</td>
+          <td>Theme to use (default: auto)</td>
+        </tr>
+        <tr>
+          <td><code>intensity</code></td>
+          <td>light, medium, heavy</td>
+          <td>Particle density (default: medium)</td>
+        </tr>
+        </tbody>
+      </table>
+      <p class="text-muted"><strong>Tip:</strong> CSS fireworks (<code>[firework]</code>) render instantly with no JS.
+        Canvas celebrations (<code>[celebrate]</code>) load the JS module on demand and degrade silently if unavailable.</p>
+    </div>
+  </div>
+</div>

package/plugins/domma-effects/admin/views/domma-effects.js

@@ -0,0 +1,56 @@
+/**
+ * Domma Effects Plugin — Admin View
+ * Settings + full shortcode reference.
+ */
+import {apiRequest} from '/admin/js/api.js';
+
+export const dommaEffectsView = {
+  templateUrl: '/plugins/domma-effects/admin/templates/domma-effects.html',
+
+  async onMount($container) {
+    let settings = {};
+    try {
+      settings = await apiRequest('/plugins/domma-effects/settings');
+    } catch {
+      E.toast('Could not load settings.', {type: 'error'});
+    }
+
+    $container.find('#field-respect-motion').prop('checked', settings.respectMotion !== false);
+    $container.find('#field-default-duration').val(settings.defaultDuration ?? 600);
+    $container.find('#field-default-animation').val(settings.defaultAnimation || 'fade');
+    $container.find('#field-default-threshold').val(settings.defaultThreshold ?? 0.1);
+
+    $container.find('#save-settings-btn').off('click').on('click', async () => {
+      const data = {
+        respectMotion: $container.find('#field-respect-motion').prop('checked'),
+        defaultDuration: parseInt($container.find('#field-default-duration').val(), 10) || 600,
+        defaultAnimation: $container.find('#field-default-animation').val(),
+        defaultThreshold: parseFloat($container.find('#field-default-threshold').val()) || 0.1
+      };
+      try {
+        await apiRequest('/plugins/domma-effects/settings', {
+          method: 'PUT',
+          body: JSON.stringify(data)
+        });
+        E.toast('Settings saved.', {type: 'success'});
+      } catch {
+        E.toast('Failed to save settings.', {type: 'error'});
+      }
+    });
+
+    // Tab switching
+    $container.find('.effects-tab-btn').on('click', function () {
+      const tab = $(this).data('tab');
+      $container.find('.effects-tab-btn').removeClass('active');
+      $(this).addClass('active');
+      $container.find('.effects-tab-panel').hide();
+      $container.find(`#tab-${tab}`).show();
+    });
+
+    // Show first tab by default
+    $container.find('.effects-tab-panel').hide();
+    $container.find('#tab-entrance').show();
+
+    Domma.icons.scan();
+  }
+};

package/plugins/domma-effects/config.js

@@ -0,0 +1,9 @@
+/**
+ * Domma Effects Plugin — Default Configuration
+ */
+export default {
+  respectMotion: true,
+  defaultDuration: 600,
+  defaultAnimation: 'fade',
+  defaultThreshold: 0.1
+};

package/plugins/domma-effects/plugin.js

@@ -0,0 +1,22 @@
+/**
+ * Domma Effects Plugin — Server
+ *
+ * Endpoints (prefix: /api/plugins/domma-effects):
+ *   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 dommaEffectsPlugin(fastify, options) {
+  const {authenticate, requireAdmin} = options.auth;
+
+  fastify.get('/settings', async () => {
+    return getPluginSettings('domma-effects');
+  });
+
+  fastify.put('/settings', {preHandler: [authenticate, requireAdmin]}, async (request) => {
+    const body = request.body || {};
+    savePluginState('domma-effects', {settings: body});
+    return {ok: true};
+  });
+}

package/plugins/domma-effects/plugin.json

@@ -0,0 +1,36 @@
+{
+  "name": "domma-effects",
+  "displayName": "Domma Effects",
+  "version": "1.0.0",
+  "description": "Initialises Domma Effects shortcodes on public pages with scroll-triggered reveals, animations, typewriter text, counters, and more.",
+  "author": "Darryl Waterhouse",
+  "date": "2026-03-03",
+  "icon": "sparkles",
+  "admin": {
+    "sidebar": [
+      {
+        "id": "domma-effects",
+        "text": "Domma Effects",
+        "icon": "sparkles",
+        "url": "#/plugins/domma-effects",
+        "section": "#/plugins/domma-effects"
+      }
+    ],
+    "routes": [
+      {
+        "path": "/plugins/domma-effects",
+        "view": "plugin-domma-effects",
+        "title": "Domma Effects - Domma CMS"
+      }
+    ],
+    "views": {
+      "plugin-domma-effects": {
+        "entry": "domma-effects/admin/views/domma-effects.js",
+        "exportName": "dommaEffectsView"
+      }
+    }
+  },
+  "inject": {
+    "bodyEnd": "public/inject-body.html"
+  }
+}