domma-cms 0.9.10 → 0.12.0

package/plugins/blog/admin/views/comments.js

@@ -0,0 +1,187 @@
+/**
+ * Blog comments admin view.
+ *
+ * @module blog/admin/views/comments
+ */
+
+function escapeHtml(s) {
+    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+const BASE = '/api/plugins/blog';
+
+export const commentsView = {
+    templateUrl: '/plugins/blog/admin/templates/comments.html',
+
+    /**
+     * Mount the blog comments view.
+     *
+     * @param {object} $container - Domma-wrapped container element
+     * @returns {Promise<void>}
+     */
+    async onMount($container) {
+        let currentTab = 'pending';
+        let comments = [];
+        let commentsTable = null;
+
+        // ---------------------------------------------------------------
+        // Load + render
+        // ---------------------------------------------------------------
+
+        async function loadComments() {
+            try {
+                const res = await H.get(`${BASE}/comments?status=${encodeURIComponent(currentTab)}`);
+                if (res.error) throw new Error(res.error);
+                comments = res.data ?? (Array.isArray(res) ? res : []);
+            } catch {
+                comments = [];
+                E.toast('Failed to load comments.', { type: 'error' });
+            }
+            buildTable();
+        }
+
+        function buildTable() {
+            const tableEl = $container.find('#comments-table').get(0);
+            if (!tableEl) return;
+
+            if (commentsTable) {
+                commentsTable.setData(comments);
+                Domma.icons.scan();
+                return;
+            }
+
+            commentsTable = T.create(tableEl, {
+                data: comments,
+                columns: [
+                    {
+                        key: 'authorName',
+                        title: 'Author',
+                        sortable: true,
+                        render: (v) => `<strong>${escapeHtml(v)}</strong>`
+                    },
+                    {
+                        key: 'authorEmail',
+                        title: 'Email',
+                        sortable: false,
+                        render: (v) => v
+                            ? `<a href="mailto:${escapeHtml(v)}">${escapeHtml(v)}</a>`
+                            : '<span style="opacity:0.4;">—</span>'
+                    },
+                    {
+                        key: 'body',
+                        title: 'Comment',
+                        sortable: false,
+                        render: (v) => {
+                            const preview = String(v ?? '').slice(0, 80);
+                            const ellipsis = String(v ?? '').length > 80 ? '\u2026' : '';
+                            return `<span style="font-size:0.87rem;">${escapeHtml(preview)}${ellipsis}</span>`;
+                        }
+                    },
+                    {
+                        key: 'postId',
+                        title: 'Post',
+                        sortable: false,
+                        render: (v) => v
+                            ? `<a href="#/plugins/blog/posts/${escapeHtml(v)}">${escapeHtml(v)}</a>`
+                            : '<span style="opacity:0.4;">—</span>'
+                    },
+                    {
+                        key: 'createdAt',
+                        title: 'Date',
+                        sortable: true,
+                        render: (v) => v
+                            ? `<span title="${escapeHtml(D(v).format('DD MMM YYYY HH:mm'))}">${escapeHtml(D(v).fromNow())}</span>`
+                            : '<span style="opacity:0.4;">—</span>'
+                    },
+                    {
+                        key: 'id',
+                        title: 'Actions',
+                        sortable: false,
+                        render: (id) => {
+                            const btns = [];
+                            if (currentTab !== 'approved') {
+                                btns.push(`<button class="btn btn-sm btn-success comment-approve-btn" data-id="${escapeHtml(id)}">Approve</button>`);
+                            }
+                            if (currentTab !== 'spam') {
+                                btns.push(`<button class="btn btn-sm btn-warning comment-spam-btn" data-id="${escapeHtml(id)}">Spam</button>`);
+                            }
+                            if (currentTab !== 'rejected') {
+                                btns.push(`<button class="btn btn-sm btn-outline comment-reject-btn" data-id="${escapeHtml(id)}">Reject</button>`);
+                            }
+                            btns.push(`<button class="btn btn-sm btn-danger comment-delete-btn" data-id="${escapeHtml(id)}">` +
+                                `<span data-icon="trash" data-icon-size="14"></span></button>`);
+                            return `<div style="display:flex;gap:.3rem;flex-wrap:wrap;">${btns.join('')}</div>`;
+                        }
+                    }
+                ],
+                emptyMessage: `No ${currentTab} comments.`
+            });
+
+            // Event delegation — attach once
+            if (!tableEl.dataset.listenerAttached) {
+                tableEl.dataset.listenerAttached = '1';
+                tableEl.addEventListener('click', async (e) => {
+                    const approveBtn = e.target.closest('.comment-approve-btn');
+                    const rejectBtn  = e.target.closest('.comment-reject-btn');
+                    const spamBtn    = e.target.closest('.comment-spam-btn');
+                    const deleteBtn  = e.target.closest('.comment-delete-btn');
+
+                    if (approveBtn) await updateStatus(approveBtn.dataset.id, 'approved');
+                    if (rejectBtn)  await updateStatus(rejectBtn.dataset.id, 'rejected');
+                    if (spamBtn)    await updateStatus(spamBtn.dataset.id, 'spam');
+
+                    if (deleteBtn) {
+                        const ok = await E.confirm('Delete this comment?');
+                        if (!ok) return;
+                        try {
+                            await H.delete(`${BASE}/comments/${deleteBtn.dataset.id}`);
+                            E.toast('Comment deleted.', { type: 'success' });
+                            await loadComments();
+                        } catch {
+                            E.toast('Failed to delete comment.', { type: 'error' });
+                        }
+                    }
+                });
+            }
+
+            Domma.icons.scan();
+        }
+
+        async function updateStatus(commentId, status) {
+            try {
+                const res = await H.put(`${BASE}/comments/${commentId}`, { status });
+                if (res.error) throw new Error(res.error);
+                E.toast(`Comment marked as ${status}.`, { type: 'success' });
+                await loadComments();
+            } catch {
+                E.toast('Failed to update comment.', { type: 'error' });
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // Tab switching
+        // ---------------------------------------------------------------
+
+        const tabList = $container.find('.tab-list').get(0);
+        if (tabList) {
+            tabList.addEventListener('click', async (e) => {
+                const tab = e.target.closest('.tab-item');
+                if (!tab) return;
+                currentTab = tab.dataset.tab;
+
+                // Update active class
+                tabList.querySelectorAll('.tab-item').forEach((t) => {
+                    t.classList.toggle('active', t === tab);
+                });
+
+                await loadComments();
+            });
+        }
+
+        // ---------------------------------------------------------------
+        // Initial load
+        // ---------------------------------------------------------------
+        await loadComments();
+        Domma.icons.scan();
+    }
+};

package/plugins/blog/admin/views/post-editor.js

@@ -0,0 +1,291 @@
+/**
+ * Blog post editor view — create and edit posts.
+ *
+ * @module blog/admin/views/post-editor
+ */
+
+function escapeHtml(s) {
+    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function slugify(s) {
+    return String(s ?? '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+}
+
+const BASE = '/api/plugins/blog';
+
+export const postEditorView = {
+    templateUrl: '/plugins/blog/admin/templates/post-editor.html',
+
+    /**
+     * Mount the post editor view.
+     *
+     * @param {object} $container - Domma-wrapped container element
+     * @returns {Promise<void>}
+     */
+    async onMount($container) {
+        // Resolve post id from router params
+        const id = R.current?.params?.id !== 'new' ? R.current?.params?.id : null;
+        const isEdit = Boolean(id);
+
+        let post = null;
+        let categories = [];
+        let selectedCategoryIds = [];
+
+        // ---------------------------------------------------------------
+        // Load data
+        // ---------------------------------------------------------------
+
+        try {
+            const [catsRes] = await Promise.all([
+                H.get(`${BASE}/categories`).catch(() => ({ data: [] }))
+            ]);
+            categories = catsRes.data ?? catsRes ?? [];
+        } catch {
+            categories = [];
+        }
+
+        if (isEdit) {
+            try {
+                const res = await H.get(`${BASE}/posts/${id}`);
+                if (res.error) throw new Error(res.error);
+                post = res.data ?? res;
+            } catch {
+                E.toast('Failed to load post.', { type: 'error' });
+                R.navigate('#/plugins/blog');
+                return;
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // DOM refs
+        // ---------------------------------------------------------------
+
+        const titleEl       = $container.find('#editor-title').get(0);
+        const postTitleEl   = $container.find('#post-title').get(0);
+        const postSlugEl    = $container.find('#post-slug').get(0);
+        const slugAutoEl    = $container.find('#slug-auto').get(0);
+        const slugWarnEl    = $container.find('#slug-warning').get(0);
+        const excerptEl     = $container.find('#post-excerpt').get(0);
+        const contentEl     = $container.find('#post-content').get(0);
+        const tagsEl        = $container.find('#post-tags').get(0);
+        const seoTitleEl    = $container.find('#seo-title').get(0);
+        const seoDescEl     = $container.find('#seo-description').get(0);
+        const statusBadge   = $container.find('#post-status-badge').get(0);
+        const scheduleEl    = $container.find('#schedule-picker').get(0);
+        const schedAtEl     = $container.find('#post-scheduled-at').get(0);
+        const catsListEl    = $container.find('#categories-checklist').get(0);
+
+        // ---------------------------------------------------------------
+        // Populate
+        // ---------------------------------------------------------------
+
+        if (titleEl) titleEl.textContent = isEdit ? 'Edit Post' : 'New Post';
+
+        if (isEdit && post) {
+            if (postTitleEl) postTitleEl.value = post.title ?? '';
+            if (postSlugEl)  postSlugEl.value  = post.slug ?? '';
+            if (excerptEl)   excerptEl.value   = post.excerpt ?? '';
+            if (contentEl)   contentEl.value   = post.content ?? '';
+            if (tagsEl)      tagsEl.value      = Array.isArray(post.tags) ? post.tags.join(', ') : (post.tags ?? '');
+            if (seoTitleEl)  seoTitleEl.value  = post.seoTitle ?? '';
+            if (seoDescEl)   seoDescEl.value   = post.seoDescription ?? '';
+            if (statusBadge) statusBadge.textContent = post.status ?? 'draft';
+            selectedCategoryIds = Array.isArray(post.categoryIds) ? [...post.categoryIds] : [];
+        } else {
+            // New post: enable auto-slug by default
+            if (slugAutoEl) slugAutoEl.checked = true;
+        }
+
+        // Build categories checklist using DOM APIs (not innerHTML — interactive elements)
+        if (catsListEl) {
+            while (catsListEl.firstChild) catsListEl.removeChild(catsListEl.firstChild);
+
+            if (categories.length === 0) {
+                const p = document.createElement('p');
+                p.className = 'text-muted small';
+                p.textContent = 'No categories yet.';
+                catsListEl.appendChild(p);
+            } else {
+                categories.forEach((cat) => {
+                    const label = document.createElement('label');
+                    label.className = 'd-flex align-items-center gap-2 mb-2';
+                    label.style.cursor = 'pointer';
+
+                    const cb = document.createElement('input');
+                    cb.type = 'checkbox';
+                    cb.value = cat.id;
+                    cb.checked = selectedCategoryIds.includes(cat.id);
+                    cb.addEventListener('change', () => {
+                        if (cb.checked) {
+                            if (!selectedCategoryIds.includes(cat.id)) selectedCategoryIds.push(cat.id);
+                        } else {
+                            selectedCategoryIds = selectedCategoryIds.filter((x) => x !== cat.id);
+                        }
+                    });
+
+                    const span = document.createElement('span');
+                    span.textContent = cat.name ?? cat.slug ?? cat.id;
+
+                    label.appendChild(cb);
+                    label.appendChild(span);
+                    catsListEl.appendChild(label);
+                });
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // Collect form values
+        // ---------------------------------------------------------------
+
+        function collectValues() {
+            return {
+                title: postTitleEl?.value?.trim() ?? '',
+                slug: postSlugEl?.value?.trim() ?? '',
+                excerpt: excerptEl?.value?.trim() ?? '',
+                content: contentEl?.value ?? '',
+                tags: (tagsEl?.value ?? '').split(',').map((t) => t.trim()).filter(Boolean),
+                categoryIds: selectedCategoryIds,
+                seoTitle: seoTitleEl?.value?.trim() ?? '',
+                seoDescription: seoDescEl?.value?.trim() ?? ''
+            };
+        }
+
+        // ---------------------------------------------------------------
+        // Save helpers
+        // ---------------------------------------------------------------
+
+        async function doSave(extra = {}) {
+            const body = { ...collectValues(), ...extra };
+            if (!body.title) {
+                E.toast('Title is required.', { type: 'error' });
+                return null;
+            }
+            try {
+                let saved;
+                if (isEdit) {
+                    const res = await H.put(`${BASE}/posts/${id}`, body);
+                    if (res.error) throw new Error(res.error);
+                    saved = res.data ?? res;
+                } else {
+                    const res = await H.post(`${BASE}/posts`, body);
+                    if (res.error) throw new Error(res.error);
+                    saved = res.data ?? res;
+                }
+                return saved;
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to save post.', { type: 'error' });
+                return null;
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // Event bindings
+        // ---------------------------------------------------------------
+
+        // Auto-slug from title
+        if (postTitleEl) {
+            postTitleEl.addEventListener('input', () => {
+                if (slugAutoEl?.checked) {
+                    if (postSlugEl) postSlugEl.value = slugify(postTitleEl.value);
+                }
+            });
+        }
+
+        // Slug-auto checkbox
+        if (slugAutoEl) {
+            slugAutoEl.addEventListener('change', () => {
+                if (!slugAutoEl.checked && isEdit && post?.status === 'published') {
+                    if (slugWarnEl) slugWarnEl.style.display = '';
+                } else {
+                    if (slugWarnEl) slugWarnEl.style.display = 'none';
+                }
+                if (slugAutoEl.checked && postTitleEl) {
+                    if (postSlugEl) postSlugEl.value = slugify(postTitleEl.value);
+                }
+            });
+        }
+
+        // SEO panel toggle
+        const seoToggle = $container.find('#seo-toggle').get(0);
+        const seoPanel  = $container.find('#seo-panel').get(0);
+        if (seoToggle && seoPanel) {
+            seoToggle.addEventListener('click', () => {
+                seoPanel.style.display = seoPanel.style.display === 'none' ? '' : 'none';
+            });
+        }
+
+        // Save draft
+        const saveDraftBtn = $container.find('#btn-save-draft').get(0);
+        if (saveDraftBtn) {
+            saveDraftBtn.addEventListener('click', async () => {
+                const saved = await doSave({ status: 'draft' });
+                if (saved) {
+                    E.toast('Draft saved.', { type: 'success' });
+                    R.navigate('#/plugins/blog');
+                }
+            });
+        }
+
+        // Publish now
+        const publishBtn = $container.find('#btn-publish').get(0);
+        if (publishBtn) {
+            publishBtn.addEventListener('click', async () => {
+                const saved = await doSave();
+                if (!saved) return;
+                const savedId = saved.id ?? id;
+                try {
+                    const res = await H.post(`${BASE}/posts/${savedId}/publish`);
+                    if (res.error) throw new Error(res.error);
+                    E.toast('Post published.', { type: 'success' });
+                    R.navigate('#/plugins/blog');
+                } catch (err) {
+                    E.toast(err?.message ?? 'Failed to publish post.', { type: 'error' });
+                }
+            });
+        }
+
+        // Schedule
+        const scheduleBtn = $container.find('#btn-schedule').get(0);
+        if (scheduleBtn) {
+            scheduleBtn.style.display = '';
+            scheduleBtn.addEventListener('click', async () => {
+                // Toggle schedule picker visibility
+                if (scheduleEl) scheduleEl.style.display = scheduleEl.style.display === 'none' ? '' : 'none';
+
+                // If picker is now visible, wait for user to confirm
+                if (scheduleEl && scheduleEl.style.display !== 'none') return;
+
+                const publishedAt = schedAtEl?.value;
+                if (!publishedAt) {
+                    E.toast('Please select a scheduled date/time.', { type: 'error' });
+                    if (scheduleEl) scheduleEl.style.display = '';
+                    return;
+                }
+
+                const saved = await doSave();
+                if (!saved) return;
+                const savedId = saved.id ?? id;
+                try {
+                    const res = await H.post(`${BASE}/posts/${savedId}/schedule`, { publishedAt });
+                    if (res.error) throw new Error(res.error);
+                    E.toast('Post scheduled.', { type: 'success' });
+                    R.navigate('#/plugins/blog');
+                } catch (err) {
+                    E.toast(err?.message ?? 'Failed to schedule post.', { type: 'error' });
+                }
+            });
+        }
+
+        // Pick image (TBD)
+        const pickImageBtn = $container.find('#btn-pick-image').get(0);
+        if (pickImageBtn) {
+            pickImageBtn.addEventListener('click', () => {
+                console.log('media picker TBD');
+                E.toast('Media picker coming soon.', { type: 'info' });
+            });
+        }
+
+        Domma.icons.scan();
+    }
+};

package/plugins/blog/admin/views/settings.js

@@ -0,0 +1,100 @@
+/**
+ * Blog settings admin view.
+ *
+ * @module blog/admin/views/settings
+ */
+
+const BASE = '/api/plugins/blog';
+
+export const settingsView = {
+    templateUrl: '/plugins/blog/admin/templates/settings.html',
+
+    /**
+     * Mount the blog settings view.
+     *
+     * @param {object} $container - Domma-wrapped container element
+     * @returns {Promise<void>}
+     */
+    async onMount($container) {
+        let settings = {};
+
+        // ---------------------------------------------------------------
+        // Load
+        // ---------------------------------------------------------------
+
+        try {
+            const res = await H.get(`${BASE}/settings`);
+            if (res.error) throw new Error(res.error);
+            settings = res.data ?? res ?? {};
+        } catch {
+            E.toast('Failed to load settings.', { type: 'error' });
+        }
+
+        // ---------------------------------------------------------------
+        // Render form using F.create
+        // ---------------------------------------------------------------
+
+        const formEl = $container.find('#settings-form').get(0);
+        if (!formEl) return;
+
+        F.create(formEl, {
+            blueprint: [
+                {
+                    key: 'basePath',
+                    label: 'Base path',
+                    type: 'text',
+                    placeholder: '/blog',
+                    value: settings.basePath ?? '/blog',
+                    hint: 'URL prefix for all blog pages (e.g. /blog).'
+                },
+                {
+                    key: 'postsPerPage',
+                    label: 'Posts per page',
+                    type: 'number',
+                    placeholder: '10',
+                    value: settings.postsPerPage ?? 10,
+                    hint: 'Number of posts shown per listing page.'
+                },
+                {
+                    key: 'commentsEnabled',
+                    label: 'Enable comments',
+                    type: 'toggle',
+                    value: settings.commentsEnabled ?? true,
+                    hint: 'Allow readers to submit comments on posts.'
+                },
+                {
+                    key: 'commentModeration',
+                    label: 'Moderate comments',
+                    type: 'toggle',
+                    value: settings.commentModeration ?? true,
+                    hint: 'Hold new comments for approval before they appear.'
+                },
+                {
+                    key: 'feedLength',
+                    label: 'RSS feed length',
+                    type: 'number',
+                    placeholder: '20',
+                    value: settings.feedLength ?? 20,
+                    hint: 'Maximum number of items in the RSS/Atom feed.'
+                }
+            ],
+            onSubmit: async (values) => {
+                try {
+                    const res = await H.put(`${BASE}/settings`, {
+                        basePath: values.basePath,
+                        postsPerPage: Number(values.postsPerPage) || 10,
+                        commentsEnabled: Boolean(values.commentsEnabled),
+                        commentModeration: Boolean(values.commentModeration),
+                        feedLength: Number(values.feedLength) || 20
+                    });
+                    if (res.error) throw new Error(res.error);
+                    E.toast('Settings saved.', { type: 'success' });
+                } catch (err) {
+                    E.toast(err?.message ?? 'Failed to save settings.', { type: 'error' });
+                }
+            }
+        });
+
+        Domma.icons.scan();
+    }
+};

package/plugins/blog/collections/categories/schema.json

@@ -0,0 +1,12 @@
+{
+  "name": "blog-categories",
+  "label": "Blog Categories",
+  "slug": "blog-categories",
+  "storage": { "adapter": "file" },
+  "fields": [
+    { "key": "name",        "label": "Name",        "type": "text",     "required": true },
+    { "key": "slug",        "label": "Slug",        "type": "text",     "required": true },
+    { "key": "description", "label": "Description", "type": "textarea", "required": false },
+    { "key": "parentId",    "label": "Parent",      "type": "text",     "required": false }
+  ]
+}

package/plugins/blog/collections/comments/schema.json

@@ -0,0 +1,16 @@
+{
+  "name": "blog-comments",
+  "label": "Blog Comments",
+  "slug": "blog-comments",
+  "storage": { "adapter": "file" },
+  "fields": [
+    { "key": "postId",      "label": "Post",         "type": "text",     "required": true },
+    { "key": "parentId",    "label": "Parent",       "type": "text",     "required": false },
+    { "key": "authorName",  "label": "Author Name",  "type": "text",     "required": true },
+    { "key": "authorEmail", "label": "Author Email", "type": "text",     "required": true },
+    { "key": "authorUrl",   "label": "Author URL",   "type": "text",     "required": false },
+    { "key": "body",        "label": "Body",         "type": "textarea", "required": true },
+    { "key": "status",      "label": "Status",       "type": "select",   "required": true, "options": ["pending", "approved", "rejected", "spam"] },
+    { "key": "createdAt",   "label": "Created At",   "type": "datetime", "required": false }
+  ]
+}

package/plugins/blog/collections/posts/schema.json

@@ -0,0 +1,19 @@
+{
+  "name": "blog-posts",
+  "label": "Blog Posts",
+  "slug": "blog-posts",
+  "storage": { "adapter": "file" },
+  "fields": [
+    { "key": "title",         "label": "Title",          "type": "text",     "required": true },
+    { "key": "slug",          "label": "Slug",           "type": "text",     "required": true },
+    { "key": "excerpt",       "label": "Excerpt",        "type": "textarea", "required": false },
+    { "key": "content",       "label": "Content",        "type": "markdown", "required": false },
+    { "key": "featuredImage", "label": "Featured Image", "type": "text",     "required": false },
+    { "key": "categories",    "label": "Categories",     "type": "array",    "required": false },
+    { "key": "tags",          "label": "Tags",           "type": "array",    "required": false },
+    { "key": "authorId",      "label": "Author",         "type": "text",     "required": true },
+    { "key": "status",        "label": "Status",         "type": "select",   "required": true, "options": ["draft", "scheduled", "published"] },
+    { "key": "publishedAt",   "label": "Published At",   "type": "datetime", "required": false },
+    { "key": "seo",           "label": "SEO",            "type": "object",   "required": false }
+  ]
+}

package/plugins/blog/config.js

@@ -0,0 +1,8 @@
+export default {
+    basePath:          '/blog',
+    postsPerPage:      10,
+    commentsEnabled:   false,
+    commentModeration: true,
+    feedLength:        20,
+    storage: { adapter: 'file' }
+};