domma-cms 0.1.0

package/admin/js/lib/markdown-toolbar.js

@@ -0,0 +1,421 @@
+/**
+ * Markdown Toolbar Module
+ * Provides text manipulation helpers and toolbar rendering for the page editor.
+ */
+
+// Register editor icons not in Domma's built-in set
+function registerIcons() {
+  I.register('bold', {
+    viewBox: '0 0 24 24',
+    path: 'M7 5H14a3 3 0 0 1 0 6H7V5zM7 11H15a3 3 0 0 1 0 6H7V11z',
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('italic', {
+    viewBox: '0 0 24 24',
+    path: 'M11 5h4M9 19h4M13 5l-2 14',
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('strikethrough', {
+    viewBox: '0 0 24 24',
+    path: 'M16 4H9a3 3 0 0 0 0 6h6a3 3 0 0 1 0 6H6M3 12h18',
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('quote', {
+    viewBox: '0 0 24 24',
+    path: 'M3 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1zM15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z',
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('eye', {
+    viewBox: '0 0 24 24',
+    path: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('expand', {
+    viewBox: '0 0 24 24',
+    path: 'M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3',
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('columns', {
+    viewBox: '0 0 24 24',
+    path: 'M3 4h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM12 4v16',
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('card', {
+    viewBox: '0 0 24 24',
+    paths: [
+      'M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z',
+      'M3 9h18'
+    ],
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('help-circle', {
+    viewBox: '0 0 24 24',
+    path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM12 17h.01M12 13a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2',
+    stroke: 'currentColor', fill: 'none', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+  I.register('sparkles', {
+    viewBox: '0 0 24 24',
+    paths: [
+      'M12 3L13.5 8.5H19L14.5 11.5L16 17L12 14L8 17L9.5 11.5L5 8.5H10.5L12 3Z',
+      'M19 3L19.7 5.3H22L20.2 6.6L20.9 9L19 7.7L17.1 9L17.8 6.6L16 5.3H18.3L19 3Z',
+      'M5 13L5.5 14.7H7L5.8 15.5L6.3 17.2L5 16.3L3.7 17.2L4.2 15.5L3 14.7H4.5L5 13Z'
+    ],
+    stroke: 'currentColor', fill: 'none', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round'
+  });
+}
+
+// --- Text manipulation helpers ---
+
+export function wrapSelection(textarea, before, after) {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const value = textarea.value;
+  const selected = value.substring(start, end);
+
+  if (selected) {
+    textarea.value = value.substring(0, start) + before + selected + after + value.substring(end);
+    textarea.selectionStart = start + before.length;
+    textarea.selectionEnd = end + before.length;
+  } else {
+    textarea.value = value.substring(0, start) + before + after + value.substring(start);
+    textarea.selectionStart = textarea.selectionEnd = start + before.length;
+  }
+
+  textarea.dispatchEvent(new Event('input', {bubbles: true}));
+  textarea.focus();
+}
+
+export function insertAtCursor(textarea, text) {
+  const start = textarea.selectionStart;
+  const value = textarea.value;
+  textarea.value = value.substring(0, start) + text + value.substring(start);
+  textarea.selectionStart = textarea.selectionEnd = start + text.length;
+  textarea.dispatchEvent(new Event('input', {bubbles: true}));
+  textarea.focus();
+}
+
+export function insertLine(textarea, prefix) {
+  const start = textarea.selectionStart;
+  const value = textarea.value;
+  const lineStart = value.lastIndexOf('\n', start - 1) + 1;
+  const lineEnd = value.indexOf('\n', lineStart);
+  const lineText = value.substring(lineStart, lineEnd === -1 ? value.length : lineEnd);
+
+  if (lineText.startsWith(prefix)) {
+    // Toggle off: remove the prefix
+    const after = lineEnd === -1 ? '' : value.substring(lineEnd);
+    textarea.value = value.substring(0, lineStart) + lineText.substring(prefix.length) + after;
+    textarea.selectionStart = textarea.selectionEnd = Math.max(lineStart, start - prefix.length);
+  } else {
+    // Toggle on: insert prefix at line start
+    textarea.value = value.substring(0, lineStart) + prefix + value.substring(lineStart);
+    textarea.selectionStart = textarea.selectionEnd = start + prefix.length;
+  }
+
+  textarea.dispatchEvent(new Event('input', {bubbles: true}));
+  textarea.focus();
+}
+
+// --- Effects dropdown ---
+
+const effectsMenuItems = [
+  {category: 'Entrance'},
+  {label: 'Reveal (fade)', snippet: (sel) => `[reveal animation="fade"]\n${sel || 'Content'}\n[/reveal]`},
+  {label: 'Reveal (slide up)', snippet: (sel) => `[reveal animation="slide-up"]\n${sel || 'Content'}\n[/reveal]`},
+  {label: 'Reveal (zoom)', snippet: (sel) => `[reveal animation="zoom"]\n${sel || 'Content'}\n[/reveal]`},
+  {category: 'Animation'},
+  {label: 'Breathe', snippet: (sel) => `[breathe]\n${sel || 'Content'}\n[/breathe]`},
+  {label: 'Pulse', snippet: (sel) => `[pulse]\n${sel || 'Content'}\n[/pulse]`},
+  {label: 'Shake', snippet: (sel) => `[shake]\n${sel || 'Content'}\n[/shake]`},
+  {label: 'CSS Animate', snippet: (sel) => `[animate type="fade-in-up"]\n${sel || 'Content'}\n[/animate]`},
+  {category: 'Text'},
+  {label: 'Typewriter', snippet: (sel) => `[scribe speed="50" cursor="true"]\n${sel || 'Content'}\n[/scribe]`},
+  {label: 'Scramble', snippet: (sel) => `[scramble]\n${sel || 'Content'}\n[/scramble]`},
+  {label: 'Counter', snippet: () => `[counter to="100" /]`, insert: true},
+  {category: 'Visual'},
+  {label: 'Ripple', snippet: (sel) => `[ripple]\n${sel || 'Content'}\n[/ripple]`},
+  {label: 'Twinkle', snippet: (sel) => `[twinkle count="80" shape="star"]\n${sel || 'Content'}\n[/twinkle]`},
+  {label: 'Ambient bg', snippet: (sel) => `[ambient type="float-blobs" speed="slow"]\n${sel || 'Content'}\n[/ambient]`},
+  {category: 'Celebrations'},
+  {label: 'Firework (burst)', snippet: () => `[firework type="burst" colour="rainbow" /]`, insert: true},
+  {label: 'Firework (sparkle)', snippet: () => `[firework type="sparkle" colour="primary" /]`, insert: true},
+  {label: 'Firework (wrap)', snippet: (sel) => `[firework type="burst" colour="rainbow"]\n${sel || 'Content'}\n[/firework]`},
+  {label: 'Fireworks show', snippet: () => `[fireworks]\n[firework type="burst" colour="rainbow" /]\n[firework type="sparkle" colour="primary" /]\n[/fireworks]`, insert: true},
+  {label: 'Celebrate', snippet: () => `[celebrate theme="auto" intensity="medium" /]`, insert: true},
+];
+
+function openEffectsDropdown(ta, triggerEl) {
+  // Remove any existing dropdown
+  const existing = document.querySelector('.editor-effects-dropdown-menu');
+  if (existing) {
+    existing.remove();
+    return;
+  }
+
+  const menu = document.createElement('div');
+  menu.className = 'editor-effects-dropdown-menu';
+
+  effectsMenuItems.forEach(function (item) {
+    if (item.category) {
+      const cat = document.createElement('div');
+      cat.className = 'editor-effects-category';
+      cat.textContent = item.category;
+      menu.appendChild(cat);
+    } else {
+      const row = document.createElement('button');
+      row.type = 'button';
+      row.className = 'editor-effects-item';
+      row.textContent = item.label;
+      row.addEventListener('click', function () {
+        menu.remove();
+        if (item.insert) {
+          insertAtCursor(ta, item.snippet(''));
+        } else {
+          const start = ta.selectionStart;
+          const end = ta.selectionEnd;
+          const selected = ta.value.substring(start, end);
+          const snippet = item.snippet(selected);
+          ta.value = ta.value.substring(0, start) + snippet + ta.value.substring(end);
+          ta.selectionStart = start;
+          ta.selectionEnd = start + snippet.length;
+          ta.dispatchEvent(new Event('input', {bubbles: true}));
+          ta.focus();
+        }
+      });
+      menu.appendChild(row);
+    }
+  });
+
+  // Position relative to trigger button
+  const rect = triggerEl.getBoundingClientRect();
+  const toolbarRect = triggerEl.closest('.editor-toolbar').getBoundingClientRect();
+  menu.style.top = (rect.bottom - toolbarRect.top + 4) + 'px';
+  menu.style.left = (rect.left - toolbarRect.left) + 'px';
+
+  triggerEl.closest('.editor-toolbar').appendChild(menu);
+
+  // Close on outside click
+  function onOutside(e) {
+    if (!menu.contains(e.target) && e.target !== triggerEl) {
+      menu.remove();
+      document.removeEventListener('click', onOutside, true);
+    }
+  }
+
+  setTimeout(function () {
+    document.addEventListener('click', onOutside, true);
+  }, 0);
+}
+
+// --- Toolbar button definitions ---
+
+const buttons = [
+  {icon: 'bold', title: 'Bold (Ctrl+B)', action: (ta) => wrapSelection(ta, '**', '**')},
+  {icon: 'italic', title: 'Italic (Ctrl+I)', action: (ta) => wrapSelection(ta, '_', '_')},
+  {icon: 'strikethrough', title: 'Strikethrough', action: (ta) => wrapSelection(ta, '~~', '~~')},
+  '|',
+  {icon: 'heading-1', title: 'Heading 1', action: (ta) => insertLine(ta, '# ')},
+  {icon: 'heading-2', title: 'Heading 2', action: (ta) => insertLine(ta, '## ')},
+  {icon: 'heading-3', title: 'Heading 3', action: (ta) => insertLine(ta, '### ')},
+  '|',
+  {icon: 'list-bullet', title: 'Bullet list', action: (ta) => insertLine(ta, '- ')},
+  {icon: 'list-numbered', title: 'Numbered list', action: (ta) => insertLine(ta, '1. ')},
+  {icon: 'quote', title: 'Blockquote', action: (ta) => insertLine(ta, '> ')},
+  '|',
+  {icon: 'link-2', title: 'Link (Ctrl+K)', action: 'link'},
+  {icon: 'image-add', title: 'Image', action: 'image'},
+  {icon: 'code-inline', title: 'Inline code', action: (ta) => wrapSelection(ta, '`', '`')},
+  {icon: 'code-block', title: 'Code block', action: (ta) => wrapSelection(ta, '\n```\n', '\n```\n')},
+  {icon: 'minus-circle', title: 'Horizontal rule', action: (ta) => insertAtCursor(ta, '\n---\n')},
+  '|',
+  {icon: 'card', title: 'Wrap in card', action: 'card'},
+  {icon: 'columns', title: 'Insert grid', action: 'grid'},
+  {icon: 'sparkles', title: 'Effects', action: 'effects'},
+  {icon: 'help-circle', title: 'Editor help', action: 'help'},
+];
+
+/**
+ * Creates a formatting toolbar for a Markdown textarea.
+ * @param {object} $editor   - Domma-wrapped textarea element
+ * @param {object} $toolbar  - Domma-wrapped container for toolbar HTML
+ * @returns {{ $toolbar, onLink(cb), onImage(cb) }}
+ */
+export function createToolbar($editor, $toolbar) {
+  registerIcons();
+
+  const handlers = {link: null, image: null, card: null, grid: null, help: null, effects: null};
+  const ta = $editor.get(0); // native textarea element
+
+  // Build toolbar using DOM APIs (avoids Domma's DOMPurify stripping <button>)
+  const container = $toolbar.get(0);
+  container.textContent = '';
+
+  buttons.forEach((btn, idx) => {
+    if (btn === '|') {
+      const sep = document.createElement('span');
+      sep.className = 'editor-toolbar-sep';
+      container.appendChild(sep);
+    } else {
+      const el = document.createElement('button');
+      el.className = 'editor-toolbar-btn';
+      el.setAttribute('data-tooltip', btn.title);
+      el.setAttribute('data-idx', String(idx));
+      el.type = 'button';
+      const icon = document.createElement('span');
+      icon.setAttribute('data-icon', btn.icon);
+      el.appendChild(icon);
+      container.appendChild(el);
+    }
+  });
+
+  // Right-side: view mode toggles + fullscreen
+  const rightDiv = document.createElement('div');
+  rightDiv.className = 'editor-toolbar-right';
+
+  [
+    {mode: 'split', icon: 'columns', label: 'Split view', active: true},
+    {mode: 'write', icon: 'file-text', label: 'Write only', active: false},
+    {mode: 'preview', icon: 'eye', label: 'Preview only', active: false},
+  ].forEach(vm => {
+    const el = document.createElement('button');
+    el.className = 'editor-view-btn' + (vm.active ? ' active' : '');
+    el.setAttribute('data-mode', vm.mode);
+    el.setAttribute('data-tooltip', vm.label);
+    el.type = 'button';
+    const icon = document.createElement('span');
+    icon.setAttribute('data-icon', vm.icon);
+    el.appendChild(icon);
+    rightDiv.appendChild(el);
+  });
+
+  const rightSep = document.createElement('span');
+  rightSep.className = 'editor-toolbar-sep';
+  rightDiv.appendChild(rightSep);
+
+  const fsBtn = document.createElement('button');
+  fsBtn.id = 'fullscreen-btn';
+  fsBtn.className = 'editor-toolbar-btn';
+  fsBtn.setAttribute('data-tooltip', 'Toggle fullscreen');
+  fsBtn.type = 'button';
+  const fsIcon = document.createElement('span');
+  fsIcon.setAttribute('data-icon', 'expand');
+  fsBtn.appendChild(fsIcon);
+  rightDiv.appendChild(fsBtn);
+
+  container.appendChild(rightDiv);
+
+  Domma.icons.scan();
+  container.querySelectorAll('[data-tooltip]').forEach(el => {
+    E.tooltip(el, {content: el.getAttribute('data-tooltip'), position: 'top'});
+  });
+
+  // Click handlers for action buttons
+  $toolbar.on('click', '.editor-toolbar-btn[data-idx]', function () {
+    const idx = parseInt($(this).data('idx'), 10);
+    const btn = buttons[idx];
+    if (!btn || btn === '|') return;
+
+    if (typeof btn.action === 'function') {
+      btn.action(ta);
+    } else if (btn.action === 'link' && handlers.link) {
+      handlers.link(ta);
+    } else if (btn.action === 'image' && handlers.image) {
+      handlers.image(ta);
+    } else if (btn.action === 'card') {
+      if (handlers.card) {
+        handlers.card(ta);
+      } else {
+        // Default: wrap selection (or placeholder) in [card] shortcode
+        const start = ta.selectionStart;
+        const end = ta.selectionEnd;
+        const selected = ta.value.substring(start, end) || 'Content here';
+        const snippet = `[card title="Card Title"]\n${selected}\n[/card]`;
+        ta.value = ta.value.substring(0, start) + snippet + ta.value.substring(end);
+        // Position cursor on "Card Title" so user can type it immediately
+        ta.selectionStart = start + '[card title="'.length;
+        ta.selectionEnd = start + '[card title="Card Title'.length;
+        ta.dispatchEvent(new Event('input', {bubbles: true}));
+        ta.focus();
+      }
+    } else if (btn.action === 'grid') {
+      if (handlers.grid) {
+        handlers.grid(ta);
+      } else {
+        // Default: insert a 2-column Domma Grid template
+        const start = ta.selectionStart;
+        const snippet = `[grid cols="2" gap="4"]\n[col]\nColumn 1\n[/col]\n[col]\nColumn 2\n[/col]\n[/grid]\n`;
+        ta.value = ta.value.substring(0, start) + snippet + ta.value.substring(start);
+        ta.selectionStart = ta.selectionEnd = start + snippet.length;
+        ta.dispatchEvent(new Event('input', {bubbles: true}));
+        ta.focus();
+      }
+    } else if (btn.action === 'effects') {
+      if (handlers.effects) {
+        handlers.effects(ta);
+      } else {
+        openEffectsDropdown(ta, $toolbar.get(0).querySelector(`[data-idx="${idx}"]`));
+      }
+    } else if (btn.action === 'help') {
+      if (handlers.help) {
+        handlers.help(ta);
+      }
+    }
+  });
+
+  // Keyboard shortcuts on the textarea
+  $editor.on('keydown', function (e) {
+    const key = e.key.toLowerCase();
+
+    if (e.ctrlKey || e.metaKey) {
+      if (key === 'b') {
+        e.preventDefault();
+        wrapSelection(ta, '**', '**');
+      } else if (key === 'i') {
+        e.preventDefault();
+        wrapSelection(ta, '_', '_');
+      } else if (key === 'k') {
+        e.preventDefault();
+        if (handlers.link) handlers.link(ta);
+      }
+    } else if (e.key === 'Tab') {
+      e.preventDefault();
+      if (e.shiftKey) {
+        // Remove up to 4 leading spaces from current line
+        const lineStart = ta.value.lastIndexOf('\n', ta.selectionStart - 1) + 1;
+        const line = ta.value.substring(lineStart);
+        const spaces = line.match(/^ {1,4}/);
+        if (spaces) {
+          const before = ta.value.substring(0, lineStart);
+          const after = ta.value.substring(lineStart + spaces[0].length);
+          ta.value = before + line.substring(spaces[0].length);
+          ta.selectionStart = ta.selectionEnd = Math.max(lineStart, ta.selectionStart - spaces[0].length);
+          ta.dispatchEvent(new Event('input', {bubbles: true}));
+        }
+      } else {
+        insertAtCursor(ta, '    ');
+      }
+    }
+  });
+
+  return {
+    $toolbar,
+    onLink(cb) {
+      handlers.link = cb;
+    },
+    onImage(cb) {
+      handlers.image = cb;
+    },
+    onCard(cb) {
+      handlers.card = cb;
+    },
+    onGrid(cb) {
+      handlers.grid = cb;
+    },
+    onHelp(cb) {
+      handlers.help = cb;
+    },
+    onEffects(cb) {
+      handlers.effects = cb;
+    }
+  };
+}

package/admin/js/templates/dashboard.html

@@ -0,0 +1,50 @@
+<div class="view-header">
+    <h1><span data-icon="home"></span> Dashboard</h1>
+    <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
+</div>
+
+<div class="row mb-4">
+    <div class="col-4">
+        <div class="card stat-card">
+            <div class="card-body">
+                <div class="stat-icon"><span data-icon="file-text"></span></div>
+                <div class="stat-body">
+                    <div class="stat-value" id="stat-total">—</div>
+                    <div class="stat-label">Total Pages</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-4">
+        <div class="card stat-card">
+            <div class="card-body">
+                <div class="stat-icon stat-icon--success"><span data-icon="check-circle"></span></div>
+                <div class="stat-body">
+                    <div class="stat-value" id="stat-published">—</div>
+                    <div class="stat-label">Published</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="col-4">
+        <div class="card stat-card">
+            <div class="card-body">
+                <div class="stat-icon stat-icon--warning"><span data-icon="clock"></span></div>
+                <div class="stat-body">
+                    <div class="stat-value" id="stat-drafts">—</div>
+                    <div class="stat-label">Drafts</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card card-collapsible mt-4">
+  <div class="card-header" role="button" tabindex="0">
+    <div class="card-header-content"><h2>Recent Pages</h2></div>
+    <span class="card-collapse-icon" data-icon="chevron-down"></span>
+    </div>
+    <div class="card-body">
+        <div id="recent-pages-table"></div>
+    </div>
+</div>