domma-cms 0.1.0

package/admin/js/templates/documentation.html

@@ -0,0 +1,237 @@
+<div class="view-header">
+  <h1><span data-icon="book"></span> Usage</h1>
+</div>
+
+<div class="row">
+  <div class="col-12">
+
+    <!-- Pages -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="file-text"></span> Pages</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Pages are stored as Markdown files in <code>content/pages/</code>. Each file has a YAML frontmatter block at
+          the top followed by the page body in Markdown.</p>
+
+        <h3>URL mapping</h3>
+        <table class="table table-sm">
+          <thead>
+          <tr>
+            <th>File path</th>
+            <th>Public URL</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td><code>content/pages/index.md</code></td>
+            <td><code>/</code></td>
+          </tr>
+          <tr>
+            <td><code>content/pages/about.md</code></td>
+            <td><code>/about</code></td>
+          </tr>
+          <tr>
+            <td><code>content/pages/blog/index.md</code></td>
+            <td><code>/blog</code></td>
+          </tr>
+          <tr>
+            <td><code>content/pages/blog/hello-world.md</code></td>
+            <td><code>/blog/hello-world</code></td>
+          </tr>
+          </tbody>
+        </table>
+
+        <h3>Frontmatter reference</h3>
+        <pre class="code-block"><code>---
+title: My Page
+description: A short description for SEO meta tags.
+status: published        # published | draft  (draft pages return 404)
+layout: default          # layout name from config/presets.json
+tags: [one, two]         # optional taxonomy
+updatedAt: 2026-03-01    # auto-set on save
+---
+
+# Page heading
+
+Your Markdown content goes here.</code></pre>
+
+        <h3>Drafts</h3>
+        <p>Pages with <code>status: draft</code> are never served on the public site — they return a 404. Toggle status
+          in the Page Editor to publish.</p>
+
+        <h3>Layouts</h3>
+        <p>Layouts are defined in <code>config/presets.json</code> and apply CSS class wrappers around page content.
+          Select a layout per-page in the editor, or change the default in Site Settings.</p>
+      </div>
+    </div>
+
+    <!-- Media -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="image"></span> Media</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Media files are stored in <code>content/media/</code> and served publicly at <code>/media/{filename}</code>.
+        </p>
+
+        <h3>Using media in pages</h3>
+        <p>Reference uploaded files by their public URL in Markdown:</p>
+        <pre class="code-block"><code>![Alt text](/media/my-image.jpg)
+
+&lt;img src="/media/my-image.jpg" alt="Alt text"&gt;</code></pre>
+
+        <h3>Upload limits</h3>
+        <p>The maximum file size is configured in <code>config/server.json</code> under <code>uploads.maxFileSize</code>
+          (bytes). Default is 10 MB.</p>
+      </div>
+    </div>
+
+    <!-- Navigation -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="menu"></span> Navigation</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>The navigation tree is stored in <code>config/navigation.json</code> and injected into every public page as
+          <code>window.__CMS_NAV__</code>.</p>
+
+        <h3>Dropdowns</h3>
+        <p>Nest items under a parent using the drag-and-drop tree in the Navigation editor. Child items are stored under
+          the <code>items</code> key — the public navbar renders them as a dropdown.</p>
+
+        <h3>External links</h3>
+        <p>Set the URL to a full <code>https://</code> address to link outside the site. Leave blank for section
+          headings.</p>
+
+        <h3>Icons</h3>
+        <p>Set the <code>icon</code> field to any registered icon name. Icons appear in the navbar link alongside the
+          label.</p>
+      </div>
+    </div>
+
+    <!-- Settings -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="settings"></span> Site Settings</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Site Settings are stored in <code>config/site.json</code> and editable from the Settings page in the admin
+          panel.</p>
+
+        <table class="table table-sm">
+          <thead>
+          <tr>
+            <th>Field</th>
+            <th>Description</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td><code>siteName</code></td>
+            <td>Site title used in the public navbar and browser tab.</td>
+          </tr>
+          <tr>
+            <td><code>tagline</code></td>
+            <td>Subtitle shown in the public site footer.</td>
+          </tr>
+          <tr>
+            <td><code>adminTheme</code></td>
+            <td>Admin panel colour theme (e.g. <code>charcoal-dark</code>, <code>ocean-light</code>).</td>
+          </tr>
+          <tr>
+            <td><code>publicTheme</code></td>
+            <td>Public site theme applied to <code>&lt;html data-theme&gt;</code>.</td>
+          </tr>
+          <tr>
+            <td><code>defaultLayout</code></td>
+            <td>Fallback layout for pages that don't specify one.</td>
+          </tr>
+          </tbody>
+        </table>
+
+        <h3>Server configuration</h3>
+        <p>Low-level settings (port, CORS, upload size) live in <code>config/server.json</code> and require a server
+          restart to take effect. These are not editable from the admin panel.</p>
+      </div>
+    </div>
+
+    <!-- Plugins -->
+    <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> Plugins</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Plugins extend the CMS with new server routes, admin views, and public-site injection snippets. Each plugin
+          is a directory under <code>plugins/</code>.</p>
+
+        <h3>Enabling and disabling</h3>
+        <p>Use the Plugins page in the admin to toggle plugins on or off. State is saved to
+          <code>config/plugins.json</code>. <strong>A server restart is required for changes to take effect.</strong>
+        </p>
+
+        <h3>Plugin settings</h3>
+        <p>Plugins that expose a settings page will appear as a link in the sidebar under the Plugins section. Settings
+          are merged with the plugin's defaults from <code>config.js</code> and saved to
+          <code>config/plugins.json</code>.</p>
+
+        <h3>Security</h3>
+        <p>Only files inside a plugin's <code>admin/</code> and <code>public/</code> subdirectories are served
+          statically. Server files (<code>plugin.js</code>, <code>config.js</code>, <code>data/</code>) are blocked and
+          return 404.</p>
+
+        <p>See the <a href="#/tutorials">Tutorials</a> section for a guide to writing your own plugin.</p>
+      </div>
+    </div>
+
+    <!-- Users -->
+    <div class="card card-collapsible mb-4">
+      <div class="card-header" role="button" tabindex="0">
+        <div class="card-header-content"><h2><span data-icon="users"></span> Users &amp; Roles</h2></div>
+        <span class="card-collapse-icon" data-icon="chevron-down"></span>
+      </div>
+      <div class="card-body docs-body">
+        <p>Users are stored as individual JSON files in <code>content/users/</code>. Passwords are hashed with bcrypt
+          and never returned by the API.</p>
+
+        <h3>Roles</h3>
+        <table class="table table-sm">
+          <thead>
+          <tr>
+            <th>Role</th>
+            <th>Access</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+            <td><strong>Admin</strong></td>
+            <td>Full access — users, plugins, settings, all content.</td>
+          </tr>
+          <tr>
+            <td><strong>Manager</strong></td>
+            <td>Content + structure (navigation, layouts). No users or plugins.</td>
+          </tr>
+          <tr>
+            <td><strong>Editor</strong></td>
+            <td>Pages and media only.</td>
+          </tr>
+          <tr>
+            <td><strong>Subscriber</strong></td>
+            <td>Read-only access to the API.</td>
+          </tr>
+          </tbody>
+        </table>
+
+        <h3>Authentication</h3>
+        <p>The admin panel uses JWT Bearer tokens. Tokens are stored in the browser and automatically refreshed.
+          Sessions expire according to <code>config/auth.json</code> — default is 24 hours.</p>
+      </div>
+    </div>
+
+  </div>
+</div>

