domma-cms 0.1.0

package/admin/js/templates/settings.html

@@ -0,0 +1,190 @@
+<div class="view-header">
+    <h1><span data-icon="settings"></span> Site Settings</h1>
+    <button id="save-settings-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+</div>
+
+<div class="card card-collapsible mb-4">
+  <div class="card-header" role="button" tabindex="0">
+    <div class="card-header-content"><h2>General</h2></div>
+    <span class="card-collapse-icon" data-icon="chevron-down"></span>
+  </div>
+    <div class="card-body">
+        <div class="row mb-3">
+            <div class="col-6">
+                <label class="form-label">Site Title</label>
+                <input id="field-site-title" type="text" class="form-input" placeholder="My Site">
+            </div>
+            <div class="col-6">
+                <label class="form-label">Tagline</label>
+                <input id="field-tagline" type="text" class="form-input" placeholder="Built with Domma CMS">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-6">
+                <label class="form-label">Public Site Theme</label>
+                <select id="field-theme" class="form-select">
+                    <optgroup label="Charcoal">
+                        <option value="charcoal-dark">Charcoal Dark</option>
+                        <option value="charcoal-light">Charcoal Light</option>
+                    </optgroup>
+                    <optgroup label="Ocean">
+                        <option value="ocean-dark">Ocean Dark</option>
+                        <option value="ocean-light">Ocean Light</option>
+                    </optgroup>
+                    <optgroup label="Forest">
+                        <option value="forest-dark">Forest Dark</option>
+                        <option value="forest-light">Forest Light</option>
+                    </optgroup>
+                    <optgroup label="Sunset">
+                        <option value="sunset-dark">Sunset Dark</option>
+                        <option value="sunset-light">Sunset Light</option>
+                    </optgroup>
+                    <optgroup label="Royal">
+                        <option value="royal-dark">Royal Dark</option>
+                        <option value="royal-light">Royal Light</option>
+                    </optgroup>
+                    <optgroup label="Lemon">
+                        <option value="lemon-dark">Lemon Dark</option>
+                        <option value="lemon-light">Lemon Light</option>
+                    </optgroup>
+                    <optgroup label="Silver">
+                        <option value="silver-dark">Silver Dark</option>
+                        <option value="silver-light">Silver Light</option>
+                    </optgroup>
+                    <optgroup label="Other">
+                        <option value="grayve">Grayve</option>
+                        <option value="christmas-dark">Christmas Dark</option>
+                        <option value="christmas-light">Christmas Light</option>
+                    </optgroup>
+                </select>
+                <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the public-facing website.</p>
+            </div>
+            <div class="col-6">
+                <label class="form-label">Admin Theme</label>
+                <select id="field-admin-theme" class="form-select">
+                    <optgroup label="Charcoal">
+                        <option value="charcoal-dark">Charcoal Dark</option>
+                        <option value="charcoal-light">Charcoal Light</option>
+                    </optgroup>
+                    <optgroup label="Ocean">
+                        <option value="ocean-dark">Ocean Dark</option>
+                        <option value="ocean-light">Ocean Light</option>
+                    </optgroup>
+                    <optgroup label="Forest">
+                        <option value="forest-dark">Forest Dark</option>
+                        <option value="forest-light">Forest Light</option>
+                    </optgroup>
+                    <optgroup label="Sunset">
+                        <option value="sunset-dark">Sunset Dark</option>
+                        <option value="sunset-light">Sunset Light</option>
+                    </optgroup>
+                    <optgroup label="Royal">
+                        <option value="royal-dark">Royal Dark</option>
+                        <option value="royal-light">Royal Light</option>
+                    </optgroup>
+                    <optgroup label="Lemon">
+                        <option value="lemon-dark">Lemon Dark</option>
+                        <option value="lemon-light">Lemon Light</option>
+                    </optgroup>
+                    <optgroup label="Silver">
+                        <option value="silver-dark">Silver Dark</option>
+                        <option value="silver-light">Silver Light</option>
+                    </optgroup>
+                    <optgroup label="Other">
+                        <option value="grayve">Grayve</option>
+                        <option value="christmas-dark">Christmas Dark</option>
+                        <option value="christmas-light">Christmas Light</option>
+                    </optgroup>
+                </select>
+                <p class="form-hint text-muted" style="margin-top:0.4rem;font-size:0.8rem;">Applied to the admin panel.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card card-collapsible mb-4">
+  <div class="card-header" role="button" tabindex="0">
+    <div class="card-header-content"><h2>SEO Defaults</h2></div>
+    <span class="card-collapse-icon" data-icon="chevron-down"></span>
+  </div>
+    <div class="card-body">
+        <div class="row mb-3">
+            <div class="col-8">
+                <label class="form-label">Default Site Title</label>
+                <input id="field-seo-title" type="text" class="form-input" placeholder="My Site">
+            </div>
+            <div class="col-4">
+                <label class="form-label">Title Separator</label>
+                <input id="field-seo-separator" type="text" class="form-input" placeholder=" | ">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <label class="form-label">Default Meta Description</label>
+                <input id="field-seo-desc" type="text" class="form-input" placeholder="Brief description of your site">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card card-collapsible mb-4">
+  <div class="card-header" role="button" tabindex="0">
+    <div class="card-header-content"><h2>Footer</h2></div>
+    <span class="card-collapse-icon" data-icon="chevron-down"></span>
+  </div>
+    <div class="card-body">
+        <div class="row">
+            <div class="col">
+                <label class="form-label">Copyright Text</label>
+                <input id="field-footer-copy" type="text" class="form-input" placeholder="© 2026 My Site">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card card-collapsible mb-4">
+  <div class="card-header" role="button" tabindex="0">
+    <div class="card-header-content"><h2>Email / SMTP</h2></div>
+    <span class="card-collapse-icon" data-icon="chevron-down"></span>
+  </div>
+    <div class="card-body">
+        <div class="row mb-3">
+            <div class="col-8">
+                <label class="form-label">SMTP Host</label>
+                <input id="field-smtp-host" type="text" class="form-input" placeholder="smtp.example.com">
+            </div>
+            <div class="col-4">
+                <label class="form-label">Port</label>
+                <input id="field-smtp-port" type="number" class="form-input" placeholder="587" value="587">
+            </div>
+        </div>
+        <div class="row mb-3">
+            <div class="col-6">
+                <label class="form-label">Username</label>
+                <input id="field-smtp-user" type="text" class="form-input" placeholder="user@example.com" autocomplete="off">
+            </div>
+            <div class="col-6">
+                <label class="form-label">Password</label>
+                <input id="field-smtp-pass" type="password" class="form-input" placeholder="••••••••" autocomplete="new-password">
+            </div>
+        </div>
+        <div class="row mb-3">
+            <div class="col">
+                <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
+                    <input id="field-smtp-secure" type="checkbox" class="form-check"> Use TLS (port 465)
+                </label>
+                <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">Enable for SMTPS. Leave off for STARTTLS (port 587).</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-6">
+                <label class="form-label">From Address</label>
+                <input id="field-smtp-from-address" type="email" class="form-input" placeholder="noreply@example.com">
+            </div>
+            <div class="col-6">
+                <label class="form-label">From Name</label>
+                <input id="field-smtp-from-name" type="text" class="form-input" placeholder="My Website">
+            </div>
+        </div>
+    </div>
+</div>

