hd-garden 0.5.12 → 0.5.14

package/app/components/ArticleTags.tsx

@@ -1,5 +1,7 @@
-import { tagFilterHref } from "../lib/tag-filter";
+import Link from "next/link";
+import { articleTagHref } from "../lib/tag-filter";
 
+/** Tags under an article title. Link, so following one is a client navigation like the rest of the site. */
 export function ArticleTags({ tags }: { tags?: string[] }) {
   const list = (tags ?? []).filter(Boolean);
   if (!list.length) return null;
@@ -7,9 +9,9 @@ export function ArticleTags({ tags }: { tags?: string[] }) {
     <ul className="article-tagrow" aria-label="标签">
       {list.map((tag) => (
         <li key={tag}>
-          <a className="tag-chip p-category" href={tagFilterHref([tag])}>
+          <Link className="tag-chip p-category" href={articleTagHref(tag)}>
             #{tag}
-          </a>
+          </Link>
         </li>
       ))}
     </ul>

package/app/components/MarkdownArticle.tsx

@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import { articleHeadingBase, articleUsesHeadingNumbers, displayHeadingLevel, splitHeadingNumber } from "../lib/content";
+import Link from "next/link";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeKatex from "rehype-katex";
@@ -24,6 +25,8 @@ import { imageSizes, linkAssets } from "@garden/generated-content";
 import { imageDimensions, lookupImageSize } from "../../ui/garden/image-dims.mjs";
 import { siteConfig, siteLinks } from "@garden/site-config";
 import { articleLink, sameSiteMatcher } from "../../ui/garden/same-site.mjs";
+import { columnRedirects, internalLinkResolver, readRedirects } from "../../ui/garden/internal-links.mjs";
+import { columnHref, columns, postHref, posts, thoughts } from "../lib/content";
 import { LinkCardRefresh } from "./LinkCardRefresh";
 import { linkHost } from "../../scripts/link-meta-core.mjs";
 import { cardDate } from "../../ui/garden/card-refresh.mjs";
@@ -31,6 +34,22 @@ import { cardDate } from "../../ui/garden/card-refresh.mjs";
 // Full URLs back to this site are internal links, written as root-relative paths.
 const sameSite = sameSiteMatcher(siteLinks?.address ?? "", siteLinks?.basePath ?? "");
 
+// Links to other pages of the site render as Link. A link to an old address listed under
+// redirects is rewritten to the page it moved to; a link that lands on no known page stays a plain anchor.
+const internalRoute = internalLinkResolver({
+  redirects: [
+    ...readRedirects(siteConfig),
+    ...columnRedirects({ columns: [...new Set(columns.map((entry) => entry.column).filter(Boolean))].map((slug) => ({ slug })) }),
+  ],
+  routes: [
+    "/", "/blog", "/columns", "/thoughts", "/tags", "/about",
+    ...posts.map(postHref),
+    ...columns.map(columnHref),
+    ...thoughts.map((thought) => `/thoughts/${thought.slug}`),
+  ],
+  basePath: siteLinks?.basePath ?? "",
+});
+
 /** The site's favicon, downloaded at build time; nothing when there is none. */
 function Favicon({ href }: { href: string }) {
   const src = linkAssets?.favicons?.[linkHost(href)];
@@ -262,6 +281,16 @@ export function MarkdownArticle({ content }: { content: string }) {
             const { href, external } = articleLink(written, sameSite);
             const domProps = { ...props };
             Reflect.deleteProperty(domProps, "node");
+            // A link to another page of the site navigates in place, like the header and lists do.
+            // No viewport prefetch: a long article can link to many pages.
+            const route = external || domProps.target || domProps.download !== undefined ? null : internalRoute(href);
+            if (route) {
+              return (
+                <Link href={route} prefetch={false} {...domProps}>
+                  {children}
+                </Link>
+              );
+            }
             return (
               <a
                 href={href}

package/app/components/SiteHeader.tsx

@@ -14,7 +14,9 @@ import type Fuse from "fuse.js";
 import { MagnifyingGlass, X } from "@phosphor-icons/react";
 import { brand, searchFull, searchIndexUrl } from "@garden/site-config";
 import { createSearch } from "../../ui/garden/search-match.mjs";
-import { cropMatchedText, highlightParts } from "../../ui/garden/search-preview.mjs";
+import { cropMatchedText, highlightParts, noResultsText } from "../../ui/garden/search-preview.mjs";
+import { resolveDark, themeSwitchProps } from "../../ui/garden/theme.mjs";
+import { SITE_NAV, isCurrentNav } from "../../ui/garden/site-nav.mjs";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 
@@ -84,13 +86,7 @@ function loadSearchEngine() {
   return engineLoad;
 }
 
-const nav = [
-  { href: "/blog", label: "文章" },
-  { href: "/thoughts", label: "随想" },
-  { href: "/columns", label: "专栏" },
-  { href: "/tags", label: "标签" },
-  { href: "/about", label: "关于" },
-];
+const nav = SITE_NAV;
 
 function rangesFor(
   matches: readonly SearchMatch[] | undefined,
@@ -187,14 +183,22 @@ export function SiteHeader() {
     });
   }, []);
 
+  // One theme for the desktop button and the mobile menu switch. Until the
+  // reader picks one, it follows the system, also when the system changes.
   useEffect(() => {
-    const stored = window.localStorage.getItem("theme");
-    const useDark =
-      stored === "dark" ||
-      (!stored && window.matchMedia("(prefers-color-scheme: dark)").matches);
-    document.documentElement.dataset.theme = useDark ? "dark" : "light";
-    const frame = window.requestAnimationFrame(() => setDark(useDark));
-    return () => window.cancelAnimationFrame(frame);
+    const system = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => {
+      const stored = window.localStorage.getItem("theme");
+      const useDark = resolveDark(stored, system.matches);
+      document.documentElement.dataset.theme = useDark ? "dark" : "light";
+      setDark(useDark);
+    };
+    const frame = window.requestAnimationFrame(apply);
+    system.addEventListener("change", apply);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      system.removeEventListener("change", apply);
+    };
   }, []);
 
   useEffect(() => {
@@ -293,16 +297,11 @@ export function SiteHeader() {
     window.localStorage.setItem("theme", next ? "dark" : "light");
   };
 
-  const current = (href: string) => {
-    if (href === "/blog") {
-      return pathname === "/blog" || pathname.startsWith("/blog/") || pathname.startsWith("/a2/");
-    }
-    return pathname === href || pathname.startsWith(`${href}/`);
-  };
+  const current = (href: string) => isCurrentNav(pathname, href);
 
   return (
     <>
-      <header className="sh-header">
+      <header className="sh-header" id="site-header">
         <div className="sh-bar">
           <Link href="/" className="sh-word">
             {/* Build-time SVG from brand.logo, cleaned of scripts and handlers. */}
@@ -343,6 +342,14 @@ export function SiteHeader() {
             <button className="sh-icon sh-menu-btn" type="button" aria-expanded={menuOpen} aria-controls="sh-menu" aria-label={menuOpen ? "关闭菜单" : "打开菜单"} onClick={() => setMenuOpen((open) => !open)}>
               {menuOpen ? <X size={18} /> : <span aria-hidden="true">☰</span>}
             </button>
+            {/* Without JavaScript the button above cannot open anything: these two links take its place
+                and open or close the menu through :target, like the TOC drawer (shell.css). */}
+            <a className="sh-icon sh-menu-nojs" id="sh-menu-open" href="#sh-menu" aria-label="打开菜单">
+              <span aria-hidden="true">☰</span>
+            </a>
+            <a className="sh-icon sh-menu-nojs-close" href="#site-header" aria-label="关闭菜单">
+              <X size={18} />
+            </a>
           </div>
         </div>
         <nav className={`sh-menu${menuOpen ? " is-open" : ""}`} id="sh-menu" aria-label="站点导航（移动端）">
@@ -351,6 +358,10 @@ export function SiteHeader() {
               {item.label}
             </Link>
           ))}
+          <button className="sh-menu-theme" {...themeSwitchProps(dark, toggleTheme)}>
+            <span>深色模式</span>
+            <span className="sh-switch" aria-hidden="true" />
+          </button>
         </nav>
       </header>
 
@@ -404,9 +415,11 @@ export function SiteHeader() {
               role="listbox"
               aria-label="搜索结果"
             >
-              <p className="search-label">
-                {query ? `${resultTotal} 篇相关文章` : "最近内容"}
-              </p>
+              {query && engine && resultTotal === 0 ? null : (
+                <p className="search-label">
+                  {query ? `${resultTotal} 篇相关文章` : "最近内容"}
+                </p>
+              )}
               {results.map((result, index) => {
                 const preview = searchPreview(result.item, result.matches);
                 return (
@@ -445,7 +458,8 @@ export function SiteHeader() {
               })}
               {results.length === 0 && (
                 <p className="empty-state">
-                  {engine ? "没有找到，换个更宽松的关键词试试。" : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
+                  {/* The query is a React text child, so it is escaped. */}
+                  {engine ? noResultsText(query) : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
                 </p>
               )}
             </div>

package/app/components/TagRedirect.tsx

@@ -2,14 +2,14 @@
 
 import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect } from "react";
-import { TAG_PARAM, selectedTags, tagFilterHref } from "../lib/tag-filter";
+import { ARTICLE_TAG_LIST, TAG_PARAM, selectedTags, tagFilterHref } from "../lib/tag-filter";
 
-/** Old `/tags?t=X` links open the same filter on `/blog?t=X`. */
+/** Old `/tags?t=X` links open the same filter on `/blog/?t=X`. */
 export function TagRedirect() {
   const router = useRouter();
   const params = useSearchParams();
   const tags = selectedTags(params.getAll(TAG_PARAM));
-  const target = tags.length ? tagFilterHref(tags) : "";
+  const target = tags.length ? tagFilterHref(tags, ARTICLE_TAG_LIST) : "";
   useEffect(() => {
     if (target) router.replace(target);
   }, [router, target]);

package/app/globals.css

@@ -3730,6 +3730,12 @@ html[data-theme="dark"] .search-panel {
   color: var(--muted);
   font-size: var(--fs-small);
   text-align: center;
+  overflow-wrap: anywhere;
+}
+
+/* No results: the one line sits in the middle of the list area. */
+.search-results:has(> .empty-state:only-child) {
+  align-content: center;
 }
 
 .search-footer {

package/app/lib/tag-filter.ts

@@ -145,6 +145,14 @@ export function tagFilterHref(selected: readonly string[], pathname = "/blog") {
   return query ? `${pathname}?${query}` : pathname;
 }
 
+/**
+ * Where a tag link points (tags on an article, the /tags page): the list page at its exported address
+ * (`/blog/`, with the slash, so the static host does not answer /blog?t=… with
+ * a 301 first), filtered to that one tag. The tag is URL-encoded.
+ */
+export const ARTICLE_TAG_LIST = "/blog/";
+export const articleTagHref = (tag: string) => tagFilterHref([tag], ARTICLE_TAG_LIST);
+
 /** 「共 N 篇」, or 「2 个标签，共 5 篇」 with a selection. */
 export function tagSummary(selectedCount: number, resultCount: number) {
   return selectedCount ? `${selectedCount} 个标签，共 ${resultCount} 篇` : `共 ${resultCount} 篇`;

package/app/styles/shell.css

@@ -65,10 +65,9 @@ html[data-mod="other"] .sh-search .kbd-other{display:inline}
 .sh-icon{display:inline-grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--soft);border-radius:var(--r);cursor:pointer;transition:background-color .15s ease,color .15s ease}
 @media (hover:hover){.sh-icon:hover{background:var(--tint);color:var(--ink)}}
 .sh-menu-btn,.sh-search-m{display:none}
+.sh-menu-nojs,.sh-menu-nojs-close{display:none}
 .i-sun,html[data-theme="dark"] .i-moon{display:none}
 html[data-theme="dark"] .i-sun{display:inline}
-/* No JavaScript: the theme cannot be switched, the page follows the system (build/dark-fallback-postcss.mjs). */
-@media (scripting:none){.sh-theme{display:none}}
 .sh-menu{display:none}
 
 /* ---------- page frame ---------- */
@@ -272,8 +271,13 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-menu.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .18s ease,transform .18s var(--ease)}
   .sh-menu a{display:flex;align-items:center;min-height:52px;font-size:var(--fs-lead);color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
   .sh-menu a[aria-current="page"],.sh-menu a[aria-current="true"]{color:var(--blue);font-weight:600}
-  .sh-menu .theme-row{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:15px;color:var(--soft)}
-  .sh-menu .theme-row button{font:400 15px/1 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:0 14px;min-height:40px;cursor:pointer}
+  /* Theme switch at the bottom of the menu: the same toggle as the desktop button. */
+  .sh-menu a:last-of-type{border-bottom:0}
+  .sh-menu-theme{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin-top:8px;padding:0;border:0;border-top:1px solid var(--rule);background:none;font:400 var(--fs-body)/1 var(--sans);color:var(--text);cursor:pointer;text-align:left}
+  .sh-switch{position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:var(--rule-strong);transition:background-color .18s ease}
+  .sh-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgb(20 20 19 / 18%);transition:transform .18s var(--ease)}
+  .sh-menu-theme[aria-checked="true"] .sh-switch{background:var(--ink)}
+  .sh-menu-theme[aria-checked="true"] .sh-switch::after{transform:translateX(16px);background:var(--paper)}
   .sh-theme{display:none}
   .sh-main{padding:0 20px}
   .sh-head{padding:40px 0 24px}
@@ -299,6 +303,25 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-pal-foot{display:none}
   .sh-pal-input{font-size:17px;height:56px}
 }
+/* No JavaScript: the theme cannot be switched, the page follows the system (build/dark-fallback-postcss.mjs).
+   Keep this after every rule that shows the toggles (the 820px block above sets .sh-menu-theme to flex);
+   tests/header-nojs.test.mjs checks the order in the built CSS. */
+@media (scripting:none){.sh-theme,.sh-menu-theme{display:none}}
+/* Search needs JavaScript too: without it the desktop 「搜索」 button would do nothing. */
+@media (scripting:none){.sh-search{display:none}}
+/* No JavaScript: the ☰ button cannot open the menu, so a ☰ link in the same place opens it through :target,
+   as the TOC drawer does, and ✕ closes it by targeting the header. With JavaScript none of this applies. */
+@media (max-width:820px) and (scripting:none){
+  .sh-menu-btn{display:none}
+  /* Search needs JavaScript (the index loads on demand); without it the button would do nothing. */
+  .sh-search-m{display:none}
+  .sh-menu-nojs{display:inline-grid;width:44px;height:44px;text-decoration:none}
+  /* The menu sits right under the sticky header: opening it should not scroll the page. */
+  .sh-menu{scroll-margin-top:var(--hdr)}
+  .sh-menu:target{opacity:1;transform:none;visibility:visible;transition:opacity .18s ease,transform .18s var(--ease)}
+  body:has(#sh-menu:target) .sh-menu-nojs{display:none}
+  body:has(#sh-menu:target) .sh-menu-nojs-close{display:inline-grid;width:44px;height:44px;text-decoration:none}
+}
 @media (prefers-reduced-motion:reduce){
   *,*::before,*::after{animation:none!important;transition:none!important}
   html{scroll-behavior:auto!important}

package/app/tags/page.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { Suspense } from "react";
 import { posts } from "../lib/content";
-import { tagCounts, tagFilterHref } from "../lib/tag-filter";
+import { articleTagHref, tagCounts } from "../lib/tag-filter";
 import { TagRedirect } from "../components/TagRedirect";
 import { siteDocumentTitle } from "../site.config";
 
@@ -25,7 +25,7 @@ export default function TagsPage() {
         <ul className="sh-tagchips sh-tagindex" aria-label="全部标签">
           {tags.map(([tag, count]) => (
             <li key={tag}>
-              <Link className="sh-tagchip" href={tagFilterHref([tag])}>
+              <Link className="sh-tagchip" href={articleTagHref(tag)}>
                 #{tag}<span className="n num">{count}</span>
               </Link>
             </li>

package/build/static-rsc-path-plugin.mjs

@@ -7,8 +7,27 @@
 // any client navigation home, hit a 404. With output: "export" this plugin
 // changes the address builder (toRscRequestPath) so "/" asks for `/index.rsc`.
 // Every other path already matches the exported file. Prefetching stays on.
+//
+// Static hosts do not know the .rsc extension either: GitHub Pages serves it as
+// application/octet-stream, and vinext only accepts text/x-component, so every
+// client navigation fell back to a full page load, aimed at the payload URL
+// minus ".rsc" (for home that is "/index"). In the browser navigation code the
+// export also accepts application/octet-stream, and a fallback to "/index"
+// goes to "/". Only a 2xx response with a body counts: vinext's own
+// `!navResponse.ok` check stays in front, and the build stops if it is gone.
+//
+// Rewrites vinext 0.0.50. Remove this plugin once vinext fixes it upstream
+// (draft issue: /workspace/dev/vinext-issue.md); a vinext whose code no longer
+// matches stops the build.
 
 const TARGET = /[\\/]vinext[\\/]dist[\\/]server[\\/]app-rsc-cache-busting\.js$/u;
+const NAVIGATION = /[\\/]vinext[\\/]dist[\\/]server[\\/]app-browser-entry\.js$/u;
+const RSC_CHECK = 'const isRscResponse = (navResponse.headers.get("content-type") ?? "").startsWith("text/x-component");';
+const RSC_CHECK_EXPORTED = 'const isRscResponse = /^(text\\/x-component|application\\/octet-stream)/.test(navResponse.headers.get("content-type") ?? "");';
+const FALLBACK = "let pathname = stripRscSuffix(parsed.pathname);";
+// Must stay: any non-2xx response is a failure whatever its content-type.
+const FAILURE = "if (!navResponse.ok || !isRscResponse || !navResponse.body) {";
+const FALLBACK_EXPORTED = 'let pathname = stripRscSuffix(parsed.pathname); if (pathname === "/index") pathname = "/";';
 const ADDRESS = "return `${pathname.length > 1 && pathname.endsWith(\"/\") ? pathname.slice(0, -1) : pathname}.rsc${query}`;";
 const EXPORTED = "return `${pathname === \"/\" ? \"/index\" : pathname.length > 1 && pathname.endsWith(\"/\") ? pathname.slice(0, -1) : pathname}.rsc${query}`;";
 
@@ -20,21 +39,39 @@ export function exportRscAddress(code, id = "app-rsc-cache-busting.js") {
   return code.replace(ADDRESS, EXPORTED);
 }
 
+/** Rewrite vinext's client navigation for static hosts; throws if vinext changed shape. */
+export function exportNavigation(code, id = "app-browser-entry.js") {
+  for (const needle of [RSC_CHECK, FALLBACK, FAILURE]) {
+    if (code.split(needle).length !== 2) {
+      throw new Error(`garden static RSC path: could not find \`${needle}\` exactly once in ${id}. vinext changed; update build/static-rsc-path-plugin.mjs (or remove it if vinext fixed static hosting).`);
+    }
+  }
+  return code.replace(RSC_CHECK, RSC_CHECK_EXPORTED).replace(FALLBACK, FALLBACK_EXPORTED);
+}
+
 export default function staticRscPath({ enabled = process.env.STATIC_EXPORT === "1" } = {}) {
-  let seen = false;
+  const seen = new Set();
   return {
     name: "garden-static-rsc-path",
     apply: "build",
     transform(code, id) {
       // Browser bundle only: the prerender server still answers "/.rsc" itself.
-      if (!enabled || this.environment?.name !== "client" || !TARGET.test(id.split("?")[0])) return null;
-      seen = true;
-      return { code: exportRscAddress(code, id), map: null };
+      if (!enabled || this.environment?.name !== "client") return null;
+      const file = id.split("?")[0];
+      if (TARGET.test(file)) {
+        seen.add("address");
+        return { code: exportRscAddress(code, id), map: null };
+      }
+      if (NAVIGATION.test(file)) {
+        seen.add("navigation");
+        return { code: exportNavigation(code, id), map: null };
+      }
+      return null;
     },
     buildEnd(error) {
       // The client build always pulls the address builder in; not seeing it means vinext moved it.
-      if (enabled && !error && this.environment?.name === "client" && !seen) {
-        this.error("garden static RSC path: vinext's app-rsc-cache-busting.js was not part of the client build; update build/static-rsc-path-plugin.mjs.");
+      if (enabled && !error && this.environment?.name === "client" && seen.size < 2) {
+        this.error("garden static RSC path: vinext's app-rsc-cache-busting.js or app-browser-entry.js was not part of the client build; update build/static-rsc-path-plugin.mjs.");
       }
     },
   };

package/package.json

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

package/scripts/redirects.mjs

@@ -23,44 +23,9 @@ import { configuredSiteAddress } from "../ui/garden/same-site.mjs";
 
 const escapeHtml = (value) => String(value).replace(/&/gu, "&amp;").replace(/"/gu, "&quot;").replace(/</gu, "&lt;").replace(/>/gu, "&gt;");
 
-/** Valid `{ from, to }` pairs from the config; anything malformed is reported and skipped. */
-export function readRedirects(config = {}, warn = () => {}) {
-  const map = config?.redirects;
-  if (!map) return [];
-  if (typeof map !== "object" || Array.isArray(map)) {
-    warn("redirects 应写成「旧路径: 新地址」的映射，已忽略。");
-    return [];
-  }
-  const pairs = [];
-  for (const [rawFrom, rawTo] of Object.entries(map)) {
-    let from = String(rawFrom).trim();
-    const to = String(rawTo ?? "").trim();
-    try {
-      from = decodeURI(from);
-    } catch {
-      // keep as written
-    }
-    if (!from.startsWith("/") || from.startsWith("//") || from === "/" || /(^|\/)\.\.?(\/|$)/u.test(from) || /[?#]/u.test(from)) {
-      warn(`redirects：旧路径 ${rawFrom} 必须是站内路径（以 / 开头，不带 ?、# 和 ..），已跳过。`);
-      continue;
-    }
-    if (!(to.startsWith("/") && !to.startsWith("//")) && !/^https?:\/\//iu.test(to)) {
-      warn(`redirects：${rawFrom} 的新地址 ${rawTo} 应以 / 开头或是完整网址，已跳过。`);
-      continue;
-    }
-    pairs.push({ from, to });
-  }
-  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}` }));
-}
+// Shared with the article renderer, which rewrites links to old addresses (ui/garden/internal-links.mjs).
+export { columnRedirects, readRedirects } from "../ui/garden/internal-links.mjs";
+import { columnRedirects, readRedirects } from "../ui/garden/internal-links.mjs";
 
 /** 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) {

package/ui/garden/internal-links.mjs

@@ -0,0 +1,111 @@
+/**
+ * In-site links in article bodies.
+ *
+ * `redirects` in site.config.yaml maps old addresses to where pages live now,
+ * and a static export answers the old address with a small meta-refresh page
+ * (scripts/redirects.mjs). A client navigation cannot follow that page: there
+ * is no RSC payload at the old address. So when an article links to an old
+ * address, the rendered link points straight at the new one, keeping the
+ * link's own ?query and #hash.
+ *
+ * `internalRoute` returns the address to give the framework Link, or null to
+ * keep a plain anchor: a link that leaves the site, ends on a file, runs into a
+ * redirect loop or an external target, or lands on no known page.
+ */
+import { clientRoute } from "./same-site.mjs";
+
+/** Valid `{ from, to }` pairs from the config; anything malformed is reported and skipped. */
+export function readRedirects(config = {}, warn = () => {}) {
+  const map = config?.redirects;
+  if (!map) return [];
+  if (typeof map !== "object" || Array.isArray(map)) {
+    warn("redirects 应写成「旧路径: 新地址」的映射，已忽略。");
+    return [];
+  }
+  const pairs = [];
+  for (const [rawFrom, rawTo] of Object.entries(map)) {
+    let from = String(rawFrom).trim();
+    const to = String(rawTo ?? "").trim();
+    try {
+      from = decodeURI(from);
+    } catch {
+      // keep as written
+    }
+    if (!from.startsWith("/") || from.startsWith("//") || from === "/" || /(^|\/)\.\.?(\/|$)/u.test(from) || /[?#]/u.test(from)) {
+      warn(`redirects：旧路径 ${rawFrom} 必须是站内路径（以 / 开头，不带 ?、# 和 ..），已跳过。`);
+      continue;
+    }
+    if (!(to.startsWith("/") && !to.startsWith("//")) && !/^https?:\/\//iu.test(to)) {
+      warn(`redirects：${rawFrom} 的新地址 ${rawTo} 应以 / 开头或是完整网址，已跳过。`);
+      continue;
+    }
+    pairs.push({ from, to });
+  }
+  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}` }));
+}
+
+/** One key per page address: decoded, without a trailing slash (`/` stays `/`). */
+export function routeKey(pathname) {
+  let value = String(pathname ?? "");
+  try {
+    value = decodeURI(value);
+  } catch {
+    // keep as written
+  }
+  return value.length > 1 ? value.replace(/\/+$/u, "") || "/" : value;
+}
+
+const splitHref = (href) => {
+  const hashAt = href.indexOf("#");
+  const beforeHash = hashAt < 0 ? href : href.slice(0, hashAt);
+  const hash = hashAt < 0 ? "" : href.slice(hashAt);
+  const queryAt = beforeHash.indexOf("?");
+  return { pathname: queryAt < 0 ? beforeHash : beforeHash.slice(0, queryAt), search: queryAt < 0 ? "" : beforeHash.slice(queryAt), hash };
+};
+
+/**
+ * Build the resolver once per render.
+ * - redirects: `{ from, to }` pairs (readRedirects + columnRedirects).
+ * - routes: every page address the site builds, without the base path.
+ * - basePath: NEXT_PUBLIC_BASE_PATH; Link adds it back.
+ */
+export function internalLinkResolver({ redirects = [], routes = [], basePath = "" } = {}) {
+  const moved = new Map();
+  for (const { from, to } of redirects) if (!moved.has(routeKey(from))) moved.set(routeKey(from), to);
+  const pages = new Set([...routes].map(routeKey));
+  const base = String(basePath ?? "").trim().replace(/\/+$/u, "");
+  return function internalRoute(href) {
+    if (typeof href !== "string") return null;
+    let value = href.trim();
+    if (!value.startsWith("/") || value.startsWith("//")) return null;
+    if (base) {
+      if (value !== base && !value.startsWith(`${base}/`) && !value.startsWith(`${base}?`) && !value.startsWith(`${base}#`)) return null;
+      value = value.slice(base.length) || "/";
+      if (!value.startsWith("/")) value = `/${value}`;
+    }
+    const own = splitHref(value);
+    let target = own;
+    const seen = new Set();
+    while (moved.has(routeKey(target.pathname))) {
+      const key = routeKey(target.pathname);
+      if (seen.has(key) || seen.size > 16) return null;
+      seen.add(key);
+      const to = moved.get(key);
+      if (!to.startsWith("/") || to.startsWith("//")) return null;
+      const next = splitHref(to);
+      // The link's own ?query and #hash win; otherwise the redirect target's.
+      target = { pathname: next.pathname || "/", search: own.search || next.search, hash: own.hash || next.hash };
+    }
+    if (!pages.has(routeKey(target.pathname))) return null;
+    return clientRoute(`${target.pathname}${target.search}${target.hash}`);
+  };
+}

package/ui/garden/same-site.mjs

@@ -61,3 +61,30 @@ export function articleLink(href, sameSite) {
   if (local !== null) return { href: local, external: false };
   return { href, external: /^(https?:)?\/\//iu.test(href) };
 }
+
+/** Static files the site serves next to its pages; these always load as files. */
+const FILE_PREFIXES = ["/api/", "/assets/", "/images/", "/media/", "/link-assets/", "/_next/", "/fonts/"];
+
+/**
+ * The route to hand to the framework Link for an in-article link, or null to
+ * keep a plain anchor. Only a root-relative page address qualifies: no
+ * protocol or host, not just a hash, no file extension in the last segment,
+ * none of the static file folders. Link adds the base path itself, so it is
+ * taken off here; a path outside the base path stays a plain anchor.
+ */
+export function clientRoute(href, basePath = "") {
+  if (typeof href !== "string") return null;
+  const value = href.trim();
+  if (!value.startsWith("/") || value.startsWith("//")) return null;
+  const base = normalizeBase(basePath);
+  const [pathname] = value.split(/[?#]/u);
+  let route = pathname;
+  if (base) {
+    if (route !== base && !route.startsWith(`${base}/`)) return null;
+    route = route.slice(base.length) || "/";
+  }
+  if (FILE_PREFIXES.some((prefix) => route.startsWith(prefix) || `${route}/` === prefix)) return null;
+  const last = route.split("/").filter(Boolean).at(-1) ?? "";
+  if (/\.[a-z0-9]{1,8}$/iu.test(last)) return null;
+  return `${route}${value.slice(pathname.length)}`;
+}

package/ui/garden/search-preview.mjs

@@ -67,3 +67,9 @@ export function highlightParts(text, ranges) {
   if (cursor < text.length) parts.push({ text: text.slice(cursor), matched: false });
   return parts;
 }
+
+/** The one line shown when a search finds nothing. Render it as text (React escapes it). */
+export function noResultsText(query) {
+  const value = String(query ?? "").trim();
+  return value ? `没有找到和「${value}」相关的文章` : "还没有可以搜索的内容";
+}

package/ui/garden/site-nav.mjs

@@ -0,0 +1,25 @@
+/**
+ * The header's site navigation. Hrefs carry the trailing slash: a static
+ * export serves these pages at /blog/ and so on, and the host answers /blog
+ * with a 301 first (new tab, no JavaScript, crawlers).
+ */
+export const SITE_NAV = [
+  { href: "/blog/", label: "文章" },
+  { href: "/thoughts/", label: "随想" },
+  { href: "/columns/", label: "专栏" },
+  { href: "/tags/", label: "标签" },
+  { href: "/about/", label: "关于" },
+];
+
+const trim = (value) => (value.length > 1 ? value.replace(/\/+$/u, "") : value);
+
+/**
+ * Whether a nav item is the current section. The pathname may come with or
+ * without the trailing slash; articles count as 文章 (/blog/…, /a2/…).
+ */
+export function isCurrentNav(pathname, href) {
+  const path = trim(pathname || "/");
+  const section = trim(href);
+  if (section === "/blog") return path === "/blog" || path.startsWith("/blog/") || path.startsWith("/a2/");
+  return path === section || path.startsWith(`${section}/`);
+}

package/ui/garden/theme.mjs

@@ -0,0 +1,15 @@
+// Theme logic shared by the desktop button and the mobile menu switch.
+
+/** Dark when the reader chose dark, or chose nothing and the system is dark. */
+export function resolveDark(stored, systemDark) {
+  return stored === "dark" || (!stored && Boolean(systemDark));
+}
+
+/**
+ * Props for the menu's 「深色模式」 row: a native button, so the whole row is
+ * clickable and Space and Enter toggle it; role="switch" with aria-checked
+ * taken from the same state on every render.
+ */
+export function themeSwitchProps(dark, onToggle) {
+  return { type: "button", role: "switch", "aria-checked": Boolean(dark), onClick: onToggle };
+}