domma-cms 0.1.0 → 0.2.0

package/scripts/build.js

@@ -0,0 +1,129 @@
+/**
+ * Build script — creates a publishable staging copy in _publish/
+ * Browser-facing JS/CSS is minified; server-side code is copied as-is.
+ * Run: node scripts/build.js
+ */
+
+import {cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync} from 'fs';
+import {dirname, join} from 'path';
+import {glob} from 'fs/promises';
+import * as esbuild from 'esbuild';
+
+const ROOT = new URL('..', import.meta.url).pathname.replace(/\/$/, '');
+const OUT = join(ROOT, '_publish');
+
+// Files/dirs copied verbatim (server-side, config, docs)
+const COPY_AS_IS = [
+  'server',
+  'bin',
+  'config',
+  'scripts',
+  'package.json',
+  'README.md',
+  'LICENSE',
+  '.npmignore',
+];
+
+// Glob patterns for browser-facing assets to minify
+const MINIFY_PATTERNS = [
+  'admin/js/**/*.js',
+  'admin/css/**/*.css',
+  'public/js/**/*.js',
+  'public/css/**/*.css',
+  'plugins/*/public/**/*.js',
+  'plugins/*/public/**/*.css',
+];
+
+// Files within plugins that are copied as-is (server-side plugin code)
+const PLUGIN_AS_IS_PATTERNS = [
+  'plugins/**/plugin.js',
+  'plugins/**/config.js',
+  'plugins/**/routes/**/*.js',
+  'plugins/**/services/**/*.js',
+  'plugins/**/views/**/*.js',
+  'plugins/**/*.json',
+  'plugins/**/*.html',
+];
+
+// HTML templates in admin (copied as-is)
+const ADMIN_HTML_PATTERNS = [
+  'admin/**/*.html',
+];
+
+async function collectFiles(pattern) {
+  const files = [];
+  for await (const file of glob(pattern, {cwd: ROOT})) {
+    files.push(file);
+  }
+  return files;
+}
+
+async function minifyFile(relPath, loader) {
+  const src = readFileSync(join(ROOT, relPath), 'utf8');
+  const result = await esbuild.transform(src, {
+    loader,
+    minify: true,
+    target: 'es2020',
+  });
+  const outPath = join(OUT, relPath);
+  mkdirSync(dirname(outPath), {recursive: true});
+  writeFileSync(outPath, result.code);
+}
+
+async function build() {
+  // Clean and recreate _publish/
+  if (existsSync(OUT)) rmSync(OUT, {recursive: true, force: true});
+  mkdirSync(OUT, {recursive: true});
+
+  // Copy server-side dirs/files verbatim
+  for (const item of COPY_AS_IS) {
+    const src = join(ROOT, item);
+    if (existsSync(src)) {
+      cpSync(src, join(OUT, item), {recursive: true});
+    }
+  }
+
+  // Copy plugin server-side code verbatim
+  const pluginAsIs = await collectFiles('{' + PLUGIN_AS_IS_PATTERNS.join(',') + '}');
+  for (const rel of pluginAsIs) {
+    const outPath = join(OUT, rel);
+    mkdirSync(dirname(outPath), {recursive: true});
+    cpSync(join(ROOT, rel), outPath);
+  }
+
+  // Copy admin HTML templates verbatim
+  const adminHtml = await collectFiles(ADMIN_HTML_PATTERNS[0]);
+  for (const rel of adminHtml) {
+    const outPath = join(OUT, rel);
+    mkdirSync(dirname(outPath), {recursive: true});
+    cpSync(join(ROOT, rel), outPath);
+  }
+
+  // Minify browser-facing JS and CSS
+  let jsCount = 0;
+  let cssCount = 0;
+
+  // Collect all minify targets, deduplicate against plugin as-is
+  const pluginAsIsSet = new Set(pluginAsIs);
+
+  for (const pattern of MINIFY_PATTERNS) {
+    const files = await collectFiles(pattern);
+    for (const rel of files) {
+      if (pluginAsIsSet.has(rel)) continue; // skip plugin server-side JS
+      const loader = rel.endsWith('.css') ? 'css' : 'js';
+      await minifyFile(rel, loader);
+      if (loader === 'js') jsCount++;
+      else cssCount++;
+    }
+  }
+
+  const totalCopied = COPY_AS_IS.filter(i => existsSync(join(ROOT, i))).length
+    + pluginAsIs.length + adminHtml.length;
+
+  console.log(`Built into _publish/ — JS: ${jsCount} minified, CSS: ${cssCount} minified, ${totalCopied} entries copied`);
+}
+
+build().catch(err => {
+  console.error('Build failed:', err.message);
+  process.exit(1);
+});