package/admin/js/templates/tutorials.html

@@ -0,0 +1,233 @@
+<div class="view-header">
+  <h1><span data-icon="document"></span> Tutorials</h1>
+</div>
+
+<div class="row">
+  <div class="col-12">
+
+    <!-- Writing a Plugin -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="package"></span> Writing a Plugin</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Plugins live in the <code>plugins/</code> directory. Each plugin is a self-contained folder with three
+          required files and optional <code>admin/</code> and <code>public/</code> subdirectories.</p>
+
+        <h3>Directory structure</h3>
+        <pre class="code-block"><code>plugins/
+  my-plugin/
+    plugin.json          ← manifest (required)
+    plugin.js            ← Fastify plugin (required)
+    config.js            ← settings defaults (required)
+    admin/
+      views/
+        my-view.js       ← admin SPA view (optional)
+      templates/
+        my-view.html     ← view template (optional)
+    public/
+      inject-head.html   ← injected into &lt;head&gt; on every page (optional)
+      inject-body.html   ← injected before &lt;/body&gt; on every page (optional)
+    data/                ← plugin data store (optional, not publicly served)</code></pre>
+
+        <hr>
+
+        <h3>1. plugin.json — the manifest</h3>
+        <p>All fields below are <strong>required</strong>. Missing any will cause the plugin to be skipped on startup
+          with a warning in the server log.</p>
+        <pre class="code-block"><code>{
+    "name": "my-plugin",
+    "displayName": "My Plugin",
+    "version": "1.0.0",
+    "description": "A short description shown on the Plugins page.",
+    "author": "Your Name",
+    "date": "2026-03-01",
+    "icon": "star"
+}</code></pre>
+
+        <p>Optional fields:</p>
+        <table class="table table-sm">
+          <thead>
+          <tr>
+            <th>Field</th>
+            <th>Type</th>
+            <th>Description</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td><code>inject.head</code></td>
+            <td>string</td>
+            <td>Path (relative to plugin root) to an HTML snippet injected into <code>&lt;head&gt;</code>.</td>
+          </tr>
+          <tr>
+            <td><code>inject.bodyEnd</code></td>
+            <td>string</td>
+            <td>Path to an HTML snippet injected before <code>&lt;/body&gt;</code>.</td>
+          </tr>
+          <tr>
+            <td><code>admin.sidebar</code></td>
+            <td>array</td>
+            <td>Sidebar items to add to the admin panel.</td>
+          </tr>
+          <tr>
+            <td><code>admin.routes</code></td>
+            <td>array</td>
+            <td>SPA routes to register in the admin router.</td>
+          </tr>
+          <tr>
+            <td><code>admin.views</code></td>
+            <td>object</td>
+            <td>View modules to dynamically import into the admin SPA.</td>
+          </tr>
+          </tbody>
+        </table>
+
+        <hr>
+
+        <h3>2. plugin.js — the Fastify plugin</h3>
+        <p>This is the server-side entry point. It must export a default <strong>async function</strong> that Fastify
+          will call with <code>(fastify, options)</code>.</p>
+        <p>The CMS injects auth middleware through <code>options.auth</code> — always destructure from there rather than
+          importing directly.</p>
+
+        <pre class="code-block"><code>import { getPluginSettings, savePluginState } from '../../server/services/plugins.js';
+
+export default async function myPlugin(fastify, options) {
+    const { authenticate, requireAdmin } = options.auth;
+
+    // Public endpoint — no auth needed
+    fastify.get('/hello', async () => {
+        return { message: 'Hello from my plugin!' };
+    });
+
+    // Admin-only endpoint
+    fastify.get('/settings', { preHandler: [authenticate, requireAdmin] }, async () => {
+        return getPluginSettings('my-plugin');
+    });
+
+    fastify.put('/settings', { preHandler: [authenticate, requireAdmin] }, async (request) => {
+        savePluginState('my-plugin', { settings: request.body });
+        return { ok: true };
+    });
+}</code></pre>
+
+        <p>Routes are registered under the prefix <code>/api/plugins/{name}</code> automatically. You do not set the
+          prefix yourself — it is always locked to your plugin's directory name.</p>
+
+        <hr>
+
+        <h3>3. config.js — settings defaults</h3>
+        <p>Export a plain object of default settings. These are merged with any user overrides stored in <code>config/plugins.json</code>
+          when <code>getPluginSettings()</code> is called.</p>
+
+        <pre class="code-block"><code>export default {
+    greeting: 'Hello, world!',
+    enableFeature: true,
+    maxItems: 10
+};</code></pre>
+
+        <p><code>config.js</code> is only loaded for <strong>enabled</strong> plugins. Side-effect code here will not
+          run for disabled plugins.</p>
+
+        <hr>
+
+        <h3>4. Admin views (optional)</h3>
+        <p>To add a page to the admin panel, declare the route and view in <code>plugin.json</code>:</p>
+
+        <pre class="code-block"><code>"admin": {
+    "sidebar": [
+        {
+            "id": "my-plugin",
+            "text": "My Plugin",
+            "icon": "star",
+            "url": "#/plugins/my-plugin",
+            "section": "#/plugins/my-plugin"
+        }
+    ],
+    "routes": [
+        {
+            "path": "/plugins/my-plugin",
+            "view": "plugin-my-plugin",
+            "title": "My Plugin - Domma CMS"
+        }
+    ],
+    "views": {
+        "plugin-my-plugin": {
+            "entry": "my-plugin/admin/views/my-view.js",
+            "exportName": "myPluginView"
+        }
+    }
+}</code></pre>
+
+        <p>The view file follows the standard Domma view pattern — a <code>templateUrl</code> and an <code>onMount($container)</code>
+          function:</p>
+
+        <pre class="code-block"><code>// admin/views/my-view.js
+export const myPluginView = {
+    templateUrl: '/plugins/my-plugin/admin/templates/my-view.html',
+
+    async onMount($container) {
+        const res = await fetch('/api/plugins/my-plugin/settings', {
+            headers: { 'Authorization': 'Bearer ' + (S.get('auth_token') || '') }
+        });
+        const settings = await res.json();
+
+        $container.find('#greeting').text(settings.greeting);
+        Domma.icons.scan();
+    }
+};</code></pre>
+
+        <p>The template is a plain HTML fragment (no <code>&lt;html&gt;</code> wrapper). Use the same card and form
+          patterns as the rest of the admin panel:</p>
+
+        <pre class="code-block"><code>&lt;!-- admin/templates/my-view.html --&gt;
+&lt;div class="view-header"&gt;
+    &lt;h1&gt;&lt;span data-icon="star"&gt;&lt;/span&gt; My Plugin&lt;/h1&gt;
+&lt;/div&gt;
+
+&lt;div class="card"&gt;
+    &lt;div class="card-body"&gt;
+        &lt;p id="greeting"&gt;Loading…&lt;/p&gt;
+    &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+        <hr>
+
+        <h3>5. Injection snippets (optional)</h3>
+        <p>HTML snippets declared in <code>inject.head</code> and <code>inject.bodyEnd</code> are read from the plugin's
+          <code>public/</code> directory and inserted into every public page. Use this for analytics scripts,
+          stylesheets, or widgets.</p>
+
+        <pre class="code-block"><code>&lt;!-- public/inject-body.html --&gt;
+&lt;script&gt;
+(function () {
+    // This runs on every public page
+    fetch('/api/plugins/my-plugin/hello')
+        .then(r => r.json())
+        .then(d => console.log(d.message));
+})();
+&lt;/script&gt;</code></pre>
+
+        <p>Snippet paths are validated — they must stay within the plugin's own directory. Paths containing
+          <code>..</code> are blocked.</p>
+
+        <hr>
+
+        <h3>6. Registering and testing</h3>
+        <ol>
+          <li>Create the <code>plugins/my-plugin/</code> directory with all three required files.</li>
+          <li>Restart the server — you should see <code>[plugins] Loaded N plugins: …, my-plugin</code> in the log.</li>
+          <li>Go to the <a href="#/plugins">Plugins page</a> and enable your plugin.</li>
+          <li>Restart the server again to register the routes.</li>
+          <li>Verify your endpoint: <code>GET /api/plugins/my-plugin/hello</code></li>
+        </ol>
+
+        <p class="text-muted" style="font-size:.9rem">Tip: use <code>npm run dev</code> during development — the server
+          restarts automatically on file changes.</p>
+      </div>
+    </div>
+
+  </div>
+</div>

