domma-cms 0.8.6 → 0.8.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -9
- package/admin/js/templates/effects.html +147 -72
- package/admin/js/views/effects.js +1 -1
- package/admin/js/views/page-editor.js +36 -30
- package/package.json +1 -1
- package/server/routes/api/blocks.js +18 -42
- package/server/routes/api/forms.js +8 -1
- package/server/services/blocks.js +107 -5
- package/server/services/forms.js +77 -0
- package/server/services/plugins.js +32 -2
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@ by [Fastify](https://fastify.dev) on the backend and [Domma](https://npmjs.com/p
|
|
|
17
17
|
- [Configuration](#configuration)
|
|
18
18
|
- [Content](#content)
|
|
19
19
|
- [Admin Panel](#admin-panel)
|
|
20
|
+
- [Built-in Features](#built-in-features)
|
|
20
21
|
- [Plugins](#plugins)
|
|
21
22
|
- [Bundled Plugins](#bundled-plugins)
|
|
22
23
|
- [Building a Plugin](#building-a-plugin)
|
|
@@ -125,9 +126,10 @@ Controls the public-facing site identity.
|
|
|
125
126
|
}
|
|
126
127
|
```
|
|
127
128
|
|
|
128
|
-
**Available themes:** `charcoal-dark`, `charcoal-light`, `
|
|
129
|
-
`
|
|
130
|
-
`
|
|
129
|
+
**Available themes:** `charcoal-dark`, `charcoal-light`, `christmas-dark`, `christmas-light`, `dreamy-dark`,
|
|
130
|
+
`dreamy-light`, `forest-dark`, `forest-light`, `grayve-dark`, `grayve-light`, `lemon-dark`, `lemon-light`, `mint-dark`,
|
|
131
|
+
`mint-light`, `ocean-dark`, `ocean-light`, `royal-dark`, `royal-light`, `silver-dark`, `silver-light`, `sunset-dark`,
|
|
132
|
+
`sunset-light`, `unicorn-dark`, `unicorn-light`, `wedding-dark`, `wedding-light`
|
|
131
133
|
|
|
132
134
|
### `config/navigation.json`
|
|
133
135
|
|
|
@@ -270,18 +272,38 @@ The sidebar groups content by role:
|
|
|
270
272
|
|
|
271
273
|
---
|
|
272
274
|
|
|
275
|
+
## Built-in Features
|
|
276
|
+
|
|
277
|
+
These features are part of the CMS core — no plugins required. They are configured via the admin panel under
|
|
278
|
+
**Site Settings** or through `config/site.json`.
|
|
279
|
+
|
|
280
|
+
| Feature | Description |
|
|
281
|
+
|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
282
|
+
| **Effects** | Scroll-reveal animations on page elements (`[data-fx]`) and row shortcodes (`[data-reveal]`) via IntersectionObserver |
|
|
283
|
+
| **Celebrations** | Seasonal particle effects that activate automatically by date — Christmas, Halloween, Valentine's, Guy Fawkes, St Patrick's, St Andrew's, St David's, St George's |
|
|
284
|
+
| **Back to Top** | Configurable scroll-to-top button with position, offset, and label options |
|
|
285
|
+
| **Cookie Consent** | GDPR cookie consent banner with per-category toggles (necessary, functional, analytics, marketing) |
|
|
286
|
+
| **Auto Day/Night** | Automatic theme switching between light and dark variants based on time of day |
|
|
287
|
+
|
|
288
|
+
---
|
|
289
|
+
|
|
273
290
|
## Plugins
|
|
274
291
|
|
|
275
292
|
Plugins extend Domma CMS with backend routes, public page injections, and admin panel views.
|
|
276
293
|
|
|
277
294
|
### Bundled Plugins
|
|
278
295
|
|
|
279
|
-
| Plugin | Description
|
|
280
|
-
|
|
281
|
-
| **
|
|
282
|
-
| **
|
|
283
|
-
| **
|
|
284
|
-
| **
|
|
296
|
+
| Plugin | Description |
|
|
297
|
+
|--------------------|----------------------------------------------------------------------------------|
|
|
298
|
+
| **Analytics** | Basic page view analytics — tracks hits per page using a simple JSON store |
|
|
299
|
+
| **Contacts** | Contact manager with groups, favourites, search, and import/export |
|
|
300
|
+
| **Demo Viewer** | Embeds interactive Domma JS demos via iframe shortcode |
|
|
301
|
+
| **Docs** | Document editor with folders, version history, templates, and find & replace |
|
|
302
|
+
| **Garage** | UK vehicle management with DVLA API lookup, save vehicles, and search history |
|
|
303
|
+
| **Notes** | Rich note-taking with categories, search, and markdown content |
|
|
304
|
+
| **Site Search** | Full-text search for the public site — search icon in navbar, Cmd+K shortcut |
|
|
305
|
+
| **Theme Switcher** | Floating disc icon with colour theme dots for switching between all Domma themes |
|
|
306
|
+
| **Todo** | Personal task manager with priorities and status tracking |
|
|
285
307
|
|
|
286
308
|
Enable or disable any plugin in the admin panel under **Plugins**, or directly in `config/plugins.json`.
|
|
287
309
|
|
|
@@ -7,64 +7,71 @@
|
|
|
7
7
|
</div>
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
|
-
<!--
|
|
11
|
-
<div
|
|
12
|
-
<div class="
|
|
13
|
-
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
10
|
+
<!-- Top-level tabs -->
|
|
11
|
+
<div id="effects-tabs" class="tabs">
|
|
12
|
+
<div class="tab-list">
|
|
13
|
+
<button class="tab-item active">Settings</button>
|
|
14
|
+
<button class="tab-item">Shortcode Reference</button>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="tab-content">
|
|
17
|
+
|
|
18
|
+
<!-- Settings tab panel -->
|
|
19
|
+
<div class="tab-panel active">
|
|
20
|
+
<div class="card mb-4">
|
|
21
|
+
<div class="card-body">
|
|
22
|
+
<div class="row mb-3">
|
|
23
|
+
<div class="col">
|
|
24
|
+
<label class="form-check-label">
|
|
25
|
+
<input id="field-respect-motion" type="checkbox">
|
|
26
|
+
Respect <code>prefers-reduced-motion</code>
|
|
27
|
+
</label>
|
|
28
|
+
<span class="form-hint">When enabled, JS effects are skipped for users who prefer reduced motion. Content remains visible.</span>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="row mb-3">
|
|
32
|
+
<div class="col-6">
|
|
33
|
+
<label class="form-label">Default animation duration (ms)</label>
|
|
34
|
+
<input id="field-default-duration" type="number" class="form-input" min="0" max="10000"
|
|
35
|
+
placeholder="600">
|
|
36
|
+
<span class="form-hint">Used by reveal when no <code>duration</code> attribute is specified.</span>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="col-6">
|
|
39
|
+
<label class="form-label">Default reveal animation</label>
|
|
40
|
+
<select id="field-default-animation" class="form-select">
|
|
41
|
+
<option value="fade">Fade</option>
|
|
42
|
+
<option value="slide-up">Slide up</option>
|
|
43
|
+
<option value="slide-down">Slide down</option>
|
|
44
|
+
<option value="zoom">Zoom</option>
|
|
45
|
+
<option value="flip">Flip</option>
|
|
46
|
+
</select>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div class="row">
|
|
50
|
+
<div class="col-6">
|
|
51
|
+
<label class="form-label">Default scroll threshold</label>
|
|
52
|
+
<input id="field-default-threshold" type="number" class="form-input" min="0" max="1"
|
|
53
|
+
step="0.05"
|
|
54
|
+
placeholder="0.1">
|
|
55
|
+
<span class="form-hint">Fraction of element visible before reveal fires (0.0–1.0).</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
47
59
|
</div>
|
|
48
60
|
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
61
|
|
|
52
|
-
<!-- Shortcode Reference
|
|
53
|
-
<div class="
|
|
54
|
-
<div class="card-header"><h2>Shortcode Reference</h2></div>
|
|
55
|
-
<div class="card-body">
|
|
62
|
+
<!-- Shortcode Reference tab panel -->
|
|
63
|
+
<div class="tab-panel">
|
|
56
64
|
<p class="text-muted mb-3">Use these shortcodes in any page's Markdown content. The <strong>Effects</strong>
|
|
57
|
-
toolbar
|
|
58
|
-
button in the editor inserts them automatically.</p>
|
|
65
|
+
toolbar button in the editor inserts them automatically.</p>
|
|
59
66
|
|
|
60
|
-
|
|
67
|
+
<!-- Sub-tabs -->
|
|
61
68
|
<div class="mb-3" style="display:flex;gap:6px;flex-wrap:wrap;">
|
|
62
|
-
<button class="btn btn-sm effects-tab-btn active" data-tab="entrance">Entrance</button>
|
|
63
|
-
<button class="btn btn-sm effects-tab-btn" data-tab="animation">Animation</button>
|
|
64
|
-
<button class="btn btn-sm effects-tab-btn" data-tab="text">Text</button>
|
|
65
|
-
<button class="btn btn-sm effects-tab-btn" data-tab="visual">Visual</button>
|
|
66
|
-
<button class="btn btn-sm effects-tab-btn" data-tab="examples">Examples</button>
|
|
67
|
-
<button class="btn btn-sm effects-tab-btn" data-tab="celebrations">Celebrations</button>
|
|
69
|
+
<button class="btn btn-sm effects-tab-btn active" data-fx-tab="entrance">Entrance</button>
|
|
70
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="animation">Animation</button>
|
|
71
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="text">Text</button>
|
|
72
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="visual">Visual</button>
|
|
73
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="examples">Examples</button>
|
|
74
|
+
<button class="btn btn-sm effects-tab-btn" data-fx-tab="celebrations">Celebrations</button>
|
|
68
75
|
</div>
|
|
69
76
|
|
|
70
77
|
<!-- Entrance tab -->
|
|
@@ -114,9 +121,80 @@ Markdown **works** inside.
|
|
|
114
121
|
</tr>
|
|
115
122
|
</tbody>
|
|
116
123
|
</table>
|
|
117
|
-
<p class="text-muted" style="font-size:.85rem;"><strong>Tip:</strong> Use <code>delay</code> to stagger
|
|
124
|
+
<p class="text-muted mb-3" style="font-size:.85rem;"><strong>Tip:</strong> Use <code>delay</code> to stagger
|
|
118
125
|
multiple
|
|
119
|
-
reveal blocks for a cascade effect.</p>
|
|
126
|
+
reveal blocks for a cascade effect, or use <code>[row reveal]</code> below for automatic staggering.</p>
|
|
127
|
+
|
|
128
|
+
<h3 class="mb-2">Row Reveal</h3>
|
|
129
|
+
<p class="text-muted mb-2">Add <code>reveal</code> to a <code>[row]</code> shortcode to automatically
|
|
130
|
+
animate
|
|
131
|
+
child columns into view one by one as the row scrolls into the viewport. No need to wrap each column in
|
|
132
|
+
a
|
|
133
|
+
separate <code>[reveal]</code> block.</p>
|
|
134
|
+
<pre class="code-block mb-2">[row gap="4" reveal reveal-mode="stagger" reveal-animation="slide-up"]
|
|
135
|
+
[col]First to appear[/col]
|
|
136
|
+
[col]Second to appear[/col]
|
|
137
|
+
[col]Third to appear[/col]
|
|
138
|
+
[/row]</pre>
|
|
139
|
+
<table class="table mb-3">
|
|
140
|
+
<thead>
|
|
141
|
+
<tr>
|
|
142
|
+
<th>Attribute</th>
|
|
143
|
+
<th>Default</th>
|
|
144
|
+
<th>Description</th>
|
|
145
|
+
</tr>
|
|
146
|
+
</thead>
|
|
147
|
+
<tbody>
|
|
148
|
+
<tr>
|
|
149
|
+
<td><code>reveal</code></td>
|
|
150
|
+
<td>—</td>
|
|
151
|
+
<td>Flag — enables scroll-triggered reveal on child columns</td>
|
|
152
|
+
</tr>
|
|
153
|
+
<tr>
|
|
154
|
+
<td><code>reveal-animation</code></td>
|
|
155
|
+
<td>slide-up</td>
|
|
156
|
+
<td>slide-up, slide-down, slide-left, slide-right, fade, zoom, flip</td>
|
|
157
|
+
</tr>
|
|
158
|
+
<tr>
|
|
159
|
+
<td><code>reveal-mode</code></td>
|
|
160
|
+
<td>stagger</td>
|
|
161
|
+
<td>stagger (overlapping) or sequence (one after another)</td>
|
|
162
|
+
</tr>
|
|
163
|
+
<tr>
|
|
164
|
+
<td><code>reveal-duration</code></td>
|
|
165
|
+
<td>400</td>
|
|
166
|
+
<td>Animation duration in milliseconds</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td><code>reveal-stagger</code></td>
|
|
170
|
+
<td>60</td>
|
|
171
|
+
<td>Delay between each child column (ms)</td>
|
|
172
|
+
</tr>
|
|
173
|
+
<tr>
|
|
174
|
+
<td><code>reveal-delay</code></td>
|
|
175
|
+
<td>0</td>
|
|
176
|
+
<td>Initial delay before first animation (ms)</td>
|
|
177
|
+
</tr>
|
|
178
|
+
<tr>
|
|
179
|
+
<td><code>reveal-direction</code></td>
|
|
180
|
+
<td>ltr</td>
|
|
181
|
+
<td>ltr (left to right) or rtl (right to left)</td>
|
|
182
|
+
</tr>
|
|
183
|
+
</tbody>
|
|
184
|
+
</table>
|
|
185
|
+
|
|
186
|
+
<h4 class="mb-1" style="font-size:.9rem;">Fade with right-to-left direction</h4>
|
|
187
|
+
<pre class="code-block mb-2">[row gap="3" reveal reveal-animation="fade" reveal-direction="rtl"]
|
|
188
|
+
[col]Appears third[/col]
|
|
189
|
+
[col]Appears second[/col]
|
|
190
|
+
[col]Appears first[/col]
|
|
191
|
+
[/row]</pre>
|
|
192
|
+
|
|
193
|
+
<h4 class="mb-1" style="font-size:.9rem;">Zoom with initial delay</h4>
|
|
194
|
+
<pre class="code-block mb-2">[row gap="4" reveal reveal-animation="zoom" reveal-delay="200" reveal-stagger="100"]
|
|
195
|
+
[col]Zooms in after 200ms[/col]
|
|
196
|
+
[col]Zooms in after 300ms[/col]
|
|
197
|
+
[/row]</pre>
|
|
120
198
|
</div>
|
|
121
199
|
|
|
122
200
|
<!-- Animation tab -->
|
|
@@ -142,9 +220,7 @@ This will shake.
|
|
|
142
220
|
[/shake]</pre>
|
|
143
221
|
|
|
144
222
|
<h3 class="mb-2">CSS Animate</h3>
|
|
145
|
-
<p class="text-muted mb-2">Applies Domma CSS animation utility classes — no JavaScript required
|
|
146
|
-
without the
|
|
147
|
-
plugin enabled.</p>
|
|
223
|
+
<p class="text-muted mb-2">Applies Domma CSS animation utility classes — no JavaScript required.</p>
|
|
148
224
|
<pre class="code-block mb-2">[animate type="fade-in-up" duration="normal" delay="200" repeat="once"]
|
|
149
225
|
Content here.
|
|
150
226
|
[/animate]</pre>
|
|
@@ -358,8 +434,7 @@ Content beneath the particles.
|
|
|
358
434
|
[/twinkle]</pre>
|
|
359
435
|
|
|
360
436
|
<h3 class="mb-2">Ambient Background</h3>
|
|
361
|
-
<p class="text-muted mb-2">Applies animated CSS background classes — no JavaScript needed
|
|
362
|
-
plugin.</p>
|
|
437
|
+
<p class="text-muted mb-2">Applies animated CSS background classes — no JavaScript needed.</p>
|
|
363
438
|
<pre class="code-block mb-2">[ambient type="float-blobs" speed="slow" intensity="subtle"]
|
|
364
439
|
Content on animated background.
|
|
365
440
|
[/ambient]</pre>
|
|
@@ -420,17 +495,17 @@ Satisfaction
|
|
|
420
495
|
[/reveal]</pre>
|
|
421
496
|
|
|
422
497
|
<h3 class="mb-2">Staggered card reveal</h3>
|
|
423
|
-
<pre class="code-block mb-3">[reveal animation="
|
|
498
|
+
<pre class="code-block mb-3">[row gap="4" reveal reveal-animation="slide-up" reveal-stagger="100"]
|
|
499
|
+
[col]
|
|
424
500
|
[card title="Feature One"]First card content.[/card]
|
|
425
|
-
[/
|
|
426
|
-
|
|
427
|
-
[reveal animation="fade-in-up" delay="150"]
|
|
501
|
+
[/col]
|
|
502
|
+
[col]
|
|
428
503
|
[card title="Feature Two"]Second card content.[/card]
|
|
429
|
-
[/
|
|
430
|
-
|
|
431
|
-
[reveal animation="fade-in-up" delay="300"]
|
|
504
|
+
[/col]
|
|
505
|
+
[col]
|
|
432
506
|
[card title="Feature Three"]Third card content.[/card]
|
|
433
|
-
[/
|
|
507
|
+
[/col]
|
|
508
|
+
[/row]</pre>
|
|
434
509
|
|
|
435
510
|
<h3 class="mb-2">Hero with ambient background</h3>
|
|
436
511
|
<pre class="code-block mb-3">[ambient type="aurora" speed="slow" intensity="subtle"]
|
|
@@ -509,10 +584,9 @@ Click me for a burst!
|
|
|
509
584
|
[firework type="trail" colour="warning" /]
|
|
510
585
|
[/fireworks]</pre>
|
|
511
586
|
|
|
512
|
-
<h3 class="mb-2">Celebrate <span class="badge badge-
|
|
587
|
+
<h3 class="mb-2">Celebrate <span class="badge badge-info">JS canvas</span></h3>
|
|
513
588
|
<p class="text-muted mb-2">Canvas-based seasonal particle system. Auto-detects the active celebration based
|
|
514
|
-
on
|
|
515
|
-
today's date, or specify a theme manually. Skipped automatically when
|
|
589
|
+
on today's date, or specify a theme manually. Skipped automatically when
|
|
516
590
|
<code>prefers-reduced-motion</code> is active.</p>
|
|
517
591
|
<pre class="code-block mb-2">[celebrate theme="auto" intensity="medium" /]</pre>
|
|
518
592
|
<pre class="code-block mb-2">[celebrate theme="christmas" intensity="heavy" /]</pre>
|
|
@@ -590,5 +664,6 @@ Click me for a burst!
|
|
|
590
664
|
Canvas celebrations (<code>[celebrate]</code>) load the JS module on demand and degrade silently if
|
|
591
665
|
unavailable.</p>
|
|
592
666
|
</div>
|
|
593
|
-
|
|
594
|
-
</div
|
|
667
|
+
</div><!-- /tab-panel shortcodes -->
|
|
668
|
+
</div><!-- /tab-content -->
|
|
669
|
+
</div><!-- /effects-tabs -->
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{apiRequest as
|
|
1
|
+
import{apiRequest as a}from"/admin/js/api.js";export const effectsView={templateUrl:"/admin/js/templates/effects.html",async onMount(t){let e={};try{e=await a("/effects/settings")}catch{E.toast("Could not load settings.",{type:"error"})}t.find("#field-respect-motion").prop("checked",e.respectMotion!==!1),t.find("#field-default-duration").val(e.defaultDuration??600),t.find("#field-default-animation").val(e.defaultAnimation||"fade"),t.find("#field-default-threshold").val(e.defaultThreshold??.1),t.find("#save-settings-btn").off("click").on("click",async()=>{const s={respectMotion:t.find("#field-respect-motion").prop("checked"),defaultDuration:parseInt(t.find("#field-default-duration").val(),10)||600,defaultAnimation:t.find("#field-default-animation").val(),defaultThreshold:parseFloat(t.find("#field-default-threshold").val())||.1};try{await a("/effects/settings",{method:"PUT",body:JSON.stringify(s)}),E.toast("Settings saved.",{type:"success"})}catch{E.toast("Failed to save settings.",{type:"error"})}}),E.tabs(t.find("#effects-tabs").get(0)),t.find(".effects-tab-btn").on("click",function(){const s=this.getAttribute("data-fx-tab");t.find(".effects-tab-btn").removeClass("active"),$(this).addClass("active"),t.find(".effects-tab-panel").hide(),t.find(`#tab-${s}`).show()}),t.find(".effects-tab-panel").hide(),t.find("#tab-entrance").show(),Domma.icons.scan()}};
|