hd-garden 0.5.5 → 0.5.7

package/app/components/BlogArchive.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { ArchivePost, ArchiveSeries } from "../lib/archive";
 import {
   TAG_PARAM,
@@ -30,7 +30,7 @@ function day(value: string) {
 
 // Kept local: importing ../lib/content here would pull every post body into the client bundle.
 const postHref = (post: Pick<ArchivePost, "path">) => `/blog/${post.path}`;
-const columnIndexHref = (slug: string) => `/columns#${slug}`;
+const columnIndexHref = (slug: string) => `/columns/#${slug}`;
 
 function ColumnLabel({ column }: { column?: ArchivePost["column"] }) {
   return column ? <Link className="cat" href={columnIndexHref(column.slug)}>{column.title}</Link> : null;
@@ -47,6 +47,18 @@ export function BlogArchive({ posts, series }: ArchiveData) {
   const searchParams = useSearchParams();
   const paramKey = searchParams.getAll(TAG_PARAM).join("\u0000");
   const selected = useMemo(() => canonicalTags(posts, selectedTags(paramKey ? paramKey.split("\u0000") : [])), [paramKey, posts]);
+  // This list replaces the static fallback after scripts load, which can undo
+  // the browser's jump to a #year link. Jump again once, to the same place the
+  // browser would (scrollIntoView honours the page's scroll-padding).
+  useEffect(() => {
+    let id = "";
+    try {
+      id = decodeURIComponent(window.location.hash.slice(1));
+    } catch {
+      return;
+    }
+    if (id) document.getElementById(id)?.scrollIntoView({ block: "start" });
+  }, []);
   return <ArchiveView posts={posts} series={series} selected={selected} go={(next) => router.push(tagFilterHref(next, pathname), { scroll: false })} />;
 }
 

package/app/components/MarkdownArticle.tsx

@@ -39,10 +39,23 @@ function Favicon({ href }: { href: string }) {
   return <img className="fav" src={src} alt="" width={14} height={14} loading="lazy" decoding="async" aria-hidden="true" />;
 }
 
-/** The first word of a link (or its first CJK character) and the rest. */
+const CJK = "\\p{Script=Han}\\p{Script=Hiragana}\\p{Script=Katakana}\\p{Script=Hangul}";
+const FIRST_WORD = new RegExp(`^(\\s*(?:[${CJK}]|[^\\s${CJK}]+))([\\s\\S]*)$`, "u");
+const WORD_HEAD = new RegExp(`^(\\s*[\\p{L}\\p{N}_]+[^\\s\\p{L}\\p{N}_]?)([\\s\\S]*)$`, "u");
+
+/**
+ * The first word of a link (or its first CJK character) and the rest. A very
+ * long first word, such as a bare URL or a path, keeps only its head
+ * ("https:") with the icon, so the rest of it can wrap.
+ */
 const firstWord = (text: string) => {
-  const match = /^(\s*(?:[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]|[^\s\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]+))([\s\S]*)$/u.exec(text);
-  return match ? [match[1], match[2]] : [text, ""];
+  const match = FIRST_WORD.exec(text);
+  if (!match) return [text, ""];
+  if (match[1].trim().length > 24) {
+    const head = WORD_HEAD.exec(match[1]);
+    if (head) return [head[1], head[2] + match[2]];
+  }
+  return [match[1], match[2]];
 };
 
 /** Icon plus the link's first word on one line, so the icon never ends a line alone. */
@@ -231,7 +244,7 @@ export function MarkdownArticle({ content }: { content: string }) {
           rehypeRaw,
           rehypeKatex,
           rehypeSlug,
-          [rehypeAutolinkHeadings, { behavior: "wrap" }],
+          [rehypeAutolinkHeadings, { behavior: "wrap", properties: { className: ["h-anchor"] } }],
           rehypeHighlight,
         ]}
         components={{

package/app/components/TableOfContents.tsx

@@ -404,6 +404,13 @@ export function TableOfContents({
         <List size={17} weight="bold" aria-hidden="true" />
         <span>目录</span>
       </button>
+      {/* Without JavaScript the button above does nothing. This link opens the
+          drawer through :target instead; CSS shows it only when scripting is
+          off, so with JavaScript nothing here is visible. */}
+      <a className="toc-nojs-trigger" id={`${panelId}-open`} href={`#${panelId}`} aria-label={`打开${label}`}>
+        <List size={17} weight="bold" aria-hidden="true" />
+        <span>目录</span>
+      </a>
       <button
         className="toc-mobile-backdrop"
         type="button"
@@ -429,6 +436,9 @@ export function TableOfContents({
           >
             <X size={18} aria-hidden="true" />
           </button>
+          <a className="toc-nojs-close" href={`#${panelId}-open`} aria-label={`关闭${label}`}>
+            <X size={18} aria-hidden="true" />
+          </a>
         </div>
         <ol id={listId} ref={listRef} className="toc-list">
           {tree.map((node, index) => renderNode(node, [index]))}

package/app/globals.css

@@ -1519,7 +1519,6 @@ button {
   padding: 24px 26px 26px;
   background: var(--card);
   border: 1px solid var(--line);
-  scroll-margin-top: 120px;
 }
 
 .thought-card > header {
@@ -1987,7 +1986,9 @@ button {
 
 .toc-mobile-trigger,
 .toc-mobile-backdrop,
-.toc-mobile-close {
+.toc-mobile-close,
+.toc-nojs-trigger,
+.toc-nojs-close {
   display: none;
 }
 
@@ -3731,7 +3732,8 @@ html[data-theme="dark"] .article-references {
     overflow: visible;
   }
 
-  .toc-mobile-trigger {
+  .toc-mobile-trigger,
+  .toc-nojs-trigger {
     position: fixed;
     right: calc(16px + env(safe-area-inset-right));
     bottom: calc(16px + env(safe-area-inset-bottom));
@@ -3754,19 +3756,25 @@ html[data-theme="dark"] .article-references {
   }
 
   :root[data-theme="dark"] .toc-mobile-trigger,
-  html[data-theme="dark"] .toc-mobile-trigger {
+  html[data-theme="dark"] .toc-mobile-trigger,
+  :root[data-theme="dark"] .toc-nojs-trigger,
+  html[data-theme="dark"] .toc-nojs-trigger {
     background: rgb(30 29 26 / 94%);
     border-color: var(--rule-strong);
     color: var(--ink);
   }
 
   .toc-mobile-trigger:hover,
-  .toc-mobile-trigger:focus-visible {
+  .toc-mobile-trigger:focus-visible,
+  .toc-nojs-trigger:hover,
+  .toc-nojs-trigger:focus-visible {
     transform: translateY(-2px);
   }
 
   .toc-mobile-trigger:focus-visible,
-  .toc-mobile-close:focus-visible {
+  .toc-mobile-close:focus-visible,
+  .toc-nojs-trigger:focus-visible,
+  .toc-nojs-close:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 3px;
   }
@@ -3812,7 +3820,7 @@ html[data-theme="dark"] .article-references {
     max-height: min(72vh, 560px);
     max-height: min(72dvh, 560px);
     margin: 0;
-    padding: 0 24px calc(18px + env(safe-area-inset-bottom));
+    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
     display: flex;
     border: 0;
     border-top: 1px solid var(--line);
@@ -3849,7 +3857,8 @@ html[data-theme="dark"] .article-references {
     letter-spacing: 0.04em;
   }
 
-  .toc-mobile-close {
+  .toc-mobile-close,
+  .toc-nojs-close {
     width: 34px;
     height: 34px;
     padding: 0;
@@ -3862,14 +3871,31 @@ html[data-theme="dark"] .article-references {
     touch-action: manipulation;
   }
 
-  .toc-mobile-close:hover {
+  .toc-mobile-close:hover,
+  .toc-nojs-close:hover {
     color: var(--ink);
   }
 
+  /* The no-JS links share the button styles above but stay hidden unless
+     scripting is off (see the scripting: none block below). */
+  .toc-nojs-trigger,
+  .toc-nojs-close {
+    display: none;
+  }
+
   .toc .toc-list {
     padding: 7px 4px 4px 0;
   }
 
+  /* Keep the drawer's title and rows off the screen edge, in line with the
+     body text. The inset lives on the header and the list rather than the
+     panel, because the post layout's desktop rule overrides the panel's
+     padding on post pages but not on column pages. */
+  .toc .toc-header,
+  .toc .toc-list {
+    padding-inline: 20px;
+  }
+
   .toc li {
     margin: 10px 0;
     font-size: 13px;
@@ -5468,3 +5494,55 @@ html[data-theme="dark"] .article-references {
     justify-content: flex-start;
   }
 }
+
+/* Without JavaScript every sub-list stays open and the collapse toggles do
+   nothing, so hide them at every width. */
+@media (scripting: none) {
+  .toc-section-toggle {
+    display: none;
+  }
+}
+
+/* No JavaScript: the drawer button cannot open anything, so swap in plain
+   links that open the drawer through :target. A TOC link moves the target to
+   the heading, which closes the drawer and jumps there natively. */
+@media (max-width: 900px) and (scripting: none) {
+  .toc-mobile-trigger,
+  .toc-mobile-close {
+    display: none;
+  }
+
+  .toc-nojs-trigger {
+    display: inline-flex;
+    color: var(--ink);
+    text-decoration: none;
+  }
+
+  .toc-nojs-close {
+    display: grid;
+    text-decoration: none;
+  }
+
+  /* Same dim as the JS drawer; taps pass through to the page behind. */
+  body:has(.toc:target) .toc-mobile-backdrop {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 180ms ease, visibility 0s;
+  }
+
+  body:has(.toc:target) .toc-nojs-trigger {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .reading-page > .toc:target,
+  .post-reading-page .article-reading-layout .toc:target,
+  .column-reading-page > .toc:target,
+  .garden-page-toc .toc:target {
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+    transition: transform 220ms ease, visibility 0s;
+  }
+}

package/app/lib/content.ts

@@ -32,7 +32,7 @@ export const columnOfPost = (post: Pick<ContentEntry, "path">) => {
   const entry = columns.find((item) => item.path === post.path && item.column);
   return entry?.column ? { slug: entry.column, title: entry.columnTitle ?? entry.column } : undefined;
 };
-export const columnIndexHref = (slug: string) => `/columns#${slug}`;
+export const columnIndexHref = (slug: string) => `/columns/#${slug}`;
 
 export const formatDate = (value: string, withTime = false) => {
   if (!withTime) return demoDateLabel(value);

package/app/lib/remark-a2.mjs

@@ -145,10 +145,13 @@ function rewriteAlert(node) {
   let label = gfm ? gfm.label : "";
   let rest = gfm?.body ? [gfm.body, ...children.slice(1)] : children.slice(1);
   if (!label) {
-    const custom = strongOnlyText(rest.find((child) => !isBlankParagraph(child)));
-    if (custom) {
+    // A leading bold-only line is the title only when body text follows it.
+    // On its own it stays the body, under the default label.
+    const index = rest.findIndex((child) => !isBlankParagraph(child));
+    const custom = strongOnlyText(rest[index]);
+    const hasBody = rest.slice(index + 1).some((child) => !isBlankParagraph(child));
+    if (custom && hasBody) {
       label = custom;
-      const index = rest.findIndex((child) => !isBlankParagraph(child));
       rest = rest.filter((_, childIndex) => childIndex !== index);
     }
   }

package/app/page.tsx

@@ -116,7 +116,7 @@ export default function Home() {
                     ) : null}
                   </div>
                   <div className="body">
-                    <h3><Link href={`/columns#${slug}`}>{first.columnTitle}</Link></h3>
+                    <h3><Link href={`/columns/#${slug}`}>{first.columnTitle}</Link></h3>
                     <p className="count">{entries.length} 篇，{first.columnStatus ?? "持续更新"}</p>
                     <p>{first.columnDescription ?? first.description}</p>
                   </div>

package/app/styles/a2.css

@@ -132,12 +132,13 @@ body {
   max-width: 1200px;
   margin: 0 auto;
   text-wrap: balance;
+  /* Titles wrap; an English word only breaks if it alone cannot fit. */
+  overflow-wrap: break-word;
 }
 
 @media (min-width: 1240px) {
   .hero h1:not(.h1-br),
   .article-header h1:not(.h1-br) {
-    white-space: nowrap;
     max-width: none;
   }
 }
@@ -150,7 +151,6 @@ body {
 .h1-line {
   display: block;
   text-wrap: balance;
-  word-break: keep-all;
   overflow-wrap: break-word;
 }
 
@@ -168,10 +168,6 @@ body {
     max-width: none;
     font-size: min(var(--fs-hero), calc(min(100vw - 80px, 1276px) / var(--l)));
   }
-
-  .h1-line {
-    white-space: nowrap;
-  }
 }
 
 .article-meta,
@@ -390,6 +386,22 @@ html[data-theme="dark"] .column-reading-page .e-content {
   text-decoration-thickness: 2px;
 }
 
+/* A heading's own anchor link reads as the heading: no underline in any
+   state. Keyboard focus keeps the ring. Links inside the heading (a.ext)
+   keep their own underline. */
+.markdown-body .h-anchor,
+.markdown-body .h-anchor:hover,
+.markdown-body .h-anchor:active {
+  color: inherit;
+  text-decoration: none;
+}
+
+.markdown-body .h-anchor:focus-visible {
+  outline: 2px solid var(--blue);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 .markdown-body a.ext {
   text-decoration-style: dotted;
   text-decoration-thickness: 1.5px;
@@ -419,6 +431,12 @@ html[data-theme="dark"] .markdown-body a.ext {
   object-fit: contain;
 }
 
+/* Only the icon and the first word stay together; the rest of a long link,
+   a bare URL included, wraps when the line runs out. */
+.markdown-body a.ext {
+  overflow-wrap: break-word;
+}
+
 .markdown-body a.ext .fav-keep {
   white-space: nowrap;
 }

package/app/styles/shell.css

@@ -45,8 +45,9 @@ img,svg{max-width:100%}
 .sh-nav a:hover{color:var(--ink);background:var(--tint)}
 .sh-nav a[aria-current="page"],.sh-nav a[aria-current="true"]{color:var(--blue);font-weight:600}
 .sh-tools{display:flex;align-items:center;gap:8px}
-.sh-search{display:inline-flex;align-items:center;gap:6px;height:38px;padding:8px 12px;border:0;background:transparent;color:var(--soft);border-radius:var(--r);font:400 15px/1 var(--sans);cursor:pointer;appearance:none;transition:color .15s ease,background-color .15s ease}
-.sh-search:hover{color:var(--ink);background:var(--tint)}
+/* A hairline box so the entry reads as a field, not a stray word. */
+.sh-search{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:34px;padding:0 10px 0 12px;border:1px solid var(--rule);background:transparent;color:var(--soft);border-radius:8px;font:400 15px/1 var(--sans);cursor:pointer;appearance:none;transition:color .15s ease,border-color .15s ease}
+.sh-search:hover{color:var(--ink);border-color:var(--rule-strong)}
 .sh-search:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
 .sh-search svg,.sh-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
 .sh-search svg{width:16px;height:16px}
@@ -121,7 +122,7 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 
 /* ---------- post rows ---------- */
 .sh-year{margin:0}
-.sh-year > h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:40px 0 0;padding:0 0 12px;border-bottom:1px solid var(--rule-strong);display:flex;align-items:baseline;gap:10px;scroll-margin-top:calc(var(--hdr) + 16px)}
+.sh-year > h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:40px 0 0;padding:0 0 12px;border-bottom:1px solid var(--rule-strong);display:flex;align-items:baseline;gap:10px}
 .sh-year > h2 .n{font:400 var(--fs-meta)/1 var(--sans);color:var(--muted)}
 .sh-year[hidden],.sh-row[hidden]{display:none}
 .sh-rows{list-style:none;margin:0;padding:0}
@@ -324,7 +325,7 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
 .sh-notice strong{color:var(--ink)}
 .sh-month > h2{font:700 var(--fs-lead)/1.3 var(--sans);color:var(--ink);margin:40px 0 0;padding:0 0 12px;border-bottom:1px solid var(--rule-strong);display:flex;align-items:baseline;gap:10px}
 .sh-month > h2 .n{font:400 var(--fs-meta)/1 var(--sans);color:var(--muted)}
-.sh-note{padding:28px 0 26px;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--hdr) + 16px)}
+.sh-note{padding:28px 0 26px;border-bottom:1px solid var(--rule)}
 .sh-note:target{background:linear-gradient(var(--blue-tint),var(--blue-tint)) no-repeat;background-size:100% 100%;box-shadow:-16px 0 0 var(--blue-tint),16px 0 0 var(--blue-tint)}
 .sh-note h3{margin:0 0 6px;font:700 var(--fs-body)/1.55 var(--sans);color:var(--ink)}
 .sh-note-body p{margin:0 0 .7em;font-size:var(--fs-body);line-height:1.8;color:var(--text)}
@@ -396,7 +397,7 @@ html[data-theme="dark"] .sh-repos > li.sk::after{background:linear-gradient(90de
 .sh-series{display:grid;grid-template-columns:240px minmax(0,760px);gap:0 40px;padding:36px 0;border-top:1px solid var(--rule)}
 .sh-series:first-of-type{border-top:0;padding-top:8px}
 .sh-series .cover{aspect-ratio:16/9;border-radius:var(--r);display:flex;align-items:center;justify-content:center;overflow:hidden;align-self:start}
-.sh-series h2{font:700 var(--fs-h2)/1.3 var(--sans);color:var(--ink);margin:0;scroll-margin-top:calc(var(--hdr) + 16px)}
+.sh-series h2{font:700 var(--fs-h2)/1.3 var(--sans);color:var(--ink);margin:0}
 .sh-series .count{font-size:var(--fs-small);color:var(--muted);margin:6px 0 0}
 .sh-series .desc{font-size:var(--fs-body);line-height:1.7;color:var(--soft);margin:12px 0 0}
 .sh-series ol{margin:18px 0 0;padding:0;list-style:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/scripts/redirects.mjs

@@ -10,6 +10,10 @@
  * 301, so each old path gets a small page that sends the reader on: a meta
  * refresh, a script that keeps the #anchor, and rel="canonical" for search
  * engines. Runs after the build, into dist/client.
+ *
+ * Columns have no index page of their own: each column is a section of
+ * /columns/ whose heading id is the column slug. So every column in
+ * content/columns.yaml also gets /columns/<slug>/ → /columns/#<slug>.
  */
 import fs from "node:fs";
 import path from "node:path";
@@ -49,6 +53,15 @@ export function readRedirects(config = {}, warn = () => {}) {
   return pairs;
 }
 
+/** `/columns/<slug>/` → `/columns/#<slug>` for every valid column slug in columns.yaml. */
+export function columnRedirects(columnsConfig = {}) {
+  const columns = Array.isArray(columnsConfig?.columns) ? columnsConfig.columns : [];
+  return columns
+    .map((column) => (column && typeof column.slug === "string" ? column.slug.trim() : ""))
+    .filter((slug) => /^[a-z0-9]+(?:-[a-z0-9]+)*$/u.test(slug))
+    .map((slug) => ({ from: `/columns/${slug}/`, to: `/columns/#${slug}` }));
+}
+
 /** The file an old path is served from: `/a/b/` and `/a/b` → a/b/index.html, `/a/b.html` → a/b.html. */
 export function redirectFile(from) {
   const clean = from.replace(/^\/+/u, "");
@@ -63,7 +76,7 @@ export function redirectPage({ href, canonical }) {
 <title>页面已移动</title>
 <link rel="canonical" href="${escapeHtml(canonical)}">
 <meta http-equiv="refresh" content="0; url=${escapeHtml(href)}">
-<script>location.replace(${JSON.stringify(href).replace(/</gu, "\\u003c")} + location.hash)</script>
+<script>location.replace(${JSON.stringify(href).replace(/</gu, "\\u003c")}${href.includes("#") ? "" : " + location.hash"})</script>
 </head>
 <body>
 <p>页面已移到 <a href="${escapeHtml(href)}">${escapeHtml(canonical)}</a>。</p>
@@ -77,7 +90,7 @@ export function redirectPage({ href, canonical }) {
  * warning, when a real page already lives at the old path or when a site path
  * it points to was not built. Never throws for a bad entry.
  */
-export function writeRedirects({ outDir, config = {}, env = {}, basePath = "", log = () => {} }) {
+export function writeRedirects({ outDir, config = {}, env = {}, basePath = "", log = () => {}, extra = [] }) {
   const base = String(basePath ?? "").replace(/\/+$/u, "");
   let origin = "";
   try {
@@ -87,7 +100,11 @@ export function writeRedirects({ outDir, config = {}, env = {}, basePath = "", l
     origin = "";
   }
   const written = [];
-  for (const { from, to } of readRedirects(config, log)) {
+  const configured = readRedirects(config, log);
+  // Configured redirects win over generated ones for the same old path.
+  const taken = new Set(configured.map(({ from }) => redirectFile(from)));
+  const pairs = [...configured, ...extra.filter(({ from }) => !taken.has(redirectFile(from)))];
+  for (const { from, to } of pairs) {
     const file = path.join(outDir, redirectFile(from));
     if (!path.resolve(file).startsWith(path.resolve(outDir) + path.sep)) continue;
     if (fs.existsSync(file)) {
@@ -118,8 +135,10 @@ if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href)
   const outDir = path.join(siteRoot, "dist", "client");
   try {
     const config = parseYaml(fs.readFileSync(path.join(siteRoot, "site.config.yaml"), "utf8")) ?? {};
-    if (config.redirects && fs.existsSync(outDir)) {
-      const written = writeRedirects({ outDir, config, env: process.env, basePath: process.env.NEXT_PUBLIC_BASE_PATH ?? "", log: (line) => process.stdout.write(`警告：${line}\n`) });
+    const columnsFile = path.join(siteRoot, "content", "columns.yaml");
+    const extra = fs.existsSync(columnsFile) ? columnRedirects(parseYaml(fs.readFileSync(columnsFile, "utf8")) ?? {}) : [];
+    if ((config.redirects || extra.length) && fs.existsSync(outDir)) {
+      const written = writeRedirects({ outDir, config, env: process.env, basePath: process.env.NEXT_PUBLIC_BASE_PATH ?? "", log: (line) => process.stdout.write(`警告：${line}\n`), extra });
       process.stdout.write(`旧地址跳转页：${written.length} 个。\n`);
     }
   } catch (error) {

package/ui/garden/compare-line.mjs

@@ -1,7 +1,7 @@
 // A compare cell written as one line, 「X：Y」 or "X: Y". X is the title and Y
 // the text. The split is at the first full-width colon, or a colon followed by
 // a space, that is not inside inline code, link text or a link URL. The
-// separator and any space after it are returned as written, so
+// separator, with the spaces on either side of it, is returned as written, so
 // title + separator + text always equals the original line.
 
 // End of a backtick code span starting at `start`, or -1 when it never closes.
@@ -72,11 +72,15 @@ export function splitCompareLine(line) {
       if (end > 0 && /^<[a-z][a-z0-9+.-]*:[^\s<>]*>$/iu.test(line.slice(at, end + 1))) { at = end; continue; }
     }
     const isSeparator = char === "：" || (char === ":" && line[at + 1] === " ");
-    if (!isSeparator || at === 0) continue;
+    if (!isSeparator) continue;
+    // Spaces on either side of the colon belong to the separator.
+    let start = at;
+    while (start > 0 && /\s/u.test(line[start - 1])) start -= 1;
+    if (start === 0) continue;
     let end = at + 1;
     while (end < line.length && /\s/u.test(line[end])) end += 1;
     if (end >= line.length) return null;
-    return { title: line.slice(0, at), separator: line.slice(at, end), text: line.slice(end) };
+    return { title: line.slice(0, start), separator: line.slice(start, end), text: line.slice(end) };
   }
   return null;
 }