domma-cms 0.1.0

package/plugins/form-builder/public/inject-body.html

@@ -0,0 +1,270 @@
+<script>
+(function () {
+    'use strict';
+
+    var targets = document.querySelectorAll('[data-form]');
+    if (!targets.length) return;
+
+    function showMessage(wrapper, message, type) {
+        var existing = wrapper.querySelector('.fb-form-success, .fb-form-error');
+        if (existing) existing.remove();
+        var div = document.createElement('div');
+        div.className   = type === 'success' ? 'fb-form-success' : 'fb-form-error';
+        div.textContent = message;
+        wrapper.appendChild(div);
+    }
+
+    function buildBlueprintFromFields(fields) {
+        var blueprint = {};
+        fields.forEach(function (field) {
+            if (field.type === 'page-break') return;
+            var def = {
+                type:        field.type,
+                label:       field.label        || field.name,
+                required:    field.required     || false,
+                placeholder: field.placeholder  || ''
+            };
+            if (field.helper)      def.helper   = field.helper;
+            if (field.options)     def.options   = field.options;
+            if (field.formConfig)  Object.assign(def, field.formConfig);
+            if (field.minLength)   def.minLength = field.minLength;
+            if (field.maxLength)   def.maxLength = field.maxLength;
+            if (field.min !== undefined) def.min = field.min;
+            if (field.max !== undefined) def.max = field.max;
+            blueprint[field.name] = def;
+        });
+        return blueprint;
+    }
+
+    /**
+     * Split a fields array at page-break entries into wizard steps.
+     * Each step: { title, description, fieldGroup[] }
+     */
+    function buildWizardSteps(fields, formTitle) {
+        var steps   = [];
+        var group   = [];
+        var title   = formTitle || 'Step 1';
+        var desc    = '';
+
+        fields.forEach(function (field) {
+            if (field.type === 'page-break') {
+                steps.push({ title: title, description: desc, fieldGroup: group });
+                group = [];
+                title = field.label       || ('Step ' + (steps.length + 1));
+                desc  = field.description || '';
+            } else {
+                group.push(field);
+            }
+        });
+
+        // Always push the last (or only) group
+        steps.push({ title: title, description: desc, fieldGroup: group });
+        return steps;
+    }
+
+    function initFormTarget(target) {
+        var slug = target.getAttribute('data-form');
+        if (!slug) return;
+
+        fetch('/api/plugins/form-builder/forms/' + slug + '/public')
+            .then(function (res) {
+                if (!res.ok) throw new Error('Form not found: ' + slug);
+                return res.json();
+            })
+            .then(function (form) {
+                var fields   = form.fields   || [];
+                var settings = form.settings || {};
+
+                var wrapper = document.createElement('div');
+                wrapper.className = 'fb-form-wrapper';
+                target.appendChild(wrapper);
+
+                var hasPageBreaks = fields.some(function (f) { return f.type === 'page-break'; });
+
+                if (typeof Domma !== 'undefined' && Domma.forms) {
+
+                    if (hasPageBreaks && Domma.forms.wizard) {
+                        // --- Wizard mode ---
+                        var rawSteps = buildWizardSteps(fields, form.title);
+                        var steps = rawSteps.map(function (step) {
+                            return {
+                                title:       step.title,
+                                description: step.description,
+                                fields:      buildBlueprintFromFields(step.fieldGroup)
+                            };
+                        });
+
+                        Domma.forms.wizard(wrapper, {
+                            schema: { steps: steps },
+                            onSubmit: function (data) {
+                                return submitForm(slug, data, settings, wrapper, null);
+                            }
+                        });
+
+                        // Inject honeypot into the first step's form element
+                        if (settings.honeypot) {
+                            var firstForm = wrapper.querySelector('form');
+                            if (firstForm) {
+                                injectHoneypot(firstForm);
+                            }
+                        }
+
+                    } else if (Domma.forms.render) {
+                        // --- Standard single-step mode ---
+                        var blueprint = buildBlueprintFromFields(fields);
+
+                        Domma.forms.render(wrapper, blueprint, {}, {
+                            submitText: settings.submitText || 'Submit',
+                            layout:     settings.layout     || 'stacked',
+                            onSubmit: function (data) {
+                                return submitForm(slug, data, settings, wrapper, null);
+                            }
+                        });
+
+                        if (settings.honeypot) {
+                            var formEl = wrapper.querySelector('form');
+                            if (formEl) injectHoneypot(formEl);
+                        }
+                    }
+
+                } else {
+                    // Fallback: manual form rendering (no Domma dependency)
+                    renderManualForm(wrapper, fields.filter(function (f) { return f.type !== 'page-break'; }), settings, slug);
+                }
+            })
+            .catch(function (err) {
+                var msg = document.createElement('p');
+                msg.textContent   = 'Form unavailable.';
+                msg.style.cssText = 'color:#f87171;font-style:italic;';
+                target.appendChild(msg);
+                console.warn('[form-builder]', err.message);
+            });
+    }
+
+    function injectHoneypot(formEl) {
+        var hpWrap = document.createElement('div');
+        hpWrap.className = 'fb-form-honeypot';
+        hpWrap.setAttribute('aria-hidden', 'true');
+        var hpInput = document.createElement('input');
+        hpInput.name         = '_hp';
+        hpInput.type         = 'text';
+        hpInput.tabIndex     = -1;
+        hpInput.autocomplete = 'off';
+        hpWrap.appendChild(hpInput);
+        formEl.appendChild(hpWrap);
+    }
+
+    function submitForm(slug, data, settings, wrapper, formEl) {
+        var hp = '';
+        if (formEl) {
+            var hpEl = formEl.querySelector('[name="_hp"]');
+            hp = hpEl ? hpEl.value : '';
+        } else {
+            var hpEl2 = wrapper.querySelector('[name="_hp"]');
+            hp = hpEl2 ? hpEl2.value : '';
+        }
+
+        var payload = Object.assign({}, data, { _hp: hp });
+
+        return fetch('/api/plugins/form-builder/submit/' + slug, {
+            method:  'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body:    JSON.stringify(payload)
+        })
+            .then(function (res) { return res.json().then(function (body) { return { ok: res.ok, body: body }; }); })
+            .then(function (result) {
+                if (result.ok && result.body.ok) {
+                    wrapper.textContent = '';
+                    showMessage(wrapper, result.body.message || settings.successMessage || 'Thank you.', 'success');
+                } else {
+                    showMessage(wrapper, result.body.error || 'Something went wrong.', 'error');
+                }
+            })
+            .catch(function () {
+                showMessage(wrapper, 'Unable to submit. Please check your connection.', 'error');
+            });
+    }
+
+    // Manual form renderer — used when Domma forms API is unavailable
+    function renderManualForm(wrapper, fields, settings, slug) {
+        var form = document.createElement('form');
+        form.noValidate = true;
+
+        fields.forEach(function (field) {
+            var group = document.createElement('div');
+            group.className     = 'form-group';
+            group.style.marginBottom = '1.25rem';
+
+            var label = document.createElement('label');
+            label.className   = 'form-label';
+            label.textContent = field.label || field.name;
+            if (field.required) {
+                var req = document.createElement('span');
+                req.textContent   = ' *';
+                req.style.color   = '#f87171';
+                label.appendChild(req);
+            }
+
+            var input;
+            if (field.type === 'textarea') {
+                input = document.createElement('textarea');
+                input.rows      = field.formConfig?.rows || 4;
+                input.className = 'form-input';
+            } else if (field.type === 'select') {
+                input = document.createElement('select');
+                input.className = 'form-input';
+                (field.options || []).forEach(function (opt) {
+                    var o = document.createElement('option');
+                    o.value       = opt.value;
+                    o.textContent = opt.label || opt.value;
+                    input.appendChild(o);
+                });
+            } else {
+                input = document.createElement('input');
+                input.type      = field.type || 'text';
+                input.className = 'form-input';
+                if (field.placeholder) input.placeholder = field.placeholder;
+            }
+            input.name     = field.name;
+            input.required = field.required || false;
+
+            group.appendChild(label);
+            group.appendChild(input);
+            form.appendChild(group);
+        });
+
+        // Honeypot
+        if (settings.honeypot) {
+            injectHoneypot(form);
+        }
+
+        var submitBtn = document.createElement('button');
+        submitBtn.type      = 'submit';
+        submitBtn.className = 'btn btn-primary';
+        submitBtn.textContent = settings.submitText || 'Submit';
+        form.appendChild(submitBtn);
+
+        form.addEventListener('submit', function (e) {
+            e.preventDefault();
+            wrapper.classList.add('fb-form-loading');
+            submitBtn.disabled = true;
+
+            var data = {};
+            fields.forEach(function (field) {
+                var el = form.querySelector('[name="' + field.name + '"]');
+                if (el) data[field.name] = el.value;
+            });
+
+            submitForm(slug, data, settings, wrapper, form).finally(function () {
+                wrapper.classList.remove('fb-form-loading');
+                submitBtn.disabled = false;
+            });
+        });
+
+        wrapper.appendChild(form);
+    }
+
+    // Initialise all form targets on the page
+    targets.forEach(initFormTarget);
+})();
+</script>