package/admin/js/templates/layouts.html

@@ -0,0 +1,11 @@
+<div class="view-header">
+    <h1><span data-icon="layout"></span> Layout Presets</h1>
+    <button id="save-layouts-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+</div>
+
+<p class="text-muted mb-4">
+    Layout presets define which structural elements appear on pages using that layout.
+    Assign a layout to each page via the page editor.
+</p>
+
+<div id="presets-grid" class="presets-grid"></div>

package/admin/js/templates/login.html

@@ -0,0 +1,58 @@
+<div class="login-wrap">
+    <div class="login-card card">
+        <div class="card-body">
+            <div class="login-logo">
+                <span data-icon="layout"></span>
+                <h1>Domma CMS</h1>
+            </div>
+
+            <!-- ── Step 1: Setup (first-time — no users exist) ── -->
+            <div id="setup-panel" style="display:none">
+                <h2 class="login-heading">Welcome — create your admin account</h2>
+                <p class="text-muted mb-4">This is a first-time setup. Set up your administrator account to get started.</p>
+                <div id="setup-form-container"></div>
+            </div>
+
+            <!-- ── Step 2: Onboarding — Site Identity ── -->
+            <div id="onboarding-site-panel" style="display:none">
+                <h2 class="login-heading">Name your site</h2>
+                <p class="text-muted mb-4">You can change these any time from Settings.</p>
+                <div class="form-group mb-3">
+                    <label class="form-label" for="ob-title">Site title</label>
+                    <input type="text" id="ob-title" class="form-control" placeholder="My Blog">
+                </div>
+                <div class="form-group mb-4">
+                    <label class="form-label" for="ob-tagline">Tagline <span class="text-muted">(optional)</span></label>
+                    <input type="text" id="ob-tagline" class="form-control" placeholder="A short description of your site">
+                </div>
+                <div id="ob-site-error" class="alert alert-danger mb-3" style="display:none"></div>
+                <button id="ob-site-btn" class="btn btn-primary btn-block">Continue</button>
+                <a href="#" id="ob-site-skip" class="btn-skip">Skip this step</a>
+            </div>
+
+            <!-- ── Step 3: Onboarding — Theme Picker ── -->
+            <div id="onboarding-theme-panel" style="display:none">
+                <h2 class="login-heading">Choose a theme</h2>
+                <p class="text-muted mb-3">Pick the colour scheme for your site. You can change it later.</p>
+                <div class="theme-grid" id="theme-grid"></div>
+                <div id="ob-theme-error" class="alert alert-danger mb-3" style="display:none"></div>
+                <button id="ob-theme-btn" class="btn btn-primary btn-block mt-3">Apply theme</button>
+                <a href="#" id="ob-theme-skip" class="btn-skip">Skip this step</a>
+            </div>
+
+            <!-- ── Step 4: Onboarding — Done ── -->
+            <div id="onboarding-done-panel" style="display:none">
+                <div class="ob-done-icon"><span data-icon="check-circle"></span></div>
+                <h2 class="login-heading">You're all set!</h2>
+                <p class="text-muted mb-4">Your site is ready. Head to the dashboard to start creating content.</p>
+                <a href="#/" id="ob-go-btn" class="btn btn-primary btn-block">Go to dashboard</a>
+            </div>
+
+            <!-- ── Login mode ── -->
+            <div id="login-panel" style="display:none">
+                <h2 class="login-heading">Sign in</h2>
+                <div id="login-form-container"></div>
+            </div>
+        </div>
+    </div>
+</div>