package/scripts/seed.js

@@ -13,7 +13,10 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const ROOT      = path.resolve(__dirname, '..');
 
 const PAGES_DIR = path.join(ROOT, 'content', 'pages');
-const NAV_CFG   = path.join(ROOT, 'config', 'navigation.json');
+const COLLECTIONS_DIR = path.join(ROOT, 'content', 'collections');
+const FORMS_DIR = path.join(ROOT, 'plugins', 'form-builder', 'data', 'forms');
+const SUBS_DIR = path.join(ROOT, 'plugins', 'form-builder', 'data', 'submissions');
+const NAV_CFG = path.join(ROOT, 'config', 'navigation.json');
 
 const now = new Date().toISOString();
 
@@ -35,7 +38,9 @@ const SEED_NAV = {
           {text: 'Typography', url: '/resources/typography', icon: 'type'},
           {text: 'Grid System', url: '/resources/grid', icon: 'layout'},
           {text: 'Cards', url: '/resources/cards', icon: 'credit-card'},
-          {text: 'Shortcode Reference', url: '/resources/shortcodes', icon: 'code'}
+          {text: 'Shortcode Reference', url: '/resources/shortcodes', icon: 'code'},
+          {text: 'Effects', url: '/resources/effects', icon: 'zap'},
+          {text: 'Interactive', url: '/resources/interactive', icon: 'mouse-pointer'}
         ]
       }
     ],
@@ -109,13 +114,41 @@ Add your services, mission statement, or team information here.
         },
         body: `# Contact
 
-Get in touch — we'd love to hear from you.
+Have a question, a project in mind, or just want to say hello? Fill in the form and we'll get back to you as soon as possible.
 
-## How to reach us
+[grid cols="2" gap="6"]
+[col]
+
+## Send a message
+
+<div data-form="contact"></div>
+
+[/col]
+[col]
+
+## Get in touch
+
+[card title="Address"]
+123 Example Street
+London, EC1A 1BB
+United Kingdom
+[/card]
 
-Replace this with your contact details, a form, or whatever works best for your site.
+[card title="Email"]
+hello@example.com
+[/card]
 
-Edit this page from the [admin panel](/admin/).
+[card title="Phone"]
++44 20 0000 0000
+[/card]
+
+[card title="Office hours"]
+Monday – Friday: 9am – 5pm
+Saturday – Sunday: Closed
+[/card]
+
+[/col]
+[/grid]
 `
     },
     {
@@ -217,6 +250,22 @@ Full reference for every shortcode supported in the editor, including all attrib
 [Read more →](/resources/shortcodes)
 [/card]
 [/col]
+[col]
+[card title="Effects"]
+Live demonstrations of every effect shortcode — scroll reveals, animated counters, typewriter text, ambient backgrounds,
+and more.
+
+[Read more →](/resources/effects)
+[/card]
+[/col]
+[col]
+[card title="Interactive"]
+Live demos of \`[slideover]\` panels and \`[dconfig]\` declarative behaviour — toggle classes, show panels, and wire up
+click handlers without writing JavaScript.
+
+[Read more →](/resources/interactive)
+[/card]
+[/col]
 [/grid]
 `
   },