package/plugins/form-builder/public/inject-head.html

@@ -0,0 +1,42 @@
+<style>
+.fb-form-wrapper {
+    max-width: 600px;
+    margin: 2rem auto;
+}
+
+.fb-form-honeypot {
+    display: none !important;
+    visibility: hidden;
+}
+
+.fb-form-success {
+    padding: 1rem 1.25rem;
+    border-radius: 6px;
+    background: rgba(52, 211, 153, 0.12);
+    border: 1px solid rgba(52, 211, 153, 0.3);
+    color: #34d399;
+    font-size: 0.95rem;
+    margin-top: 0.5rem;
+}
+
+.fb-form-error {
+    padding: 0.75rem 1rem;
+    border-radius: 6px;
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.25);
+    color: #f87171;
+    font-size: 0.875rem;
+    margin-top: 0.75rem;
+}
+
+.fb-form-loading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.wizard-progress { height: 4px; background: var(--border-color, #333); border-radius: 2px; margin-bottom: 1rem; }
+.wizard-progress-bar { height: 100%; background: var(--primary, #5b8cff); border-radius: 2px; transition: width .3s ease; }
+.wizard-step-title { font-size: 1.1rem; font-weight: 600; margin-bottom: .25rem; }
+.wizard-step-description { font-size: .875rem; color: var(--text-muted, #888); margin-bottom: 1rem; }
+.wizard-nav { display: flex; justify-content: space-between; gap: .5rem; margin-top: 1rem; }
+</style>

package/public/css/site.css

@@ -0,0 +1,189 @@
+/* =========================================================
+   Domma CMS - Public Site Styles
+   ========================================================= */
+
+/* Typography */
+body, button, input, select, textarea {
+    font-family: 'Roboto', sans-serif;
+}
+
+/* Layout */
+.site-main {
+    min-height: calc(100vh - 60px);
+    padding-top: 2rem;
+    padding-bottom: 4rem;
+}
+
+.site-main.with-sidebar {
+    display: grid;
+    grid-template-columns: 260px 1fr;
+    gap: 0;
+}
+
+.site-sidebar {
+    min-height: 100%;
+    border-right: 1px solid var(--border-color, rgba(255,255,255,.08));
+}
+
+.site-content {
+    overflow: hidden;
+}
+
+.container {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 0 1.5rem;
+}
+
+/* Page title */
+.page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    line-height: 1.2;
+}
+
+/* Page body typography */
+.page-body {
+    line-height: 1.7;
+    font-size: 1rem;
+}
+
+.page-body h1,
+.page-body h2,
+.page-body h3,
+.page-body h4 {
+    margin-top: 2rem;
+    margin-bottom: .75rem;
+    font-weight: 600;
+}
+
+.page-body h2 { font-size: 1.5rem; }
+.page-body h3 { font-size: 1.25rem; }
+
+.page-body p { margin-bottom: 1rem; }
+.page-body ul,
+.page-body ol { margin-bottom: 1rem; padding-left: 1.5rem; }
+
+.page-body a { color: var(--primary, #5b8cff); }
+.page-body a:hover { text-decoration: underline; }
+
+.page-body code {
+    font-family: 'Fira Code', 'Courier New', monospace;
+    font-size: .9em;
+    background: rgba(255,255,255,.06);
+    padding: .15em .35em;
+    border-radius: 3px;
+}
+
+.page-body pre {
+    background: rgba(0,0,0,.3);
+    border: 1px solid rgba(255,255,255,.08);
+    border-radius: 6px;
+    padding: 1rem;
+    overflow-x: auto;
+    margin-bottom: 1rem;
+}
+
+.page-body pre code {
+    background: none;
+    padding: 0;
+}
+
+.page-body img {
+    max-width: 100%;
+    border-radius: 6px;
+}
+
+.page-body blockquote {
+    border-left: 3px solid var(--primary, #5b8cff);
+    margin: 1.5rem 0;
+    padding: .75rem 1rem;
+    background: rgba(91,140,255,.06);
+    border-radius: 0 6px 6px 0;
+}
+
+/* Card shortcode overrides */
+.page-body .card-header h2 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.card[data-collapsible] .card-header {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.card[data-collapsible] .card-header::after {
+    content: '▾';
+    font-size: 1.1em;
+    line-height: 1;
+    display: inline-block;
+    transition: transform .25s ease;
+    flex-shrink: 0;
+}
+
+.card[data-collapsible].is-collapsed .card-header::after {
+    transform: rotate(-90deg);
+}
+
+.card[data-collapsible] .card-body {
+    overflow: hidden;
+    max-height: 4000px;
+    opacity: 1;
+    transition: max-height .3s ease, opacity .25s ease;
+}
+
+.card[data-collapsible].is-collapsed .card-body {
+    max-height: 0;
+    opacity: 0;
+}
+
+/* Navbar icon tweaks */
+.navbar-link span[data-icon],
+.navbar-link svg,
+.navbar-dropdown-item span[data-icon],
+.navbar-dropdown-item svg {
+    width: 13px !important;
+    height: 13px !important;
+    margin-right: 10px !important;
+}
+
+/* Footer */
+.page-footer {
+    border-top: 1px solid var(--border-color, rgba(255,255,255,.08));
+    padding: 1.5rem 0;
+}
+
+.footer-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.footer-inner p { margin: 0; color: var(--text-muted, #888); font-size: .875rem; }
+
+.footer-links {
+    display: flex;
+    gap: 1.25rem;
+}
+
+.footer-links a {
+    color: var(--text-muted, #888);
+    font-size: .875rem;
+    text-decoration: none;
+}
+
+.footer-links a:hover { color: var(--text, #eee); }
+
+@media (max-width: 768px) {
+    .site-main.with-sidebar { grid-template-columns: 1fr; }
+    .site-sidebar { display: none; }
+}

package/public/js/site.js

@@ -0,0 +1,109 @@
+/**
+ * Public Site - Client-side Domma init
+ * Reads config injected by the server and initialises navbar, footer, and features.
+ */
+
+$(() => {
+    const nav = window.__CMS_NAV__ || {};
+    const site = window.__CMS_SITE__ || {};
+
+    // Initialise navbar
+    const $navbar = $('#site-navbar');
+    if ($navbar.length && nav.brand) {
+        Domma.elements.navbar('#site-navbar', {
+            brand: nav.brand,
+            items: nav.items || [],
+            variant: nav.variant || 'dark',
+            position: nav.position || 'sticky',
+            collapsible: true
+        });
+    }
+
+    // Initialise footer
+    const $footer = $('#site-footer');
+    if ($footer.length && site.footer) {
+        const footer = site.footer;
+        let html = `<div class="footer-inner container"><p>${footer.copyright || ''}</p>`;
+        if (footer.links?.length) {
+            html += `<nav class="footer-links">`;
+            footer.links.forEach(link => {
+                html += `<a href="${link.url}">${link.text}</a>`;
+            });
+            html += `</nav>`;
+        }
+        html += `</div>`;
+        $footer.html(html, { safe: false });
+    }
+
+    // Initialise sidebar (auto-generate from headings if enabled)
+    const $sidebar = $('#site-sidebar');
+    if ($sidebar.length) {
+        Domma.elements.sidebar('#site-sidebar', {
+            autoGenerate: true,
+            selector: 'h2, h3',
+            collapsible: false,
+            push: true,
+            contentSelector: '.site-content'
+        });
+    }
+
+    // Icons
+    Domma.icons.scan();
+
+    // Back to top
+    if (document.querySelector('.site-main')) {
+        Domma.elements.backToTop?.();
+    }
+
+  // -------------------------------------------------------
+  // Auto-initialise Domma components inside page content
+  // -------------------------------------------------------
+  const $pageBody = $('.page-body');
+  if ($pageBody.length) {
+
+    // Reveal effects
+    $pageBody.find('.dm-reveal').each(function () {
+      const $el = $(this);
+      const opts = {};
+      const classes = $el.attr('class') || '';
+      const m = classes.match(/dm-reveal-(fade|slide-up|slide-down|slide-left|slide-right|zoom|flip)/);
+      if (m) opts.animation = m[1];
+      if ($el.data('reveal-duration')) opts.duration = parseInt($el.data('reveal-duration'), 10);
+      if ($el.data('reveal-delay')) opts.delay = parseInt($el.data('reveal-delay'), 10);
+      if ($el.data('reveal-threshold')) opts.threshold = parseFloat($el.data('reveal-threshold'));
+      if ($el.data('reveal-once') === 'false') opts.once = false;
+      Domma.elements.reveal(this, opts);
+    });
+
+    // Accordion
+    $pageBody.find('.accordion').each(function () {
+      Domma.elements.accordion(this);
+    });
+
+    // Tabs
+    $pageBody.find('.tabs').each(function () {
+      Domma.elements.tabs(this);
+    });
+
+    // Carousel
+    $pageBody.find('.carousel').each(function () {
+      Domma.elements.carousel(this);
+    });
+
+    // Tooltips
+    $pageBody.find('[data-tooltip]').each(function () {
+      Domma.elements.tooltip(this, {
+        content: $(this).data('tooltip'),
+        position: $(this).data('tooltip-position') || 'top'
+      });
+    });
+
+    // Collapsible cards
+    $pageBody.find('.card[data-collapsible]').each(function () {
+      const header = this.querySelector('.card-header');
+      if (header) {
+        header.addEventListener('click', () => this.classList.toggle('is-collapsed'));
+      }
+    });
+  }
+});

package/scripts/copy-domma.js

@@ -0,0 +1,48 @@
+/**
+ * Copy Domma dist files to admin and public directories.
+ *
+ * NOTE: This script is now OPTIONAL.
+ * The server serves Domma directly from node_modules/domma-js/public/dist at /dist/domma/.
+ * Only run this if you need the files as static copies (e.g. for deployment without node_modules).
+ *
+ * Run: node scripts/copy-domma.js
+ */
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(__dirname, '..');
+const require = createRequire(import.meta.url);
+
+// Resolve from npm package
+const dommaPackageDir = path.dirname(require.resolve('domma-js/package.json'));
+const DOMMA_DIST = path.join(dommaPackageDir, 'public', 'dist');
+
+const TARGETS = [
+    path.join(ROOT, 'admin', 'dist', 'domma'),
+    path.join(ROOT, 'public', 'dist', 'domma')
+];
+
+async function copyDir(src, dest) {
+    await fs.mkdir(dest, { recursive: true });
+    const entries = await fs.readdir(src, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(src, entry.name);
+        const destPath = path.join(dest, entry.name);
+        if (entry.isDirectory()) {
+            await copyDir(srcPath, destPath);
+        } else {
+            await fs.copyFile(srcPath, destPath);
+        }
+    }
+}
+
+console.log(`Source: ${DOMMA_DIST}`);
+console.log('Copying Domma dist files...');
+for (const target of TARGETS) {
+    await copyDir(DOMMA_DIST, target);
+    console.log(`  ✓ → ${path.relative(ROOT, target)}`);
+}
+console.log('Done.');

package/scripts/fresh.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+/**
+ * Domma CMS — Fresh Install
+ * Chains: reset → setup → seed
+ * Gives you a fully configured CMS with demo content in one command.
+ * Run: npm run fresh
+ */
+import { spawnSync }     from 'node:child_process';
+import path              from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT      = path.resolve(__dirname, '..');
+
+function run(script) {
+    const result = spawnSync(process.execPath, [path.join('scripts', script)], {
+        cwd:   ROOT,
+        stdio: 'inherit'
+    });
+    if (result.status !== 0) {
+        process.exit(result.status ?? 1);
+    }
+}
+
+console.log('');
+console.log('  ╔══════════════════════════════════════╗');
+console.log('  ║   Domma CMS — Fresh Install          ║');
+console.log('  ║   reset → setup → seed               ║');
+console.log('  ╚══════════════════════════════════════╝');
+console.log('');
+
+run('reset.js');
+run('setup.js');
+run('seed.js');
+
+console.log('');
+console.log('  ══════════════════════════════════════════');
+console.log('  Fresh install complete!  Start the server:');
+console.log('  npm start');
+console.log('  ══════════════════════════════════════════');
+console.log('');