package/admin/js/templates/media.html

@@ -0,0 +1,16 @@
+<div class="view-header">
+    <h1><span data-icon="image"></span> Media</h1>
+    <div class="view-header-actions">
+        <input id="file-input" type="file" multiple accept="image/*,video/*,.pdf,.svg" style="display:none">
+        <button id="upload-btn" class="btn btn-primary"><span data-icon="upload"></span> Upload</button>
+    </div>
+</div>
+
+<p class="text-muted mb-4">
+    Uploaded files are stored in <code>content/media/</code>.
+    Use the copy button to get a URL you can embed in your pages.
+</p>
+
+<div id="media-grid" class="media-grid">
+    <p class="text-muted">Loading…</p>
+</div>

package/admin/js/templates/navigation.html

@@ -0,0 +1,50 @@
+<div class="view-header">
+    <h1><span data-icon="menu"></span> Navigation</h1>
+    <button id="save-nav-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>Brand</h2></div>
+    <span class="card-collapse-icon" data-icon="chevron-down"></span>
+  </div>
+    <div class="card-body">
+        <div class="row">
+            <div class="col-5">
+                <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">
+                <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">Variant</label>
+                <select id="field-nav-variant" class="form-select">
+                    <option value="dark">Dark</option>
+                    <option value="light">Light</option>
+                    <option value="transparent">Transparent</option>
+                </select>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card card-collapsible">
+  <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>
+    <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-indent"></span>
+            <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-icon text-muted"><small>Icon</small></span>
+            <span class="nav-col-parent text-muted"><small>Parent</small></span>
+            <span class="nav-col-action"></span>
+        </div>
+        <div id="nav-items-list"></div>
+    </div>
+</div>

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

