hd-garden 0.10.0 → 0.10.1

package/app/about/page.tsx

@@ -23,7 +23,7 @@ export const metadata = {
 
 export default function AboutPage() {
   return (
-    <main className="page-shell about-page">
+    <main className="sh-main about-page" id="content">
       <PageIntro
         eyebrow={t.aboutEyebrow}
         title={about.title}

package/app/blog/[...path]/page.tsx

@@ -1,34 +1,18 @@
-import Link from "next/link";
-import { CoverImage } from "../../components/CoverImage";
 import type { Metadata } from "next";
 import { FEED_ALTERNATES } from "../../lib/page-alternates";
 import { notFound } from "next/navigation";
 import {
-  extractHeadings,
-  estimateWordCount,
   findPost,
-  formatDate,
   postHref,
   posts,
 } from "../../lib/content";
-import { ArticleMeasure } from "../../components/ArticleMeasure";
-import { ArticleReferences } from "../../components/ArticleReferences";
-import { ArticleTitle, originalUrl } from "../../components/ArticleTitle";
-import { MarkdownArticle } from "../../components/MarkdownArticle";
-import { TableOfContents } from "../../components/TableOfContents";
-import { Comments } from "../../components/Comments";
-import { Webmentions } from "../../components/Webmentions";
-import { ArticleTags } from "../../components/ArticleTags";
-import { ArticlePager } from "../../components/ArticlePager";
+import { PostReadingView } from "../../components/PostReadingView";
 import { adjacentByDate } from "../../../ui/garden/adjacent.mjs";
 import {
   absoluteUrl,
   getSiteUrl,
-  webmentionApiEndpoint,
 } from "../../lib/site";
-import { githubUrl, siteConfig } from "../../site.config";
 import { isStaticPlaceholder, STATIC_PLACEHOLDER, staticParams } from "../../../ui/garden/static-params.mjs";
-import { siteLang, ui } from "../../lib/i18n";
 
 export function generateStaticParams() {
   return staticParams(posts.map((post) => ({ path: post.path.split("/") })), { path: [STATIC_PLACEHOLDER] });
@@ -80,72 +64,19 @@ export default async function PostPage({
     if (isStaticPlaceholder(path)) return null;
     notFound();
   }
-  const headings = extractHeadings(post.content, { numbering: post.numbering });
   const baseUrl = await getSiteUrl();
   const pathname = postHref(post);
   const canonicalUrl = absoluteUrl(pathname, baseUrl);
-  const wordCount = estimateWordCount(post.content);
   const { prev, next } = adjacentByDate(posts, (item: { path: string }) => item.path === post.path);
-  const t = ui();
 
   return (
-    <main className="reading-page post-reading-page">
-      <article className="post-article h-entry">
-        <Link className="u-url sr-only" href={pathname}>
-          {siteLang === "en" ? t.permalinkLabel(post.title) : <>{post.title} 永久链接</>}
-        </Link>
-        <a
-          className="p-author h-card sr-only"
-          href={githubUrl}
-          rel="author"
-        >
-          {siteConfig.author.name}
-        </a>
-        <header className="article-header article-summary-row hero">
-          <ArticleTitle title={post.title} />
-          <ul className="meta article-meta">
-            <li>{siteConfig.author.name}</li>
-            <li>
-              <time className="dt-published" dateTime={post.date}>
-                {formatDate(post.date)}
-              </time>
-            </li>
-            {post.updated ? <li>{siteLang === "en" ? t.updatedOn(formatDate(post.updated)) : <>更新于 {formatDate(post.updated)}</>}</li> : null}
-            <li>{t.wordCount(wordCount)}</li>
-            {originalUrl(post) ? (
-              <li>
-                <a className="orig ext" href={originalUrl(post)} target="_blank" rel="noopener noreferrer">{t.originalLink}</a>
-              </li>
-            ) : null}
-          </ul>
-          <ArticleTags tags={post.tags} />
-          {post.cover && (
-            <figure className="article-hero article-cover cover-card cover-img">
-              <CoverImage className="u-photo" src={post.cover} image={post.coverImage} alt={t.coverLabel(post.title)} sizes="(max-width: 852px) calc(100vw - 40px), 812px" priority />
-            </figure>
-          )}
-        </header>
-        <div className="article-reading-layout">
-          <div className="article-reading-column">
-            <ArticleMeasure />
-            <div className="e-content">
-              {post.description ? <p className="lead quote-plain p-summary">{post.description}</p> : null}
-              <MarkdownArticle content={post.content} numbering={post.numbering} />
-            </div>
-            <ArticleReferences references={post.references} />
-            <Webmentions
-              target={canonicalUrl}
-              endpoint={webmentionApiEndpoint()}
-            />
-            <ArticlePager
-              prev={prev ? { href: postHref(prev), title: prev.title } : null}
-              next={next ? { href: postHref(next), title: next.title } : null}
-            />
-            <Comments slug={post.path} />
-          </div>
-          <TableOfContents headings={headings} />
-        </div>
-      </article>
-    </main>
+    <PostReadingView
+      post={post}
+      pathname={pathname}
+      canonicalUrl={canonicalUrl}
+      commentsSlug={post.path}
+      prev={prev ? { href: postHref(prev), title: prev.title } : null}
+      next={next ? { href: postHref(next), title: next.title } : null}
+    />
   );
 }

package/app/blog/page.tsx

@@ -1,6 +1,7 @@
 import { Suspense } from "react";
 import { siteConfig, siteDocumentTitle } from "../site.config";
 import { BlogArchive, BlogArchiveFallback } from "../components/BlogArchive";
+import { PageIntro } from "../components/PageIntro";
 import { posts } from "../lib/content";
 import { archivePosts, archiveSeries } from "../lib/archive";
 import { pageAlternates } from "../lib/page-alternates";
@@ -16,12 +17,12 @@ export default function BlogIndex() {
   const t = ui();
   const list = archivePosts();
   const series = archiveSeries();
+  const deck =
+    siteConfig.pages.blog.subtitle?.trim() ||
+    (siteLang === "en" ? t.blogDeck(posts.length) : `阶段性的完整沉淀，关于工程、架构与技术思考。共 ${posts.length} 篇，按年份归档。`);
   return (
     <main className="sh-main" id="content">
-      <div className="sh-head">
-        <h1 id="sh-title">{t.blogHeading}</h1>
-        <p className="sh-deck">{siteLang === "en" ? t.blogDeck(posts.length) : <>阶段性的完整沉淀，关于工程、架构与技术思考。共 {posts.length} 篇，按年份归档。</>}</p>
-      </div>
+      <PageIntro eyebrow={t.blogEyebrow} title={t.blogHeading} subtitle={deck} />
       <Suspense fallback={<BlogArchiveFallback posts={list} series={series} />}>
         <BlogArchive posts={list} series={series} />
       </Suspense>

package/app/columns/[column]/[...path]/page.tsx

@@ -1,35 +1,21 @@
-import Link from "next/link";
-import { ArticlePager } from "../../../components/ArticlePager";
-import { CoverImage } from "../../../components/CoverImage";
 import type { Metadata } from "next";
 import { FEED_ALTERNATES } from "../../../lib/page-alternates";
 import { notFound } from "next/navigation";
-import { ArrowLeft } from "@phosphor-icons/react/ssr";
 import {
   columns,
-  extractHeadings,
   findColumnEntry,
-  formatDate,
   columnHref,
   columnEntryPath,
 } from "../../../lib/content";
-import { ArticleMeasure } from "../../../components/ArticleMeasure";
-import { ArticleReferences } from "../../../components/ArticleReferences";
-import { ArticleTitle, originalUrl } from "../../../components/ArticleTitle";
-import { MarkdownArticle } from "../../../components/MarkdownArticle";
-import { TableOfContents } from "../../../components/TableOfContents";
-import { Comments } from "../../../components/Comments";
-import { Webmentions } from "../../../components/Webmentions";
-import { ArticleTags } from "../../../components/ArticleTags";
+import { PostReadingView } from "../../../components/PostReadingView";
 import {
   absoluteUrl,
   getSiteUrl,
-  webmentionApiEndpoint,
 } from "../../../lib/site";
-import { githubUrl, siteConfig } from "../../../site.config";
-import { siteHref } from "../../../lib/site-href";
 import { isStaticPlaceholder, STATIC_PLACEHOLDER, staticParams } from "../../../../ui/garden/static-params.mjs";
-import { columnStatusLabel, siteLang, ui } from "../../../lib/i18n";
+import { columnStatusLabel, ui } from "../../../lib/i18n";
+
+const stripColumnIndex = (title: string) => title.replace(/^\d+\s*·\s*/u, "");
 
 export function generateStaticParams() {
   return staticParams(
@@ -51,14 +37,15 @@ export async function generateMetadata({
   if (!entry) return {};
   const baseUrl = await getSiteUrl();
   const pathname = columnHref(entry);
+  const title = stripColumnIndex(entry.title);
   return {
-    title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+    title,
     description: entry.description,
     alternates: { canonical: pathname, types: FEED_ALTERNATES },
     openGraph: {
       type: "article",
       url: absoluteUrl(pathname, baseUrl),
-      title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+      title,
       description: entry.description,
       publishedTime: new Date(entry.date).toISOString(),
       modifiedTime: entry.updated
@@ -69,7 +56,7 @@ export async function generateMetadata({
     },
     twitter: {
       card: "summary_large_image",
-      title: entry.title.replace(/^\d+\s*·\s*/u, ""),
+      title,
       description: entry.description,
       images: entry.cover ? [entry.cover] : ["/og.png"],
     },
@@ -92,81 +79,32 @@ export default async function ColumnEntryPage({
   const currentIndex = series.findIndex((item) => item.path === entry.path);
   const prev = series[currentIndex - 1] ?? null;
   const next = series[currentIndex + 1] ?? null;
-  const headings = extractHeadings(entry.content, { numbering: entry.numbering });
   const baseUrl = await getSiteUrl();
   const pathname = columnHref(entry);
   const canonicalUrl = absoluteUrl(pathname, baseUrl);
   const t = ui();
+  const displayTitle = stripColumnIndex(entry.title);
 
   return (
-    <main className="column-reading-page">
-      <aside className="series-nav">
-        <Link href={siteHref("/columns")} className="back-link">
-          <ArrowLeft size={15} />
-          {t.allColumnsBack}
-        </Link>
-        <p>{t.seriesEyebrow}</p>
-        <h2>{entry.columnTitle}</h2>
-        <ol>
-          {listed.map((item) => (
-            <li key={item.path} className={item.path === entry.path ? "active" : ""}>
-              <Link href={columnHref(item)}>{item.title}</Link>
-            </li>
-          ))}
-        </ol>
-        <small>{ui().columnSideCount(series.length, columnStatusLabel(entry.columnStatus))}</small>
-      </aside>
-
-      <article className="article-column series-article h-entry">
-        <Link className="u-url sr-only" href={pathname}>
-          {siteLang === "en" ? t.permalinkLabel(entry.title) : <>{entry.title} 永久链接</>}
-        </Link>
-        <a
-          className="p-author h-card sr-only"
-          href={githubUrl}
-          rel="author"
-        >
-          {siteConfig.author.name}
-        </a>
-        <header className="article-header hero">
-          <ArticleTitle title={entry.title.replace(/^\d+\s*·\s*/u, "")} />
-          <ul className="meta article-meta">
-            <li>{siteConfig.author.name}</li>
-            <li>
-              <time className="dt-published" dateTime={entry.date}>
-                {formatDate(entry.date)}
-              </time>
-            </li>
-            {originalUrl(entry) ? (
-              <li><a className="orig ext" href={originalUrl(entry)} target="_blank" rel="noopener noreferrer">{t.originalLink}</a></li>
-            ) : null}
-          </ul>
-          <ArticleTags tags={entry.tags} />
-          {entry.cover && (
-            <figure className="article-hero article-cover cover-img">
-              <CoverImage className="u-photo" src={entry.cover} image={entry.coverImage} alt={siteLang === "en" ? t.coverLabel(entry.title) : `${entry.title} 封面`} sizes="(max-width: 852px) calc(100vw - 40px), 812px" priority />
-            </figure>
-          )}
-        </header>
-        <ArticleMeasure />
-        <div className="e-content">
-          {entry.description ? <p className="lead p-summary">{entry.description}</p> : null}
-          <MarkdownArticle content={entry.content} numbering={entry.numbering} />
-        </div>
-        <ArticleReferences references={entry.references} />
-        <Webmentions
-          target={canonicalUrl}
-          endpoint={webmentionApiEndpoint()}
-        />
-        <ArticlePager
-          label={ui().columnPagerLabel}
-          prev={prev ? { href: columnHref(prev), title: prev.title } : null}
-          next={next ? { href: columnHref(next), title: next.title } : null}
-        />
-        <Comments slug={`${column}:${entry.path}`} />
-      </article>
-
-      <TableOfContents headings={headings} />
-    </main>
+    <PostReadingView
+      post={entry}
+      pathname={pathname}
+      canonicalUrl={canonicalUrl}
+      title={displayTitle}
+      commentsSlug={`${column}:${entry.path}`}
+      pagerLabel={t.columnPagerLabel}
+      prev={prev ? { href: columnHref(prev), title: stripColumnIndex(prev.title) } : null}
+      next={next ? { href: columnHref(next), title: stripColumnIndex(next.title) } : null}
+      series={{
+        columnTitle: entry.columnTitle ?? column,
+        statusLabel: t.columnSideCount(series.length, columnStatusLabel(entry.columnStatus)),
+        items: listed.map((item) => ({
+          path: item.path,
+          href: columnHref(item),
+          title: stripColumnIndex(item.title),
+          current: item.path === entry.path,
+        })),
+      }}
+    />
   );
 }

package/app/columns/page.tsx

@@ -2,6 +2,7 @@
 import Link from "next/link";
 import { columnHref, columns } from "../lib/content";
 import { ContentEmptyState } from "../components/ContentEmptyState";
+import { PageIntro } from "../components/PageIntro";
 import { siteConfig, siteDocumentTitle } from "../site.config";
 import { pageAlternates } from "../lib/page-alternates";
 import { columnStatusLabel, ui } from "../lib/i18n";
@@ -40,10 +41,11 @@ export default function ColumnsPage() {
 
   return (
     <main className="sh-main" id="content">
-      <div className="sh-head">
-        <h1>{siteConfig.pages.columns.title || t.homeColumns}</h1>
-        {siteConfig.pages.columns.subtitle ? <p className="sh-deck">{siteConfig.pages.columns.subtitle}</p> : null}
-      </div>
+      <PageIntro
+        eyebrow={t.columnsEyebrow}
+        title={siteConfig.pages.columns.title || t.homeColumns}
+        subtitle={siteConfig.pages.columns.subtitle}
+      />
       {grouped.length ? grouped.map(({ slug, first, entries }) => (
         <section className={first.columnCover ? "sh-series" : "sh-series no-cover"} aria-labelledby={slug} key={slug}>
           {first.columnCover ? (

package/app/components/PageIntro.tsx

@@ -7,15 +7,20 @@ type PageIntroProps = {
   children?: ReactNode;
 };
 
-/** Shared heading treatment for every top-level public page. */
+/**
+ * Shared heading for top-level list pages (blog / thoughts / columns).
+ * Same eyebrow + h1 + deck typography and padding so tab switches do not jump.
+ * Empty subtitle reserves no space.
+ */
 export function PageIntro({
   eyebrow,
   title,
   subtitle,
   children,
 }: PageIntroProps) {
+  const deck = subtitle?.trim();
   return (
-    <header className="page-intro">
+    <header className="page-intro sh-head">
       {eyebrow ? <p className="eyebrow">{eyebrow}</p> : null}
       <h1>
         {title.split("\n").map((line, index) => (
@@ -25,8 +30,8 @@ export function PageIntro({
           </span>
         ))}
       </h1>
-      {subtitle && <p>{subtitle}</p>}
-      {children && <div className="page-intro-actions">{children}</div>}
+      {deck ? <p className="sh-deck">{deck}</p> : null}
+      {children ? <div className="page-intro-actions">{children}</div> : null}
     </header>
   );
 }

package/app/components/PostReadingView.tsx

@@ -0,0 +1,133 @@
+import Link from "next/link";
+import { CoverImage } from "./CoverImage";
+import { ArticleMeasure } from "./ArticleMeasure";
+import { ArticleReferences } from "./ArticleReferences";
+import { ArticleTitle, originalUrl } from "./ArticleTitle";
+import { MarkdownArticle } from "./MarkdownArticle";
+import { TableOfContents } from "./TableOfContents";
+import { Comments } from "./Comments";
+import { Webmentions } from "./Webmentions";
+import { ArticleTags } from "./ArticleTags";
+import { ArticlePager } from "./ArticlePager";
+import { SeriesEdgeNav, type SeriesEdgeItem } from "./SeriesEdgeNav";
+import { formatDate, estimateWordCount, extractHeadings } from "../lib/content";
+import { githubUrl, siteConfig } from "../site.config";
+import { siteLang, ui } from "../lib/i18n";
+import { webmentionApiEndpoint } from "../lib/site";
+import type { ContentEntry } from "../lib/content";
+
+export type PostReadingPagerLink = { href: string; title: string } | null;
+
+export type PostReadingSeries = {
+  columnTitle: string;
+  statusLabel?: string;
+  items: SeriesEdgeItem[];
+};
+
+/**
+ * Shared article body for /blog/... and /columns/... .
+ * Column routes only differ by mounting SeriesEdgeNav on the left.
+ */
+export function PostReadingView({
+  post,
+  pathname,
+  canonicalUrl,
+  title,
+  commentsSlug,
+  prev,
+  next,
+  pagerLabel,
+  series,
+}: {
+  post: ContentEntry;
+  pathname: string;
+  canonicalUrl: string;
+  /** Display title; defaults to post.title */
+  title?: string;
+  commentsSlug: string;
+  prev?: PostReadingPagerLink;
+  next?: PostReadingPagerLink;
+  pagerLabel?: string;
+  series?: PostReadingSeries;
+}) {
+  const displayTitle = title ?? post.title;
+  const numbering = (post as ContentEntry & { numbering?: boolean }).numbering;
+  const headings = extractHeadings(post.content, { numbering });
+  const wordCount = estimateWordCount(post.content);
+  const t = ui();
+
+  return (
+    <main className="reading-page post-reading-page">
+      {series ? (
+        <SeriesEdgeNav
+          columnTitle={series.columnTitle}
+          statusLabel={series.statusLabel}
+          items={series.items}
+        />
+      ) : null}
+      <article className="post-article h-entry">
+        <Link className="u-url sr-only" href={pathname}>
+          {siteLang === "en" ? t.permalinkLabel(displayTitle) : <>{displayTitle} 永久链接</>}
+        </Link>
+        <a className="p-author h-card sr-only" href={githubUrl} rel="author">
+          {siteConfig.author.name}
+        </a>
+        <header className="article-header article-summary-row hero">
+          <ArticleTitle title={displayTitle} />
+          <ul className="meta article-meta">
+            <li>{siteConfig.author.name}</li>
+            <li>
+              <time className="dt-published" dateTime={post.date}>
+                {formatDate(post.date)}
+              </time>
+            </li>
+            {post.updated ? (
+              <li>
+                {siteLang === "en" ? t.updatedOn(formatDate(post.updated)) : <>更新于 {formatDate(post.updated)}</>}
+              </li>
+            ) : null}
+            <li>{t.wordCount(wordCount)}</li>
+            {originalUrl(post) ? (
+              <li>
+                <a className="orig ext" href={originalUrl(post)} target="_blank" rel="noopener noreferrer">
+                  {t.originalLink}
+                </a>
+              </li>
+            ) : null}
+          </ul>
+          <ArticleTags tags={post.tags} />
+          {post.cover ? (
+            <figure className="article-hero article-cover cover-card cover-img">
+              <CoverImage
+                className="u-photo"
+                src={post.cover}
+                image={post.coverImage}
+                alt={t.coverLabel(displayTitle)}
+                sizes="(max-width: 852px) calc(100vw - 40px), 812px"
+                priority
+              />
+            </figure>
+          ) : null}
+        </header>
+        <div className="article-reading-layout">
+          <div className="article-reading-column">
+            <ArticleMeasure />
+            <div className="e-content">
+              {post.description ? <p className="lead quote-plain p-summary">{post.description}</p> : null}
+              <MarkdownArticle content={post.content} numbering={numbering} />
+            </div>
+            <ArticleReferences references={post.references} />
+            <Webmentions target={canonicalUrl} endpoint={webmentionApiEndpoint()} />
+            <ArticlePager
+              label={pagerLabel}
+              prev={prev ?? null}
+              next={next ?? null}
+            />
+            <Comments slug={commentsSlug} />
+          </div>
+          <TableOfContents headings={headings} />
+        </div>
+      </article>
+    </main>
+  );
+}

package/app/components/SeriesEdgeNav.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+} from "react";
+
+export type SeriesEdgeItem = {
+  path: string;
+  href: string;
+  title: string;
+  current?: boolean;
+};
+
+/**
+ * Left-edge Raschka ticks for column articles.
+ * Flyout is the article list only (no column chrome).
+ * Opens on hover or click; stays open until click-outside or Escape.
+ */
+export function SeriesEdgeNav({
+  columnTitle,
+  items,
+}: {
+  columnTitle: string;
+  items: SeriesEdgeItem[];
+  /** @deprecated kept optional so callers can pass it; not shown in the flyout */
+  statusLabel?: string;
+  lang?: string;
+}) {
+  const panelId = useId();
+  const rootRef = useRef<HTMLElement>(null);
+  const [open, setOpen] = useState(false);
+  const currentIndex = Math.max(0, items.findIndex((item) => item.current));
+
+  const close = useCallback(() => setOpen(false), []);
+
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (event: PointerEvent) => {
+      const root = rootRef.current;
+      if (!root) return;
+      if (event.target instanceof Node && root.contains(event.target)) return;
+      close();
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") close();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [close, open]);
+
+  const onTicksKeyDown = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setOpen((value) => !value);
+    } else if (event.key === "Escape") {
+      close();
+    }
+  };
+
+  return (
+    <nav
+      ref={rootRef}
+      className="series-edge"
+      aria-label={columnTitle}
+      data-open={open ? "true" : "false"}
+    >
+      <button
+        type="button"
+        className="series-edge-ticks"
+        aria-controls={panelId}
+        aria-expanded={open}
+        aria-label={columnTitle}
+        onPointerEnter={() => setOpen(true)}
+        onFocus={() => setOpen(true)}
+        onClick={() => setOpen(true)}
+        onKeyDown={onTicksKeyDown}
+      >
+        {items.map((item, index) => (
+          <i
+            key={item.path}
+            className={index === currentIndex ? "hot" : undefined}
+            aria-hidden="true"
+          />
+        ))}
+      </button>
+      {/* Hit bridge so the pointer can cross ticks → panel without a dead zone. */}
+      <div
+        className="series-edge-bridge"
+        aria-hidden="true"
+        onPointerEnter={() => setOpen(true)}
+      />
+      <div
+        className="series-edge-fly"
+        id={panelId}
+        onPointerEnter={() => setOpen(true)}
+      >
+        <ol className="series-edge-list">
+          {items.map((item) => (
+            <li key={item.path} className={item.current ? "cur" : undefined}>
+              <Link href={item.href} aria-current={item.current ? "page" : undefined}>
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </nav>
+  );
+}

package/app/lib/i18n.ts

@@ -141,6 +141,7 @@ const zh = {
   homeColumnCountStatus: (count: number, status: string) => `${count} 篇，${status}`,
   columnDefaultStatus: "持续更新",
   // Blog archive
+  blogEyebrow: "BLOG / 文章",
   blogHeading: "文章",
   blogDeck: (n: number) => `阶段性的完整沉淀，关于工程、架构与技术思考。共 ${n} 篇，按年份归档。`,
   unknownYear: "未知",
@@ -170,6 +171,7 @@ const zh = {
   seriesEyebrow: "主题专栏",
   seriesCountStatus: (count: number, status: string) => `${count} 篇 · ${status}`,
   // Columns index
+  columnsEyebrow: "COLUMNS / 专栏",
   columnsFallbackTitle: "专栏",
   columnsMeta: (count: number, status: string) => `阅读清单，${count} 篇，${status}`,
   columnsFallbackDesc: "按顺序组织的专题文章系列。",
@@ -195,7 +197,7 @@ const zh = {
   audioFallback: "你的浏览器不支持音频播放。",
   thoughtPermalinkShort: "永久链接",
   // About & GitHub profile
-  aboutEyebrow: "关于",
+  aboutEyebrow: "ABOUT / 关于",
   aboutFallbackHeading: "关于",
   aboutFallbackParagraphs: [
     "一名工程师。平时写代码，也把想清楚的问题记下来。",
@@ -424,6 +426,7 @@ const en: typeof zh = {
   homeColumnCountStatus: (count: number, status: string) => `${count} ${count === 1 ? "post" : "posts"}, ${status}`,
   columnDefaultStatus: "Ongoing",
   // Blog archive
+  blogEyebrow: "BLOG",
   blogHeading: "Posts",
   blogDeck: (n: number) => `Essays on engineering, architecture, and systems thinking. ${n} ${n === 1 ? "post" : "posts"}, archived by year.`,
   unknownYear: "Unknown",
@@ -453,6 +456,7 @@ const en: typeof zh = {
   seriesEyebrow: "Column",
   seriesCountStatus: (count: number, status: string) => `${count} ${count === 1 ? "post" : "posts"} · ${status}`,
   // Columns index
+  columnsEyebrow: "COLUMNS",
   columnsFallbackTitle: "Columns",
   columnsMeta: (count: number, status: string) => `Reading list · ${count} ${count === 1 ? "post" : "posts"} · ${status}`,
   columnsFallbackDesc: "A series of posts organized in reading order.",
@@ -478,7 +482,7 @@ const en: typeof zh = {
   audioFallback: "Your browser does not support audio playback.",
   thoughtPermalinkShort: "Permalink",
   // About & GitHub profile
-  aboutEyebrow: "About",
+  aboutEyebrow: "ABOUT",
   aboutFallbackHeading: "About",
   aboutFallbackParagraphs: [
     "An engineer who writes code and writes down problems once they are clear.",

package/app/page.tsx

@@ -43,7 +43,9 @@ export default function Home() {
     <main className="sh-main" id="content">
       <section className="sh-intro">
         <h1>{siteConfig.pages.home.title}</h1>
-        <p>{siteConfig.pages.home.subtitle || siteConfig.description}</p>
+        {siteConfig.pages.home.subtitle?.trim() ? (
+          <p>{siteConfig.pages.home.subtitle}</p>
+        ) : null}
         <div className="links">
           <Link href={siteHref("/about")}>{t.homeAbout}</Link>
           <a href={githubUrl} rel="me">GitHub</a>

package/app/styles/a2.css

@@ -2636,3 +2636,207 @@ html[data-theme="dark"] .ref-demo { --rd-s: #262624; --rd-p: #1f1e1d; --rd-i: #e
   .ref-demo[data-name="figure"] .ref-pane[data-p="v"] { grid-column: 1; grid-row: 1; }
   .ref-demo[data-name="figure"] .ref-pane[data-p="c"] { grid-column: 1; grid-row: 2; background: var(--rd-s); border-top: 1px solid var(--rd-r); }
 }
+
+/* ===== v0.10.1 tip keep (after git checkout of a2.css from 9a80f7e5) ===== */
+
+/* List pages: PageIntro rides on .sh-head; keep eyebrow in the same vertical rhythm. */
+.page-intro.sh-head {
+  padding: 72px 0 36px;
+  max-width: var(--list);
+  width: 100%;
+}
+
+.page-intro.sh-head .eyebrow {
+  margin: 0 0 14px;
+  color: var(--muted);
+  font: 600 11px / 1.4 var(--sans);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.page-intro.sh-head h1 {
+  margin: 0;
+  font: 700 var(--fs-display) / 1.2 var(--sans);
+  color: var(--ink);
+  letter-spacing: 0;
+  text-wrap: balance;
+}
+
+.page-intro.sh-head .sh-deck {
+  margin: 14px 0 0;
+}
+
+.page-intro.sh-head .page-intro-actions {
+  margin-top: 22px;
+}
+
+.thoughts-page,
+.about-page {
+  width: auto;
+  max-width: none;
+}
+
+.about-page {
+  padding-bottom: 120px;
+}
+
+/* Keep PageIntro at --list; focus card sticks to the right edge. */
+.about-page .about-grid {
+  width: 100%;
+  max-width: none;
+  display: grid;
+  grid-template-columns: minmax(0, var(--list)) minmax(12rem, 17rem);
+  column-gap: 48px;
+  row-gap: 36px;
+  justify-content: space-between;
+  align-items: start;
+}
+
+@media (max-width: 900px) {
+  .about-page .about-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* SeriesEdgeNav: fixed to viewport left on column posts that share PostReadingView.
+   post-reading-page already lays out article + TOC; ticks are position:fixed so
+   they do not need a grid track. */
+.post-reading-page > .series-edge {
+  --edge-window-inset: 12px;
+  position: fixed;
+  top: calc(var(--hdr) + 12px);
+  bottom: 16px;
+  left: max(var(--edge-window-inset), env(safe-area-inset-left, 0px));
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  transform: none;
+  margin: 0;
+  padding: 0;
+}
+
+.series-edge-ticks {
+  pointer-events: auto;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 6px;
+  margin: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  border-radius: 0;
+}
+
+.series-edge-ticks i {
+  display: block;
+  width: 11px;
+  height: 1.5px;
+  border-radius: 1px;
+  background: color-mix(in srgb, var(--ink) 32%, transparent);
+  transition: background 0.15s ease, width 0.15s ease;
+}
+
+.series-edge-ticks i.hot {
+  width: 15px;
+  background: color-mix(in srgb, var(--ink) 70%, transparent);
+}
+
+.series-edge[data-open="true"] .series-edge-ticks i,
+.series-edge:focus-within .series-edge-ticks i {
+  background: color-mix(in srgb, var(--ink) 52%, transparent);
+}
+
+.series-edge[data-open="true"] .series-edge-ticks i.hot,
+.series-edge:focus-within .series-edge-ticks i.hot {
+  background: var(--ink);
+}
+
+.series-edge-bridge {
+  pointer-events: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 100%;
+  width: 28px;
+}
+
+.series-edge-fly {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 4px);
+  transform: translate(0, -50%);
+  width: 16rem;
+  max-height: min(72vh, calc(100vh - var(--hdr) - 40px));
+  margin: 0;
+  padding: 0.7rem 0.85rem 0.75rem;
+  border: 0;
+  border-radius: 10px;
+  background: var(--paper);
+  box-shadow:
+    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
+    0 10px 28px color-mix(in srgb, var(--ink) 10%, transparent);
+  opacity: 0;
+  visibility: hidden;
+  overflow: auto;
+  transition: opacity 0.16s ease, visibility 0.16s ease;
+}
+
+.series-edge[data-open="true"],
+.series-edge:focus-within {
+  z-index: 28;
+}
+
+.series-edge[data-open="true"] .series-edge-fly,
+.series-edge:focus-within .series-edge-fly {
+  pointer-events: auto;
+  opacity: 1;
+  visibility: visible;
+}
+
+.series-edge-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.series-edge-list a {
+  display: block;
+  padding: 0.4rem 0.35rem;
+  margin: 0 -0.35rem;
+  border-radius: 7px;
+  color: var(--soft);
+  font-size: 13px;
+  line-height: 1.35;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.series-edge-list a:hover {
+  background: color-mix(in srgb, var(--ink) 4%, transparent);
+  color: var(--ink);
+}
+
+.series-edge-list li.cur a {
+  background: color-mix(in srgb, var(--ink) 6%, transparent);
+  color: var(--ink);
+  font-weight: 600;
+}
+
+@media (max-width: 900px) {
+  /* The desktop rule is `.post-reading-page > .series-edge { display: flex }`.
+     Match that specificity so the rail stays off small screens. */
+  .post-reading-page > .series-edge {
+    display: none;
+  }
+}

package/app/thoughts/page/[n]/page.tsx

@@ -36,7 +36,7 @@ export default async function ThoughtsPage({ params }: { params: Promise<{ n: st
     notFound();
   }
   return (
-    <main className="page-shell thoughts-page">
+    <main className="sh-main thoughts-page" id="content">
       <PageIntro eyebrow={ui().thoughtsEyebrow} title={siteConfig.pages.thoughts.title} subtitle={siteConfig.pages.thoughts.subtitle} />
       <ThoughtFeed page={page} />
     </main>

package/app/thoughts/page.tsx

@@ -16,7 +16,7 @@ export default function ThoughtsPage() {
   const thoughts = getPublishedThoughts();
 
   return (
-    <main className="page-shell thoughts-page">
+    <main className="sh-main thoughts-page" id="content">
       <PageIntro
         eyebrow={ui().thoughtsEyebrow}
         title={siteConfig.pages.thoughts.title}

package/package.json

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

package/ui/garden/site-nav.mjs

@@ -2,12 +2,14 @@
  * 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).
+ *
+ * /tags/ stays as a deep route (article tag chips still link there) but is
+ * not listed in the primary nav.
  */
 export const SITE_NAV = [
   { href: "/blog/", label: "文章" },
   { href: "/thoughts/", label: "随想" },
   { href: "/columns/", label: "专栏" },
-  { href: "/tags/", label: "标签" },
   { href: "/about/", label: "关于" },
 ];