domma-cms 0.69.3 → 0.70.0

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

@@ -67,7 +67,7 @@ async function mountLayoutCard(card, {current, collect}) {
     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 thumbOf = (id) => (['blog-post-classic', 'blog-post-feature', 'blog-post-minimal', 'blog-post-sidebar', 'blog-post-split', 'blog-post-essay'].includes(id) ? id.slice(10) : 'custom');
 
     const choices = [
         {id: '', label: 'Site default', description: `Follows Blog settings - currently ${defaultLabel}.`, thumb: thumbOf(catalogue.postLayout)},
@@ -155,6 +155,173 @@ async function mountLayoutCard(card, {current, collect}) {
     return {value: () => layout.peek()};
 }
 
+const STAMP_FORMAT = 'D MMM YYYY, HH:mm';
+const STATUS_CLASS = {published: 'badge-success', scheduled: 'badge-warning'};
+
+/**
+ * The Status card: the badge, and when the post went (or goes) live, was last
+ * saved and was created. Reactive: `set(post)` after any load, save, publish or
+ * schedule and the card follows. The "3 days ago" part ticks once a minute.
+ *
+ * Every computed reads the observables directly - a binding hung off a
+ * computed derived from another computed applies once and then freezes.
+ *
+ * @param   {HTMLElement} card
+ * @returns {{set: (post: object|null) => void, status: object, dispose: () => void}}
+ */
+function mountStatusCard(card) {
+    const status = M.observable('draft');
+    const publishedAt = M.observable('');
+    const updatedAt = M.observable('');
+    const createdAt = M.observable('');
+    const now = M.observable(Date.now());
+    const tick = setInterval(() => { now.value = Date.now(); }, 60000);
+
+    const when = (iso) => (iso && !Number.isNaN(Date.parse(iso)) ? D(iso).format(STAMP_FORMAT) : '');
+    const ago = (iso, at) => (iso && !Number.isNaN(Date.parse(iso)) ? `(${D(iso).fromNow(at)})` : '');
+
+    const data = {
+        status,
+        statusClass: M.computed(() => STATUS_CLASS[status.value] ?? 'badge-secondary'),
+        liveLabel: M.computed(() => (status.value === 'scheduled' ? 'Goes live' : 'Published')),
+        liveWhen: M.computed(() => (status.value === 'draft' ? '' : when(publishedAt.value))),
+        liveAgo: M.computed(() => (status.value === 'draft' ? '' : ago(publishedAt.value, now.value))),
+        savedWhen: M.computed(() => when(updatedAt.value)),
+        savedAgo: M.computed(() => ago(updatedAt.value, now.value)),
+        createdWhen: M.computed(() => when(createdAt.value))
+    };
+    const handle = M.applyBindings(data, card.querySelector('.card-body'));
+
+    return {
+        status,
+        set(post) {
+            publishedAt.value = post?.publishedAt ?? '';
+            updatedAt.value = post?.updatedAt ?? post?.createdAt ?? '';
+            createdAt.value = post?.createdAt ?? '';
+            now.value = Date.now();
+        },
+        dispose() { clearInterval(tick); handle?.dispose?.(); }
+    };
+}
+
+/**
+ * A typeable pick-list with the choices shown as pills, each with an x -
+ * Domma's Pillbox over a plain input. Clicking the box (or ArrowDown in it)
+ * drops the whole list; typing narrows it.
+ *
+ * `creatable` also takes free text: Enter or a comma makes a pill of what was
+ * typed, a pasted "a, b, c" becomes three, and text left in the box when it
+ * loses focus is kept rather than lost. Matching ignores case, so "News" and
+ * "news" are one tag.
+ *
+ * Labels reach the page as text, never markup: category names and tags are
+ * typed by people.
+ *
+ * @param {HTMLInputElement} input
+ * @param {object}   opts
+ * @param {{value: string, label: string}[]} opts.data  - the choices
+ * @param {string[]} opts.value                         - selected values
+ * @param {boolean}  [opts.creatable=false]
+ * @param {string}   opts.placeholder
+ * @param {string}   opts.empty                         - shown when nothing matches
+ * @param {object}   opts.selected                      - an observable the values are written to
+ * @returns {{pending: () => string, destroy: () => void}}
+ */
+function mountPills(input, {data, value, creatable = false, placeholder, empty, selected}) {
+    const same = (a, b) => String(a).toLowerCase() === String(b).toLowerCase();
+    let box = null;
+    let field = null;
+    box = E.pillbox(input, {
+        data,
+        value,
+        searchable: true,
+        creatable,
+        clearable: false,
+        placeholder,
+        noResultsMessage: empty,
+        duplicateMessage: 'Already added',
+        renderPill: ({label}) => {
+            const span = document.createElement('span');
+            span.textContent = label;
+            return span;
+        },
+        validatePill: (v) => (box && box.getValue().some(x => same(x, v)) ? 'Already added' : true),
+        onChange: (values) => { selected.value = [...values]; },
+        onCreate: () => box?.close(),
+        // A repeat is dropped, and so is its text - left in the box it ran
+        // into the next word typed.
+        onValidationError: (msg, value) => {
+            if (field) field.value = '';
+            box?.close();
+            E.toast(msg === 'Already added' ? `"${value}" is already on this post.` : msg, {type: 'info'});
+        }
+    });
+    selected.value = box.getValue();
+
+    const wrapper = input.nextElementSibling;
+    field = wrapper?.querySelector('.dm-pillbox-input');
+    if (!field) return {pending: () => '', destroy: () => box.destroy?.()};
+
+    // Pillbox only opens once something is typed; a list you cannot see is a
+    // list you cannot pick from. _filterOptions is Pillbox's own "narrow to
+    // this" - with '' it is "everything not yet chosen".
+    const showAll = () => {
+        if (field.value || typeof box._filterOptions !== 'function') return;
+        if (!data.some(d => !box.getValue().includes(d.value))) return;
+        box._filterOptions('');
+    };
+    wrapper.querySelector('.dm-pillbox-container')?.addEventListener('click', showAll);
+    field.addEventListener('keydown', (e) => {
+        if (e.key === 'ArrowDown' && !box.isOpen()) { e.preventDefault(); showAll(); }
+    });
+
+    const commit = (text) => {
+        const t = String(text).trim();
+        if (!t) return;
+        const known = data.find(d => same(d.label, t));
+        if (box.getValue().some(x => same(x, known?.value ?? t))) {
+            E.toast(`"${t}" is already on this post.`, {type: 'info'});
+            return;
+        }
+        box.addPill(known?.value ?? t, known?.label ?? t);
+    };
+    if (creatable) {
+        // Enter with no suggestion highlighted goes through commit() rather
+        // than Pillbox's own create, so "RELEASE" becomes the "release" the
+        // site already uses instead of a second spelling of it. Capture phase:
+        // this has to run before Pillbox's handler on the input.
+        wrapper.addEventListener('keydown', (e) => {
+            if (e.target !== field || e.key !== 'Enter' || !field.value.trim()) return;
+            if (wrapper.querySelector('.dm-pillbox-option.active')) return;
+            e.preventDefault();
+            e.stopPropagation();
+            commit(field.value);
+            field.value = '';
+            box.close();
+        }, true);
+        field.addEventListener('input', () => {
+            if (!field.value.includes(',')) return;
+            const parts = field.value.split(',');
+            const rest = parts.pop();
+            parts.forEach(commit);
+            field.value = rest.trimStart();
+            if (!field.value) box.close();
+        });
+        // Later than Pillbox's own blur (200ms), so a click on a suggestion
+        // wins over the half-typed word it was chosen to replace.
+        field.addEventListener('blur', () => setTimeout(() => {
+            if (document.activeElement === field || !field.value.trim()) return;
+            commit(field.value);
+            field.value = '';
+        }, 250));
+    }
+
+    return {
+        pending: () => (creatable ? field.value.trim() : ''),
+        destroy: () => box.destroy?.()
+    };
+}
+
 export const postEditorView = {
     templateUrl: '/plugins/blog/admin/templates/post-editor.html',
 
@@ -180,7 +347,6 @@ export const postEditorView = {
 
         let post = null;
         let categories = [];
-        let selectedCategoryIds = [];
         let featuredImageUrl = '';
 
         try {
@@ -210,12 +376,11 @@ export const postEditorView = {
         const excerptEl     = $container.find('#post-excerpt').get(0);
         const contentEl     = $container.find('#post-content').get(0);
         const tagsEl        = $container.find('#post-tags').get(0);
+        const catsEl        = $container.find('#post-categories').get(0);
         const seoTitleEl    = $container.find('#seo-title').get(0);
         const seoDescEl     = $container.find('#seo-description').get(0);
-        const statusBadge   = $container.find('#post-status-badge').get(0);
         const scheduleEl    = $container.find('#schedule-picker').get(0);
         const schedAtEl     = $container.find('#post-scheduled-at').get(0);
-        const catsListEl    = $container.find('#categories-checklist').get(0);
         const imagePreviewEl = $container.find('#featured-image-preview').get(0);
         const clearImageBtn = $container.find('#btn-clear-image').get(0);
 
@@ -226,11 +391,8 @@ export const postEditorView = {
             if (postSlugEl)  postSlugEl.value  = post.slug ?? '';
             if (excerptEl)   excerptEl.value   = post.excerpt ?? '';
             if (contentEl)   contentEl.value   = post.content ?? '';
-            if (tagsEl)      tagsEl.value      = Array.isArray(post.tags) ? post.tags.join(', ') : (post.tags ?? '');
             if (seoTitleEl)  seoTitleEl.value  = post.seo?.title ?? '';
             if (seoDescEl)   seoDescEl.value   = post.seo?.description ?? '';
-            if (statusBadge) statusBadge.textContent = post.status ?? 'draft';
-            selectedCategoryIds = Array.isArray(post.categories) ? [...post.categories] : [];
             featuredImageUrl = post.featuredImage ?? '';
             renderImagePreview();
         } else {
@@ -252,39 +414,51 @@ export const postEditorView = {
             }
         }
 
-        if (catsListEl) {
-            while (catsListEl.firstChild) catsListEl.removeChild(catsListEl.firstChild);
-            if (categories.length === 0) {
-                const p = document.createElement('p');
-                p.className = 'text-muted text-sm';
-                p.textContent = 'No categories yet.';
-                catsListEl.appendChild(p);
-            } else {
-                categories.forEach((cat) => {
-                    const label = document.createElement('label');
-                    label.className = 'flex items-center gap-2 mb-2 blog-clickable';
-
-                    const cb = document.createElement('input');
-                    cb.type = 'checkbox';
-                    cb.value = cat.id;
-                    cb.checked = selectedCategoryIds.includes(cat.id);
-                    cb.addEventListener('change', () => {
-                        if (cb.checked) {
-                            if (!selectedCategoryIds.includes(cat.id)) selectedCategoryIds.push(cat.id);
-                        } else {
-                            selectedCategoryIds = selectedCategoryIds.filter((x) => x !== cat.id);
-                        }
-                    });
-
-                    const span = document.createElement('span');
-                    span.textContent = cat.name ?? cat.slug ?? cat.id;
-
-                    label.appendChild(cb);
-                    label.appendChild(span);
-                    catsListEl.appendChild(label);
-                });
+        // ---- Status, categories and tags (domma-reactive) ----
+        const disposers = [];
+        const stamps = mountStatusCard($container.find('#status-card').get(0));
+        stamps.set(post);
+        disposers.push(() => stamps.dispose());
+
+        // A category deleted since the post was saved has no name to show; it
+        // is kept as it was rather than silently dropped on the next save.
+        const knownIds = new Set(categories.map(c => c.id));
+        const postCats = Array.isArray(post?.categories) ? post.categories : [];
+        const unknownCats = postCats.filter(cid => !knownIds.has(cid));
+        const selectedCats = M.observable([]);
+        const cats = catsEl ? mountPills(catsEl, {
+            data: categories.map(c => ({value: c.id, label: c.name ?? c.slug ?? c.id})),
+            value: postCats.filter(cid => knownIds.has(cid)),
+            placeholder: categories.length ? 'Type or click to choose…' : 'No categories yet',
+            empty: 'No category by that name',
+            selected: selectedCats
+        }) : null;
+        if (!categories.length) $container.find('#categories-note').get(0)?.classList.remove('blog-hidden');
+        disposers.push(() => cats?.destroy());
+
+        // Suggestions: every tag already on a post, most used first.
+        let tagChoices = [];
+        try {
+            const res = await H.get(`${BASE}/posts`);
+            const all = res?.data ?? (Array.isArray(res) ? res : []);
+            const counts = new Map();
+            for (const p of all) for (const t of (Array.isArray(p.tags) ? p.tags : [])) {
+                const k = String(t).trim();
+                if (k) counts.set(k, (counts.get(k) ?? 0) + 1);
             }
-        }
+            tagChoices = [...counts].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([t]) => ({value: t, label: t}));
+        } catch { /* free text still works */ }
+        const postTags = Array.isArray(post?.tags) ? post.tags : String(post?.tags ?? '').split(',').map(t => t.trim()).filter(Boolean);
+        const selectedTags = M.observable([]);
+        const tags = tagsEl ? mountPills(tagsEl, {
+            data: tagChoices,
+            value: postTags,
+            creatable: true,
+            placeholder: 'Add a tag…',
+            empty: 'New tag - press Enter to add it',
+            selected: selectedTags
+        }) : null;
+        disposers.push(() => tags?.destroy());
 
         const layoutCard = await mountLayoutCard($container.find('#layout-card').get(0), {
             current: post?.template ?? '',
@@ -298,8 +472,9 @@ export const postEditorView = {
                 slug:          postSlugEl?.value?.trim() ?? '',
                 excerpt:       excerptEl?.value?.trim() ?? '',
                 content:       contentEl?.value ?? '',
-                tags:          (tagsEl?.value ?? '').split(',').map((t) => t.trim()).filter(Boolean),
-                categories:    [...selectedCategoryIds],
+                // Text still in the tag box counts: Ctrl+S from inside it saves it.
+                tags:          [...new Set([...selectedTags.peek(), ...(tags?.pending() ? [tags.pending()] : [])])],
+                categories:    [...selectedCats.peek(), ...unknownCats],
                 featuredImage: featuredImageUrl || null,
                 seo: {
                     title:       seoTitleEl?.value?.trim() ?? '',
@@ -331,6 +506,7 @@ export const postEditorView = {
                     if (titleEl) titleEl.textContent = 'Editing post';
                 }
                 post = saved;
+                stamps.set(saved);
                 baseline = JSON.stringify(collectValues());
                 setStatus(saved.status ?? status);
                 showSaved();
@@ -363,10 +539,7 @@ export const postEditorView = {
         }
         function setStatus(next) {
             status = next || 'draft';
-            if (statusBadge) {
-                statusBadge.textContent = status;
-                statusBadge.className = `badge ${({ published: 'badge-success', scheduled: 'badge-warning' })[status] ?? 'badge-secondary'}`;
-            }
+            stamps.status.value = status;
             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);
@@ -382,6 +555,9 @@ export const postEditorView = {
             queueMicrotask(() => { queued = false; refreshState(); });
         };
         ['input', 'change', 'click'].forEach(ev => $container.get(0).addEventListener(ev, recheck));
+        // A pill made with Enter fires none of those.
+        const stopPillWatch = M.effect(() => { selectedCats.value; selectedTags.value; recheck(); });
+        disposers.push(() => stopPillWatch?.());
 
         async function save() {
             if (await doSave()) E.toast(status === 'published' ? 'Saved - the live post is updated.' : 'Saved.', { type: 'success' });
@@ -402,7 +578,11 @@ export const postEditorView = {
 
         // 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).
+        // The admin's own Ctrl+S (app.js) clicks the view's primary Save and
+        // marks the event handled; saving again here made two requests - and
+        // on a new post, two posts. This one is for an admin without it.
         const onKey = (e) => {
+            if (e.defaultPrevented) return;
             if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
                 e.preventDefault();
                 save();
@@ -418,6 +598,7 @@ export const postEditorView = {
             document.removeEventListener('keydown', onKey);
             window.removeEventListener('beforeunload', onUnload);
             window.removeEventListener('hashchange', onHash);
+            disposers.splice(0).forEach(fn => { try { fn(); } catch { /* already gone */ } });
         };
         window.addEventListener('hashchange', onHash);
 
@@ -460,6 +641,7 @@ export const postEditorView = {
                     const res = await H.post(`${BASE}/posts/${savedId}/publish`, {});
                     if (res.error) throw new Error(res.error);
                     post = res.data ?? res;
+                    stamps.set(post);
                     setStatus('published');
                     E.toast('Published - the post is live.', { type: 'success' });
                 } catch (err) {
@@ -489,6 +671,7 @@ export const postEditorView = {
                     const res = await H.post(`${BASE}/posts/${savedId}/schedule`, { publishedAt });
                     if (res.error) throw new Error(res.error);
                     post = res.data ?? res;
+                    stamps.set(post);
                     setStatus('scheduled');
                     if (scheduleEl) scheduleEl.classList.add('blog-hidden');
                     E.toast(`Scheduled for ${new Date(publishedAt).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}.`, { type: 'success' });

package/plugins/blog/blocks/blog-post-essay.css

@@ -0,0 +1,29 @@
+.pe { --pe-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; max-width: 40rem; margin: 0 auto; }
+.pe-head { text-align: center; margin: 2rem 0 2.5rem; }
+.pe-kicker { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
+.pe-title { font-family: var(--pe-serif); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; margin: 0 0 1.1rem; letter-spacing: -.01em; }
+.pe-standfirst { font-family: var(--pe-serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--dm-text-muted); margin: 0 auto 1.5rem; max-width: 34rem; }
+.pe-standfirst:empty { display: none; }
+.pe-byline { display: inline-block; margin: 0; padding: .6rem 1.2rem; border-top: 1px solid var(--dm-border, rgba(127,127,127,.3)); border-bottom: 1px solid var(--dm-border, rgba(127,127,127,.3));
+  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dm-text-muted); }
+.pe-byline a { color: var(--dm-text); font-weight: 600; }
+.pe-figure { margin: 0 -4rem 3rem; }
+.pe-figure img { width: 100%; display: block; border-radius: var(--dm-radius, 6px); }
+.pe-figure.no-image { display: none; }
+.pe-body { font-family: var(--pe-serif); font-size: 1.2rem; line-height: 1.75; }
+.pe-body > p:first-of-type::first-letter { float: left; font-size: 4.4em; line-height: .8; padding: .06em .1em 0 0; color: var(--dm-primary); }
+.pe-body > p:last-of-type::after { content: "\220E"; margin-left: .35em; color: var(--dm-primary); }
+.pe-body h2, .pe-body h3 { font-family: var(--pe-serif); font-weight: 400; text-align: center; margin: 2.5rem 0 1rem; }
+.pe-body h2 { font-size: 1.7rem; }
+.pe-body blockquote { margin: 2.5rem -1.5rem; padding: 1.25rem 0; border: 0; border-top: 2px solid var(--dm-primary); border-bottom: 2px solid var(--dm-primary);
+  background: none; text-align: center; font-size: 1.55rem; line-height: 1.4; font-style: italic; color: var(--dm-text); }
+.pe-body blockquote p { margin: 0; }
+.pe-body hr { border: 0; margin: 2.5rem 0; text-align: center; }
+.pe-body hr::before { content: "\2022\2003\2022\2003\2022"; color: var(--dm-text-muted); }
+.pe-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
+  margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--dm-border, rgba(127,127,127,.25)); }
+.pe-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
+@media (max-width: 900px) {
+  .pe-figure { margin-left: 0; margin-right: 0; }
+  .pe-body blockquote { margin-left: 0; margin-right: 0; }
+}

package/plugins/blog/blocks/blog-post-essay.html

@@ -0,0 +1,28 @@
+<!--
+  blog-post-essay - a long read set like a printed essay: a serif reading column,
+  a drop cap, quotations as pull quotes and an end mark. For the pieces people
+  sit down with.
+
+  {{title}} {{excerpt}} {{url}} {{authorName}} {{authorUrl}} {{readingTime}} {{date}}
+  {{publishedAt:D MMMM YYYY}}  any date format
+  {{imageUrl}} {{imageClass}} (has-image | no-image)
+  Ready-made markup: {{{content}}} {{{image}}} {{{categories}}} {{{tags}}} {{{toc}}}
+  {{{share}}} {{{prevNext}}} {{{related}}} {{{comments}}}
+-->
+<article class="pe">
+  <header class="pe-head">
+    <div class="pe-kicker">{{{categories}}}</div>
+    <h1 class="pe-title">{{title}}</h1>
+    <p class="pe-standfirst">{{excerpt}}</p>
+    <p class="pe-byline">By <a href="{{authorUrl}}">{{authorName}}</a> <span aria-hidden="true">/</span> <time datetime="{{publishedAt}}">{{publishedAt:D MMMM YYYY}}</time> <span aria-hidden="true">/</span> {{readingTime}}</p>
+  </header>
+  <figure class="pe-figure {{imageClass}}">{{{image}}}</figure>
+  <div class="pe-body blog-content">{{{content}}}</div>
+  <footer class="pe-foot">
+    <div class="pe-tags">{{{tags}}}</div>
+    {{{share}}}
+  </footer>
+  {{{prevNext}}}
+  {{{related}}}
+  {{{comments}}}
+</article>

package/plugins/blog/blocks/blog-post-split.css

@@ -0,0 +1,22 @@
+.pt-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
+  align-items: center; margin: 1rem 0 3rem; }
+.pt-picture { aspect-ratio: 4 / 5; max-height: 36rem; width: 100%; border-radius: var(--dm-radius-lg, 12px);
+  background: var(--pt-image) center / cover no-repeat, var(--dm-primary, #334155); }
+.pt-head.no-image .pt-picture { aspect-ratio: 4 / 3;
+  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--dm-primary, #334155) 55%, #fff), transparent 60%),
+    linear-gradient(135deg, var(--dm-primary, #334155), color-mix(in srgb, var(--dm-primary, #334155) 50%, #000)); }
+.pt-kicker { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
+.pt-title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; margin: 0 0 1rem; letter-spacing: -.02em; }
+.pt-standfirst { font-size: 1.2rem; line-height: 1.55; color: var(--dm-text-muted); margin: 0 0 1.5rem; }
+.pt-standfirst:empty { display: none; }
+.pt-meta { margin: 0; padding-left: .9rem; border-left: 3px solid var(--dm-primary, #334155); font-size: .92rem; line-height: 1.6; color: var(--dm-text-muted); }
+.pt-meta a { color: var(--dm-text); font-weight: 600; }
+.pt-wrap { max-width: 44rem; margin: 0 auto; }
+.pt-foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
+  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--dm-border, rgba(127,127,127,.25)); }
+.pt-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
+@media (max-width: 800px) {
+  .pt-head { grid-template-columns: 1fr; gap: 1.5rem; }
+  .pt-picture, .pt-head.no-image .pt-picture { aspect-ratio: 16 / 9; }
+  .pt-head.no-image .pt-picture { display: none; }
+}

package/plugins/blog/blocks/blog-post-split.html

@@ -0,0 +1,32 @@
+<!--
+  blog-post-split - the picture on one half, the headline on the other, then the
+  story in a centred column. Without a featured image the picture half becomes a
+  panel in the theme's primary colour.
+
+  {{title}} {{excerpt}} {{url}} {{authorName}} {{authorUrl}} {{readingTime}} {{date}}
+  {{publishedAt:D MMMM YYYY}}  any date format
+  {{imageUrl}} {{imageClass}} (has-image | no-image)
+  Ready-made markup: {{{content}}} {{{image}}} {{{categories}}} {{{tags}}} {{{toc}}}
+  {{{share}}} {{{prevNext}}} {{{related}}} {{{comments}}}
+-->
+<article class="pt">
+  <header class="pt-head {{imageClass}}">
+    <div class="pt-picture" style="--pt-image: url('{{imageUrl}}')" aria-hidden="true"></div>
+    <div class="pt-words">
+      <div class="pt-kicker">{{{categories}}}</div>
+      <h1 class="pt-title">{{title}}</h1>
+      <p class="pt-standfirst">{{excerpt}}</p>
+      <p class="pt-meta"><a href="{{authorUrl}}">{{authorName}}</a><br><time datetime="{{publishedAt}}">{{publishedAt:D MMMM YYYY}}</time> · {{readingTime}}</p>
+    </div>
+  </header>
+  <div class="pt-wrap">
+    <div class="pt-body blog-content">{{{content}}}</div>
+    <footer class="pt-foot">
+      <div class="pt-tags">{{{tags}}}</div>
+      {{{share}}}
+    </footer>
+    {{{prevNext}}}
+    {{{related}}}
+    {{{comments}}}
+  </div>
+</article>

package/plugins/blog/lib/layouts.js

@@ -4,7 +4,7 @@
  * A post page and every listing card are BLOCKS (content/blocks/*.html), so a
  * site restyles its blog in the Blocks tool rather than in this plugin:
  *
- *   blog-post-<name>  a whole post page       (Classic, Feature, Minimal, Sidebar…)
+ *   blog-post-<name>  a whole post page       (Classic, Feature, Minimal, Sidebar, Split, Essay…)
  *   blog-card-<name>  one post in a listing   (Cards, List, Compact…)
  *
  * Any block a site adds with one of those prefixes becomes a further choice -
@@ -19,7 +19,9 @@ export const POST_LAYOUTS = [
     {id: 'blog-post-classic', label: 'Classic', description: 'Title, image, then the story in one centred column.'},
     {id: 'blog-post-feature', label: 'Feature', description: 'A full-width hero image with the title over it - for the big pieces.'},
     {id: 'blog-post-minimal', label: 'Minimal', description: 'Just the words: a narrow reading column, no image.'},
-    {id: 'blog-post-sidebar', label: 'Sidebar', description: 'The story beside a sticky contents list, details and share links.'}
+    {id: 'blog-post-sidebar', label: 'Sidebar', description: 'The story beside a sticky contents list, details and share links.'},
+    {id: 'blog-post-split',   label: 'Split',   description: 'The picture on one half, the headline on the other - a cover for the story.'},
+    {id: 'blog-post-essay',   label: 'Essay',   description: 'A long read set like print: serif type, a drop cap and pull quotes.'}
 ];
 
 /**

package/plugins/blog/lib/nav-link.js

@@ -0,0 +1,72 @@
+/**
+ * The navbar link to the blog: added when the plugin is enabled, taken away
+ * again when it is disabled - but only if this plugin put it there.
+ *
+ * The Menus editor rewrites items with the keys it knows and drops the rest,
+ * so a marker on the item itself would not survive the site's first edit.
+ * What was added is remembered in the plugin's own state instead
+ * (`navLink: {menu, url}` in config/plugins.json). A link the site already had
+ * - or makes itself - is never removed.
+ *
+ * @module blog/lib/nav-link
+ */
+import * as menuService from '../../../server/services/menus.js';
+
+const trim = (url) => String(url ?? '').trim().replace(/\/+$/, '') || '/';
+
+/** True when any item, at any depth, already links to `url`. */
+export function hasLink(items, url) {
+    const want = trim(url);
+    return (items || []).some(it => (it && typeof it.url === 'string' && trim(it.url) === want) || hasLink(it?.items, url));
+}
+
+/**
+ * The item to add. It carries an icon only when most of the navbar's other
+ * links do, so it looks like the rest of the menu either way.
+ */
+export function blogItem(items, url) {
+    const links = (items || []).filter(it => it && it.type !== 'separator' && it.type !== 'spacer');
+    const withIcons = links.filter(it => it.icon).length;
+    return {text: 'Blog', url: trim(url), ...(links.length && withIcons * 2 >= links.length && {icon: 'file-text'})};
+}
+
+/** Top-level items without the one linking to `url`. Nested copies are the site's own. */
+export function withoutLink(items, url) {
+    const want = trim(url);
+    return (items || []).filter(it => !(it && typeof it.url === 'string' && trim(it.url) === want));
+}
+
+/**
+ * Add the blog to the menu in the `navbar` slot, unless it already links there.
+ *
+ * @param   {string} url - the blog's base path
+ * @param   {object} [menus] - the menus service (a test passes a fake)
+ * @returns {Promise<{menu: string, url: string}|null>} what was added, or null
+ */
+export async function addNavLink(url, menus = menuService) {
+    const slug = (await menus.getLocations())?.navbar;
+    if (!slug) return null;
+    const menu = await menus.getMenu(slug);
+    if (!menu || hasLink(menu.items, url)) return null;
+    const items = Array.isArray(menu.items) ? menu.items : [];
+    await menus.updateMenu(slug, {...menu, items: [...items, blogItem(items, url)]});
+    return {menu: slug, url: trim(url)};
+}
+
+/**
+ * Take away a link this plugin added. Anything else in the menu is left alone.
+ *
+ * @param   {{menu: string, url: string}|null} added - from addNavLink()
+ * @param   {object} [menus]
+ * @returns {Promise<boolean>} whether a link was removed
+ */
+export async function removeNavLink(added, menus = menuService) {
+    if (!added?.menu || !added?.url) return false;
+    const menu = await menus.getMenu(added.menu);
+    if (!menu) return false;
+    const items = Array.isArray(menu.items) ? menu.items : [];
+    const kept = withoutLink(items, added.url);
+    if (kept.length === items.length) return false;
+    await menus.updateMenu(added.menu, {...menu, items: kept});
+    return true;
+}

package/plugins/blog/plugin.js

@@ -6,6 +6,7 @@ import {renderBlogPage} from '../../server/services/renderer.js';
 import {DISPLAY_DEFAULTS, pickDisplaySettings, safeImageUrl} from './lib/layouts.js';
 import {catalogue, seedBlocks} from './lib/render.js';
 import {liveSettings, loadEntries as loadAll, renderPostPage} from './lib/page.js';
+import {addNavLink, removeNavLink} from './lib/nav-link.js';
 import {SAMPLE_CATEGORIES, samplePosts} from './lib/samples.js';
 
 const POSTS_SLUG      = 'blog-posts';
@@ -295,7 +296,7 @@ export default async function blogPlugin(fastify, options) {
         });
         const html = await renderBlogPage(
             fileURLToPath(new URL('./templates/post.html', import.meta.url)),
-            { post: page.html, assetV: '1.4.4' },
+            { post: page.html, assetV: '1.6.0' },
             { title: post.title || 'Preview', description: post.excerpt || '', ogImage: safeImageUrl(post.featuredImage),
               usedComponents: page.usedComponents, urlPath: `${basePath}/${post.slug}`, noindex: true }
         );
@@ -716,3 +717,41 @@ export default async function blogPlugin(fastify, options) {
         return reply.send({ ok: true, settings: merged });
     });
 }
+
+// ---------------------------------------------------------------------------
+// Lifecycle: the navbar link
+// ---------------------------------------------------------------------------
+
+/** The blog's base path from its saved settings, as the routes will use it. */
+function currentBasePath() {
+    const saved = getPluginStates()?.blog?.settings ?? {};
+    return String(saved.basePath ?? defaultConfig.basePath ?? '/blog').replace(/\/+$/, '') || '/blog';
+}
+
+/**
+ * Enabling the blog puts a Blog link in the navbar, so the listing is not a
+ * page nobody can reach. Skipped when the navbar already links there; what
+ * was added is remembered so disabling can take it away again (lib/nav-link.js).
+ */
+export async function onEnable({fastify}) {
+    try {
+        const added = await addNavLink(currentBasePath());
+        if (added) {
+            savePluginState('blog', {navLink: added});
+            fastify?.log?.info(`[blog] added a Blog link to the "${added.menu}" menu`);
+        }
+    } catch (err) {
+        fastify?.log?.warn(`[blog] could not add the navbar link: ${err.message}`);
+    }
+}
+
+/** Disabling takes the link away - only the one enabling added, never the site's own. */
+export async function onDisable({fastify}) {
+    try {
+        const added = getPluginStates()?.blog?.navLink ?? null;
+        if (await removeNavLink(added)) fastify?.log?.info(`[blog] removed the Blog link from the "${added.menu}" menu`);
+        if (added) savePluginState('blog', {navLink: null});
+    } catch (err) {
+        fastify?.log?.warn(`[blog] could not remove the navbar link: ${err.message}`);
+    }
+}