domma-cms 0.66.0 → 0.69.4

package/plugins/blog/public/blog.js

@@ -0,0 +1,586 @@
+/**
+ * Blog - the browser half.
+ *
+ * The server renders every listing and post in full, so all of this is an
+ * enhancement: without it the blog still reads, pages and links.
+ *
+ * On a listing, the cards become a model (each carries `data-post`: plain
+ * values, never markup) and the filters become domma-reactive observables -
+ * search text, category, tag, author, sort, display, how many are shown. What
+ * is visible is a computed of those; one effect applies it to the cards. The
+ * toolbar, the category pills and the active-filter chips are bindings over the
+ * same observables, and so is the right-click menu: "More in Design" just sets
+ * the category.
+ *
+ * On a post: a reading-progress bar, a contents list that follows the reader,
+ * copy / native share, and a comment form that posts in place.
+ *
+ * domma-reactive (`M`) ships in domma.min.js on every public page.
+ */
+
+const M = window.M;
+const PREF_KEY = 'blog.display';
+
+const store = {
+    get(k) { try { return localStorage.getItem(k); } catch { return null; } },
+    set(k, v) { try { localStorage.setItem(k, v); } catch { /* storage blocked */ } }
+};
+
+function decodeMeta(el) {
+    try {
+        const bytes = Uint8Array.from(atob(el.dataset.post || ''), c => c.charCodeAt(0));
+        return JSON.parse(new TextDecoder().decode(bytes));
+    } catch {
+        return null;
+    }
+}
+
+function toast(text) {
+    const t = document.createElement('div');
+    t.className = 'blog-toast';
+    t.setAttribute('role', 'status');
+    t.textContent = text;
+    document.body.appendChild(t);
+    setTimeout(() => t.remove(), 1800);
+}
+
+async function copyText(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        toast('Link copied');
+    } catch {
+        window.prompt('Copy this link:', text);
+    }
+}
+
+function el(html) {
+    const t = document.createElement('template');
+    t.innerHTML = html.trim();
+    return t.content.firstElementChild;
+}
+
+// ---------------------------------------------------------------------------
+// The right-click menu - one for the whole page, built per click
+// ---------------------------------------------------------------------------
+
+const menu = (() => {
+    let node = null;
+    let lastFocus = null;
+
+    function close() {
+        if (!node) return;
+        node.remove();
+        node = null;
+        document.removeEventListener('pointerdown', onOutside, true);
+        document.removeEventListener('keydown', onKey, true);
+        window.removeEventListener('scroll', close, true);
+        window.removeEventListener('resize', close);
+        lastFocus?.focus?.({preventScroll: true});
+    }
+
+    function onOutside(e) { if (node && !node.contains(e.target)) close(); }
+
+    function onKey(e) {
+        if (!node) return;
+        const items = [...node.querySelectorAll('button')];
+        const at = items.indexOf(document.activeElement);
+        if (e.key === 'Escape') { e.preventDefault(); close(); }
+        else if (e.key === 'ArrowDown') { e.preventDefault(); items[(at + 1) % items.length]?.focus(); }
+        else if (e.key === 'ArrowUp') { e.preventDefault(); items[(at - 1 + items.length) % items.length]?.focus(); }
+        else if (e.key === 'Tab') close();
+    }
+
+    /**
+     * @param {number} x
+     * @param {number} y
+     * @param {string} heading
+     * @param {({label: string, hint?: string, run: Function}|'-')[]} entries
+     */
+    function open(x, y, heading, entries) {
+        close();
+        lastFocus = document.activeElement;
+        node = document.createElement('div');
+        node.className = 'blog-menu';
+        node.setAttribute('role', 'menu');
+        const head = document.createElement('div');
+        head.className = 'blog-menu-head';
+        head.textContent = heading;
+        node.appendChild(head);
+        const list = entries.filter((e, i, all) => e !== '-' || (i > 0 && i < all.length - 1 && all[i - 1] !== '-'));
+        for (const entry of list) {
+            if (entry === '-') { node.appendChild(document.createElement('hr')); continue; }
+            const b = document.createElement('button');
+            b.type = 'button';
+            b.setAttribute('role', 'menuitem');
+            b.textContent = entry.label;
+            if (entry.hint) {
+                const k = document.createElement('span');
+                k.className = 'k';
+                k.textContent = entry.hint;
+                b.appendChild(k);
+            }
+            b.addEventListener('click', () => { close(); entry.run(); });
+            node.appendChild(b);
+        }
+        document.body.appendChild(node);
+        const r = node.getBoundingClientRect();
+        node.style.left = `${Math.max(8, Math.min(x, innerWidth - r.width - 8))}px`;
+        node.style.top = `${Math.max(8, Math.min(y, innerHeight - r.height - 8))}px`;
+        node.querySelector('button')?.focus({preventScroll: true});
+        setTimeout(() => {
+            document.addEventListener('pointerdown', onOutside, true);
+            document.addEventListener('keydown', onKey, true);
+            window.addEventListener('scroll', close, true);
+            window.addEventListener('resize', close);
+        });
+    }
+
+    return {open, close};
+})();
+
+/**
+ * Menu entries for one card. `filters` is the live listing when there is one
+ * on the page; without it, each "More…" goes to that archive page instead.
+ */
+function cardEntries(meta, link, base, filters) {
+    const go = (href) => { location.href = href; };
+    const narrow = (key, value, href) => filters ? () => filters.set(key, value) : () => go(href);
+    const entries = [
+        {label: 'Open post', run: () => go(link)},
+        {label: 'Open in new tab', run: () => window.open(link, '_blank', 'noopener')},
+        {label: 'Copy link', run: () => copyText(new URL(link, location.href).href)},
+        '-',
+        ...meta.cats.map(c => ({label: `More in ${c.name}`, run: narrow('cat', c.slug, `${base}/category/${encodeURIComponent(c.slug)}`)})),
+        ...meta.tags.slice(0, 4).map(t => ({label: `More tagged #${t}`, run: narrow('tag', t, `${base}/tag/${encodeURIComponent(t)}`)})),
+        ...(meta.author?.id ? [{label: `More by ${meta.author.name || 'this author'}`, run: narrow('author', meta.author.id, `${base}/author/${encodeURIComponent(meta.author.id)}`)}] : [])
+    ];
+    if (filters?.any()) entries.push('-', {label: 'Clear filters', run: () => filters.clear()});
+    return entries;
+}
+
+function wireCardMenu(scope, base, filters) {
+    scope.addEventListener('contextmenu', (e) => {
+        const card = e.target.closest('.blog-item[data-post]');
+        if (!card || !scope.contains(card) || e.shiftKey) return;   // Shift+right-click: the browser's own menu
+        const meta = decodeMeta(card);
+        const link = card.querySelector('a[href]')?.getAttribute('href');
+        if (!meta || !link) return;
+        e.preventDefault();
+        e.stopPropagation();
+        let {clientX: x, clientY: y} = e;
+        if (!x && !y) {  // opened from the keyboard
+            const r = (document.activeElement?.closest('.blog-item') === card ? document.activeElement : card).getBoundingClientRect();
+            x = r.left + 12;
+            y = r.top + 12;
+        }
+        menu.open(x, y, meta.title, cardEntries(meta, link, base, filters));
+    });
+}
+
+// ---------------------------------------------------------------------------
+// A listing
+// ---------------------------------------------------------------------------
+
+const TOOLBAR = `
+<label class="blog-search">
+  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
+  <input type="search" class="blog-search-input" placeholder="Search posts…" aria-label="Search posts" data-model="q.value">
+</label>
+<select class="blog-sort" aria-label="Sort" data-model="sort.value">
+  <option value="newest">Newest first</option>
+  <option value="oldest">Oldest first</option>
+  <option value="title">Title A–Z</option>
+  <option value="quick">Quickest read</option>
+</select>`;
+
+const PILL = `<button type="button" class="blog-pill {{cls}}" data-pill="{{slug}}" title="{{title}}">{{name}} <span class="n">{{count}}</span></button>`;
+const CHIP = `<span class="blog-filter-chip">{{label}} <button type="button" data-unset="{{key}}" aria-label="Remove {{label}}">×</button></span>`;
+
+function initArchive() {
+    const root = document.querySelector('[data-blog-archive]');
+    if (!root) return;
+    let cfg;
+    try { cfg = JSON.parse(root.querySelector('[data-blog-config]')?.textContent || '{}'); } catch { cfg = {}; }
+    const base = cfg.base || '/blog';
+
+    if (!M || !cfg.interactive) {
+        // Paged on the server: the menu still works, and "More…" opens the archive.
+        wireCardMenu(root, base, null);
+        return;
+    }
+    root.classList.add('is-live');
+
+    const bar = root.querySelector('.blog-archive-bar');
+    const readCards = (container) => [...container.querySelectorAll(':scope > .blog-item[data-post]')]
+        .map(node => ({node, meta: decodeMeta(node)}))
+        .filter(c => c.meta);
+
+    const params = new URLSearchParams(location.search);
+    const perPage = Math.max(1, Number(cfg.perPage) || 10);
+    const state = {
+        q: M.observable(params.get('q') ?? ''),
+        cat: M.observable(params.get('category') ?? ''),
+        tag: M.observable(params.get('tag') ?? ''),
+        author: M.observable(params.get('author') ?? ''),
+        sort: M.observable(['newest', 'oldest', 'title', 'quick'].includes(params.get('sort')) ? params.get('sort') : 'newest'),
+        limit: M.observable(perPage),
+        display: M.observable(cfg.display),
+        items: M.observable(root.querySelector('.blog-items')),
+        cards: M.observable(readCards(root.querySelector('.blog-items')))
+    };
+
+    // The same filters, as an object the right-click menu can drive.
+    const filters = {
+        set(key, value) {
+            state[key].value = value;
+            root.scrollIntoView({behavior: 'smooth', block: 'start'});
+        },
+        any: () => Boolean(state.q.value || state.cat.value || state.tag.value || state.author.value),
+        clear() { state.q.value = ''; state.cat.value = ''; state.tag.value = ''; state.author.value = ''; }
+    };
+
+    const words = (s) => String(s).toLowerCase();
+    const matches = (m, {skipCat = false} = {}) => {
+        const q = words(state.q.value).trim();
+        if (q && !words([m.title, m.excerpt, m.author?.name, ...m.tags, ...m.cats.map(c => c.name)].join(' ')).includes(q)) return false;
+        if (!skipCat && state.cat.value && !m.cats.some(c => c.slug === state.cat.value)) return false;
+        if (state.tag.value && !m.tags.includes(state.tag.value)) return false;
+        if (state.author.value && m.author?.id !== state.author.value) return false;
+        return true;
+    };
+    const SORTS = {
+        newest: (a, b) => (b.meta.date || '').localeCompare(a.meta.date || ''),
+        oldest: (a, b) => (a.meta.date || '').localeCompare(b.meta.date || ''),
+        title: (a, b) => a.meta.title.localeCompare(b.meta.title),
+        quick: (a, b) => (a.meta.minutes - b.meta.minutes) || (b.meta.date || '').localeCompare(a.meta.date || '')
+    };
+
+    const filtered = M.computed(() => state.cards.value.filter(c => matches(c.meta)).sort(SORTS[state.sort.value] ?? SORTS.newest));
+    const displayInfo = M.computed(() => (cfg.displays || []).find(d => d.id === state.display.value) ?? {lead: false});
+
+    // Lists for data-each: observables fed by effects (a data-each over a
+    // computed renders once and never again).
+    const pills = M.observable([]);
+    const chips = M.observable([]);
+
+    const catName = (slug) => (cfg.categories || []).find(c => c.slug === slug)?.name ?? slug;
+    const authorName = (id) => state.cards.value.find(c => c.meta.author?.id === id)?.meta.author.name || 'this author';
+
+    const data = {
+        ...state, pills, chips,
+        countText: M.computed(() => {
+            const all = state.cards.value.length, n = filtered.value.length;
+            return n === all ? `${all} post${all === 1 ? '' : 's'}` : `${n} of ${all} posts`;
+        }),
+        hasMore: M.computed(() => filtered.value.length > state.limit.value),
+        moreText: M.computed(() => `Showing ${Math.min(state.limit.value, filtered.value.length)} of ${filtered.value.length}`),
+        hasChips: M.computed(() => chips.value.length > 0)
+    };
+
+    // ── Build the toolbar, pills, chips and "Show more"
+    const toolbar = document.createElement('div');
+    toolbar.className = 'blog-toolbar';
+    toolbar.style.display = 'contents';
+    toolbar.innerHTML = TOOLBAR;
+    bar.prepend(toolbar);
+
+    const count = el('<span class="blog-more-count" data-bind-text="countText.value" aria-live="polite"></span>');
+    bar.insertBefore(count, bar.querySelector('.blog-displays'));
+
+    const pillRow = el('<div class="blog-pills" role="group" aria-label="Categories" data-each="pills.value key=k"></div>');
+    pillRow.innerHTML = PILL;
+    bar.after(pillRow);
+
+    const active = el('<div class="blog-active" data-if="hasChips.value"><span>Showing</span><span class="blog-active-list" data-each="chips.value key=key"></span><button type="button" class="blog-clear" data-on-click="clearAll">Clear all</button></div>');
+    active.querySelector('.blog-active-list').innerHTML = CHIP;
+    pillRow.after(active);
+
+    const more = el('<div class="blog-more" data-if="hasMore.value"><span class="blog-more-count" data-bind-text="moreText.value"></span><button type="button" class="btn btn-secondary" data-on-click="showMore">Show more</button></div>');
+    root.querySelector('.blog-empty').after(more);
+
+    const handle = M.applyBindings(data, root, {
+        methods: {
+            showMore: () => { state.limit.value += perPage; },
+            clearAll: () => filters.clear()
+        }
+    });
+
+    // Pills: "All" plus every category with a post that the OTHER filters let through.
+    M.effect(() => {
+        const counts = new Map();
+        let total = 0;
+        for (const c of state.cards.value) {
+            if (!matches(c.meta, {skipCat: true})) continue;
+            total++;
+            for (const cat of c.meta.cats) counts.set(cat.slug, (counts.get(cat.slug) ?? 0) + 1);
+        }
+        const current = state.cat.value;
+        const list = [{k: '*', slug: '', name: 'All', count: total, cls: current ? '' : 'is-active', title: 'Every category'}];
+        for (const cat of cfg.categories || []) {
+            const n = counts.get(cat.slug) ?? 0;
+            if (!n && cat.slug !== current) continue;
+            list.push({k: cat.slug, slug: cat.slug, name: cat.name, count: n, cls: cat.slug === current ? 'is-active' : '', title: `Only ${cat.name}`});
+        }
+        pills.value = list.length > 2 || current ? list : [];
+    });
+
+    M.effect(() => {
+        const list = [];
+        if (state.q.value.trim()) list.push({key: 'q', label: `“${state.q.value.trim()}”`});
+        if (state.cat.value) list.push({key: 'cat', label: catName(state.cat.value)});
+        if (state.tag.value) list.push({key: 'tag', label: `#${state.tag.value}`});
+        if (state.author.value) list.push({key: 'author', label: `by ${authorName(state.author.value)}`});
+        chips.value = list;
+    });
+
+    // A new filter starts from the first page again. Writes `limit` without
+    // reading it, so "Show more" is not undone the moment it is pressed.
+    let lastFilter = null;
+    M.effect(() => {
+        const key = JSON.stringify([state.q.value, state.cat.value, state.tag.value, state.author.value, state.sort.value]);
+        if (lastFilter !== null && key !== lastFilter) state.limit.value = perPage;
+        lastFilter = key;
+    });
+
+    // Apply: order, visibility, the Magazine lead, the empty note.
+    M.effect(() => {
+        const container = state.items.value;
+        const shown = filtered.value.slice(0, state.limit.value);
+        const visible = new Set(shown.map(c => c.node));
+        for (const c of filtered.value) container.appendChild(c.node);   // sorted order
+        for (const c of state.cards.value) {
+            c.node.hidden = !visible.has(c.node);
+            c.node.classList.remove('is-lead');
+        }
+        if (displayInfo.value.lead && shown[0] && state.sort.value === 'newest' && !filters.any()) shown[0].node.classList.add('is-lead');
+        root.querySelector('.blog-empty').hidden = shown.length > 0;
+        root.querySelector('.blog-empty').textContent = state.cards.value.length ? 'No posts match - try clearing a filter.' : 'No posts here yet.';
+    });
+
+    // The address follows the filters, so a filtered view is a link.
+    M.effect(() => {
+        const p = new URLSearchParams(location.search);
+        const put = (k, v, dflt = '') => (v && v !== dflt ? p.set(k, v) : p.delete(k));
+        put('q', state.q.value.trim());
+        put('category', state.cat.value);
+        put('tag', state.tag.value);
+        put('author', state.author.value);
+        put('sort', state.sort.value, 'newest');
+        put('display', state.display.value, cfg.display);
+        const qs = p.toString();
+        history.replaceState(history.state, '', `${location.pathname}${qs ? `?${qs}` : ''}${location.hash}`);
+    });
+
+    // ── Clicks: pills, chip ×, category / tag chips inside cards, display switcher
+    root.addEventListener('click', (e) => {
+        const pill = e.target.closest('[data-pill]');
+        if (pill) { state.cat.value = pill.dataset.pill; return; }
+        const unset = e.target.closest('[data-unset]');
+        if (unset) { state[unset.dataset.unset].value = ''; return; }
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+        const cat = e.target.closest('.blog-item [data-blog-cat]');
+        if (cat) { e.preventDefault(); filters.set('cat', cat.dataset.blogCat); return; }
+        const tag = e.target.closest('.blog-item [data-blog-tag]');
+        if (tag) { e.preventDefault(); filters.set('tag', tag.dataset.blogTag); return; }
+        const disp = e.target.closest('[data-blog-display]');
+        if (disp) { e.preventDefault(); swapDisplay(disp.dataset.blogDisplay, true); }
+    });
+
+    /**
+     * Switch display without leaving the page: fetch the same listing in the
+     * other display and take its cards (each display is a different BLOCK, so
+     * the markup genuinely differs), keeping every filter as it is.
+     */
+    async function swapDisplay(id, remember) {
+        const info = (cfg.displays || []).find(d => d.id === id);
+        if (!info || id === state.display.value) return;
+        const current = state.items.value;
+        current.classList.add('is-swapping');
+        try {
+            const url = new URL(location.href);
+            url.search = `?display=${encodeURIComponent(id)}`;
+            const res = await fetch(url, {headers: {Accept: 'text/html'}});
+            if (!res.ok) throw new Error(String(res.status));
+            const doc = new DOMParser().parseFromString(await res.text(), 'text/html');
+            const fresh = doc.querySelector('[data-blog-archive] .blog-items');
+            if (!fresh) throw new Error('no listing');
+            // The block's CSS rides along as a <style> just before the listing.
+            for (const style of doc.querySelectorAll('style')) {
+                const m = /\[data-block="([^"]+)"\]/.exec(style.textContent);
+                if (m && !document.querySelector(`style[data-blog-style="${m[1]}"]`) && !document.querySelector(`[data-block="${m[1]}"]`)) {
+                    style.dataset.blogStyle = m[1];
+                    document.head.appendChild(document.importNode(style, true));
+                }
+            }
+            const node = document.importNode(fresh, true);
+            current.replaceWith(node);
+            state.items.value = node;
+            state.cards.value = readCards(node);
+            state.display.value = id;
+            root.querySelectorAll('[data-blog-display]').forEach(a => {
+                if (a.dataset.blogDisplay === id) a.setAttribute('aria-current', 'true');
+                else a.removeAttribute('aria-current');
+            });
+            if (remember) store.set(PREF_KEY, id);
+        } catch {
+            location.href = `?display=${encodeURIComponent(id)}`;
+        } finally {
+            current.classList.remove('is-swapping');
+        }
+    }
+
+    wireCardMenu(root, base, filters);
+
+    // A reader who chose a display before gets it again - unless this address names one.
+    const pref = store.get(PREF_KEY);
+    if (pref && !params.get('display') && pref !== cfg.display && root.querySelector(`[data-blog-display="${CSS.escape(pref)}"]`)) {
+        swapDisplay(pref, false);
+    }
+
+    window.addEventListener('pagehide', () => handle?.dispose?.(), {once: true});
+}
+
+// ---------------------------------------------------------------------------
+// A post
+// ---------------------------------------------------------------------------
+
+/**
+ * CSS `position: sticky`, done by hand. Site themes put `overflow: hidden` on
+ * the page wrapper, which makes that wrapper the sticky element's scroll
+ * container - one that never scrolls - so a sticky contents list just scrolls
+ * away. Only applied where a layout asked for sticky; the element is nudged
+ * down within its parent and never past the parent's end.
+ */
+function keepInView(node) {
+    const cs = getComputedStyle(node);
+    if (cs.position !== 'sticky') return;
+    const offset = parseFloat(cs.top) || 80;
+    node.style.position = 'relative';
+    node.style.top = '0';
+    const box = node.parentElement;
+    let queued = false;
+    const place = () => {
+        queued = false;
+        node.style.transform = '';
+        if (matchMedia('(max-width: 960px)').matches) return;
+        const r = node.getBoundingClientRect();
+        const b = box.getBoundingClientRect();
+        const shift = Math.max(0, Math.min(offset - r.top, b.bottom - r.bottom));
+        if (shift) node.style.transform = `translateY(${shift}px)`;
+    };
+    const queue = () => { if (!queued) { queued = true; requestAnimationFrame(place); } };
+    addEventListener('scroll', queue, {passive: true, capture: true});
+    addEventListener('resize', queue);
+    place();
+}
+
+function initPost() {
+    const page = document.querySelector('[data-blog-post]');
+    if (!page) return;
+    const base = (location.pathname.replace(/\/[^/]*$/, '') || '/blog');
+
+    wireCardMenu(page, base, null);   // the related cards
+
+    // Share: copy needs the clipboard, Share… needs the platform's sheet.
+    page.querySelectorAll('[data-blog-share]').forEach(box => {
+        const copy = box.querySelector('[data-blog-copy]');
+        const native = box.querySelector('[data-blog-native]');
+        if (copy && navigator.clipboard) {
+            copy.hidden = false;
+            copy.addEventListener('click', () => copyText(location.href.split('#')[0]));
+        }
+        if (native && navigator.share) {
+            native.hidden = false;
+            native.addEventListener('click', () => navigator.share({title: document.title, url: location.href.split('#')[0]}).catch(() => {}));
+        }
+    });
+
+    if (!M) return;
+
+    // Reading progress, over the article rather than the whole page.
+    const article = page.querySelector('.blog-content') ?? page;
+    const bar = el('<div class="blog-progress" aria-hidden="true"><span></span></div>');
+    document.body.appendChild(bar);
+    const progress = M.observable(0);
+    M.effect(() => { bar.firstElementChild.style.transform = `scaleX(${progress.value})`; });
+    let ticking = false;
+    const measure = () => {
+        ticking = false;
+        const r = article.getBoundingClientRect();
+        const span = r.height - innerHeight * 0.6;
+        progress.value = Math.max(0, Math.min(1, span > 0 ? -r.top / span : (r.top < 0 ? 1 : 0)));
+    };
+    addEventListener('scroll', () => { if (!ticking) { ticking = true; requestAnimationFrame(measure); } }, {passive: true});
+    measure();
+
+    // The contents list follows the heading being read.
+    const toc = page.querySelector('[data-blog-toc]');
+    if (toc) keepInView(toc);
+    if (toc) {
+        const links = new Map([...toc.querySelectorAll('a[href^="#"]')].map(a => [decodeURIComponent(a.hash.slice(1)), a]));
+        const heads = [...links.keys()].map(id => document.getElementById(id)).filter(Boolean);
+        const current = M.observable(heads[0]?.id ?? '');
+        M.effect(() => links.forEach((a, id) => a.classList.toggle('is-active', id === current.value)));
+        const onScroll = () => {
+            const line = 120;
+            let at = heads[0]?.id ?? '';
+            for (const h of heads) { if (h.getBoundingClientRect().top - line <= 0) at = h.id; else break; }
+            current.value = at;
+        };
+        addEventListener('scroll', onScroll, {passive: true});
+        onScroll();
+        toc.addEventListener('click', (e) => {
+            const a = e.target.closest('a[href^="#"]');
+            if (!a) return;
+            e.preventDefault();
+            document.getElementById(decodeURIComponent(a.hash.slice(1)))?.scrollIntoView({behavior: 'smooth', block: 'start'});
+            history.replaceState(history.state, '', a.hash);
+        });
+    }
+
+    // Comments, posted in place.
+    const form = page.querySelector('[data-blog-comment-form]');
+    if (form) {
+        const status = M.observable({kind: '', text: ''});
+        const sending = M.observable(false);
+        const out = form.querySelector('[data-blog-comment-status]');
+        const button = form.querySelector('button[type="submit"]');
+        M.effect(() => {
+            out.textContent = status.value.text;
+            out.className = `blog-comment-status${status.value.kind ? ` is-${status.value.kind}` : ''}`;
+            button.disabled = sending.value;
+            button.textContent = sending.value ? 'Posting…' : 'Post comment';
+        });
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            if (sending.value) return;
+            const body = Object.fromEntries(new FormData(form).entries());
+            sending.value = true;
+            status.value = {kind: '', text: ''};
+            try {
+                const res = await fetch(form.action, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(body)});
+                const json = await res.json().catch(() => ({}));
+                if (!res.ok) throw new Error(json.error || 'Your comment could not be posted.');
+                if (json.status === 'approved') {
+                    const li = el('<li class="blog-comment is-new"><p class="blog-comment-head"><strong></strong> <time>just now</time></p><p class="blog-comment-body"></p></li>');
+                    li.querySelector('strong').textContent = json.authorName ?? body.authorName;
+                    li.querySelector('.blog-comment-body').textContent = json.body ?? body.body;
+                    page.querySelector('[data-blog-comment-list]')?.appendChild(li);
+                    const n = page.querySelector('[data-blog-comment-count]');
+                    if (n) n.textContent = String((Number(n.textContent) || 0) + 1);
+                    status.value = {kind: 'ok', text: 'Thanks - your comment is live.'};
+                } else {
+                    status.value = {kind: 'ok', text: 'Thanks - your comment will appear once it has been approved.'};
+                }
+                form.querySelector('textarea[name="body"]').value = '';
+            } catch (err) {
+                status.value = {kind: 'error', text: err.message};
+            } finally {
+                sending.value = false;
+            }
+        });
+    }
+}
+
+initArchive();
+initPost();

