domma-cms 0.55.1 → 0.66.0

package/plugins/blog/plugin.public.js

@@ -0,0 +1,312 @@
+/**
+ * Blog Plugin - Public Routes
+ * SSR public-facing routes for the blog. Mounted at the Fastify root.
+ */
+import path from 'path';
+import {fileURLToPath} from 'url';
+import {renderBlogPage} from '../../server/services/renderer.js';
+import {listEntries} from '../../server/services/collections.js';
+import {parseMarkdown} from '../../server/services/markdown.js';
+import {getUserById} from '../../server/services/users.js';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const TEMPLATES_DIR = path.join(__dirname, 'templates');
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function escapeHtml(str) {
+    return String(str ?? '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+function formatDate(iso) {
+    if (!iso) return '';
+    return new Date(iso).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
+}
+
+function isVisible(post) {
+    return post.status === 'published' ||
+        (post.status === 'scheduled' && post.publishedAt && new Date(post.publishedAt) <= new Date());
+}
+
+/** Always returns the actual array of entries, regardless of adapter shape. */
+async function loadEntries(slug) {
+    const result = await listEntries(slug, { limit: 100000, sort: 'createdAt', order: 'desc' });
+    if (Array.isArray(result)) return result.map((entry) => ({ id: entry.id, ...(entry.data ?? entry) }));
+    if (Array.isArray(result?.entries)) {
+        return result.entries.map((entry) => ({ id: entry.id, ...(entry.data ?? entry) }));
+    }
+    return [];
+}
+
+/** Render a post body through the full Markdown + shortcode pipeline. */
+async function renderPostBody(content) {
+    if (!content) return { html: '', usedComponents: [] };
+    try {
+        // Blog public renderer is anonymous - pass empty opts so the [menu]
+        // shortcode treats the visitor as unauthenticated. The blog plugin
+        // does not track per-request user state for its public posts.
+        const { html, usedComponents } = await parseMarkdown('---\n---\n' + content, {});
+        return { html, usedComponents: usedComponents || [] };
+    } catch {
+        return { html: escapeHtml(content), usedComponents: [] };
+    }
+}
+
+function buildPostCard(post, authorName, base) {
+    const image = post.featuredImage
+        ? `<a href="${base}/${escapeHtml(post.slug)}"><img src="${escapeHtml(post.featuredImage)}" alt="${escapeHtml(post.title)}" class="blog-card-image"></a>`
+        : '';
+    return `<article class="card mb-4 blog-card">
+  ${image}
+  <div class="card-body">
+    <h2><a href="${base}/${escapeHtml(post.slug)}">${escapeHtml(post.title)}</a></h2>
+    <p class="text-muted small">by ${escapeHtml(authorName)} &middot; ${formatDate(post.publishedAt)}</p>
+    <p>${escapeHtml(post.excerpt || '')}</p>
+    <a href="${base}/${escapeHtml(post.slug)}" class="btn btn-sm btn-primary">Read more</a>
+  </div>
+</article>`;
+}
+
+function buildPagination(page, totalPages, basePath) {
+    if (totalPages <= 1) return '';
+    const parts = [];
+    if (page > 1) {
+        const prevHref = page === 2 ? basePath : `${basePath}/page/${page - 1}`;
+        parts.push(`<a href="${prevHref}" class="btn btn-sm btn-secondary mr-2">&laquo; Previous</a>`);
+    }
+    if (page < totalPages) {
+        parts.push(`<a href="${basePath}/page/${page + 1}" class="btn btn-sm btn-secondary">Next &raquo;</a>`);
+    }
+    return `<nav class="blog-pagination">${parts.join('')}</nav>`;
+}
+
+async function resolveAuthorName(authorId) {
+    if (!authorId) return 'Unknown';
+    try {
+        const user = await getUserById(authorId);
+        return user?.name || user?.email || 'Unknown';
+    } catch {
+        return 'Unknown';
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Plugin
+// ---------------------------------------------------------------------------
+
+export default async function blogPublicPlugin(fastify, options) {
+    const { settings, config } = options;
+    const base = (settings?.basePath ?? '/blog').replace(/\/$/, '');
+    const postsPerPage = settings?.postsPerPage ?? 10;
+
+    async function renderArchive(reply, posts, archiveTitle, page) {
+        const visible = posts.filter(isVisible).sort((a, b) => {
+            return new Date(b.publishedAt || 0) - new Date(a.publishedAt || 0);
+        });
+
+        const totalPages = Math.max(1, Math.ceil(visible.length / postsPerPage));
+        const safePage = Math.min(Math.max(1, page), totalPages);
+        const slice = visible.slice((safePage - 1) * postsPerPage, safePage * postsPerPage);
+
+        const cards = await Promise.all(slice.map(async (post) => {
+            const authorName = await resolveAuthorName(post.authorId);
+            return buildPostCard(post, authorName, base);
+        }));
+
+        const cardsHtml = cards.join('\n') || '<p>No posts found.</p>';
+        const paginationHtml = buildPagination(safePage, totalPages, base);
+
+        const html = await renderBlogPage(
+            path.join(TEMPLATES_DIR, 'index.html'),
+            { archiveTitle, posts: cardsHtml, pagination: paginationHtml },
+            {}
+        );
+        reply.type('text/html').send(html);
+    }
+
+    // 1. RSS feed
+    fastify.get(`${base}/feed.xml`, async (request, reply) => {
+        const allPosts = await loadEntries('blog-posts');
+        const feedLength = settings?.feedLength ?? 20;
+        const posts = allPosts
+            .filter(isVisible)
+            .sort((a, b) => new Date(b.publishedAt || 0) - new Date(a.publishedAt || 0))
+            .slice(0, feedLength);
+
+        const siteTitle = config?.site?.title ?? 'Blog';
+        const siteUrl = (config?.site?.url ?? '').replace(/\/$/, '');
+
+        const items = posts.map((post) => `  <item>
+    <title>${escapeHtml(post.title)}</title>
+    <link>${siteUrl}${base}/${escapeHtml(post.slug)}</link>
+    <description>${escapeHtml(post.excerpt || '')}</description>
+    <pubDate>${new Date(post.publishedAt).toUTCString()}</pubDate>
+    <guid>${siteUrl}${base}/${escapeHtml(post.slug)}</guid>
+  </item>`).join('\n');
+
+        const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>${escapeHtml(siteTitle)}</title>
+    <link>${siteUrl}${base}</link>
+    <description>Blog feed</description>
+${items}
+  </channel>
+</rss>`;
+
+        reply.type('application/xml').send(xml);
+    });
+
+    // 2. Paginated index
+    fastify.get(`${base}/page/:n`, async (request, reply) => {
+        const page = parseInt(request.params.n, 10) || 1;
+        const allPosts = await loadEntries('blog-posts');
+        await renderArchive(reply, allPosts, 'Blog', page);
+    });
+
+    // 3. Category archive
+    fastify.get(`${base}/category/:slug`, async (request, reply) => {
+        const { slug } = request.params;
+        const [allPosts, allCategories] = await Promise.all([
+            loadEntries('blog-posts'),
+            loadEntries('blog-categories')
+        ]);
+
+        const category = allCategories.find((c) => c.slug === slug);
+        if (!category) {
+            return reply.code(404).send('Category not found');
+        }
+
+        const posts = allPosts.filter((p) => Array.isArray(p.categories) && p.categories.includes(category.id));
+        await renderArchive(reply, posts, `Category: ${escapeHtml(category.name)}`, 1);
+    });
+
+    // 4. Tag archive
+    fastify.get(`${base}/tag/:tag`, async (request, reply) => {
+        const { tag } = request.params;
+        const allPosts = await loadEntries('blog-posts');
+        const posts = allPosts.filter((p) => Array.isArray(p.tags) && p.tags.includes(tag));
+        await renderArchive(reply, posts, `Tag: ${escapeHtml(tag)}`, 1);
+    });
+
+    // 5. Author archive
+    fastify.get(`${base}/author/:id`, async (request, reply) => {
+        const { id } = request.params;
+        const allPosts = await loadEntries('blog-posts');
+        const posts = allPosts.filter((p) => p.authorId === id);
+        const authorName = await resolveAuthorName(id);
+        await renderArchive(reply, posts, `Author: ${escapeHtml(authorName)}`, 1);
+    });
+
+    // 6. Blog index
+    fastify.get(base, async (request, reply) => {
+        const allPosts = await loadEntries('blog-posts');
+        await renderArchive(reply, allPosts, 'Blog', 1);
+    });
+
+    // 7. Individual post - registered LAST so the slug match doesn't shadow archives
+    fastify.get(`${base}/:slug`, async (request, reply) => {
+        const { slug } = request.params;
+        const allPosts = await loadEntries('blog-posts');
+        const post = allPosts.find((p) => p.slug === slug);
+
+        if (!post || !isVisible(post)) {
+            return reply.code(404).send('Not found');
+        }
+
+        const authorName = await resolveAuthorName(post.authorId);
+
+        let categoriesHtml = '';
+        if (Array.isArray(post.categories) && post.categories.length) {
+            try {
+                const allCategories = await loadEntries('blog-categories');
+                const catMap = Object.fromEntries(allCategories.map((c) => [c.id, { name: c.name, slug: c.slug }]));
+                categoriesHtml = post.categories
+                    .map((id) => catMap[id]
+                        ? `<a href="${base}/category/${escapeHtml(catMap[id].slug)}" class="badge badge-secondary mr-1">${escapeHtml(catMap[id].name)}</a>`
+                        : '')
+                    .join('');
+            } catch {
+                // non-fatal
+            }
+        }
+
+        let tagsHtml = '';
+        if (Array.isArray(post.tags) && post.tags.length) {
+            tagsHtml = post.tags
+                .map((tag) => `<a href="${base}/tag/${escapeHtml(tag)}" class="badge badge-secondary mr-1">${escapeHtml(tag)}</a>`)
+                .join('');
+        }
+
+        const featuredImageHtml = post.featuredImage
+            ? `<img src="${escapeHtml(post.featuredImage)}" alt="${escapeHtml(post.title)}" class="blog-post-image mb-4">`
+            : '';
+
+        const { html: bodyHtml, usedComponents } = await renderPostBody(post.content);
+
+        let commentsHtml = '';
+        let commentFormHtml = '';
+        if (settings?.commentsEnabled) {
+            try {
+                const allComments = await loadEntries('blog-comments');
+                const approved = allComments.filter((c) => c.postId === post.id && c.status === 'approved');
+                if (approved.length) {
+                    const items = approved.map((c) => `<li class="mb-3">
+  <strong>${escapeHtml(c.authorName)}</strong> <span class="text-muted small">${formatDate(c.createdAt)}</span>
+  <p class="mt-1">${escapeHtml(c.body)}</p>
+</li>`).join('\n');
+                    commentsHtml = `<h4 class="mb-3">Comments</h4><ul class="list-unstyled">${items}</ul>`;
+                }
+            } catch {
+                // non-fatal
+            }
+
+            commentFormHtml = `<div class="card mt-4">
+  <div class="card-header"><h4>Leave a comment</h4></div>
+  <div class="card-body">
+    <form method="POST" action="/api/plugins/blog/comments">
+      <input type="hidden" name="postId" value="${escapeHtml(post.id)}">
+      <div class="mb-3"><label>Name *<br><input type="text" name="authorName" required class="form-control"></label></div>
+      <div class="mb-3"><label>Email *<br><input type="email" name="authorEmail" required class="form-control"></label></div>
+      <div class="mb-3" style="display:none"><label>Website<br><input type="text" name="website"></label></div>
+      <div class="mb-3"><label>Comment *<br><textarea name="body" required class="form-control" rows="4"></textarea></label></div>
+      <button type="submit" class="btn btn-primary">Submit</button>
+    </form>
+  </div>
+</div>`;
+        }
+
+        const seoMeta = {
+            title: post.seo?.title || post.title,
+            description: post.seo?.description || post.excerpt || '',
+            ogImage: post.featuredImage || '',
+            ogType: 'article',
+            usedComponents
+        };
+
+        const html = await renderBlogPage(
+            path.join(TEMPLATES_DIR, 'post.html'),
+            {
+                title: escapeHtml(post.title),
+                authorName: escapeHtml(authorName),
+                publishedAt: formatDate(post.publishedAt),
+                categories: categoriesHtml,
+                tags: tagsHtml,
+                featuredImage: featuredImageHtml,
+                content: bodyHtml,
+                comments: commentsHtml,
+                commentForm: commentFormHtml
+            },
+            seoMeta
+        );
+
+        reply.type('text/html').send(html);
+    });
+}

package/plugins/contacts/admin/css/index.css

@@ -0,0 +1 @@
+.contacts-billing{margin-top:1rem;border-top:1px solid var(--dm-border);padding-top:.75rem}.contacts-billing-toggle{display:flex;align-items:center;gap:.5rem;width:100%;padding:.35rem 0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}.contacts-billing-toggle:hover{color:var(--dm-primary)}.contacts-billing-body{display:none;padding-top:.75rem}.contacts-billing-body.is-open{display:block}.contacts-field-grid{gap:1rem}.contacts-terms-input{width:6rem}.contacts-repeater{margin-top:1.25rem;padding-top:.75rem;border-top:1px dashed var(--dm-border)}.contacts-repeater-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}.contacts-empty-row{margin:.25rem 0 0}.contacts-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem}.contacts-row .form-input{flex:1 1 8rem;min-width:0}.contacts-row-wide{flex:2 1 14rem!important}.contacts-row-check{flex:0 0 auto;padding:0;white-space:nowrap}.contacts-row-remove{flex:0 0 auto;font-size:1.1em;line-height:1;padding:.15rem .5rem;min-width:1.9rem}.contacts-billing-toggle [data-icon],.contacts-billing-toggle svg,#groups-panel-toggle [data-icon],#groups-panel-toggle svg{transition:transform .15s ease}.contacts-billing-toggle.is-open [data-icon],.contacts-billing-toggle.is-open svg{transform:rotate(90deg)}#groups-panel-toggle.is-open [data-icon],#groups-panel-toggle.is-open svg{transform:rotate(180deg)}

package/plugins/contacts/admin/templates/contacts.html

@@ -100,6 +100,134 @@
                     </label>
                 </div>
             </div>
+            <!-- Everything an invoice needs. Folded away because most contacts
+                 are a name and a number, and the day you need a VAT number you
+                 know where to look. -->
+            <div class="contacts-billing">
+                <button type="button" id="billing-toggle" class="contacts-billing-toggle">
+                    <span data-icon="chevron-right" id="billing-chevron"></span>
+                    <strong>Company, addresses &amp; invoicing</strong>
+                    <span class="text-muted text-sm" id="billing-summary"></span>
+                </button>
+
+                <div id="billing-body" class="contacts-billing-body">
+                    <div class="grid grid-cols-2 contacts-field-grid">
+                        <div class="form-group">
+                            <label for="contact-company" class="form-label">Company</label>
+                            <input id="contact-company" type="text" class="form-input" placeholder="Acme Ltd">
+                        </div>
+                        <div class="form-group">
+                            <label for="contact-job-title" class="form-label">Job Title</label>
+                            <input id="contact-job-title" type="text" class="form-input" placeholder="Finance Manager">
+                        </div>
+                        <div class="form-group">
+                            <label for="contact-website" class="form-label">Website</label>
+                            <input id="contact-website" type="text" class="form-input" placeholder="acme.co.uk">
+                        </div>
+                        <div class="form-group">
+                            <label for="contact-billing-email" class="form-label">Billing Email</label>
+                            <input id="contact-billing-email" type="email" class="form-input" placeholder="accounts@acme.co.uk">
+                            <div class="text-muted text-sm">Where invoices go, if not the email above.</div>
+                        </div>
+                        <div class="form-group">
+                            <label for="contact-vat-number" class="form-label">VAT Number</label>
+                            <input id="contact-vat-number" type="text" class="form-input font-mono" placeholder="GB123456789">
+                        </div>
+                        <div class="form-group">
+                            <label for="contact-company-number" class="form-label">Company Number</label>
+                            <input id="contact-company-number" type="text" class="form-input font-mono" placeholder="01234567">
+                        </div>
+                        <div class="form-group">
+                            <label for="contact-reference" class="form-label">Their Reference</label>
+                            <input id="contact-reference" type="text" class="form-input" placeholder="PO-4471">
+                            <div class="text-muted text-sm">Printed on their invoices, if they need one.</div>
+                        </div>
+                        <div class="form-group">
+                            <label for="contact-payment-terms" class="form-label">Payment Terms</label>
+                            <div class="flex items-center gap-2">
+                                <input id="contact-payment-terms" type="number" min="0" max="365" class="form-input contacts-terms-input" placeholder="30">
+                                <span class="text-muted text-sm">days</span>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="contact-currency" class="form-label">Preferred Currency</label>
+                            <select id="contact-currency" class="form-select">
+                                <option value="">Use the invoice default</option>
+                                <option value="GBP">GBP - British Pound</option>
+                                <option value="EUR">EUR - Euro</option>
+                                <option value="USD">USD - US Dollar</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="contacts-repeater">
+                        <div class="contacts-repeater-head">
+                            <strong>Bank Details</strong>
+                            <span class="text-muted text-sm">Printed on an invoice so it can be paid.</span>
+                        </div>
+                        <div class="grid grid-cols-2 contacts-field-grid">
+                            <div class="form-group">
+                                <label for="contact-account-name" class="form-label">Account Name</label>
+                                <input id="contact-account-name" type="text" class="form-input" placeholder="Acme Ltd">
+                            </div>
+                            <div class="form-group">
+                                <label for="contact-bank-name" class="form-label">Bank</label>
+                                <input id="contact-bank-name" type="text" class="form-input" placeholder="Barclays">
+                            </div>
+                            <div class="form-group">
+                                <label for="contact-sort-code" class="form-label">Sort Code</label>
+                                <input id="contact-sort-code" type="text" class="form-input font-mono" placeholder="20-00-00" maxlength="8">
+                            </div>
+                            <div class="form-group">
+                                <label for="contact-account-number" class="form-label">Account Number</label>
+                                <input id="contact-account-number" type="text" class="form-input font-mono" placeholder="12345678" maxlength="8">
+                            </div>
+                            <div class="form-group">
+                                <label for="contact-iban" class="form-label">IBAN</label>
+                                <input id="contact-iban" type="text" class="form-input font-mono" placeholder="GB29 NWBK 6016 1331 9268 19">
+                            </div>
+                            <div class="form-group">
+                                <label for="contact-bic" class="form-label">BIC / SWIFT</label>
+                                <input id="contact-bic" type="text" class="form-input font-mono" placeholder="NWBKGB2L">
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="contacts-repeater" id="addresses-repeater">
+                        <div class="contacts-repeater-head">
+                            <strong>Addresses</strong>
+                            <button type="button" class="btn btn-sm btn-outline" id="add-address-btn">
+                                <span data-icon="plus"></span> Add Address
+                            </button>
+                        </div>
+                        <div id="addresses-list"></div>
+                        <p class="text-muted text-sm contacts-empty-row" id="addresses-empty">No address yet.</p>
+                    </div>
+
+                    <div class="contacts-repeater" id="emails-repeater">
+                        <div class="contacts-repeater-head">
+                            <strong>Additional Emails</strong>
+                            <button type="button" class="btn btn-sm btn-outline" id="add-email-btn">
+                                <span data-icon="plus"></span> Add Email
+                            </button>
+                        </div>
+                        <div id="emails-list"></div>
+                        <p class="text-muted text-sm contacts-empty-row" id="emails-empty">None.</p>
+                    </div>
+
+                    <div class="contacts-repeater" id="phones-repeater">
+                        <div class="contacts-repeater-head">
+                            <strong>Additional Phones</strong>
+                            <button type="button" class="btn btn-sm btn-outline" id="add-phone-btn">
+                                <span data-icon="plus"></span> Add Phone
+                            </button>
+                        </div>
+                        <div id="phones-list"></div>
+                        <p class="text-muted text-sm contacts-empty-row" id="phones-empty">None.</p>
+                    </div>
+                </div>
+            </div>
+
             <div style="display:flex;gap:0.5rem;margin-top:1rem;">
                 <button id="editor-save-btn" class="btn btn-primary">
                     <span data-icon="save"></span>