domma-cms 0.1.0 → 0.2.0

package/admin/js/views/index.js

@@ -15,6 +15,9 @@ import {userEditorView} from './user-editor.js';
 import {pluginsView} from './plugins.js';
 import {documentationView} from './documentation.js';
 import {tutorialsView} from './tutorials.js';
+import {collectionsView} from './collections.js';
+import {collectionEditorView} from './collection-editor.js';
+import {collectionEntriesView} from './collection-entries.js';
 
 export const views = {
     dashboard:   dashboardView,
@@ -27,7 +30,10 @@ export const views = {
     login:       loginView,
     users:       usersView,
     userEditor:  userEditorView,
-  plugins: pluginsView,
-  documentation: documentationView,
-  tutorials: tutorialsView
+  plugins:           pluginsView,
+  documentation:     documentationView,
+  tutorials:         tutorialsView,
+  collections:       collectionsView,
+  collectionEditor:  collectionEditorView,
+  collectionEntries: collectionEntriesView
 };

package/admin/js/views/login.js

@@ -6,7 +6,7 @@
  *  - needsSetup = true  → show setup form → onboarding wizard (site → theme → done)
  *  - needsSetup = false → show login form → redirect to dashboard
  */
-import { api, setAuthData, isAuthenticated } from '../api.js';
+import {api, isAuthenticated, setAuthData} from '../api.js';
 
 // ---------------------------------------------------------------------------
 // Blueprints
@@ -65,7 +65,8 @@ const THEMES = [
     { id: 'lemon-light',    label: 'Lemon',      dark: false, primary: '#d4ac0d', bg: '#fffef0' },
     { id: 'silver-dark',    label: 'Silver',     dark: true,  primary: '#95a5a6', bg: '#1c1e20' },
     { id: 'silver-light',   label: 'Silver',     dark: false, primary: '#7f8c8d', bg: '#f2f3f4' },
-    { id: 'grayve',         label: 'Grayve',     dark: true,  primary: '#aaaaaa', bg: '#111111' },
+  {id: 'grayve-dark', label: 'Grayve', dark: true, primary: '#00bcd4', bg: '#1a1e21'},
+  {id: 'grayve-light', label: 'Grayve', dark: false, primary: '#00838f', bg: '#ffffff'},
 ];
 
 export const loginView = {

package/admin/js/views/navigation.js

@@ -1,7 +1,7 @@
 /**
  * Navigation View
  */
-import { api } from '../api.js';
+import {api} from '../api.js';
 
 let _nextId = 1;
 
@@ -46,8 +46,12 @@ export const navigationView = {
     templateUrl: '/admin/js/templates/navigation.html',
 
     async onMount($container) {
-        let nav = await api.navigation.get().catch(() => ({ brand: {}, items: [] }));
+      let [nav, site] = await Promise.all([
+        api.navigation.get().catch(() => ({brand: {}, items: []})),
+        api.settings.get().catch(() => ({}))
+      ]);
         let flatItems = flattenItems(nav.items);
+      let footerLinks = (site.footer?.links || []).map(l => ({text: l.text || '', url: l.url || ''}));
 
         const syncFromDom = () => {
             $container.find('.nav-item-row').each(function () {
@@ -98,10 +102,54 @@ export const navigationView = {
           });
         };
 
+      const renderFooterLinks = () => {
+        const $list = $container.find('#footer-links-list').empty();
+        footerLinks.forEach((link, idx) => {
+          $list.append(`
+                    <div class="nav-item-row" data-footer-idx="${idx}">
+                        <input type="text" class="form-input footer-link-text nav-col-main" value="${esc(link.text)}" placeholder="Label">
+                        <input type="text" class="form-input footer-link-url nav-col-main" value="${esc(link.url)}" placeholder="/url">
+                        <span class="nav-col-action">
+                            <button class="btn btn-sm btn-danger btn-remove-footer" data-idx="${idx}" data-tooltip="Remove"><span data-icon="trash"></span></button>
+                        </span>
+                    </div>
+                `);
+        });
+        Domma.icons.scan('#footer-links-list');
+        document.querySelectorAll('#footer-links-list [data-tooltip]').forEach(el => {
+          E.tooltip(el, {content: el.getAttribute('data-tooltip'), position: 'top'});
+        });
+      };
+
+      const syncFooterFromDom = () => {
+        footerLinks = [];
+        $container.find('#footer-links-list .nav-item-row').each(function () {
+          footerLinks.push({
+            text: $(this).find('.footer-link-text').val().trim(),
+            url: $(this).find('.footer-link-url').val().trim()
+          });
+        });
+      };
+
+      $container.find('#add-footer-link').on('click', () => {
+        syncFooterFromDom();
+        footerLinks.push({text: '', url: ''});
+        renderFooterLinks();
+      });
+
+      $container.off('click', '.btn-remove-footer').on('click', '.btn-remove-footer', function () {
+        syncFooterFromDom();
+        const idx = parseInt($(this).data('idx'), 10);
+        footerLinks.splice(idx, 1);
+        renderFooterLinks();
+      });
+
         $container.find('#field-brand-text').val(nav.brand?.text || '');
         $container.find('#field-brand-url').val(nav.brand?.url || '/');
+      $container.find('#field-brand-icon').val(nav.brand?.icon || '');
         $container.find('#field-nav-variant').val(nav.variant || 'dark');
         renderItems();
+      renderFooterLinks();
 
         $container.find('#add-nav-item').on('click', () => {
             syncFromDom();
@@ -124,28 +172,46 @@ export const navigationView = {
 
         $container.find('#save-nav-btn').on('click', async () => {
             syncFromDom();
+          syncFooterFromDom();
             const nested = nestItems(
                 flatItems.map(i => ({ ...i, text: i.text.trim(), url: i.url.trim(), icon: i.icon.trim() }))
             ).filter(i => i.text || i.url);
 
-            const data = {
+          const brandIcon = $container.find('#field-brand-icon').val().trim();
+          const navData = {
                 brand: {
                     text: $container.find('#field-brand-text').val().trim(),
-                    url:  $container.find('#field-brand-url').val().trim() || '/'
+                  url: $container.find('#field-brand-url').val().trim() || '/',
+                  ...(brandIcon && {icon: brandIcon})
                 },
                 items: nested,
                 variant:  $container.find('#field-nav-variant').val(),
                 position: nav.position || 'sticky'
             };
 
+          const validFooterLinks = footerLinks.filter(l => l.text || l.url);
+
             try {
-                await api.navigation.save(data);
-                nav = data;
-                flatItems = flattenItems(nav.items);
-                renderItems();
-                E.toast('Navigation saved.', { type: 'success' });
-            } catch {
-                E.toast('Failed to save navigation.', { type: 'error' });
+              await api.navigation.save(navData);
+              nav = navData;
+              flatItems = flattenItems(nav.items);
+              renderItems();
+              E.toast('Navigation saved.', {type: 'success'});
+            } catch (e) {
+              console.error('[navigation] save failed:', e);
+              E.toast('Failed to save navigation.', {type: 'error'});
+              return;
+            }
+
+          // Save footer links into site config — best-effort, independent of nav save
+          try {
+            const currentSite = await api.settings.get().catch(() => ({}));
+            await api.settings.save({...currentSite, footer: {...(currentSite.footer || {}), links: validFooterLinks}});
+            footerLinks = validFooterLinks;
+            renderFooterLinks();
+          } catch (e) {
+            console.error('[navigation] footer links save failed:', e);
+            E.toast('Footer links could not be saved.', {type: 'warning'});
             }
         });
     }

package/admin/js/views/page-editor.js

@@ -170,6 +170,95 @@ function openEditorHelp() {
 
   wrap.appendChild(section3);
 
+  // --- Section 3c: Hero shortcode ---
+  const section3c = document.createElement('div');
+  section3c.appendChild(makeH3('Hero'));
+  section3c.appendChild(makeNote('Full-width hero sections — no plugin required. Uses Domma\'s built-in Hero CSS component.'));
+
+  const heroAttrTable = document.createElement('table');
+  heroAttrTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
+  [
+    ['title="..."', 'Heading text'],
+    ['tagline="..."', 'Subtitle text'],
+    ['size="sm|lg|full"', 'Height variant (default: normal)'],
+    ['variant="dark|primary|gradient-blue|gradient-purple|gradient-sunset|gradient-ocean"', 'Colour / gradient preset'],
+    ['image="url"', 'Background image URL (adds cover mode)'],
+    ['overlay="light|dark|darker|gradient|gradient-reverse"', 'Image overlay style'],
+    ['align="center|left"', 'Content alignment (default: center)'],
+    ['fullwidth="true"', 'Break out of the page container to span full viewport width'],
+    ['class="..."', 'Extra CSS classes'],
+    ['id="..."', 'Element id'],
+  ].forEach(([attr, desc]) => {
+    const tr = document.createElement('tr');
+    const tdCode = document.createElement('td');
+    tdCode.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
+    tdCode.appendChild(makeCode(attr));
+    const tdDesc = document.createElement('td');
+    tdDesc.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);';
+    tdDesc.textContent = desc;
+    tr.appendChild(tdCode);
+    tr.appendChild(tdDesc);
+    heroAttrTable.appendChild(tr);
+  });
+  section3c.appendChild(heroAttrTable);
+
+  section3c.appendChild(makeSnippet(
+    'Basic hero',
+    '[hero title="Welcome" tagline="Build something great"][/hero]',
+    null
+  ));
+
+  section3c.appendChild(makeSnippet(
+    'Gradient with body content',
+    '[hero title="Get Started" tagline="Everything you need." size="lg" variant="gradient-blue" align="center"]\nSome introductory **Markdown** content here.\n[/hero]',
+    null
+  ));
+
+  section3c.appendChild(makeSnippet(
+    'Background image with overlay',
+    '[hero title="Our Story" image="/media/hero.jpg" overlay="dark" size="full"][/hero]',
+    'Combine image + overlay for text legibility over photos.'
+  ));
+
+  wrap.appendChild(section3c);
+
+  // --- Section 3b: Interactive Components ---
+  const section3b = document.createElement('div');
+  section3b.appendChild(makeH3('Interactive Components'));
+  section3b.appendChild(makeNote('Tabs, accordion, carousel, and countdown — no plugin required.'));
+
+  section3b.appendChild(makeSnippet(
+    'Tabs',
+    '[tabs]\n[tab title="First"]Content **A**[/tab]\n[tab title="Second"]Content **B**[/tab]\n[/tabs]',
+    'Add style="pills" for pill-style navigation.'
+  ));
+
+  section3b.appendChild(makeSnippet(
+    'Accordion',
+    '[accordion]\n[item title="Question 1"]Answer here.[/item]\n[item title="Question 2"]Answer here.[/item]\n[/accordion]',
+    'Add multiple="true" to allow several panels open at once.'
+  ));
+
+  section3b.appendChild(makeSnippet(
+    'Carousel',
+    '[carousel autoplay="true" interval="5000"]\n[slide title="Slide 1"]Description[/slide]\n[slide image="/media/photo.jpg" title="Slide 2"]Caption[/slide]\n[/carousel]',
+    'Omit autoplay for a manual carousel. loop="false" disables wrapping.'
+  ));
+
+  section3b.appendChild(makeSnippet(
+    'Countdown (to date)',
+    '[countdown to="2026-12-31" format="DD:HH:mm:ss" /]',
+    null
+  ));
+
+  section3b.appendChild(makeSnippet(
+    'Countdown (duration)',
+    '[countdown duration="300" format="mm:ss" /]',
+    'duration is in seconds. format options: mm:ss · HH:mm:ss · DD:HH:mm:ss'
+  ));
+
+  wrap.appendChild(section3b);
+
   // --- Section 4: Embedding a Form ---
   const section4 = document.createElement('div');
   section4.appendChild(makeH3('Embedding a Form'));
@@ -192,7 +281,8 @@ function openEditorHelp() {
     ['[breathe]...[/breathe]', 'Continuous gentle scale loop'],
     ['[pulse]...[/pulse]', 'Repeating scale pulse'],
     ['[shake]...[/shake]', 'One-shot shake'],
-    ['[scribe speed="50"]...[/scribe]', 'Typewriter character-by-character'],
+    ['[scribe speed="50"]...[/scribe]', 'Typewriter — simple mode (text typed letter by letter)'],
+    ['[scribe loop="true"][render]Text[/render][wait]1500[/wait][undo /][/scribe]', 'Typewriter — script mode (sequenced render/wait/undo actions)'],
     ['[scramble]...[/scramble]', 'Character-scramble reveal'],
     ['[counter to="100" /]', 'Animated number counter (self-closing)'],
     ['[ripple]...[/ripple]', 'Click-triggered ripple'],
@@ -220,17 +310,105 @@ function openEditorHelp() {
   });
   section5.appendChild(effectsTable);
 
-  const effectsLink = document.createElement('p');
-  effectsLink.style.cssText = 'margin:.5rem 0 0;font-size:.82em;';
-  const a = document.createElement('a');
-  a.href = '#/plugins/domma-effects';
-  a.textContent = 'Full reference & examples →';
-  a.addEventListener('click', () => so.close());
-  effectsLink.appendChild(a);
-  section5.appendChild(effectsLink);
+  section5.appendChild(makeSnippet(
+    'Scribe script — looping multi-phrase typewriter',
+    '[scribe loop="true" loop-delay="2000" delete-speed="20"]\n[render]We build things that matter.[/render]\n[wait]1200[/wait]\n[undo all="true" /]\n[render]We design for humans.[/render]\n[wait]1200[/wait]\n[undo all="true" /]\n[/scribe]',
+    'Use [render]...[/render] to type text, [wait]Ms[/wait] to pause, and [undo /] to delete. loop="true" replays the sequence. Only [render], [wait], and [undo] shortcodes are parsed — plain text between actions is ignored.'
+  ));
+
+  section5.appendChild(makeNote('Enable the Domma Effects plugin to activate these shortcodes on your site.'));
 
   wrap.appendChild(section5);
 
+  // --- Section 6: Tables shortcode ---
+  const section6t = document.createElement('div');
+  section6t.appendChild(makeH3('Tables'));
+  section6t.appendChild(makeNote('Wrap a standard Markdown (GFM) table with Domma CSS classes and responsive horizontal scrolling.'));
+
+  const tableAttrTable = document.createElement('table');
+  tableAttrTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
+  [
+    ['striped="true"', 'Alternate row background (.table-striped)'],
+    ['bordered="true"', 'Borders on all cells (.table-bordered)'],
+    ['compact="true"', 'Reduced cell padding (.table-compact)'],
+    ['caption="..."', 'Caption text above the table'],
+    ['class="..."', 'Extra CSS classes appended to .table'],
+    ['id="..."', 'id attribute on the <table> element'],
+  ].forEach(([attr, desc]) => {
+    const tr = document.createElement('tr');
+    const tdCode = document.createElement('td');
+    tdCode.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
+    tdCode.appendChild(makeCode(attr));
+    const tdDesc = document.createElement('td');
+    tdDesc.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);';
+    tdDesc.textContent = desc;
+    tr.appendChild(tdCode);
+    tr.appendChild(tdDesc);
+    tableAttrTable.appendChild(tr);
+  });
+  section6t.appendChild(tableAttrTable);
+
+  section6t.appendChild(makeSnippet(
+    'Striped + bordered table',
+    '[table striped="true" bordered="true" caption="Product Pricing"]\n| Product | Price |\n| ------- | ----: |\n| Widget  | $9.99 |\n| Gadget  | $14.99 |\n[/table]',
+    'The inner content must be a valid GFM Markdown table. The shortcode adds Domma CSS classes and wraps in a responsive scroll container.'
+  ));
+
+  wrap.appendChild(section6t);
+
+  // --- Section 7: Slideover shortcode ---
+  const section6 = document.createElement('div');
+  section6.appendChild(makeH3('Slideover'));
+  section6.appendChild(makeNote('A trigger button that opens a slide-in panel with Markdown content. No plugin required.'));
+
+  const soAttrTable = document.createElement('table');
+  soAttrTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
+  [
+    ['title="..."', 'Panel header text'],
+    ['trigger="..."', 'Button label (default: "Open")'],
+    ['size="sm|md|lg"', 'Panel width (default: md)'],
+    ['position="right|left"', 'Slide direction (default: right)'],
+  ].forEach(([attr, desc]) => {
+    const tr = document.createElement('tr');
+    const tdCode = document.createElement('td');
+    tdCode.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
+    tdCode.appendChild(makeCode(attr));
+    const tdDesc = document.createElement('td');
+    tdDesc.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);';
+    tdDesc.textContent = desc;
+    tr.appendChild(tdCode);
+    tr.appendChild(tdDesc);
+    soAttrTable.appendChild(tr);
+  });
+  section6.appendChild(soAttrTable);
+
+  section6.appendChild(makeSnippet(
+    'Example',
+    '[slideover title="More Info" trigger="Read more" size="md"]\n## Details\nMarkdown content here.\n[/slideover]',
+    'Nested [card] and [grid] shortcodes work inside the slideover body.'
+  ));
+
+  wrap.appendChild(section6);
+
+  // --- Section 7: DConfig ---
+  const section7 = document.createElement('div');
+  section7.appendChild(makeH3('DConfig — Declarative Behaviour'));
+  section7.appendChild(makeNote('Define click handlers and class toggles without writing JavaScript. Use the DConfig section above or embed inline with [dconfig]...[/dconfig] in the content body. Inline shortcodes win on selector conflict.'));
+
+  section7.appendChild(makeSnippet(
+    'Toggle a class on click',
+    '{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }',
+    'Selector keys use standard CSS selectors. "target" is optional — defaults to the element itself.'
+  ));
+
+  section7.appendChild(makeSnippet(
+    'Inline shortcode syntax',
+    '[dconfig]\n{ "#my-btn": { "events": { "click": { "target": "#panel", "toggleClass": "hidden" } } } }\n[/dconfig]',
+    null
+  ));
+
+  wrap.appendChild(section7);
+
   so.setContent(wrap);
   so.open();
 }
@@ -238,7 +416,6 @@ function openEditorHelp() {
 // Module-level state for unsaved-changes guard
 let _dirty = false;
 let _beforeUnload = null;
-let _saveShortcut = null;
 let _guardRegistered = false;
 
 export const pageEditorView = {
@@ -281,6 +458,9 @@ export const pageEditorView = {
           $container.find('#field-visibility').val(page.visibility || 'public');
             $container.find('#field-seo-title').val(page.seo?.title || '');
             $container.find('#field-seo-desc').val(page.seo?.description || '');
+          if (page.dconfig) {
+            $container.find('#field-dconfig').val(JSON.stringify(page.dconfig, null, 2));
+          }
         }
 
         // Layouts dropdown
@@ -290,6 +470,9 @@ export const pageEditorView = {
             $layoutSelect.append(`<option value="${key}" ${selected}>${preset.label || key}</option>`);
         });
 
+      // Initialise meta tabs
+      E.tabs($container.find('#editor-meta-tabs').get(0));
+
         // Markdown editor + live preview
         const $editor = $container.find('#markdown-editor');
         const $preview = $container.find('#markdown-preview');
@@ -402,10 +585,6 @@ export const pageEditorView = {
           E.confirm('You have unsaved changes. Leave this page?').then(ok => {
             if (ok) {
               _dirty = false;
-              if (_saveShortcut) {
-                document.removeEventListener('keydown', _saveShortcut);
-                _saveShortcut = null;
-              }
               next();
             }
           });
@@ -423,6 +602,18 @@ export const pageEditorView = {
             const enteredPath = $container.find('#page-url-path').val().trim();
             if (!enteredPath) { E.toast('URL path is required.', { type: 'warning' }); return; }
 
+          // Validate DConfig JSON before save attempt
+          const dconfigRaw = $container.find('#field-dconfig').val().trim();
+          let dconfig = null;
+          if (dconfigRaw) {
+            try {
+              dconfig = JSON.parse(dconfigRaw);
+            } catch {
+              E.toast('DConfig JSON is invalid. Please check the format before saving.', {type: 'warning'});
+              return;
+            }
+          }
+
             const frontmatter = {
                 title: $container.find('#field-title').val().trim() || 'Untitled',
                 description: $container.find('#field-description').val().trim(),
@@ -436,7 +627,8 @@ export const pageEditorView = {
                 seo: {
                     title: $container.find('#field-seo-title').val().trim(),
                     description: $container.find('#field-seo-desc').val().trim()
-                }
+                },
+              dconfig
             };
 
             try {
@@ -461,16 +653,6 @@ export const pageEditorView = {
             }
         });
 
-      // Ctrl+S / Cmd+S → save
-      if (_saveShortcut) document.removeEventListener('keydown', _saveShortcut);
-      _saveShortcut = (e) => {
-        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
-          e.preventDefault();
-          $container.find('#save-btn').get(0).click();
-        }
-      };
-      document.addEventListener('keydown', _saveShortcut);
-
         // Cancel
         $container.find('#cancel-btn').on('click', () => R.navigate('/pages'));
 

package/admin/js/views/pages.js

@@ -14,13 +14,21 @@ export const pagesView = {
             T.create('#pages-table', {
                 data,
                 columns: [
-                    { key: 'title', label: 'Title', render: (val, row) => `<a href="#/pages/edit${row.urlPath}">${val}</a>` },
-                    { key: 'urlPath', label: 'URL', render: (val) => `<code>${val}</code>` },
-                    { key: 'layout', label: 'Layout' },
-                    { 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: 'title',
+                    title: 'Title',
+                    render: (val, row) => `<a href="#/pages/edit${row.urlPath}">${val}</a>`
+                  },
+                  {key: 'urlPath', title: 'URL', render: (val) => `<code>${val}</code>`},
+                  {key: 'layout', title: 'Layout'},
+                  {
+                    key: 'status',
+                    title: 'Status',
+                    render: (val) => `<span class="badge badge-${val === 'published' ? 'success' : 'warning'}">${val}</span>`
+                  },
+                  {key: 'updatedAt', title: 'Updated', render: (val) => val ? D(val).format('DD MMM YYYY') : '—'},
                     {
-                        key: 'actions', label: 'Actions',
+                      key: 'actions', title: 'Actions',
                         render: (_, row) => `
                             <a href="#/pages/edit${row.urlPath}" class="btn btn-sm btn-outline">Edit</a>
                             <a href="${row.urlPath}" target="_blank" class="btn btn-sm btn-ghost" data-tooltip="View"><span data-icon="external-link"></span></a>