hd-garden 0.5.6 → 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/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 {
@@ -5496,6 +5495,14 @@ html[data-theme="dark"] .article-references {
   }
 }
 
+/* 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. */
@@ -5516,11 +5523,6 @@ html[data-theme="dark"] .article-references {
     text-decoration: none;
   }
 
-  /* Sub-lists are all open without JS, so the collapse toggles have no job. */
-  .toc-section-toggle {
-    display: none;
-  }
-
   /* Same dim as the JS drawer; taps pass through to the page behind. */
   body:has(.toc:target) .toc-mobile-backdrop {
     opacity: 1;

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/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.6",
+  "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) {