package/plugins/blog/public/samples/aurora.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" width="1600" height="900">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0f766e"/><stop offset="1" stop-color="#22d3ee"/></linearGradient>
+<filter id="blur"><feGaussianBlur stdDeviation="40"/></filter></defs>
+<rect width="1600" height="900" fill="url(#g)"/>
+<g filter="url(#blur)"><circle cx="487" cy="606" r="398" fill="#ffffff" opacity="0.14"/><circle cx="1236" cy="485" r="417" fill="#22d3ee" opacity="0.1"/><circle cx="26" cy="857" r="360" fill="#22d3ee" opacity="0.18"/><circle cx="479" cy="196" r="360" fill="#ffffff" opacity="0.22"/><circle cx="1308" cy="881" r="197" fill="#22d3ee" opacity="0.14"/><circle cx="310" cy="888" r="387" fill="#22d3ee" opacity="0.22"/><circle cx="31" cy="687" r="152" fill="#22d3ee" opacity="0.14"/></g>
+<path d="M0 520 C400 400 1200 640 1600 520" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 580 C400 460 1200 700 1600 580" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 640 C400 520 1200 760 1600 640" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 700 C400 580 1200 820 1600 700" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 760 C400 640 1200 880 1600 760" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 820 C400 700 1200 940 1600 820" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 880 C400 760 1200 1000 1600 880" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/>
+</svg>