package/admin/js/templates/user-editor.html

@@ -0,0 +1,12 @@
+<div class="view-header">
+    <h1><span data-icon="user"></span> <span id="editor-title">New User</span></h1>
+    <div class="view-header-actions">
+        <button id="cancel-btn" class="btn btn-ghost">Cancel</button>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="user-form-container"></div>
+    </div>
+</div>

package/admin/js/templates/users.html

@@ -0,0 +1,10 @@
+<div class="view-header">
+    <h1><span data-icon="users"></span> Users</h1>
+    <a href="#/users/new" class="btn btn-primary"><span data-icon="plus"></span> New User</a>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="users-table"></div>
+    </div>
+</div>

package/admin/js/views/dashboard.js

@@ -0,0 +1,48 @@
+/**
+ * Dashboard View
+ * Shows page count stats and a recent pages table.
+ */
+import { api } from '../api.js';
+
+export const dashboardView = {
+    templateUrl: '/admin/js/templates/dashboard.html',
+
+    async onMount($container) {
+        const pages = await api.pages.list().catch(() => []);
+        const total = pages.length;
+        const published = pages.filter(p => p.status === 'published').length;
+        const drafts = pages.filter(p => p.status === 'draft').length;
+
+        $container.find('#stat-total').text(total);
+        $container.find('#stat-published').text(published);
+        $container.find('#stat-drafts').text(drafts);
+
+        Domma.effects.counter('#stat-total, #stat-published, #stat-drafts', {
+            trigger: 'immediate',
+            duration: 1000,
+            stagger: 120,
+            easing: 'ease-out'
+        });
+
+        const recent = [...pages]
+            .sort((a, b) => (b.updatedAt || '').localeCompare(a.updatedAt || ''))
+            .slice(0, 10);
+
+        T.create('#recent-pages-table', {
+            data: recent,
+            columns: [
+                { key: 'title', label: 'Title' },
+                { key: 'urlPath', label: 'URL' },
+                { key: 'status', label: 'Status', render: (val) => `<span class="badge badge-${val === 'published' ? 'success' : 'warning'}">${val}</span>` },
+                { key: 'updatedAt', label: 'Updated', render: (val) => val ? D(val).format('DD MMM YYYY') : '—' },
+                { key: 'urlPath', label: '', render: (val) => `<a href="#/pages/edit${val}" class="btn btn-sm btn-outline">Edit</a>` }
+            ],
+            emptyMessage: 'No pages yet. <a href="#/pages/new">Create your first page</a>.'
+        });
+
+        Domma.icons.scan();
+
+        Domma.effects.reveal('.stat-card', { animation: 'fade', stagger: 80, duration: 400 });
+        Domma.effects.reveal('.card.mt-4',  { animation: 'fade', delay: 200,  duration: 400 });
+    }
+};