@@ -612,9 +661,444 @@ Replace \`your-form-slug\` with the slug from the Form Builder. Example:
 
 ---
 
+## [\`slideover\`]
+
+Renders a trigger button that opens a slide-in panel with Markdown content.
+
+| Attribute | Required | Description |
+|-----------|----------|-------------|
+| \`title\` | No | Panel header text |
+| \`trigger\` | No | Button label (default: \`"Open"\`) |
+| \`size\` | No | \`sm\`, \`md\` (default), \`lg\` |
+| \`position\` | No | \`right\` (default) or \`left\` |
+
+\`\`\`
+[slideover title="More Info" trigger="Read more" size="md"]
+Markdown here — cards, grids, and other shortcodes work inside.
+[/slideover]
+\`\`\`
+
+---
+
+## [\`dconfig\`]
+
+Declarative behaviour — wires up click handlers and class toggles from JSON, no JavaScript needed.
+
+\`\`\`
+[dconfig]
+{
+  "#my-btn": {
+    "events": {
+      "click": { "target": "#panel", "toggleClass": "hidden" }
+    }
+  }
+}
+[/dconfig]
+\`\`\`
+
+You can also set DConfig from the **DConfig section** in the page editor. Inline shortcodes win on selector conflict.
+See [Interactive demos →](/resources/interactive)
+
+---
+
+← [Back to Resources](/resources)
+`
+  },
+
+  // ----- Effects -----
+  {
+    file: path.join('resources', 'effects.md'),
+    fm: {
+      title: 'Effects', slug: 'effects',
+      description: 'Live demonstrations of every Domma Effects shortcode — reveals, counters, typewriter text, ambient backgrounds, and more.',
+      layout: 'default', status: 'published',
+      sortOrder: 15, showInNav: false, sidebar: false,
+      seo: {title: 'Effects — Resources', description: 'Live demonstrations of Domma Effects shortcodes'},
+      createdAt: now, updatedAt: now
+    },
+    body: `# Effects
+
+Effect shortcodes bring content to life. All examples below are live (requires the Domma Effects plugin).
+
+---
+
+## \`[reveal]\` — Scroll-triggered entrance
+
+[reveal animation="fade"]
+[card title="Fade in"]
+This card faded in as you scrolled to it.
+[/card]
+[/reveal]
+
+\`\`\`
+[reveal animation="fade"]
+Your content here.
+[/reveal]
+\`\`\`
+
+**Attributes:** \`animation\` (fade, slide-up, zoom, flip) · \`duration\` (ms) · \`delay\` (ms) · \`once\` (true/false)
+
+---
+
+## \`[counter]\` — Animated number
+
+[reveal animation="slide-up"]
+[grid cols="3" gap="4"]
+[col]<div style="text-align:center;padding:1rem 0">
+
+## [counter to="247" separator="," /]
+
+Pages published
+</div>[/col]
+[col]<div style="text-align:center;padding:1rem 0">
+
+## [counter to="98" suffix="%" /]
+
+Uptime
+</div>[/col]
+[col]<div style="text-align:center;padding:1rem 0">
+
+## [counter to="12" /]
+
+Plugins
+</div>[/col]
+[/grid]
+[/reveal]
+
+\`\`\`
+[counter to="100" prefix="$" suffix="+" /]
+\`\`\`
+
+---
+
+## \`[scribe]\` — Typewriter
+
+[reveal animation="fade"]
+[card]
+[scribe speed="40" cursor="true"]
+Domma CMS — fast, flexible, file-based.
+[/scribe]
+[/card]
+[/reveal]
+
+---
+
+## \`[animate]\` — CSS-only animation
+
+[grid cols="3" gap="4"]
+[col]
+[animate type="fade-in-up"]
+[card title="fade-in-up"]
+No plugin needed.
+[/card]
+[/animate]
+[/col]
+[col]
+[animate type="zoom-in"]
+[card title="zoom-in"]
+Scales up from centre.
+[/card]
+[/animate]
+[/col]
+[col]
+[animate type="fade-in-left"]
+[card title="fade-in-left"]
+Slides in from right.
+[/card]
+[/animate]
+[/col]
+[/grid]
+
+---
+
+← [Back to Resources](/resources)
+`
+  },
+
+  // ----- Interactive -----
+  {
+    file: path.join('resources', 'interactive.md'),
+    fm: {
+      title: 'Interactive Shortcodes', slug: 'interactive',
+      description: 'Live demonstrations of the [slideover] and [dconfig] shortcodes — declarative interactivity without JavaScript.',
+      layout: 'default', status: 'published',
+      sortOrder: 16, showInNav: false, sidebar: false,
+      seo: {
+        title: 'Interactive Shortcodes — Resources',
+        description: 'Live demos of slideover and DConfig in Domma CMS'
+      },
+      createdAt: now, updatedAt: now
+    },
+    body: `# Interactive Shortcodes
+
+Two shortcodes let you add interactivity to any page without writing JavaScript.
+
+---
+
+## Slideover
+
+[slideover title="More Information" trigger="Read more →"]
+## About Domma CMS
+
+Domma CMS is a **file-based** content management system built on Fastify. Pages are stored as Markdown files with YAML frontmatter.
+
+No database required — content lives in \\\`content/pages/\\\` and is served server-side.
+[/slideover]
+
+[slideover title="Package Details" trigger="View specifications" size="lg"]
+[card title="Technical Requirements"]
+- **Node.js** 18 or later
+- Any Linux/macOS/Windows system
+[/card]
+
+[card title="Included Plugins" collapsible="true"]
+- Back to Top
+- Cookie Consent
+- Custom CSS
+- Form Builder
+[/card]
+[/slideover]
+
+---
+
+## DConfig — Toggle on Click
+
+[dconfig]
+{
+  "#toggle-demo-btn": {
+    "events": {
+      "click": { "target": "#toggle-demo-panel", "toggleClass": "hidden" }
+    }
+  }
+}
+[/dconfig]
+
+<button id="toggle-demo-btn" class="btn btn-primary">Toggle panel</button>
+
+<div id="toggle-demo-panel" class="card mt-3" style="max-width:400px">
+  <div class="card-body">
+    <p>This panel toggles when you click the button above.</p>
+  </div>
+</div>
+
+---
+
+## Syntax Reference
+
+**Slideover attributes:**
+
+| Attribute | Default | Description |
+|-----------|---------|-------------|
+| \`title\` | — | Panel header text |
+| \`trigger\` | \`"Open"\` | Button label |
+| \`size\` | \`"md"\` | \`sm\`, \`md\`, \`lg\` |
+| \`position\` | \`"right"\` | \`right\` or \`left\` |
+
+**DConfig format:**
+
+\`\`\`
+[dconfig]
+{
+  "#selector": {
+    "events": {
+      "click": { "target": "#other-selector", "toggleClass": "class-name" }
+    }
+  }
+}
+[/dconfig]
+\`\`\`
+
+See the [Shortcode Reference](/resources/shortcodes) for full documentation.
+
+---
+
 ← [Back to Resources](/resources)
 `
+  }
+];
+
+// ---------------------------------------------------------------------------
+// Default collections
+// ---------------------------------------------------------------------------
+
+const COLLECTIONS = [
+  {
+    slug: 'contacts',
+    schema: {
+      slug: 'contacts',
+      title: 'Contacts',
+      description: 'Submissions from the contact form',
+      fields: [
+        {name: 'full_name', type: 'string', label: 'Full Name', required: false},
+        {name: 'email_address', type: 'string', label: 'Email Address', required: false},
+        {name: 'phone_number', type: 'tel', label: 'Phone Number', required: false},
+        {name: 'subject', type: 'string', label: 'Subject', required: false},
+        {name: 'message', type: 'textarea', label: 'Message', required: false}
+      ],
+      api: {
+        create: {enabled: false, access: 'admin'},
+        read: {enabled: true, access: 'public'},
+        update: {enabled: false, access: 'admin'},
+        delete: {enabled: false, access: 'admin'}
+      },
+      createdAt: now,
+      updatedAt: now
     }
+  },
+  {
+    slug: 'bookings',
+    schema: {
+      slug: 'bookings',
+      title: 'Bookings',
+      description: 'Booking requests — startedAt, endedAt, and createdAt (auto) captured per entry',
+      fields: [
+        {name: 'full_name', type: 'string', label: 'Full Name', required: true},
+        {name: 'email', type: 'string', label: 'Email', required: true},
+        {name: 'phone', type: 'tel', label: 'Phone Number', required: false},
+        {name: 'started_at', type: 'date', label: 'Start Date', required: true},
+        {name: 'ended_at', type: 'date', label: 'End Date', required: true},
+        {name: 'notes', type: 'textarea', label: 'Notes', required: false}
+      ],
+      api: {
+        create: {enabled: false, access: 'admin'},
+        read: {enabled: true, access: 'public'},
+        update: {enabled: false, access: 'admin'},
+        delete: {enabled: false, access: 'admin'}
+      },
+      createdAt: now,
+      updatedAt: now
+    }
+  }
+];
+
+// ---------------------------------------------------------------------------
+// Default forms (with collection actions)
+// ---------------------------------------------------------------------------
+
+const FORMS = [
+  {
+    slug: 'booking',
+    data: {
+      slug: 'booking',
+      title: 'Booking',
+      description: 'Request a booking — captures name, contact details, start date, end date, and notes. Entries stored in the Bookings collection with an automatic createdAt timestamp.',
+      fields: [
+        {
+          name: 'full_name',
+          type: 'string',
+          label: 'Full Name',
+          required: true,
+          placeholder: 'Your full name'
+        },
+        {
+          name: 'email',
+          type: 'string',
+          label: 'Email Address',
+          required: true,
+          placeholder: 'you@example.com'
+        },
+        {
+          name: 'phone',
+          type: 'tel',
+          label: 'Phone Number',
+          required: false,
+          placeholder: '+44 7700 000000'
+        },
+        {
+          name: 'started_at',
+          type: 'date',
+          label: 'Start Date',
+          required: true
+        },
+        {
+          name: 'ended_at',
+          type: 'date',
+          label: 'End Date',
+          required: true
+        },
+        {
+          name: 'notes',
+          type: 'textarea',
+          label: 'Notes',
+          required: false,
+          placeholder: 'Any additional details…'
+        }
+      ],
+      settings: {
+        submitText: 'Request Booking',
+        successMessage: 'Thank you — your booking request has been received. We\'ll be in touch to confirm.',
+        layout: 'stacked',
+        honeypot: true,
+        rateLimitPerMinute: 3
+      },
+      actions: {
+        email: {enabled: false, recipients: '', subjectPrefix: '[Booking]'},
+        webhook: {enabled: false, url: '', method: 'POST'},
+        collection: {enabled: true, slug: 'bookings'}
+      },
+      createdAt: now,
+      updatedAt: now
+    }
+  },
+  {
+    slug: 'contact',
+    data: {
+      slug: 'contact',
+      title: 'Contact',
+      description: 'Get in touch with us.',
+      fields: [
+        {
+          name: 'full_name',
+          type: 'string',
+          label: 'Full Name',
+          required: true,
+          placeholder: 'Your full name'
+        },
+        {
+          name: 'email_address',
+          type: 'string',
+          label: 'Email Address',
+          required: true,
+          placeholder: 'you@example.com'
+        },
+        {
+          name: 'phone_number',
+          type: 'tel',
+          label: 'Phone Number',
+          required: false,
+          placeholder: '+44 7700 000000'
+        },
+        {
+          name: 'subject',
+          type: 'string',
+          label: 'Subject',
+          required: false,
+          placeholder: 'What is this regarding?'
+        },
+        {
+          name: 'message',
+          type: 'textarea',
+          label: 'Message',
+          required: true,
+          placeholder: 'Your message…'
+        }
+      ],
+      settings: {
+        submitText: 'Send Message',
+        successMessage: 'Thank you for your message. We\'ll be in touch shortly.',
+        layout: 'stacked',
+        honeypot: true,
+        rateLimitPerMinute: 3
+      },
+      actions: {
+        email: {enabled: false, recipients: '', subjectPrefix: '[Contact]'},
+        webhook: {enabled: false, url: '', method: 'POST'},
+        collection: {enabled: true, slug: 'contacts'}
+      },
+      createdAt: now,
+      updatedAt: now
+    }
+  }
 ];
 
 // ---------------------------------------------------------------------------
