domma-cms 0.66.0 → 0.69.4

package/plugins/blog/plugin.public.js

@@ -1,100 +1,53 @@
 /**
  * Blog Plugin - Public Routes
  * SSR public-facing routes for the blog. Mounted at the Fastify root.
+ *
+ * Posts and listing cards render through BLOCKS (see lib/layouts.js), and the
+ * page works fully without JavaScript. public/blog.js then takes the listing
+ * over - search, category pills, sort, display switching and a right-click
+ * menu - and adds reading progress, contents tracking, sharing and in-page
+ * comments to a post.
  */
 import path from 'path';
 import {fileURLToPath} from 'url';
 import {renderBlogPage} from '../../server/services/renderer.js';
-import {listEntries} from '../../server/services/collections.js';
-import {parseMarkdown} from '../../server/services/markdown.js';
-import {getUserById} from '../../server/services/users.js';
+import {byNewest, escapeHtml, pickDisplay, safeImageUrl} from './lib/layouts.js';
+import {catalogue, renderCards} from './lib/render.js';
+import {authorNamesFor, isVisible, liveSettings, loadEntries, renderPostPage, resolveAuthorName} from './lib/page.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 const TEMPLATES_DIR = path.join(__dirname, 'templates');
 
+/** Bumped with the plugin, so a release is never served a stale script. */
+const ASSET_V = '1.4.4';
+
+/**
+ * Above this many posts a listing pages on the server instead: the browser
+ * filters what it was sent, and sending thousands of cards is not a feature.
+ */
+const INTERACTIVE_CAP = 300;
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
 
