hd-garden 0.5.13 → 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

@@ -16,6 +16,7 @@ import { brand, searchFull, searchIndexUrl } from "@garden/site-config";
 import { createSearch } from "../../ui/garden/search-match.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";
 
@@ -85,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,
@@ -302,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. */}
@@ -352,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="站点导航（移动端）">

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/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,.sh-menu-theme{display:none}}
 .sh-menu{display:none}
 
 /* ---------- page frame ---------- */
@@ -304,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.13",
+  "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/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}/`);
+}