domma-cms 0.66.0 → 0.69.3

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

@@ -14,10 +14,159 @@ function slugify(s) {
 
 const BASE = '/api/plugins/blog';
 
+// The loader's cache-busting token, passed on so helpers are refetched with this view.
+const ASSET_VERSION = new URL(import.meta.url).searchParams.get('v') ?? '1';
+
+/** One layout choice - the body of the picker's data-each (see mountLayoutCard). */
+const LAYOUT_CHOICE = `
+<button type="button" class="blog-layout {{cls}}" role="radio" aria-checked="{{checked}}" data-layout="{{id}}" title="{{description}}">
+    <span class="blog-thumb" data-thumb="{{thumb}}" aria-hidden="true"></span>
+    <span class="blog-layout-name">{{label}}</span>
+</button>`;
+
+const PREVIEW_PANEL = `
+<div class="blog-preview">
+    <div class="blog-preview-bar">
+        <select class="form-select form-select-sm" aria-label="Layout" data-model="layout.value"
+                data-options="options.value" data-options-text="label" data-options-value="id"></select>
+        <div class="blog-seg" role="group" aria-label="Width">
+            <button type="button" data-on-click="desktop" data-bind-class="width.value === 'desktop' && 'is-on'" title="Desktop">
+                <span data-icon="monitor" data-icon-size="14"></span></button>
+            <button type="button" data-on-click="tablet" data-bind-class="width.value === 'tablet' && 'is-on'" title="Tablet">
+                <span data-icon="tablet" data-icon-size="14"></span></button>
+            <button type="button" data-on-click="phone" data-bind-class="width.value === 'phone' && 'is-on'" title="Phone">
+                <span data-icon="smartphone" data-icon-size="14"></span></button>
+        </div>
+        <span data-help-title="Preview"
+              data-help="The post as it will look on the site, from what is in the editor now - nothing is saved. Try another layout here; Use this layout keeps it for the post. Links are switched off inside the preview."></span>
+        <span class="blog-spacer"></span>
+        <span class="blog-preview-state" data-bind-text="state.value"></span>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="use" data-bind-disabled="!changed.value">Use this layout</button>
+    </div>
+    <div class="blog-preview-stage" data-bind-class="'is-' + width.value">
+        <iframe title="Post preview"></iframe>
+    </div>
+</div>`;
+
+/**
+ * The Layout card: a picker over every post layout on offer (the shipped four
+ * and any blog-post-* block the site added), and a Preview panel that renders
+ * the UNSAVED post in any of them.
+ *
+ * domma-reactive, like the rest of the Tool upgrade path; the item template is
+ * inserted here because the router renders the page template through _.render,
+ * which eats {{…}}.
+ *
+ * @param {HTMLElement} card
+ * @param {{current: string, collect: () => object}} opts
+ * @returns {Promise<{value: () => string}>}
+ */
+async function mountLayoutCard(card, {current, collect}) {
+    const BASE_URL = '/api/plugins/blog';
+    let catalogue = {postLayouts: [], postLayout: 'blog-post-classic'};
+    try { catalogue = await H.get(`${BASE_URL}/layouts`); } catch { /* the card still offers Site default */ }
+    const known = catalogue.postLayouts ?? [];
+    const defaultLabel = known.find(l => l.id === catalogue.postLayout)?.label ?? 'Classic';
+    const thumbOf = (id) => (['blog-post-classic', 'blog-post-feature', 'blog-post-minimal', 'blog-post-sidebar'].includes(id) ? id.slice(10) : 'custom');
+
+    const choices = [
+        {id: '', label: 'Site default', description: `Follows Blog settings - currently ${defaultLabel}.`, thumb: thumbOf(catalogue.postLayout)},
+        ...known.map(l => ({id: l.id, label: l.label, description: l.description, thumb: thumbOf(l.id)})),
+        ...(current && !known.some(l => l.id === current) ? [{id: current, label: `${current} (missing)`, description: 'This block no longer exists; the site default is used.', thumb: 'custom'}] : [])
+    ];
+
+    const layout = M.observable(current || '');
+    const layoutChoices = M.observable([]);
+    M.effect(() => {
+        layoutChoices.value = choices.map(c => ({...c, id: c.id || 'default', checked: String(c.id === layout.value), cls: c.id === layout.value ? 'is-on' : ''}));
+    });
+    const data = {
+        layoutChoices,
+        layoutDesc: M.computed(() => choices.find(c => c.id === layout.value)?.description ?? '')
+    };
+
+    card.querySelector('.blog-layouts').innerHTML = LAYOUT_CHOICE;
+    M.applyBindings(data, card.querySelector('.card-body'));
+    card.querySelector('.blog-layouts').addEventListener('click', (e) => {
+        const b = e.target.closest('[data-layout]');
+        if (b) layout.value = b.dataset.layout === 'default' ? '' : b.dataset.layout;
+    });
+    card.querySelector('#btn-preview').addEventListener('click', () => openPreview());
+
+    async function openPreview() {
+        const kit = await import('./kit.js?v=' + (new URL(import.meta.url).searchParams.get('v') ?? '1'));
+        const trial = M.observable(layout.peek() || catalogue.postLayout || 'blog-post-classic');
+        const width = M.observable('desktop');
+        const state = M.observable('');
+        const pdata = {
+            layout: trial, width, state,
+            options: M.observable(known.map(l => ({id: l.id, label: l.label}))),
+            changed: M.computed(() => trial.value !== (layout.value || catalogue.postLayout))
+        };
+        const so = E.slideover({title: 'Preview', size: 'xl', position: 'right'});
+        const el = kit.fragment(PREVIEW_PANEL);
+        so.element.appendChild(el);
+        const disposeHelp = await kit.scanHelp(el);
+        const frame = el.querySelector('iframe');
+        const handle = M.applyBindings(pdata, el, {
+            methods: {
+                desktop: () => { width.value = 'desktop'; },
+                tablet: () => { width.value = 'tablet'; },
+                phone: () => { width.value = 'phone'; },
+                use() {
+                    layout.value = trial.peek() === catalogue.postLayout && !layout.peek() ? '' : trial.peek();
+                    E.toast('Layout chosen - Save to keep it.', {type: 'success'});
+                }
+            }
+        });
+        if (typeof I !== 'undefined' && I.scan) I.scan(el);
+
+        let seq = 0;
+        const stop = M.effect(async () => {
+            const chosen = trial.value;
+            const mine = ++seq;
+            state.value = 'Rendering…';
+            try {
+                const res = await H.post(`${BASE_URL}/preview`, {...collect(), layout: chosen});
+                if (mine !== seq) return;
+                if (res?.error) throw new Error(res.error);
+                // The page's own addresses (/dist/…, /plugins/…) resolve against the site.
+                frame.srcdoc = String(res.html).replace(/<head>/i, `<head><base href="${location.origin}/">`);
+                state.value = '';
+            } catch (err) {
+                if (mine === seq) state.value = err?.message ?? 'Preview failed.';
+            }
+        });
+        // Links inside the preview would navigate the frame away from the post.
+        frame.addEventListener('load', () => {
+            try {
+                frame.contentDocument.addEventListener('click', (e) => {
+                    if (e.target.closest('a[href]') && !e.target.closest('a[href^="#"]')) {
+                        e.preventDefault();
+                        E.toast('Links are switched off in the preview.', {type: 'info'});
+                    }
+                }, true);
+            } catch { /* not ours to reach */ }
+        });
+        kit.onceClosed(so, () => { stop?.(); handle.dispose(); disposeHelp(); });
+        so.open();
+    }
+
+    return {value: () => layout.peek()};
+}
+
 export const postEditorView = {
     templateUrl: '/plugins/blog/admin/templates/post-editor.html',
 
     async onMount($container) {
+        // Help (?) popovers, loaded at run time - a plugin must not import admin/.
+        // Scanned now, before anything below reshapes the form.
+        import('/admin/js/lib/help-popover.js')
+            .then(m => m.helpPopovers?.($container, {position: 'bottom'}))
+            .catch(() => null);
+        import(`./settings-cog.js?v=${ASSET_VERSION}`)
+            .then(m => m.addSettingsCog($container, '.view-header-actions'))
+            .catch(() => { /* no cog is better than no screen */ });
         // Domma's router hands onMount ONE argument and never the route params,
         // and `R.current` is a METHOD - `R.current?.params` is undefined on the
         // function object, so this view opened blank on every edit and Save
@@ -25,8 +174,9 @@ export const postEditorView = {
         // view does.
         const routeMatch = location.hash.match(/^#\/plugins\/blog\/posts\/([^?#]+)/);
         const routeId = routeMatch ? decodeURIComponent(routeMatch[1]) : null;
-        const id = routeId && routeId !== 'new' ? routeId : null;
-        const isEdit = Boolean(id);
+        // `let`: a new post becomes an existing one on its first Save.
+        let id = routeId && routeId !== 'new' ? routeId : null;
+        let isEdit = Boolean(id);
 
         let post = null;
         let categories = [];
@@ -69,7 +219,7 @@ export const postEditorView = {
         const imagePreviewEl = $container.find('#featured-image-preview').get(0);
         const clearImageBtn = $container.find('#btn-clear-image').get(0);
 
-        if (titleEl) titleEl.textContent = isEdit ? 'Edit Post' : 'New Post';
+        if (titleEl) titleEl.textContent = isEdit ? 'Editing post' : 'New post';
 
         if (isEdit && post) {
             if (postTitleEl) postTitleEl.value = post.title ?? '';
@@ -136,8 +286,14 @@ export const postEditorView = {
             }
         }
 
+        const layoutCard = await mountLayoutCard($container.find('#layout-card').get(0), {
+            current: post?.template ?? '',
+            collect: () => ({...collectValues(), id})
+        });
+
         function collectValues() {
             return {
+                template:      layoutCard.value(),
                 title:         postTitleEl?.value?.trim() ?? '',
                 slug:          postSlugEl?.value?.trim() ?? '',
                 excerpt:       excerptEl?.value?.trim() ?? '',
@@ -156,6 +312,7 @@ export const postEditorView = {
             const body = { ...collectValues(), ...extra };
             if (!body.title) {
                 E.toast('Title is required.', { type: 'error' });
+                postTitleEl?.focus();
                 return null;
             }
             try {
@@ -163,13 +320,107 @@ export const postEditorView = {
                     ? await H.put(`${BASE}/posts/${id}`, body)
                     : await H.post(`${BASE}/posts`, body);
                 if (res.error) throw new Error(res.error);
-                return res.data ?? res;
+                const saved = res.data ?? res;
+                // A new post is an existing one from here on: later saves
+                // update it, and the address says which post this is (no
+                // hashchange, so the view is not re-mounted).
+                if (!isEdit && saved?.id) {
+                    id = saved.id;
+                    isEdit = true;
+                    history.replaceState(history.state, '', `#/plugins/blog/posts/${encodeURIComponent(id)}`);
+                    if (titleEl) titleEl.textContent = 'Editing post';
+                }
+                post = saved;
+                baseline = JSON.stringify(collectValues());
+                setStatus(saved.status ?? status);
+                showSaved();
+                return saved;
             } catch (err) {
                 E.toast(err?.message ?? 'Failed to save post.', { type: 'error' });
                 return null;
             }
         }
 
+        // ---- Status, and whether anything is unsaved ----
+        let status = post?.status ?? 'draft';
+        let baseline = JSON.stringify(collectValues());
+        let savedAt = null;
+        const saveStateEl = $container.find('#save-state').get(0);
+        const draftsBtn = $container.find('#btn-drafts').get(0);
+        const isDirty = () => JSON.stringify(collectValues()) !== baseline;
+
+        function showSaved() {
+            savedAt = new Date();
+            refreshState();
+        }
+        function refreshState() {
+            if (!saveStateEl) return;
+            const dirty = isDirty();
+            saveStateEl.classList.toggle('is-dirty', dirty);
+            saveStateEl.textContent = dirty
+                ? 'Unsaved changes'
+                : savedAt ? `Saved ${savedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : '';
+        }
+        function setStatus(next) {
+            status = next || 'draft';
+            if (statusBadge) {
+                statusBadge.textContent = status;
+                statusBadge.className = `badge ${({ published: 'badge-success', scheduled: 'badge-warning' })[status] ?? 'badge-secondary'}`;
+            }
+            const live = status === 'published';
+            $container.find('#btn-publish').get(0)?.classList.toggle('blog-hidden', live);
+            $container.find('#btn-schedule').get(0)?.classList.toggle('blog-hidden', live);
+            draftsBtn?.classList.toggle('blog-hidden', status === 'draft');
+        }
+        setStatus(status);
+
+        // Anything typed, ticked or picked may change what would be saved.
+        let queued = false;
+        const recheck = () => {
+            if (queued) return;
+            queued = true;
+            queueMicrotask(() => { queued = false; refreshState(); });
+        };
+        ['input', 'change', 'click'].forEach(ev => $container.get(0).addEventListener(ev, recheck));
+
+        async function save() {
+            if (await doSave()) E.toast(status === 'published' ? 'Saved - the live post is updated.' : 'Saved.', { type: 'success' });
+        }
+
+        async function goBack() {
+            if (isDirty() && !(await E.confirm('Leave without saving? Your changes to this post will be lost.'))) return;
+            baseline = JSON.stringify(collectValues());   // do not ask twice (beforeunload)
+            R.navigate('#/plugins/blog/posts');
+        }
+
+        $container.find('#btn-save').get(0)?.addEventListener('click', save);
+        $container.find('#btn-back').get(0)?.addEventListener('click', goBack);
+        draftsBtn?.addEventListener('click', async () => {
+            const saved = await doSave({ status: 'draft' });
+            if (saved) E.toast('Moved to drafts - it is no longer on the site.', { type: 'success' });
+        });
+
+        // Ctrl/Cmd+S saves; a closing tab with unsaved work asks first. Both
+        // come off when the hash leaves this editor (the router has no unmount).
+        const onKey = (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
+                e.preventDefault();
+                save();
+            }
+        };
+        const onUnload = (e) => {
+            if (isDirty()) { e.preventDefault(); e.returnValue = ''; }
+        };
+        document.addEventListener('keydown', onKey);
+        window.addEventListener('beforeunload', onUnload);
+        const onHash = () => {
+            if (/^#\/plugins\/blog\/posts\/[^/]+$/.test(location.hash)) return;
+            document.removeEventListener('keydown', onKey);
+            window.removeEventListener('beforeunload', onUnload);
+            window.removeEventListener('hashchange', onHash);
+        };
+        window.addEventListener('hashchange', onHash);
+
         if (postTitleEl) {
             postTitleEl.addEventListener('input', () => {
                 if (slugAutoEl?.checked && postSlugEl) {
@@ -199,17 +450,6 @@ export const postEditorView = {
             });
         }
 
-        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/posts');
-                }
-            });
-        }
-
         const publishBtn = $container.find('#btn-publish').get(0);
         if (publishBtn) {
             publishBtn.addEventListener('click', async () => {
@@ -217,10 +457,11 @@ export const postEditorView = {
                 if (!saved) return;
                 const savedId = saved.id ?? id;
                 try {
-                    const res = await H.post(`${BASE}/posts/${savedId}/publish`);
+                    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/posts');
+                    post = res.data ?? res;
+                    setStatus('published');
+                    E.toast('Published - the post is live.', { type: 'success' });
                 } catch (err) {
                     E.toast(err?.message ?? 'Failed to publish post.', { type: 'error' });
                 }
@@ -229,7 +470,6 @@ export const postEditorView = {
 
         const scheduleBtn = $container.find('#btn-schedule').get(0);
         if (scheduleBtn) {
-            scheduleBtn.classList.remove('blog-hidden');
             scheduleBtn.addEventListener('click', async () => {
                 // First click reveals the picker; the second one schedules.
                 if (scheduleEl) scheduleEl.classList.toggle('blog-hidden');
@@ -248,8 +488,10 @@ export const postEditorView = {
                 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/posts');
+                    post = res.data ?? res;
+                    setStatus('scheduled');
+                    if (scheduleEl) scheduleEl.classList.add('blog-hidden');
+                    E.toast(`Scheduled for ${new Date(publishedAt).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}.`, { type: 'success' });
                 } catch (err) {
                     E.toast(err?.message ?? 'Failed to schedule post.', { type: 'error' });
                 }
@@ -324,6 +566,12 @@ export const postEditorView = {
             slideover.open();
         }
 
+        // Again at the end: the plugin chrome rebuilds the header after the
+        // scan at the top, so its (?) would otherwise never appear. Markers
+        // already converted are skipped.
+        import('/admin/js/lib/help-popover.js')
+            .then(m => m.helpPopovers?.($container, {position: 'bottom'}))
+            .catch(() => null);
         Domma.icons.scan();
     }
 };

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

@@ -0,0 +1,56 @@
+/**
+ * The settings cog in the admin's plugin banner, to the left of the licence.
+ * It opens the settings in a (resizable) slideover rather than leaving the
+ * screen; #/plugins/blog/settings still works for anything that links there.
+ *
+ * Every plugin puts its settings in the same place, so it is not a sidebar item
+ * here any more. The banner belongs to the admin, and addBannerAction() is its
+ * door - imported at RUN time, because a static import would take the view
+ * down on a CMS whose admin predates it. There, the cog goes at the end of the
+ * view's own header row instead.
+ *
+ * @module blog/admin/views/settings-cog
+ */
+
+// The loader's cache-busting token, passed on so the kit is refetched with this file.
+const ASSET_VERSION = new URL(import.meta.url).searchParams.get('v') ?? '1';
+
+/** Settings open in a slideover over whichever Blog screen you are on. */
+async function openSettings() {
+    try {
+        const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
+        await kit.openSettings();
+    } catch {
+        // The slideover is the better place, not the only one.
+        R.navigate('#/plugins/blog/settings');
+    }
+}
+
+/**
+ * @param {object} $container - the view container onMount was given
+ * @param {string} fallback    - selector for the header row to use without a banner
+ */
+export async function addSettingsCog($container, fallback) {
+    const onClick = () => openSettings();
+    try {
+        const chrome = await import('/admin/js/lib/plugin-chrome.js');
+        const placed = chrome.addBannerAction?.($container, {
+            id: 'blog-settings', icon: 'settings', title: 'Blog settings', onClick
+        });
+        if (placed) return;
+    } catch { /* older admin: fall through */ }
+
+    const row = $container.find(fallback).get(0);
+    if (!row) return;
+    const cog = document.createElement('button');
+    cog.type = 'button';
+    cog.className = 'btn btn-sm btn-ghost';
+    cog.title = 'Settings';
+    const glyph = document.createElement('span');
+    glyph.setAttribute('data-icon', 'settings');
+    glyph.setAttribute('data-icon-size', '16');
+    cog.appendChild(glyph);
+    cog.addEventListener('click', onClick);
+    row.appendChild(cog);
+    if (typeof I !== 'undefined' && I.scan) I.scan(cog);
+}

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

@@ -1,102 +1,32 @@
 /**
- * Blog settings admin view.
+ * Blog settings as a page - the old #/plugins/blog/settings route.
+ *
+ * Settings live behind the banner cog now, in a slideover over whichever Blog
+ * screen you are on. This route stays so a bookmark or a link from elsewhere
+ * still lands somewhere useful: it renders the SAME panel (kit.settingsPanel),
+ * so the page and the slideover cannot drift apart.
  *
  * @module blog/admin/views/settings
  */
 
-const BASE = '/api/plugins/blog';
+// The loader's cache-busting token, passed on so the kit is refetched with this view.
+const ASSET_VERSION = new URL(import.meta.url).searchParams.get('v') ?? '1';
 
 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 takes a SCHEMA, initial data and options, and renders with
-        // .renderTo() - it does not take a container. Passing the element as the
-        // first argument made it the schema, so this form rendered nothing at
-        // all. See admin/js/views/plugins.js for the house pattern.
-        const form = F.create(
-            {
-                basePath: {
-                    type: 'string', label: 'Base path', default: '/blog',
-                    // placeholder and hint live under formConfig - Forma reads
-                    // fieldDef.formConfig, and a top-level `placeholder` or
-                    // `help` is silently ignored.
-                    formConfig: {placeholder: '/blog', hint: 'URL prefix for all blog pages (e.g. /blog).'}
-                },
-                postsPerPage: {
-                    type: 'number', label: 'Posts per page', default: 10,
-                    formConfig: {placeholder: '10', hint: 'Number of posts shown per listing page.'}
-                },
-                commentsEnabled: {
-                    type: 'boolean', label: 'Enable comments',
-                    formConfig: {hint: 'Allow readers to submit comments on posts.'}
-                },
-                commentModeration: {
-                    type: 'boolean', label: 'Moderate comments',
-                    formConfig: {hint: 'Hold new comments for approval before they appear.'}
-                },
-                feedLength: {
-                    type: 'number', label: 'RSS feed length', default: 20,
-                    formConfig: {placeholder: '20', hint: 'Maximum number of items in the RSS/Atom feed.'}
-                }
-            },
-            {
-                basePath:          settings.basePath ?? '/blog',
-                postsPerPage:      settings.postsPerPage ?? 10,
-                commentsEnabled:   settings.commentsEnabled ?? true,
-                commentModeration: settings.commentModeration ?? true,
-                feedLength:        settings.feedLength ?? 20
-            },
-            { showSubmitButton: false }
-        );
-        form.renderTo(formEl);
-
-        const saveBtn = $container.find('#btn-save-settings').get(0);
-        saveBtn?.addEventListener('click', async () => {
-            if (!form.validate()) return;
-            const values = form.getData();
-            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();
+        const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
+        const add = kit.viewScope('settings', /^#\/plugins\/blog\/settings\b/);
+
+        const host = $container.find('#settings-form').get(0);
+        if (!host) return;
+        const {el, dispose} = await kit.settingsPanel();
+        host.appendChild(el);
+        add(dispose);
     }
 };

package/plugins/blog/blocks/blog-card-compact.css

@@ -0,0 +1,17 @@
+display: grid;
+grid-template-columns: 7.5rem 1fr auto auto;
+align-items: baseline;
+gap: 1rem;
+padding: .6rem .25rem;
+border-bottom: 1px solid var(--dm-border, rgba(127,127,127,.2));
+&:hover { background: rgba(127,127,127,.06); }
+.bk-date { font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: .85rem; }
+.bk-title { font-weight: 600; color: inherit; text-decoration: none; min-width: 0; }
+.bk-title:hover { color: var(--dm-primary); }
+.bk-cats { display: inline-flex; gap: .3rem; }
+.bk-time { font-size: .8rem; color: var(--dm-text-muted); white-space: nowrap; }
+@media (max-width: 640px) {
+  grid-template-columns: 1fr auto;
+  .bk-date { grid-column: 1 / -1; }
+  .bk-cats { display: none; }
+}

package/plugins/blog/blocks/blog-card-compact.html

@@ -0,0 +1,8 @@
+<!--
+  blog-card-compact - a title and a date on one line (the Compact display).
+  Same placeholders as blog-card.
+-->
+<time class="bk-date" datetime="{{publishedAt}}">{{publishedAt:DD MMM YYYY}}</time>
+<a class="bk-title" href="{{url}}">{{title}}</a>
+<span class="bk-cats">{{{categories}}}</span>
+<span class="bk-time">{{readingTime}}</span>

package/plugins/blog/blocks/blog-card-row.css

@@ -0,0 +1,22 @@
+display: grid;
+grid-template-columns: minmax(0, 15rem) 1fr;
+gap: 1.25rem;
+align-items: start;
+padding: 1.1rem 0;
+border-bottom: 1px solid var(--dm-border, rgba(127,127,127,.25));
+&:has(.br-media.no-image) { grid-template-columns: 1fr; }
+.br-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--dm-radius-md, 8px); overflow: hidden; }
+.br-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
+&:hover .br-media img { transform: scale(1.04); }
+.br-media.no-image { display: none; }
+.br-body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
+.br-meta { margin: 0; font-size: .8rem; color: var(--dm-text-muted); text-transform: uppercase; letter-spacing: .04em; }
+.br-title { margin: 0; font-size: 1.35rem; line-height: 1.25; }
+.br-title a { color: inherit; text-decoration: none; }
+.br-title a:hover { color: var(--dm-primary); }
+.br-excerpt { margin: 0; color: var(--dm-text-muted); line-height: 1.6; }
+.br-excerpt:empty { display: none; }
+.br-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; font-size: .85rem; }
+.br-cats { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
+.br-author { color: var(--dm-text-muted); }
+@media (max-width: 640px) { grid-template-columns: 1fr; }

package/plugins/blog/blocks/blog-card-row.html

@@ -0,0 +1,11 @@
+<!--
+  blog-card-row - one post per row, picture beside the text (the List display).
+  Same placeholders as blog-card.
+-->
+<a class="br-media {{imageClass}}" href="{{url}}" tabindex="-1" aria-hidden="true">{{{image}}}</a>
+<div class="br-body">
+  <p class="br-meta"><time datetime="{{publishedAt}}">{{publishedAt:D MMMM YYYY}}</time> · {{readingTime}}</p>
+  <h2 class="br-title"><a href="{{url}}">{{title}}</a></h2>
+  <p class="br-excerpt">{{excerpt}}</p>
+  <div class="br-foot"><span class="br-cats">{{{categories}}}</span><a class="br-author" href="{{authorUrl}}">{{authorName}}</a></div>
+</div>

package/plugins/blog/blocks/blog-card.css

@@ -0,0 +1,35 @@
+display: flex;
+flex-direction: column;
+border: 1px solid var(--dm-border, rgba(127,127,127,.25));
+border-radius: var(--dm-radius-lg, 12px);
+overflow: hidden;
+background: var(--dm-surface, transparent);
+transition: transform .15s ease, box-shadow .15s ease;
+&:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-md, 0 10px 28px rgba(0,0,0,.12)); }
+.bc-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(127,127,127,.08); }
+.bc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
+&:hover .bc-media img { transform: scale(1.04); }
+.bc-media.no-image { display: none; }
+.bc-body { flex: 1; display: flex; flex-direction: column; gap: .45rem; padding: 1rem 1.1rem 1.1rem; }
+.bc-kicker { display: flex; flex-wrap: wrap; gap: .35rem; }
+.bc-kicker:empty { display: none; }
+.bc-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
+.bc-title a { color: inherit; text-decoration: none; }
+.bc-title a:hover { color: var(--dm-primary); }
+.bc-excerpt { margin: 0; color: var(--dm-text-muted); font-size: .93rem; line-height: 1.55;
+  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.bc-excerpt:empty { display: none; }
+.bc-meta { margin: auto 0 0; padding-top: .35rem; font-size: .8rem; color: var(--dm-text-muted); }
+.bc-meta a { color: inherit; }
+/* Magazine: the first post leads, across the whole grid. */
+&.is-lead { grid-column: 1 / -1; flex-direction: row; }
+&.is-lead .bc-media { flex: 0 0 58%; aspect-ratio: auto; min-height: 320px; }
+&.is-lead .bc-body { justify-content: center; padding: 1.75rem; }
+&.is-lead .bc-title { font-size: 1.85rem; }
+&.is-lead .bc-excerpt { font-size: 1.05rem; -webkit-line-clamp: 5; }
+&.is-lead .bc-meta { margin-top: .5rem; }
+@media (max-width: 760px) {
+  &.is-lead { flex-direction: column; }
+  &.is-lead .bc-media { min-height: 0; aspect-ratio: 16 / 9; }
+  &.is-lead .bc-title { font-size: 1.4rem; }
+}