package/plugins/blog/public/samples/dusk.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" width="1600" height="900">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#312e81"/><stop offset="1" stop-color="#8b5cf6"/></linearGradient>
+<filter id="blur"><feGaussianBlur stdDeviation="40"/></filter></defs>
+<rect width="1600" height="900" fill="url(#g)"/>
+<g filter="url(#blur)"><circle cx="1069" cy="424" r="275" fill="#ffffff" opacity="0.18"/><circle cx="357" cy="784" r="396" fill="#f0abfc" opacity="0.18"/><circle cx="55" cy="254" r="316" fill="#ffffff" opacity="0.22"/><circle cx="1027" cy="821" r="282" fill="#f0abfc" opacity="0.22"/><circle cx="1128" cy="63" r="191" fill="#f0abfc" opacity="0.14"/><circle cx="1445" cy="545" r="406" fill="#ffffff" opacity="0.14"/><circle cx="1105" cy="126" r="155" fill="#ffffff" opacity="0.18"/></g>
+<path d="M0 520 C400 400 1200 640 1600 520" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 580 C400 460 1200 700 1600 580" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 640 C400 520 1200 760 1600 640" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 700 C400 580 1200 820 1600 700" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 760 C400 640 1200 880 1600 760" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 820 C400 700 1200 940 1600 820" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 880 C400 760 1200 1000 1600 880" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/>
+</svg>