-function escapeHtml(str) {
-    return String(str ?? '')
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-
-function formatDate(iso) {
-    if (!iso) return '';
-    return new Date(iso).toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
-}
-
-function isVisible(post) {
-    return post.status === 'published' ||
-        (post.status === 'scheduled' && post.publishedAt && new Date(post.publishedAt) <= new Date());
-}
-
-/** Always returns the actual array of entries, regardless of adapter shape. */
-async function loadEntries(slug) {
-    const result = await listEntries(slug, { limit: 100000, sort: 'createdAt', order: 'desc' });
-    if (Array.isArray(result)) return result.map((entry) => ({ id: entry.id, ...(entry.data ?? entry) }));
-    if (Array.isArray(result?.entries)) {
-        return result.entries.map((entry) => ({ id: entry.id, ...(entry.data ?? entry) }));
-    }
-    return [];
-}
-
-/** Render a post body through the full Markdown + shortcode pipeline. */
-async function renderPostBody(content) {
-    if (!content) return { html: '', usedComponents: [] };
-    try {
-        // Blog public renderer is anonymous - pass empty opts so the [menu]
-        // shortcode treats the visitor as unauthenticated. The blog plugin
-        // does not track per-request user state for its public posts.
-        const { html, usedComponents } = await parseMarkdown('---\n---\n' + content, {});
-        return { html, usedComponents: usedComponents || [] };
-    } catch {
-        return { html: escapeHtml(content), usedComponents: [] };
-    }
-}
-
-function buildPostCard(post, authorName, base) {
-    const image = post.featuredImage
-        ? `<a href="${base}/${escapeHtml(post.slug)}"><img src="${escapeHtml(post.featuredImage)}" alt="${escapeHtml(post.title)}" class="blog-card-image"></a>`
-        : '';
-    return `<article class="card mb-4 blog-card">
-  ${image}
-  <div class="card-body">
-    <h2><a href="${base}/${escapeHtml(post.slug)}">${escapeHtml(post.title)}</a></h2>
-    <p class="text-muted small">by ${escapeHtml(authorName)} &middot; ${formatDate(post.publishedAt)}</p>
-    <p>${escapeHtml(post.excerpt || '')}</p>
-    <a href="${base}/${escapeHtml(post.slug)}" class="btn btn-sm btn-primary">Read more</a>
-  </div>
-</article>`;
-}
-
-function buildPagination(page, totalPages, basePath) {
+function buildPagination(page, totalPages, basePath, query = '') {
     if (totalPages <= 1) return '';
     const parts = [];
     if (page > 1) {
         const prevHref = page === 2 ? basePath : `${basePath}/page/${page - 1}`;
-        parts.push(`<a href="${prevHref}" class="btn btn-sm btn-secondary mr-2">&laquo; Previous</a>`);
+        parts.push(`<a href="${prevHref}${query}" class="btn btn-sm btn-secondary">&laquo; Newer</a>`);
     }
+    parts.push(`<span class="blog-page-of">Page ${page} of ${totalPages}</span>`);
     if (page < totalPages) {
-        parts.push(`<a href="${basePath}/page/${page + 1}" class="btn btn-sm btn-secondary">Next &raquo;</a>`);
+        parts.push(`<a href="${basePath}/page/${page + 1}${query}" class="btn btn-sm btn-secondary">Older &raquo;</a>`);
     }
-    return `<nav class="blog-pagination">${parts.join('')}</nav>`;
+    return `<nav class="blog-pagination" aria-label="Pages">${parts.join('')}</nav>`;
 }
 
-async function resolveAuthorName(authorId) {
-    if (!authorId) return 'Unknown';
-    try {
-        const user = await getUserById(authorId);
-        return user?.name || user?.email || 'Unknown';
-    } catch {
-        return 'Unknown';
-    }
+/** JSON inside a <script> element, safe against `</script>` in any value. */
+function scriptJson(value) {
+    return JSON.stringify(value).replace(/</g, '\\u003c');
 }
 
 // ---------------------------------------------------------------------------
@@ -102,43 +55,79 @@ async function resolveAuthorName(authorId) {
 // ---------------------------------------------------------------------------
 
 export default async function blogPublicPlugin(fastify, options) {
-    const { settings, config } = options;
+    const {settings, config} = options;
     const base = (settings?.basePath ?? '/blog').replace(/\/$/, '');
-    const postsPerPage = settings?.postsPerPage ?? 10;
 
-    async function renderArchive(reply, posts, archiveTitle, page) {
-        const visible = posts.filter(isVisible).sort((a, b) => {
-            return new Date(b.publishedAt || 0) - new Date(a.publishedAt || 0);
-        });
-
-        const totalPages = Math.max(1, Math.ceil(visible.length / postsPerPage));
+    /**
+     * A listing: the index, a page of it, or a category / tag / author archive.
+     *
+     * @param {object}   request
+     * @param {object}   reply
+     * @param {object[]} posts   - candidates; drafts are dropped here
+     * @param {object}   opts    - {title, intro, page, pageBase, filter}
+     */
+    async function renderArchive(request, reply, posts, {title, intro = '', page = 1, pageBase = base, filter = null}) {
+        const s = liveSettings(settings);
+        const perPage = Math.max(1, Number(s.postsPerPage) || 10);
+        const {listDisplays} = await catalogue();
+        const display = pickDisplay(String(request.query?.display ?? ''), s, listDisplays);
+
+        const visible = posts.filter(isVisible).sort(byNewest);
+        const interactive = Boolean(s.interactive) && visible.length <= INTERACTIVE_CAP;
+        const totalPages = Math.max(1, Math.ceil(visible.length / perPage));
         const safePage = Math.min(Math.max(1, page), totalPages);
-        const slice = visible.slice((safePage - 1) * postsPerPage, safePage * postsPerPage);
+        // Interactive listings send every post and page in the browser; the
+        // script shows the first page at once, so nothing jumps.
+        const shown = interactive ? visible : visible.slice((safePage - 1) * perPage, safePage * perPage);
+
+        const categories = await loadEntries('blog-categories');
+        const catMap = Object.fromEntries(categories.map(c => [c.id, {name: c.name, slug: c.slug}]));
+        const authorNames = await authorNamesFor(shown);
+        const {items, style} = await renderCards(shown, display, {base, catMap, authorNames});
+
+        const requested = request.query?.display ? `?display=${encodeURIComponent(display.id)}` : '';
+        const switcher = s.displaySwitcher && listDisplays.length > 1
+            ? `<div class="blog-displays" role="group" aria-label="Display">${listDisplays.map(d =>
+                `<a href="?display=${encodeURIComponent(d.id)}" data-blog-display="${escapeHtml(d.id)}" title="${escapeHtml(d.description)}"${d.id === display.id ? ' aria-current="true"' : ''}>${escapeHtml(d.label)}</a>`
+            ).join('')}</div>`
+            : '';
 
-        const cards = await Promise.all(slice.map(async (post) => {
-            const authorName = await resolveAuthorName(post.authorId);
-            return buildPostCard(post, authorName, base);
-        }));
+        const cfg = {
+            base, perPage, interactive, filter,
+            display: display.id,
+            displays: listDisplays.map(d => ({id: d.id, arrange: d.arrange, lead: Boolean(d.lead)})),
+            categories: categories.map(c => ({slug: c.slug, name: c.name}))
+        };
 
-        const cardsHtml = cards.join('\n') || '<p>No posts found.</p>';
-        const paginationHtml = buildPagination(safePage, totalPages, base);
+        const archive = `${style}
+<section class="blog-archive" data-blog-archive>
+  <script type="application/json" data-blog-config>${scriptJson(cfg)}</script>
+  <div class="blog-archive-bar">${switcher}</div>
+  <div class="blog-items blog-items--${escapeHtml(display.arrange)}${display.lead ? ' blog-items--lead' : ''}" data-display="${escapeHtml(display.id)}">
+${items || ''}
+  </div>
+  <p class="blog-empty"${shown.length ? ' hidden' : ''}>No posts here yet.</p>
+</section>`;
 
         const html = await renderBlogPage(
             path.join(TEMPLATES_DIR, 'index.html'),
-            { archiveTitle, posts: cardsHtml, pagination: paginationHtml },
-            {}
+            {
+                archiveTitle: escapeHtml(title),
+                archiveIntro: intro ? `<p class="blog-archive-intro">${escapeHtml(intro)}</p>` : '',
+                archive,
+                pagination: interactive ? '' : buildPagination(safePage, totalPages, pageBase, requested),
+                assetV: ASSET_V
+            },
+            {title, urlPath: request.url.split('?')[0]}
         );
-        reply.type('text/html').send(html);
+        return reply.type('text/html').send(html);
     }
 
     // 1. RSS feed
     fastify.get(`${base}/feed.xml`, async (request, reply) => {
+        const s = liveSettings(settings);
         const allPosts = await loadEntries('blog-posts');
-        const feedLength = settings?.feedLength ?? 20;
-        const posts = allPosts
-            .filter(isVisible)
-            .sort((a, b) => new Date(b.publishedAt || 0) - new Date(a.publishedAt || 0))
-            .slice(0, feedLength);
+        const posts = allPosts.filter(isVisible).sort(byNewest).slice(0, s.feedLength ?? 20);
 
         const siteTitle = config?.site?.title ?? 'Blog';
         const siteUrl = (config?.site?.url ?? '').replace(/\/$/, '');
@@ -151,7 +140,7 @@ export default async function blogPublicPlugin(fastify, options) {
     <guid>${siteUrl}${base}/${escapeHtml(post.slug)}</guid>
   </item>`).join('\n');
 
-        const xml = `<?xml version="1.0" encoding="UTF-8"?>
+        return reply.type('application/xml').send(`<?xml version="1.0" encoding="UTF-8"?>
 <rss version="2.0">
   <channel>
     <title>${escapeHtml(siteTitle)}</title>
@@ -159,154 +148,70 @@ export default async function blogPublicPlugin(fastify, options) {
     <description>Blog feed</description>
 ${items}
   </channel>
-</rss>`;
-
-        reply.type('application/xml').send(xml);
+</rss>`);
     });
 
     // 2. Paginated index
     fastify.get(`${base}/page/:n`, async (request, reply) => {
         const page = parseInt(request.params.n, 10) || 1;
-        const allPosts = await loadEntries('blog-posts');
-        await renderArchive(reply, allPosts, 'Blog', page);
+        return renderArchive(request, reply, await loadEntries('blog-posts'), {title: 'Blog', page});
     });
 
     // 3. Category archive
     fastify.get(`${base}/category/:slug`, async (request, reply) => {
-        const { slug } = request.params;
-        const [allPosts, allCategories] = await Promise.all([
-            loadEntries('blog-posts'),
-            loadEntries('blog-categories')
-        ]);
-
+        const {slug} = request.params;
+        const [allPosts, allCategories] = await Promise.all([loadEntries('blog-posts'), loadEntries('blog-categories')]);
         const category = allCategories.find((c) => c.slug === slug);
-        if (!category) {
-            return reply.code(404).send('Category not found');
-        }
-
+        if (!category) return reply.code(404).send('Category not found');
         const posts = allPosts.filter((p) => Array.isArray(p.categories) && p.categories.includes(category.id));
-        await renderArchive(reply, posts, `Category: ${escapeHtml(category.name)}`, 1);
+        return renderArchive(request, reply, posts, {
+            title: category.name, intro: category.description || '', filter: {type: 'category', value: category.slug}
+        });
     });
 
     // 4. Tag archive
     fastify.get(`${base}/tag/:tag`, async (request, reply) => {
-        const { tag } = request.params;
-        const allPosts = await loadEntries('blog-posts');
-        const posts = allPosts.filter((p) => Array.isArray(p.tags) && p.tags.includes(tag));
-        await renderArchive(reply, posts, `Tag: ${escapeHtml(tag)}`, 1);
+        const {tag} = request.params;
+        const posts = (await loadEntries('blog-posts')).filter((p) => Array.isArray(p.tags) && p.tags.includes(tag));
+        return renderArchive(request, reply, posts, {title: `#${tag}`, filter: {type: 'tag', value: tag}});
     });
 
     // 5. Author archive
     fastify.get(`${base}/author/:id`, async (request, reply) => {
-        const { id } = request.params;
-        const allPosts = await loadEntries('blog-posts');
-        const posts = allPosts.filter((p) => p.authorId === id);
+        const {id} = request.params;
+        const posts = (await loadEntries('blog-posts')).filter((p) => p.authorId === id);
         const authorName = await resolveAuthorName(id);
-        await renderArchive(reply, posts, `Author: ${escapeHtml(authorName)}`, 1);
+        return renderArchive(request, reply, posts, {title: `Posts by ${authorName}`, filter: {type: 'author', value: id}});
     });
 
     // 6. Blog index
     fastify.get(base, async (request, reply) => {
-        const allPosts = await loadEntries('blog-posts');
-        await renderArchive(reply, allPosts, 'Blog', 1);
+        return renderArchive(request, reply, await loadEntries('blog-posts'), {title: 'Blog'});
     });
 
     // 7. Individual post - registered LAST so the slug match doesn't shadow archives
     fastify.get(`${base}/:slug`, async (request, reply) => {
-        const { slug } = request.params;
+        const {slug} = request.params;
         const allPosts = await loadEntries('blog-posts');
         const post = allPosts.find((p) => p.slug === slug);
+        if (!post || !isVisible(post)) return reply.code(404).send('Not found');
 
-        if (!post || !isVisible(post)) {
-            return reply.code(404).send('Not found');
-        }
-
-        const authorName = await resolveAuthorName(post.authorId);
-
-        let categoriesHtml = '';
-        if (Array.isArray(post.categories) && post.categories.length) {
-            try {
-                const allCategories = await loadEntries('blog-categories');
-                const catMap = Object.fromEntries(allCategories.map((c) => [c.id, { name: c.name, slug: c.slug }]));
-                categoriesHtml = post.categories
-                    .map((id) => catMap[id]
-                        ? `<a href="${base}/category/${escapeHtml(catMap[id].slug)}" class="badge badge-secondary mr-1">${escapeHtml(catMap[id].name)}</a>`
-                        : '')
-                    .join('');
-            } catch {
-                // non-fatal
-            }
-        }
-
-        let tagsHtml = '';
-        if (Array.isArray(post.tags) && post.tags.length) {
-            tagsHtml = post.tags
-                .map((tag) => `<a href="${base}/tag/${escapeHtml(tag)}" class="badge badge-secondary mr-1">${escapeHtml(tag)}</a>`)
-                .join('');
-        }
-
-        const featuredImageHtml = post.featuredImage
-            ? `<img src="${escapeHtml(post.featuredImage)}" alt="${escapeHtml(post.title)}" class="blog-post-image mb-4">`
-            : '';
-
-        const { html: bodyHtml, usedComponents } = await renderPostBody(post.content);
-
-        let commentsHtml = '';
-        let commentFormHtml = '';
-        if (settings?.commentsEnabled) {
-            try {
-                const allComments = await loadEntries('blog-comments');
-                const approved = allComments.filter((c) => c.postId === post.id && c.status === 'approved');
-                if (approved.length) {
-                    const items = approved.map((c) => `<li class="mb-3">
-  <strong>${escapeHtml(c.authorName)}</strong> <span class="text-muted small">${formatDate(c.createdAt)}</span>
-  <p class="mt-1">${escapeHtml(c.body)}</p>
-</li>`).join('\n');
-                    commentsHtml = `<h4 class="mb-3">Comments</h4><ul class="list-unstyled">${items}</ul>`;
-                }
-            } catch {
-                // non-fatal
-            }
-
-            commentFormHtml = `<div class="card mt-4">
-  <div class="card-header"><h4>Leave a comment</h4></div>
-  <div class="card-body">
-    <form method="POST" action="/api/plugins/blog/comments">
-      <input type="hidden" name="postId" value="${escapeHtml(post.id)}">
-      <div class="mb-3"><label>Name *<br><input type="text" name="authorName" required class="form-control"></label></div>
-      <div class="mb-3"><label>Email *<br><input type="email" name="authorEmail" required class="form-control"></label></div>
-      <div class="mb-3" style="display:none"><label>Website<br><input type="text" name="website"></label></div>
-      <div class="mb-3"><label>Comment *<br><textarea name="body" required class="form-control" rows="4"></textarea></label></div>
-      <button type="submit" class="btn btn-primary">Submit</button>
-    </form>
-  </div>
-</div>`;
-        }
-
-        const seoMeta = {
-            title: post.seo?.title || post.title,
-            description: post.seo?.description || post.excerpt || '',
-            ogImage: post.featuredImage || '',
-            ogType: 'article',
-            usedComponents
-        };
+        const siteUrl = (config?.site?.url || `${request.protocol}://${request.hostname}`).replace(/\/$/, '');
+        const page = await renderPostPage(post, allPosts, liveSettings(settings), {base, siteUrl});
 
         const html = await renderBlogPage(
             path.join(TEMPLATES_DIR, 'post.html'),
+            {post: page.html, assetV: ASSET_V},
             {
-                title: escapeHtml(post.title),
-                authorName: escapeHtml(authorName),
-                publishedAt: formatDate(post.publishedAt),
-                categories: categoriesHtml,
-                tags: tagsHtml,
-                featuredImage: featuredImageHtml,
-                content: bodyHtml,
-                comments: commentsHtml,
-                commentForm: commentFormHtml
-            },
-            seoMeta
+                title: post.seo?.title || post.title,
+                description: post.seo?.description || post.excerpt || '',
+                ogImage: safeImageUrl(post.featuredImage),
+                ogType: 'article',
+                usedComponents: page.usedComponents,
+                urlPath: `${base}/${slug}`
+            }
         );
-
-        reply.type('text/html').send(html);
+        return reply.type('text/html').send(html);
     });
+
 }

package/plugins/blog/public/blog.css

@@ -0,0 +1,177 @@
+/*
+ * Blog - what every layout shares: the listing's frame and toolbar, chips,
+ * post typography, contents list, sharing, comments and the right-click menu.
+ * Each layout's own look lives in its block (content/blocks/blog-*.css), so a
+ * site restyles a layout in the Blocks tool without touching this file.
+ */
+
+.blog-page { padding-top: 2rem; padding-bottom: 3rem; }
+
+/*
+ * The site theme colours and underlines every link in .page-body, with
+ * !important and a selector as specific as (0,8,4) (public/css/site.css). A
+ * blog's links are its interface - titles, chips, the display switcher - so they
+ * opt out here, by id to outrank it. Links written in a post keep the theme's
+ * look. A block's CSS sets link colour on the link's parent (it inherits).
+ * The reset sits in :where() so it weighs only its id (1,0,0) - still above the
+ * theme, and below every exception here. Without it, `:not(.blog-content a)`
+ * lifted the reset over the exceptions and the active display button went
+ * dark-on-dark.
+ */
+#dm-blog :where(a[href]:not(.blog-content a)) { color: inherit !important; text-decoration: none !important; }
+#dm-blog :where(a[href]:not(.blog-content a)):hover { color: var(--dm-primary, #3b82f6) !important; }
+#dm-blog a.blog-chip { color: var(--dm-primary, #3b82f6) !important; }
+#dm-blog .blog-displays a[aria-current="true"] { color: #fff !important; }
+#dm-blog a.blog-tag, #dm-blog .blog-toc a { color: var(--dm-text-muted) !important; }
+#dm-blog a.blog-tag:hover, #dm-blog .blog-toc a:hover { color: var(--dm-text) !important; }
+#dm-blog .blog-toc a.is-active { color: var(--dm-primary, #3b82f6) !important; }
+
+/* ── Listing ──────────────────────────────────────────────────────────── */
+.blog-archive-head { margin-bottom: 1.25rem; }
+.blog-archive-head h1 { margin: 0 0 .35rem; font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -.015em; }
+.blog-archive-intro { margin: 0; color: var(--dm-text-muted); font-size: 1.1rem; max-width: 42rem; }
+
+.blog-archive-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
+.blog-archive-bar:empty { display: none; }
+
+.blog-search { position: relative; flex: 1 1 16rem; max-width: 24rem; }
+.blog-search .blog-search-input { width: 100%; padding: .5rem .75rem .5rem 2.1rem; border-radius: 999px;
+  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: var(--dm-surface, transparent); color: inherit; font: inherit; }
+.blog-search .blog-search-input:focus { outline: 2px solid color-mix(in srgb, var(--dm-primary, #3b82f6) 45%, transparent); outline-offset: 1px; }
+.blog-search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); opacity: .55; pointer-events: none; }
+
+.blog-sort { padding: .45rem .6rem; border-radius: 999px; border: 1px solid var(--dm-border, rgba(127,127,127,.3));
+  background: var(--dm-surface, transparent); color: inherit; font: inherit; font-size: .9rem; }
+
+.blog-displays { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 999px;
+  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); }
+.blog-displays a { padding: .3rem .8rem; border-radius: 999px; font-size: .85rem; text-decoration: none; color: var(--dm-text-muted); }
+.blog-displays a:hover { color: var(--dm-text); }
+.blog-displays a[aria-current="true"] { background: var(--dm-primary, #3b82f6); color: #fff; }
+
+.blog-pills { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1rem; }
+.blog-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: none; color: inherit; font: inherit; font-size: .88rem; }
+.blog-pill:hover { border-color: var(--dm-primary, #3b82f6); }
+.blog-pill.is-active { background: var(--dm-primary, #3b82f6); border-color: var(--dm-primary, #3b82f6); color: #fff; }
+.blog-pill .n { font-size: .75rem; opacity: .7; font-variant-numeric: tabular-nums; }
+.blog-pill[disabled] { opacity: .4; cursor: default; }
+
+.blog-active { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: -.25rem 0 1rem; font-size: .88rem; color: var(--dm-text-muted); }
+.blog-active:empty { display: none; }
+.blog-active .blog-filter-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .35rem .2rem .7rem; border-radius: 999px;
+  background: color-mix(in srgb, var(--dm-primary, #3b82f6) 14%, transparent); color: var(--dm-text); }
+.blog-active .blog-filter-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .25rem; border-radius: 50%; }
+.blog-active .blog-filter-chip button:hover { background: rgba(127,127,127,.2); }
+.blog-active .blog-clear { border: 0; background: none; color: var(--dm-primary); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
+
+.blog-items--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
+.blog-items--stack { display: flex; flex-direction: column; }
+.blog-items .blog-item[hidden] { display: none !important; }
+.blog-items.is-swapping { opacity: .35; transition: opacity .15s; }
+
+.blog-empty { padding: 3rem 1rem; text-align: center; color: var(--dm-text-muted); }
+.blog-more { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 2rem; }
+.blog-more-count { font-size: .85rem; color: var(--dm-text-muted); }
+.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
+.blog-page-of { font-size: .9rem; color: var(--dm-text-muted); }
+
+/* Right-click affordance on a listing that answers it. */
+.blog-archive.is-live .blog-item { cursor: context-menu; }
+.blog-archive.is-live .blog-item a { cursor: pointer; }
+.blog-item.is-flash { animation: blog-flash .9s ease; }
+@keyframes blog-flash { 0% { box-shadow: 0 0 0 3px var(--dm-primary, #3b82f6); } 100% { box-shadow: 0 0 0 3px transparent; } }
+
+/* ── Chips and tags ───────────────────────────────────────────────────── */
+.blog-chip { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
+  letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
+  color: var(--dm-primary, #3b82f6); background: color-mix(in srgb, var(--dm-primary, #3b82f6) 12%, transparent);
+  border: 1px solid transparent; }
+.blog-chip:hover { border-color: currentColor; }
+.blog-tag { font-size: .85rem; color: var(--dm-text-muted); text-decoration: none; }
+.blog-tag:hover { color: var(--dm-primary); }
+
+/* ── A post ───────────────────────────────────────────────────────────── */
+.blog-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; pointer-events: none; }
+.blog-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
+  background: var(--dm-primary, #3b82f6); transition: transform .08s linear; }
+
+.blog-content { font-size: 1.075rem; line-height: 1.75; }
+.blog-content > * + * { margin-top: 1.1em; }
+.blog-content h2 { font-size: 1.6rem; margin-top: 2em; line-height: 1.25; scroll-margin-top: calc(var(--dm-navbar-height, 64px) + 1rem); }
+.blog-content h3 { font-size: 1.25rem; margin-top: 1.6em; scroll-margin-top: calc(var(--dm-navbar-height, 64px) + 1rem); }
+.blog-content img { max-width: 100%; height: auto; border-radius: var(--dm-radius-md, 8px); }
+.blog-content blockquote { margin: 1.75em 0; padding: .25em 0 .25em 1.25em; border-left: 3px solid var(--dm-primary, #3b82f6);
+  font-size: 1.2em; font-style: italic; color: var(--dm-text-muted); }
+.blog-content pre { padding: 1rem; border-radius: var(--dm-radius-md, 8px); overflow-x: auto; background: rgba(127,127,127,.1); font-size: .9em; }
+.blog-content :not(pre) > code { padding: .1em .35em; border-radius: 4px; background: rgba(127,127,127,.14); font-size: .9em; }
+
+.blog-toc { font-size: .9rem; }
+.blog-toc-title { margin: 0 0 .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dm-text-muted); }
+.blog-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--dm-border, rgba(127,127,127,.25)); }
+.blog-toc li a { display: block; padding: .3rem 0 .3rem .9rem; margin-left: -2px; border-left: 2px solid transparent;
+  color: var(--dm-text-muted); text-decoration: none; line-height: 1.35; }
+.blog-toc li.blog-toc-l3 a { padding-left: 1.7rem; font-size: .85rem; }
+.blog-toc li a:hover { color: var(--dm-text); }
+.blog-toc li a.is-active { color: var(--dm-primary, #3b82f6); border-left-color: var(--dm-primary, #3b82f6); font-weight: 600; }
+
+.blog-share { display: flex; gap: .4rem; flex-wrap: wrap; }
+.blog-share-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; cursor: pointer;
+  border: 1px solid var(--dm-border, rgba(127,127,127,.3)); background: none; color: inherit; font: inherit; font-size: .85rem; text-decoration: none; }
+.blog-share-btn:hover { border-color: var(--dm-primary, #3b82f6); color: var(--dm-primary, #3b82f6); }
+
+.blog-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.5rem 0 0; }
+.blog-prevnext a { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem; border-radius: var(--dm-radius-lg, 12px);
+  border: 1px solid var(--dm-border, rgba(127,127,127,.25)); text-decoration: none; color: inherit; }
+.blog-prevnext a:hover { border-color: var(--dm-primary, #3b82f6); }
+.blog-prevnext a span { font-size: .78rem; color: var(--dm-text-muted); text-transform: uppercase; letter-spacing: .05em; }
+.blog-prevnext .is-newer { text-align: right; grid-column: 2; }
+@media (max-width: 600px) { .blog-prevnext { grid-template-columns: 1fr; } .blog-prevnext .is-newer { grid-column: 1; } }
+
+.blog-section-title { font-size: 1.35rem; margin: 0 0 1.1rem; display: flex; align-items: center; gap: .5rem; }
+.blog-related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--dm-border, rgba(127,127,127,.25)); }
+.blog-count { font-size: .8rem; padding: .05rem .5rem; border-radius: 999px; background: rgba(127,127,127,.16); font-weight: 600; }
+
+/* ── Comments ─────────────────────────────────────────────────────────── */
+.blog-comments { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--dm-border, rgba(127,127,127,.25)); }
+.blog-comment-list { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
+.blog-comment-list:empty { display: none; }
+.blog-comment { padding: .9rem 1rem; border-radius: var(--dm-radius-md, 8px); background: rgba(127,127,127,.07); }
+.blog-comment.is-new { outline: 2px solid color-mix(in srgb, var(--dm-success, #16a34a) 55%, transparent); }
+.blog-comment-head { margin: 0 0 .35rem; font-size: .9rem; }
+.blog-comment-head time { color: var(--dm-text-muted); font-size: .82rem; margin-left: .35rem; }
+.blog-comment-body { margin: 0; white-space: pre-line; }
+.blog-comment-form { display: flex; flex-direction: column; gap: .8rem; }
+.blog-comment-form h3 { margin: 0; font-size: 1.1rem; }
+.blog-comment-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; }
+.blog-comment-form label small { font-weight: 400; color: var(--dm-text-muted); }
+.blog-comment-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
+@media (max-width: 600px) { .blog-comment-row { grid-template-columns: 1fr; } }
+.blog-comment-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
+.blog-comment-status { font-size: .9rem; }
+.blog-comment-status.is-ok { color: var(--dm-success, #16a34a); }
+.blog-comment-status.is-error { color: var(--dm-danger, #dc2626); }
+.blog-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
+
+/* ── The right-click menu ─────────────────────────────────────────────── */
+.blog-menu { position: fixed; z-index: 10000; min-width: 220px; max-width: 300px; padding: .3rem;
+  background: var(--dm-surface, #fff); color: var(--dm-text, #111); border: 1px solid var(--dm-border, rgba(127,127,127,.3));
+  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.22); font-size: .88rem; }
+.blog-menu[hidden] { display: none; }
+.blog-menu-head { padding: .45rem .65rem .35rem; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
+  color: var(--dm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.blog-menu button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .65rem; border: 0; border-radius: 6px;
+  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.blog-menu button:hover, .blog-menu button:focus-visible { background: color-mix(in srgb, var(--dm-primary, #3b82f6) 12%, transparent); outline: none; }
+.blog-menu button .k { margin-left: auto; font-size: .78rem; color: var(--dm-text-muted); }
+.blog-menu hr { border: 0; border-top: 1px solid var(--dm-border, rgba(127,127,127,.25)); margin: .3rem .2rem; }
+.blog-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 10001; padding: .55rem 1rem;
+  border-radius: 999px; background: var(--dm-text, #111); color: var(--dm-background, #fff); font-size: .88rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
+
+@media (prefers-reduced-motion: reduce) {
+  .blog-item, .blog-item * { transition: none !important; animation: none !important; }
+}
+
+/* A Feature post's hero starts where the theme's content does - no page padding
+   above it. (It cannot reach the navbar: the theme's wrapper clips overflow.) */
+.blog-page:has(.pf-hero) { padding-top: 0; }