domma-cms 0.55.1 → 0.69.3

package/plugins/blog/plugin.json

@@ -1,12 +1,14 @@
 {
   "name": "blog",
   "displayName": "Blog",
-  "version": "1.1.0",
-  "description": "Public-facing blog with posts, categories, and comments.",
+  "version": "1.4.4",
+  "tier": "free",
+  "description": "Public-facing blog with posts, categories and comments - layouts and listings built from editable blocks.",
   "author": "Domma CMS",
-  "date": "2026-04-07",
+  "date": "2026-09-23",
   "icon": "file-text",
   "admin": {
+    "css": ["admin/css/index.css"],
     "sidebar": [
       {
         "id": "blog",
@@ -14,83 +16,29 @@
         "icon": "file-text",
         "url": "#/plugins/blog",
         "section": "#/plugins/blog",
+        "countUrl": "/api/plugins/blog/comments/pending-count",
         "children": [
-          {
-            "id": "blog-posts",
-            "text": "Posts",
-            "url": "#/plugins/blog/posts"
-          },
-          {
-            "id": "blog-categories",
-            "text": "Categories",
-            "url": "#/plugins/blog/categories"
-          },
-          {
-            "id": "blog-comments",
-            "text": "Comments",
-            "url": "#/plugins/blog/comments"
-          },
-          {
-            "id": "blog-settings",
-            "text": "Settings",
-            "url": "#/plugins/blog/settings"
-          }
+          { "id": "blog-posts",      "text": "Posts",      "url": "#/plugins/blog/posts" },
+          { "id": "blog-categories", "text": "Categories", "url": "#/plugins/blog/categories" },
+          { "id": "blog-comments",   "text": "Comments",   "url": "#/plugins/blog/comments" }
         ]
       }
     ],
     "routes": [
-      {
-        "path": "/plugins/blog/posts",
-        "view": "plugin-blog-posts",
-        "title": "Blog Posts - Domma CMS"
-      },
-      {
-        "path": "/plugins/blog/posts/new",
-        "view": "plugin-blog-post-editor",
-        "title": "New Post - Domma CMS"
-      },
-      {
-        "path": "/plugins/blog/posts/:id",
-        "view": "plugin-blog-post-editor",
-        "title": "Edit Post - Domma CMS"
-      },
-      {
-        "path": "/plugins/blog/categories",
-        "view": "plugin-blog-categories",
-        "title": "Blog Categories - Domma CMS"
-      },
-      {
-        "path": "/plugins/blog/comments",
-        "view": "plugin-blog-comments",
-        "title": "Blog Comments - Domma CMS"
-      },
-      {
-        "path": "/plugins/blog/settings",
-        "view": "plugin-blog-settings",
-        "title": "Blog Settings - Domma CMS"
-      }
+      { "path": "/plugins/blog",            "view": "plugin-blog-posts",       "title": "Blog - Domma CMS" },
+      { "path": "/plugins/blog/posts",      "view": "plugin-blog-posts",       "title": "Blog Posts - Domma CMS" },
+      { "path": "/plugins/blog/posts/new",  "view": "plugin-blog-post-editor", "title": "New Post - Domma CMS" },
+      { "path": "/plugins/blog/posts/:id",  "view": "plugin-blog-post-editor", "title": "Edit Post - Domma CMS" },
+      { "path": "/plugins/blog/categories", "view": "plugin-blog-categories",  "title": "Blog Categories - Domma CMS" },
+      { "path": "/plugins/blog/comments",   "view": "plugin-blog-comments",    "title": "Blog Comments - Domma CMS" },
+      { "path": "/plugins/blog/settings",   "view": "plugin-blog-settings",    "title": "Blog Settings - Domma CMS" }
     ],
     "views": {
-      "plugin-blog-posts": {
-        "entry": "blog/admin/views/blog.js?v=da5c1a46",
-        "exportName": "blogView"
-      },
-      "plugin-blog-post-editor": {
-        "entry": "blog/admin/views/post-editor.js?v=d4d7a514",
-        "exportName": "postEditorView"
-      },
-      "plugin-blog-categories": {
-        "entry": "blog/admin/views/categories.js?v=7e3946ca",
-        "exportName": "categoriesView"
-      },
-      "plugin-blog-comments": {
-        "entry": "blog/admin/views/comments.js?v=ee2146e9",
-        "exportName": "commentsView"
-      },
-      "plugin-blog-settings": {
-        "entry": "blog/admin/views/settings.js?v=3fab4235",
-        "exportName": "settingsView"
-      }
+      "plugin-blog-posts":       { "entry": "blog/admin/views/blog.js?v=7",        "exportName": "blogView" },
+      "plugin-blog-post-editor": { "entry": "blog/admin/views/post-editor.js?v=7", "exportName": "postEditorView" },
+      "plugin-blog-categories":  { "entry": "blog/admin/views/categories.js?v=7",  "exportName": "categoriesView" },
+      "plugin-blog-comments":    { "entry": "blog/admin/views/comments.js?v=7",    "exportName": "commentsView" },
+      "plugin-blog-settings":    { "entry": "blog/admin/views/settings.js?v=7",    "exportName": "settingsView" }
     }
   }
 }