@@ -659,8 +1143,34 @@ process.stdout.write('  Updating navigation…');
 await writeFile(NAV_CFG, JSON.stringify(SEED_NAV, null, 4) + '\n', 'utf8');
 console.log(' done.');
 
+for (const col of COLLECTIONS) {
+  const dir = path.join(COLLECTIONS_DIR, col.slug);
+  await mkdir(dir, {recursive: true});
+  await writeFile(path.join(dir, 'schema.json'), JSON.stringify(col.schema, null, 2) + '\n', 'utf8');
+  // Only initialise data.json if it doesn't already exist (preserve entries)
+  const dataFile = path.join(dir, 'data.json');
+  try {
+    await writeFile(dataFile, '[]\n', {encoding: 'utf8', flag: 'wx'});
+  } catch { /* already exists */
+  }
+  console.log(`  ✓ collection: ${col.slug}`);
+}
+
+await mkdir(FORMS_DIR, {recursive: true});
+await mkdir(SUBS_DIR, {recursive: true});
+for (const form of FORMS) {
+  await writeFile(path.join(FORMS_DIR, `${form.slug}.json`), JSON.stringify(form.data, null, 4) + '\n', 'utf8');
+  // Only initialise submissions file if it doesn't already exist
+  const subsFile = path.join(SUBS_DIR, `${form.slug}.json`);
+  try {
+    await writeFile(subsFile, '[]\n', {encoding: 'utf8', flag: 'wx'});
+  } catch { /* already exists */
+  }
+  console.log(`  ✓ form: ${form.slug} → collection: ${form.data.actions.collection.slug}`);
+}
+
 console.log('');
-console.log(`  ✓ Seed complete — ${PAGES.length} pages created, navigation updated.`);
+console.log(`  ✓ Seed complete — ${PAGES.length} pages, ${COLLECTIONS.length} collection(s), ${FORMS.length} form(s).`);
 console.log('  Visit your site at http://localhost:3050/');
 console.log('  Resources section available at http://localhost:3050/resources');
 console.log('');