package/plugins/blog/public/samples/ember.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" width="1600" height="900">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#9a3412"/><stop offset="1" stop-color="#f97316"/></linearGradient>
+<filter id="blur"><feGaussianBlur stdDeviation="40"/></filter></defs>
+<rect width="1600" height="900" fill="url(#g)"/>
+<g filter="url(#blur)"><circle cx="1170" cy="33" r="339" fill="#f97316" opacity="0.22"/><circle cx="30" cy="211" r="356" fill="#ffffff" opacity="0.22"/><circle cx="1338" cy="830" r="202" fill="#f97316" opacity="0.1"/><circle cx="1003" cy="335" r="158" fill="#f97316" opacity="0.14"/><circle cx="739" cy="45" r="335" fill="#f97316" opacity="0.14"/><circle cx="727" cy="390" r="335" fill="#f97316" opacity="0.18"/><circle cx="537" cy="467" r="209" fill="#f97316" opacity="0.18"/></g>
+<path d="M0 520 C400 400 1200 640 1600 520" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 580 C400 460 1200 700 1600 580" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 640 C400 520 1200 760 1600 640" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 700 C400 580 1200 820 1600 700" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 760 C400 640 1200 880 1600 760" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 820 C400 700 1200 940 1600 820" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 880 C400 760 1200 1000 1600 880" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/>
+</svg>