@@ -0,0 +1,126 @@
+<div class="view-header">
+    <h1 id="editor-title"><span data-icon="edit"></span> Page Editor</h1>
+    <div class="view-header-actions">
+        <button id="cancel-btn" class="btn btn-ghost">Cancel</button>
+        <button id="save-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+    </div>
+</div>
+
+<!-- URL path (only editable when creating) -->
+<div class="card mb-3">
+    <div class="card-body">
+        <div class="row">
+            <div class="col">
+                <label class="form-label">URL Path</label>
+                <input id="page-url-path" type="text" class="form-input" placeholder="/about or /services/web-dev">
+                <small class="form-hint">The URL where this page will live. Changing this will update any navigation links pointing to the old URL.</small>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Frontmatter fields -->
+<div class="card card-collapsible mb-3">
+  <div class="card-header" role="button" tabindex="0">
+    <div class="card-header-content"><h2>Page Details</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">Title *</label>
+                <input id="field-title" type="text" class="form-input" placeholder="Page title">
+            </div>
+            <div class="col-3">
+                <label class="form-label">Layout</label>
+                <select id="field-layout" class="form-select"></select>
+            </div>
+            <div class="col-3">
+                <label class="form-label">Status</label>
+                <select id="field-status" class="form-select">
+                    <option value="draft">Draft</option>
+                    <option value="published">Published</option>
+                </select>
+            </div>
+        </div>
+        <div class="row mb-3">
+            <div class="col-8">
+                <label class="form-label">Description</label>
+                <input id="field-description" type="text" class="form-input" placeholder="Short description">
+            </div>
+            <div class="col-4">
+                <label class="form-label">Sort Order</label>
+                <input id="field-sort-order" type="number" class="form-input" value="99" min="0">
+            </div>
+        </div>
+      <div class="row mb-3">
+        <div class="col-6">
+          <label class="form-label">Category</label>
+          <input id="field-category" type="text" class="form-input" placeholder="e.g. news, docs, products">
+        </div>
+        <div class="col-6">
+          <label class="form-label">Visibility</label>
+          <select id="field-visibility" class="form-select">
+            <option value="public">Public — everyone</option>
+            <option value="subscriber">Subscribers &amp; above</option>
+            <option value="editor">Editors &amp; above</option>
+            <option value="manager">Managers &amp; above</option>
+            <option value="admin">Admins only</option>
+          </select>
+        </div>
+      </div>
+        <div class="row">
+            <div class="col-auto">
+                <label class="form-check-label">
+                    <input id="field-show-in-nav" type="checkbox" class="form-check"> Show in Navigation
+                </label>
+            </div>
+            <div class="col-auto">
+                <label class="form-check-label">
+                    <input id="field-sidebar" type="checkbox" class="form-check"> Show Sidebar
+                </label>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- SEO fields -->
+<div class="card card-collapsible mb-3">
+  <div class="card-header" role="button" tabindex="0">
+    <div class="card-header-content"><h2>SEO</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">
+                <label class="form-label">SEO Title</label>
+                <input id="field-seo-title" type="text" class="form-input" placeholder="Overrides default title">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <label class="form-label">SEO Description</label>
+                <input id="field-seo-desc" type="text" class="form-input" placeholder="Overrides default description">
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Markdown editor + preview -->
+<div class="card editor-card">
+    <div class="card-body p-0">
+      <div class="editor-toolbar" id="editor-toolbar"></div>
+      <div class="editor-body" id="editor-body">
+        <div class="editor-pane editor-pane--write">
+          <textarea id="markdown-editor" class="editor-textarea"
+                    placeholder="Write your page content in Markdown..."></textarea>
+        </div>
+        <div class="editor-divider"></div>
+        <div class="editor-pane editor-pane--preview">
+          <div id="markdown-preview" class="editor-preview"></div>
+        </div>
+      </div>
+    </div>
+</div>
+
+<div id="media-picker-modal"></div>

package/admin/js/templates/pages.html

@@ -0,0 +1,18 @@
+<div class="view-header">
+    <h1><span data-icon="file-text"></span> Pages</h1>
+    <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
+</div>
+
+<div class="toolbar mb-3">
+    <select id="status-filter" class="form-select form-select-sm" style="width:auto">
+        <option value="">All statuses</option>
+        <option value="published">Published</option>
+        <option value="draft">Draft</option>
+    </select>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div id="pages-table"></div>
+    </div>
+</div>

package/admin/js/templates/plugins.html

@@ -0,0 +1,12 @@
+<div class="view-header">
+    <h1><span data-icon="package"></span> Plugins</h1>
+    <p class="text-muted" style="margin:0;font-size:.875rem">Plugins extend the CMS with new features. Changes take effect after a server restart.</p>
+</div>
+
+<div id="plugins-empty" class="card" style="display:none">
+    <div class="card-body text-muted">
+        No plugins found. Drop a plugin folder into the <code>plugins/</code> directory to get started.
+    </div>
+</div>
+
+<div id="plugins-grid" class="plugins-grid"></div>