package/plugins/blog/plugin.public.js

@@ -0,0 +1,217 @@
+/**
+ * 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 {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 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}${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}${query}" class="btn btn-sm btn-secondary">Older &raquo;</a>`);
+    }
+    return `<nav class="blog-pagination" aria-label="Pages">${parts.join('')}</nav>`;
+}
+
+/** JSON inside a <script> element, safe against `</script>` in any value. */
+function scriptJson(value) {
+    return JSON.stringify(value).replace(/</g, '\\u003c');
+}
+
+// ---------------------------------------------------------------------------
+// Plugin
+// ---------------------------------------------------------------------------
+
+export default async function blogPublicPlugin(fastify, options) {
+    const {settings, config} = options;
+    const base = (settings?.basePath ?? '/blog').replace(/\/$/, '');
+
+    /**
+     * 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);
+        // 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 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 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: 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]}
+        );
+        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 posts = allPosts.filter(isVisible).sort(byNewest).slice(0, s.feedLength ?? 20);
+
+        const siteTitle = config?.site?.title ?? 'Blog';
+        const siteUrl = (config?.site?.url ?? '').replace(/\/$/, '');
+
+        const items = posts.map((post) => `  <item>
+    <title>${escapeHtml(post.title)}</title>
+    <link>${siteUrl}${base}/${escapeHtml(post.slug)}</link>
+    <description>${escapeHtml(post.excerpt || '')}</description>
+    <pubDate>${new Date(post.publishedAt).toUTCString()}</pubDate>
+    <guid>${siteUrl}${base}/${escapeHtml(post.slug)}</guid>
+  </item>`).join('\n');
+
+        return reply.type('application/xml').send(`<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>${escapeHtml(siteTitle)}</title>
+    <link>${siteUrl}${base}</link>
+    <description>Blog feed</description>
+${items}
+  </channel>
+</rss>`);
+    });
+
+    // 2. Paginated index
+    fastify.get(`${base}/page/:n`, async (request, reply) => {
+        const page = parseInt(request.params.n, 10) || 1;
+        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 category = allCategories.find((c) => c.slug === slug);
+        if (!category) return reply.code(404).send('Category not found');
+        const posts = allPosts.filter((p) => Array.isArray(p.categories) && p.categories.includes(category.id));
+        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 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 posts = (await loadEntries('blog-posts')).filter((p) => p.authorId === id);
+        const authorName = await resolveAuthorName(id);
+        return renderArchive(request, reply, posts, {title: `Posts by ${authorName}`, filter: {type: 'author', value: id}});
+    });
+
+    // 6. Blog index
+    fastify.get(base, async (request, reply) => {
+        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 allPosts = await loadEntries('blog-posts');
+        const post = allPosts.find((p) => p.slug === slug);
+        if (!post || !isVisible(post)) return reply.code(404).send('Not found');
+
+        const 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: post.seo?.title || post.title,
+                description: post.seo?.description || post.excerpt || '',
+                ogImage: safeImageUrl(post.featuredImage),
+                ogType: 'article',
+                usedComponents: page.usedComponents,
+                urlPath: `${base}/${slug}`
+            }
+        );
+        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; }