package/admin/js/views/documentation.js

@@ -0,0 +1,12 @@
+/**
+ * Documentation View
+ * Usage reference for Domma CMS — content, structure, plugins, settings.
+ */
+export const documentationView = {
+  templateUrl: '/admin/js/templates/documentation.html',
+
+  async onMount($container) {
+    Domma.icons.scan();
+    Domma.syntax.scan();
+  }
+};

package/admin/js/views/index.js

@@ -0,0 +1,33 @@
+/**
+ * View Registry
+ * Maps route view names to their view modules.
+ */
+import {dashboardView} from './dashboard.js';
+import {pagesView} from './pages.js';
+import {pageEditorView} from './page-editor.js';
+import {settingsView} from './settings.js';
+import {navigationView} from './navigation.js';
+import {layoutsView} from './layouts.js';
+import {mediaView} from './media.js';
+import {loginView} from './login.js';
+import {usersView} from './users.js';
+import {userEditorView} from './user-editor.js';
+import {pluginsView} from './plugins.js';
+import {documentationView} from './documentation.js';
+import {tutorialsView} from './tutorials.js';
+
+export const views = {
+    dashboard:   dashboardView,
+    pages:       pagesView,
+    pageEditor:  pageEditorView,
+    settings:    settingsView,
+    navigation:  navigationView,
+    layouts:     layoutsView,
+    media:       mediaView,
+    login:       loginView,
+    users:       usersView,
+    userEditor:  userEditorView,
+  plugins: pluginsView,
+  documentation: documentationView,
+  tutorials: tutorialsView
+};