package/plugins/blog/public/samples/harbour.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" width="1600" height="900">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#0c4a6e"/><stop offset="1" stop-color="#3b82f6"/></linearGradient>
+<filter id="blur"><feGaussianBlur stdDeviation="40"/></filter></defs>
+<rect width="1600" height="900" fill="url(#g)"/>
+<g filter="url(#blur)"><circle cx="25" cy="480" r="177" fill="#bae6fd" opacity="0.22"/><circle cx="1400" cy="44" r="191" fill="#3b82f6" opacity="0.1"/><circle cx="474" cy="728" r="191" fill="#3b82f6" opacity="0.14"/><circle cx="67" cy="678" r="151" fill="#bae6fd" opacity="0.14"/><circle cx="1097" cy="749" r="349" fill="#bae6fd" opacity="0.22"/><circle cx="1214" cy="95" r="180" fill="#ffffff" opacity="0.1"/><circle cx="699" cy="203" r="225" fill="#ffffff" opacity="0.18"/></g>
+<path d="M0 520 C400 400 1200 640 1600 520" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 580 C400 460 1200 700 1600 580" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 640 C400 520 1200 760 1600 640" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 700 C400 580 1200 820 1600 700" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 760 C400 640 1200 880 1600 760" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 820 C400 700 1200 940 1600 820" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 880 C400 760 1200 1000 1600 880" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/>
+</svg>

