domma-cms 0.1.0 → 0.2.0

package/admin/css/admin.css

@@ -108,11 +108,52 @@
     margin-top: .25rem;
 }
 
+/* ─── Page editor: lock to viewport, no outer scroll ─────────────────────── */
+.dashboard-main:has(#editor-meta-tabs) {
+    overflow: hidden;
+}
+
+.view-container:has(#editor-meta-tabs) {
+    display: flex;
+    flex-direction: column;
+    height: calc(100dvh - 60px); /* 60px = topbar */
+    padding-bottom: 0;
+}
+
+#editor-meta-tabs {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+
+#editor-meta-tabs .tab-content {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+#editor-meta-tabs .tab-panel {
+    height: 100%;
+    overflow-y: auto;
+}
+
+#editor-meta-tabs .tab-panel:has(.editor-card) {
+    overflow: hidden;
+}
+
+.editor-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
 /* Markdown editor */
 .editor-card .card-body {
     display: flex;
     flex-direction: column;
-    min-height: 500px;
+    flex: 1;
+    min-height: 0;
     padding: 0 !important;
 }
 
@@ -1121,3 +1162,39 @@
     white-space: nowrap;
     max-width: 72px;
 }
+
+/* ── Slideover ───────────────────────────────────────────────────────────── */
+
+.dm-slideover-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: .75rem 1rem;
+    border-bottom: 1px solid var(--dm-border, #333);
+    flex-shrink: 0;
+}
+
+.dm-slideover-title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.dm-slideover-close {
+    padding: .2rem .35rem !important;
+    line-height: 1;
+    font-size: .75rem;
+}
+
+.dm-slideover-body {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+/* DConfig textarea — monospace for JSON editing */
+.dconfig-textarea {
+    font-family: monospace;
+    min-height: 100px;
+    resize: vertical;
+}

package/admin/js/api.js

@@ -181,6 +181,38 @@ export const api = {
         list: () => apiRequest('/plugins', { method: 'GET' }),
         update: (name, data) => apiRequest(`/plugins/${name}`, { method: 'PUT', body: JSON.stringify(data) }),
         adminConfig: () => apiRequest('/plugins/admin-config', { method: 'GET' })
+    },
+
+    // Collections
+    collections: {
+        list:         ()           => apiRequest('/collections', { method: 'GET' }),
+        get:          (slug)       => apiRequest(`/collections/${slug}`, { method: 'GET' }),
+        create:       (data)       => apiRequest('/collections', { method: 'POST', body: JSON.stringify(data) }),
+        update:       (slug, data) => apiRequest(`/collections/${slug}`, { method: 'PUT', body: JSON.stringify(data) }),
+        delete:       (slug)       => apiRequest(`/collections/${slug}`, { method: 'DELETE' }),
+
+        listEntries:  (slug, params = {}) => {
+            const qs = new URLSearchParams(params).toString();
+            return apiRequest(`/collections/${slug}/entries${qs ? '?' + qs : ''}`, { method: 'GET' });
+        },
+        getEntry:     (slug, id)       => apiRequest(`/collections/${slug}/entries/${id}`, { method: 'GET' }),
+        createEntry:  (slug, data)     => apiRequest(`/collections/${slug}/entries`, { method: 'POST', body: JSON.stringify({ data }) }),
+        updateEntry:  (slug, id, data) => apiRequest(`/collections/${slug}/entries/${id}`, { method: 'PUT', body: JSON.stringify({ data }) }),
+        deleteEntry:  (slug, id)       => apiRequest(`/collections/${slug}/entries/${id}`, { method: 'DELETE' }),
+        clearEntries: (slug)           => apiRequest(`/collections/${slug}/entries`, { method: 'DELETE' }),
+
+        import:       (slug, entries)  => apiRequest(`/collections/${slug}/import`, { method: 'POST', body: JSON.stringify({ entries }) }),
+
+        // Public API (no auth needed when collection is public)
+        publicList:   (slug, params = {}) => {
+            const qs = new URLSearchParams(params).toString();
+            return apiRequest(`/collections/${slug}/public${qs ? '?' + qs : ''}`, { method: 'GET' });
+        }
+    },
+
+    // Settings (extended)
+    settingsExt: {
+        testEmail: (to) => apiRequest('/settings/test-email', { method: 'POST', body: JSON.stringify({ to }) })
     }
 };
 

package/admin/js/app.js