package/admin/js/views/layouts.js

@@ -0,0 +1,49 @@
+/**
+ * Layouts View
+ */
+import { api } from '../api.js';
+
+export const layoutsView = {
+    templateUrl: '/admin/js/templates/layouts.html',
+
+    async onMount($container) {
+        let presets = await api.layouts.get().catch(() => ({}));
+        const $grid = $container.find('#presets-grid').empty();
+
+        Object.entries(presets).forEach(([key, preset]) => {
+            $grid.append(`
+                <div class="preset-card card" data-key="${key}">
+                    <div class="card-header">
+                        <h3>${preset.label || key}</h3>
+                        <span class="badge">${key}</span>
+                    </div>
+                    <div class="card-body">
+                        <p class="text-muted">${preset.description || ''}</p>
+                        <div class="preset-toggles">
+                            <label class="toggle-label"><input type="checkbox" class="form-check preset-navbar" ${preset.navbar ? 'checked' : ''}> Navbar</label>
+                            <label class="toggle-label"><input type="checkbox" class="form-check preset-footer" ${preset.footer ? 'checked' : ''}> Footer</label>
+                            <label class="toggle-label"><input type="checkbox" class="form-check preset-sidebar" ${preset.sidebar ? 'checked' : ''}> Sidebar</label>
+                        </div>
+                    </div>
+                </div>
+            `);
+        });
+
+        $container.find('#save-layouts-btn').on('click', async () => {
+            $container.find('.preset-card').each(function () {
+                const key = $(this).data('key');
+                if (presets[key]) {
+                    presets[key].navbar = $(this).find('.preset-navbar').is(':checked');
+                    presets[key].footer = $(this).find('.preset-footer').is(':checked');
+                    presets[key].sidebar = $(this).find('.preset-sidebar').is(':checked');
+                }
+            });
+            try {
+                await api.layouts.save(presets);
+                E.toast('Layouts saved.', { type: 'success' });
+            } catch {
+                E.toast('Failed to save layouts.', { type: 'error' });
+            }
+        });
+    }
+};