package/plugins/blog/public/samples/meadow.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" width="1600" height="900">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#365314"/><stop offset="1" stop-color="#84cc16"/></linearGradient>
+<filter id="blur"><feGaussianBlur stdDeviation="40"/></filter></defs>
+<rect width="1600" height="900" fill="url(#g)"/>
+<g filter="url(#blur)"><circle cx="1458" cy="392" r="418" fill="#fef08a" opacity="0.14"/><circle cx="342" cy="198" r="206" fill="#84cc16" opacity="0.1"/><circle cx="1551" cy="154" r="265" fill="#ffffff" opacity="0.1"/><circle cx="957" cy="886" r="179" fill="#84cc16" opacity="0.1"/><circle cx="345" cy="503" r="347" fill="#ffffff" opacity="0.18"/><circle cx="174" cy="703" r="250" fill="#84cc16" opacity="0.14"/><circle cx="669" cy="312" r="158" fill="#84cc16" opacity="0.18"/></g>
+<path d="M0 520 C400 400 1200 640 1600 520" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 580 C400 460 1200 700 1600 580" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 640 C400 520 1200 760 1600 640" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 700 C400 580 1200 820 1600 700" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 760 C400 640 1200 880 1600 760" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 820 C400 700 1200 940 1600 820" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/><path d="M0 880 C400 760 1200 1000 1600 880" stroke="#fff" stroke-opacity=".12" stroke-width="2" fill="none"/>
+</svg>