@@ -40,17 +40,19 @@ $(() => {
     async function fetchSidebarCounts() {
         if (!isAuthenticated()) return {};
         try {
-            const [pages, media, users, plugins] = await Promise.all([
+            const [pages, media, users, plugins, collections] = await Promise.all([
                 api.pages.list().catch(() => []),
                 api.media.list().catch(() => []),
                 api.users.list().catch(() => []),
-                api.plugins.list().catch(() => [])
+                api.plugins.list().catch(() => []),
+                api.collections.list().catch(() => [])
             ]);
             return {
-                pages:   pages.length,
-                media:   media.length,
-                users:   users.length,
-                plugins: plugins.filter(p => p.enabled).length || plugins.length
+                pages:       pages.length,
+                media:       media.length,
+                users:       users.length,
+                plugins:     plugins.filter(p => p.enabled).length || plugins.length,
+                collections: collections.length
             };
         } catch {
             return {};
@@ -132,6 +134,10 @@ $(() => {
       {path: '/plugins', view: 'plugins', title: 'Plugins - Domma CMS'},
       {path: '/documentation', view: 'documentation', title: 'Usage - Domma CMS'},
       {path: '/tutorials', view: 'tutorials', title: 'Tutorials - Domma CMS'},
+      {path: '/collections',              view: 'collections',       title: 'Collections - Domma CMS'},
+      {path: '/collections/new',          view: 'collectionEditor',  title: 'New Collection - Domma CMS'},
+      {path: '/collections/edit/:slug',   view: 'collectionEditor',  title: 'Edit Collection - Domma CMS'},
+      {path: '/collections/:slug/entries',view: 'collectionEntries', title: 'Entries - Domma CMS'},
         { path: '/login',          view: 'login',        title: 'Sign in - Domma CMS',
           onEnter: () => {
               $('#admin-sidebar').hide();
@@ -166,7 +172,18 @@ $(() => {
   $('#view-container').on('click', '.card-collapsible .card-header', function (e) {
     if ($(e.target).closest('button, a').length) return;
     $(this).closest('.card').toggleClass('card-collapsed');
-    });
+  });
+
+  // Global Ctrl+S / Cmd+S — click the primary save button in any view
+  document.addEventListener('keydown', (e) => {
+    if (!(e.ctrlKey || e.metaKey) || e.key !== 's') return;
+    if (window.location.hash === '#/login') return;
+    const saveBtn = document.querySelector('#view-container .view-header button.btn-primary');
+    if (saveBtn) {
+      e.preventDefault();
+      saveBtn.click();
+    }
+  });
 
     // -------------------------------------------------------------------------
     // Dynamic plugin routes (loaded before R.init)

package/admin/js/config/sidebar-config.js

@@ -38,6 +38,14 @@ export function getSidebarConfig(role, counts = {}, pluginItems = []) {
     {id: 'media', text: 'Media', icon: 'image', url: '#/media', section: '#/media', badge: badge(counts.media)}
   );
 
+  if (canStructure) {
+    items.push(
+      {divider: true},
+      {heading: 'Data'},
+      {id: 'collections', text: 'Collections', icon: 'database', url: '#/collections', section: '#/collections', badge: badge(counts.collections)}
+    );
+  }
+
   items.push(
     {divider: true},
     {heading: 'Configuration'}

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

@@ -0,0 +1,80 @@
+<div class="view-header">
+    <h1 id="editor-title"><span data-icon="database"></span> <span id="editor-title-text">New Collection</span></h1>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <a href="#/collections" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> All Collections
+        </a>
+        <button id="save-collection-btn" class="btn btn-primary">
+            <span data-icon="save"></span> Save
+        </button>
+    </div>
+</div>
+
+<div class="tabs" id="collection-tabs">
+    <div class="tab-list">
+        <button class="tab-item active">Settings</button>
+        <button class="tab-item">Fields</button>
+        <button class="tab-item">API Access</button>
+    </div>
+    <div class="tab-content">
+
+        <!-- Settings tab -->
+        <div class="tab-panel active">
+            <div class="card mb-4">
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <div class="col-7">
+                            <label class="form-label">Title</label>
+                            <input id="field-title" type="text" class="form-input" placeholder="e.g. Products">
+                        </div>
+                        <div class="col-5">
+                            <label class="form-label">Slug</label>
+                            <input id="field-slug" type="text" class="form-input" placeholder="products">
+                            <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;" id="slug-hint">Auto-generated from title. Cannot be changed after creation.</p>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <label class="form-label">Description</label>
+                            <textarea id="field-description" class="form-input" rows="2" placeholder="Optional description…"></textarea>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Fields tab -->
+        <div class="tab-panel">
+            <div class="card mb-4">
+                <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
+                    <h2>Fields</h2>
+                    <button id="add-field-btn" class="btn btn-ghost btn-sm" type="button">
+                        <span data-icon="plus"></span> Add Field
+                    </button>
+                </div>
+                <div class="card-body" style="padding:0;">
+                    <div id="fields-list" style="padding:1rem;">
+                        <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet. Click "Add Field" to get started.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- API Access tab -->
+        <div class="tab-panel">
+            <div class="card mb-4">
+                <div class="card-header">
+                    <h2>Public API Access</h2>
+                </div>
+                <div class="card-body">
+                    <p class="text-muted mb-4" style="font-size:.875rem;">Control which operations are available via the public API (<code>/api/collections/{slug}/public</code>). Admin endpoints are always protected by role.</p>
+
+                    <div id="api-access-rows">
+                        <!-- Rows built by JS -->
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

package/admin/js/templates/collection-entries.html

@@ -0,0 +1,36 @@
+<div class="view-header">
+    <h1><span data-icon="database"></span> <span id="entries-title">Entries</span></h1>
+    <div style="display:flex;gap:.5rem;align-items:center;">
+        <a href="#/collections" class="btn btn-ghost btn-sm">
+            <span data-icon="arrow-left"></span> Collections
+        </a>
+        <a id="edit-schema-btn" href="#/collections" class="btn btn-ghost btn-sm">
+            <span data-icon="edit-3"></span> Edit Schema
+        </a>
+        <button id="import-btn" class="btn btn-ghost btn-sm">
+            <span data-icon="upload"></span> Import
+        </button>
+        <button id="export-btn" class="btn btn-ghost btn-sm">
+            <span data-icon="download"></span> Export
+        </button>
+        <button id="clear-all-btn" class="btn btn-danger btn-sm">
+            <span data-icon="trash-2"></span> Clear All
+        </button>
+        <button id="add-entry-btn" class="btn btn-primary">
+            <span data-icon="plus"></span> Add Entry
+        </button>
+    </div>
+</div>
+
+<div class="card mb-3">
+    <div class="card-body" style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;">
+        <input id="entry-search" type="text" class="form-input" placeholder="Search entries…" style="flex:1;min-width:200px;">
+        <span id="entry-count" class="text-muted" style="white-space:nowrap;font-size:.85rem;"></span>
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="entries-table"></div>
+    </div>
+</div>

package/admin/js/templates/collections.html

@@ -0,0 +1,12 @@
+<div class="view-header">
+    <h1><span data-icon="database"></span> Collections</h1>
+    <button id="create-collection-btn" class="btn btn-primary">
+        <span data-icon="plus"></span> New Collection
+    </button>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="collections-table"></div>
+    </div>
+</div>

package/admin/js/templates/documentation.html

@@ -113,6 +113,142 @@ Your Markdown content goes here.</code></pre>
       </div>
     </div>
 
+    <!-- Domma Config -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="zap"></span> Domma Config (DConfig)</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>DConfig lets you wire up declarative behaviour on any public page — no JavaScript required. Define event
+          handlers and class toggles in JSON; the page runtime applies them automatically on load.</p>
+
+        <p>DConfig can be set in two ways, and both are merged at runtime (inline shortcode wins on selector
+          conflict):</p>
+        <ul>
+          <li><strong>Page editor</strong> — the <em>DConfig</em> collapsible section accepts a JSON blob stored in page
+            frontmatter and injected as <code>window.__CMS_DCONFIG__</code>.
+          </li>
+          <li><strong>Inline shortcode</strong> — place one or more <code>[dconfig]…[/dconfig]</code> blocks directly in
+            the page body Markdown.
+          </li>
+        </ul>
+
+        <h3>Schema</h3>
+        <pre class="code-block"><code>{
+  "#selector": {
+    "events": {
+      "eventName": {
+        "target": "#target-selector",
+        "action": "value"
+      }
+    }
+  }
+}</code></pre>
+
+        <p>Multiple selectors and multiple event types can appear in a single config block.</p>
+
+        <h3>Supported events</h3>
+        <table class="table table-sm">
+          <thead>
+          <tr>
+            <th>Event</th>
+            <th>Description</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td><code>click</code></td>
+            <td>Fires when the selector element is clicked.</td>
+          </tr>
+          </tbody>
+        </table>
+
+        <h3>Supported actions</h3>
+        <table class="table table-sm">
+          <thead>
+          <tr>
+            <th>Action key</th>
+            <th>Value type</th>
+            <th>Description</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td><code>toggleClass</code></td>
+            <td><code>string</code></td>
+            <td>Adds the class if absent, removes it if present, on the <code>target</code> element. Typical use:
+              show/hide content with a <code>hidden</code> class.
+            </td>
+          </tr>
+          </tbody>
+        </table>
+
+        <p><em>Additional actions (addClass, removeClass, setAttribute, scroll-to) are planned for future releases.</em>
+        </p>
+
+        <h3>Targeting shortcode elements with <code>id</code></h3>
+        <p>All shortcodes support an <code>id</code> attribute, which is written directly onto the generated element.
+          Use this instead of raw HTML when you want DConfig to target a card, column, or grid:</p>
+        <pre class="code-block"><code>[card id="my-panel" title="Hidden Details"]
+Content goes here.
+[/card]
+
+[dconfig]
+{
+  "#my-btn": {
+    "events": {
+      "click": { "target": "#my-panel", "toggleClass": "hidden" }
+    }
+  }
+}
+[/dconfig]</code></pre>
+        <p>Supported on: <code>[card]</code>, <code>[col]</code>, <code>[row]</code>, <code>[grid]</code>.</p>
+
+        <h3>Using the <code>[dconfig]</code> shortcode</h3>
+        <pre class="code-block"><code>[dconfig]
+{
+  "#my-btn": {
+    "events": {
+      "click": { "target": "#my-panel", "toggleClass": "hidden" }
+    }
+  }
+}
+[/dconfig]
+
+&lt;button id="my-btn" class="btn btn-primary"&gt;Toggle&lt;/button&gt;
+
+&lt;div id="my-panel" class="card hidden"&gt;
+  &lt;div class="card-body"&gt;Hidden content.&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+        <h3>Multiple selectors</h3>
+        <p>Any number of selectors can appear in one block. Selectors are matched with
+          <code>document.querySelector</code> — use IDs, classes, or attribute selectors.</p>
+        <pre class="code-block"><code>[dconfig]
+{
+  "#show-btn": {
+    "events": {
+      "click": { "target": "#panel", "toggleClass": "hidden" }
+    }
+  },
+  "#hide-btn": {
+    "events": {
+      "click": { "target": "#panel", "toggleClass": "hidden" }
+    }
+  }
+}
+[/dconfig]</code></pre>
+
+        <h3>Using the page editor DConfig section</h3>
+        <p>The same JSON (without the shortcode tags) can be pasted directly into the <em>DConfig</em> card in the page
+          editor. This is useful when the config should apply to the whole page without appearing in the body content.
+          Inline <code>[dconfig]</code> shortcodes are applied last and will win on any shared selector key.</p>
+
+        <p>See live demos on the <a href="/resources/interactive" target="_blank">Interactive Resources page</a>.</p>
+      </div>
+    </div>
+
     <!-- Settings -->
     <div class="card card-collapsible mb-4">
       <div class="card-header" role="button" tabindex="0">

package/admin/js/templates/navigation.html

@@ -9,16 +9,20 @@
     <span class="card-collapse-icon" data-icon="chevron-down"></span>
   </div>
     <div class="card-body">
-        <div class="row">
-            <div class="col-5">
+      <div class="row mb-3">
+        <div class="col-4">
                 <label class="form-label">Site Name</label>
                 <input id="field-brand-text" type="text" class="form-input" placeholder="My Site">
             </div>
-            <div class="col-4">
+        <div class="col-3">
                 <label class="form-label">Brand URL</label>
                 <input id="field-brand-url" type="text" class="form-input" value="/">
             </div>
             <div class="col-3">
+              <label class="form-label">Icon <span class="text-muted" style="font-weight:normal;font-size:.8em;">(optional)</span></label>
+              <input id="field-brand-icon" type="text" class="form-input" placeholder="e.g. star, home">
+            </div>
+        <div class="col-2">
                 <label class="form-label">Variant</label>
                 <select id="field-nav-variant" class="form-select">
                     <option value="dark">Dark</option>
@@ -27,10 +31,12 @@
                 </select>
             </div>
         </div>
+      <p class="form-hint">Icon uses Domma icon names (e.g. <code>star</code>, <code>home</code>, <code>bolt</code>).
+        Leave blank for text-only brand.</p>
     </div>
 </div>
 
-<div class="card card-collapsible">
+<div class="card card-collapsible mb-4">
   <div class="card-header" role="button" tabindex="0">
     <div class="card-header-content"><h2>Menu Items</h2></div>
         <button id="add-nav-item" class="btn btn-sm btn-outline"><span data-icon="plus"></span> Add Item</button>
@@ -48,3 +54,19 @@
         <div id="nav-items-list"></div>
     </div>
 </div>
+
+<div class="card card-collapsible">
+  <div class="card-header" role="button" tabindex="0">
+    <div class="card-header-content"><h2>Footer Links</h2></div>
+    <button id="add-footer-link" class="btn btn-sm btn-outline"><span data-icon="plus"></span> Add Link</button>
+    <span class="card-collapse-icon" data-icon="chevron-down"></span>
+  </div>
+  <div class="card-body p-0">
+    <div class="nav-items-header">
+      <span class="nav-col-main text-muted"><small>Label</small></span>
+      <span class="nav-col-main text-muted"><small>URL</small></span>
+      <span class="nav-col-action"></span>
+    </div>
+    <div id="footer-links-list"></div>
+  </div>
+</div>