hd-garden 0.4.1 → 0.5.0

package/.agents/skills/garden-interactive-chart/SKILL.md

@@ -34,16 +34,16 @@ description: >-
 Markdown 在 `content/posts/<dir>/<slug>.md` 时，图表只能放在 `content/posts/<dir>/<slug>/`：
 
 ```text
-content/posts/understand-kv-cache.md
-content/posts/understand-kv-cache/waste.html
+content/posts/windowsill-herbs.md
+content/posts/windowsill-herbs/layers.html
 ```
 
 正文：
 
 ````md
 ```garden html
-src: ./understand-kv-cache/waste.html
-title: 朴素 decode 每步重算全部过去 token；6 个 token 共 21 次计算，其中 15 次是浪费。
+src: ./windowsill-herbs/layers.html
+title: 水从土面渗到排水孔，大约要一分钟。
 ```
 ````
 
@@ -52,7 +52,7 @@ title: 朴素 decode 每步重算全部过去 token；6 个 token 共 21 次计
 - `src` 必须是该同名目录里的本地 `.html` 或 `.pdf`，不能指到 `assets/`、别的文章或 `https://`
 - 带 `garden-chart` 高度回报的 HTML 是图表，直接铺开；普通 HTML 和 PDF 默认收成示意入口，读者展开后再加载
 - `title` 必须是判断，不能是「见下图」
-- 一份 HTML 一张图；文件名用 `waste.html`、`stepper.html` 这种短 kebab
+- 一份 HTML 一张图；文件名用 `layers.html`、`diagram.html` 这种短 kebab
 - HTML 自包含：CSS、SVG、脚本都在这一个文件里
 - 先写 HTML，再写围栏；围栏里不要再摊步进数组或采样点
 

package/Makefile

@@ -5,15 +5,14 @@ MESSAGE ?= 更新博客
 .PHONY: help new embed skill prepare dev check build update
 
 # Pass literal user input via environment, never interpolate it into shell code.
-unexport TITLE SLUG DIR TOPIC URL
+unexport TITLE SLUG DIR URL
 export GARDEN_NEW_TITLE := $(value TITLE)
 export GARDEN_NEW_SLUG := $(value SLUG)
 export GARDEN_NEW_DIR := $(value DIR)
-export GARDEN_NEW_TOPIC := $(value TOPIC)
 export GARDEN_EMBED_URL := $(value URL)
 
 help:
-	@printf "%s\n" "Garden 常用命令：" "  make new                 创建文章草稿（无需安装 npm 依赖）" '  make new TITLE="文章标题" SLUG=my-post DIR=writing TOPIC="写作"' '  make embed URL="https://example.com"  拉取外部网页摘要，打印可粘贴的 embed 围栏' "  make skill               安装可交互图表 skill" "  make dev                 首次准备并本地预览" "  make check               检查内容与测试" "  make build               构建公开站点" "  make update              检查、提交并触发自动发布" "  make update MESSAGE=\"新增一篇文章\"  自定义提交说明"
+	@printf "%s\n" "Garden 常用命令：" "  make new                 创建文章草稿（无需安装 npm 依赖）" '  make new TITLE="文章标题" SLUG=my-post DIR=writing' '  make embed URL="https://example.com"  拉取外部网页摘要，打印可粘贴的 embed 围栏' "  make skill               安装可交互图表 skill" "  make dev                 首次准备并本地预览" "  make check               检查内容与测试" "  make build               构建公开站点" "  make update              检查、提交并触发自动发布" "  make update MESSAGE=\"新增一篇文章\"  自定义提交说明"
 
 new:
 	@node scripts/new-post.mjs

package/app/a2/[slug]/page.tsx

@@ -35,7 +35,6 @@ export default async function A2ArticlePage({ params }: { params: Promise<{ slug
             <li>Hedon</li>
             {article.date ? <li><time dateTime={demoDateTime(article.date)}>{demoDateLabel(article.date)}</time></li> : null}
             <li>约 {wordCount.toLocaleString("en-US")} 字</li>
-            {article.topic ? <li><span className="cat">{article.topic}</span></li> : null}
             {article.original ? <li><a className="orig ext" href={article.original} target="_blank" rel="noopener noreferrer">原文 ↗</a></li> : null}
           </ul>
           {article.cover ? (

package/app/a2/page.tsx

@@ -12,7 +12,7 @@ export default function A2Index() {
     <main className="page-shell index-page">
       <header className="sh-head">
         <h1>A2 对照</h1>
-        <p className="sh-deck">用这套组件渲染参考文章，对照线上演示。正文没有改字。</p>
+        <p className="sh-deck">对照参考文章的版式。正文没有改字。</p>
       </header>
       <ul className="sh-rows">
         {articles.map((article) => (

package/app/about/page.tsx

@@ -5,18 +5,14 @@ import { PageIntro } from "../components/PageIntro";
 import { siteConfig } from "../site.config";
 
 const about = siteConfig.pages.about;
-const heading = about.heading ?? "这个网站为什么存在";
+const heading = about.heading ?? "关于";
 const paragraphs = about.paragraphs ?? [
-  "我需要一个不被信息流推着走的地方。长文可以慢慢展开，随想可以轻轻放下；同一个主题也可以沿着清晰的顺序持续生长。",
-  "所有文章都从本地 Markdown 文件开始。这意味着我可以继续在 Typora 里写作，也意味着内容不会被某个编辑器或平台锁住。",
+  "一名工程师。平时写代码，也把想清楚的问题记下来。",
+  "这里放文章、随想和专栏。",
 ];
-const quote = about.quote ?? "写作不是把已经想明白的东西记下来，而是在句子之间发现自己还没有想明白什么。";
-const focus = about.focus ?? [
-  "将自己的关注方向写在这里",
-  "用文章积累可迁移的知识",
-  "为长期写作留出稳定的空间",
-];
-const cta = about.cta ?? { href: "/blog", label: "从博文开始" };
+const quote = about.quote ?? "";
+const focus = about.focus ?? ["软件", "笔记", "日常"];
+const cta = about.cta ?? { href: "/blog", label: "浏览博文" };
 
 export const metadata = {
   title: { absolute: siteConfig.name },
@@ -27,7 +23,7 @@ export default function AboutPage() {
   return (
     <main className="page-shell about-page">
       <PageIntro
-        eyebrow="ABOUT / 关于"
+        eyebrow="关于"
         title={about.title}
         subtitle={about.subtitle}
       />
@@ -38,7 +34,7 @@ export default function AboutPage() {
           {paragraphs.map((paragraph) => (
             <p key={paragraph}>{paragraph}</p>
           ))}
-          <blockquote>{quote}</blockquote>
+          {quote ? <blockquote>{quote}</blockquote> : null}
         </section>
         <aside className="about-facts">
           <span>现在关注</span>

package/app/admin/page.tsx

@@ -92,7 +92,7 @@ export default async function AdminPage({
       slug: post.slug,
       path: post.path,
       title: post.title,
-      topic: post.topic ?? "博文",
+      section: "文章",
       pinned: Boolean(post.pinned),
     })),
     ...columns.map((entry) => ({
@@ -101,7 +101,7 @@ export default async function AdminPage({
       slug: entry.slug,
       path: entry.path,
       title: entry.title,
-      topic: entry.columnTitle ?? "专栏",
+      section: entry.columnTitle ?? "专栏",
     })),
   ];
 

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

@@ -16,6 +16,7 @@ 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 {
   absoluteUrl,
   getSiteUrl,
@@ -100,17 +101,13 @@ export default async function PostPage({
             </li>
             {post.updated ? <li>更新于 {formatDate(post.updated)}</li> : null}
             <li>约 {wordCount.toLocaleString("en-US")} 字</li>
-            {post.topic ? (
-              <li>
-                <a className="cat" href={`/blog?topic=${encodeURIComponent(post.topic)}`}>{post.topic}</a>
-              </li>
-            ) : null}
             {originalUrl(post) ? (
               <li>
                 <a className="orig ext" href={originalUrl(post)} target="_blank" rel="noopener noreferrer">原文 ↗</a>
               </li>
             ) : null}
           </ul>
+          <ArticleTags tags={post.tags} />
           {post.cover && (
             <figure className="article-hero article-cover cover-card cover-img">
               {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -126,13 +123,6 @@ export default async function PostPage({
               <MarkdownArticle content={post.content} />
             </div>
             <ArticleReferences references={post.references} />
-            <div className="article-tags">
-              {post.tags?.map((tag) => (
-                <span className="p-category" key={tag}>
-                  #{tag}
-                </span>
-              ))}
-            </div>
             <Webmentions
               target={canonicalUrl}
               endpoint={webmentionApiEndpoint()}

package/app/blog/page.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from "react";
 import { siteConfig, siteDocumentTitle } from "../site.config";
-import { BlogArchive } from "../components/BlogArchive";
+import { BlogArchive, BlogArchiveFallback } from "../components/BlogArchive";
 import { posts } from "../lib/content";
 
 export const metadata = {
@@ -15,7 +15,7 @@ export default function BlogIndex() {
         <h1 id="sh-title">文章</h1>
         <p className="sh-deck">阶段性的完整沉淀，关于工程、架构与技术思考。共 {posts.length} 篇，按年份归档。</p>
       </div>
-      <Suspense>
+      <Suspense fallback={<BlogArchiveFallback />}>
         <BlogArchive />
       </Suspense>
     </main>

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

@@ -17,6 +17,7 @@ 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 {
   absoluteUrl,
   getSiteUrl,
@@ -122,13 +123,11 @@ export default async function ColumnEntryPage({
                 {formatDate(entry.date)}
               </time>
             </li>
-            {entry.topic && entry.topic !== entry.columnTitle ? (
-              <li><a className="cat" href={`/blog?topic=${encodeURIComponent(entry.topic)}`}>{entry.topic}</a></li>
-            ) : null}
             {originalUrl(entry) ? (
               <li><a className="orig ext" href={originalUrl(entry)} target="_blank" rel="noopener noreferrer">原文 ↗</a></li>
             ) : null}
           </ul>
+          <ArticleTags tags={entry.tags} />
           {entry.cover && (
             <figure className="article-hero article-cover cover-img">
               {/* eslint-disable-next-line @next/next/no-img-element */}

package/app/columns/page.tsx

@@ -6,7 +6,7 @@ import { siteConfig, siteDocumentTitle } from "../site.config";
 
 export const metadata = {
   title: siteDocumentTitle,
-  description: "专栏是按主题整理的阅读清单，与文章分类相互独立；清单内按发布时间从新到旧排列。",
+  description: siteConfig.pages.columns.subtitle || siteConfig.description,
 };
 
 function day(value: string) {
@@ -38,7 +38,7 @@ export default function ColumnsPage() {
     <main className="sh-main" id="content">
       <div className="sh-head">
         <h1>{siteConfig.pages.columns.title || "专栏"}</h1>
-        <p className="sh-deck">专栏是按主题整理的阅读清单，与文章分类相互独立；清单内按发布时间从新到旧排列。</p>
+        {siteConfig.pages.columns.subtitle ? <p className="sh-deck">{siteConfig.pages.columns.subtitle}</p> : null}
       </div>
       {grouped.length ? grouped.map(({ slug, first, entries }) => (
         <section className="sh-series" aria-labelledby={slug} key={slug}>

package/app/components/AdminDashboard.tsx

@@ -25,7 +25,7 @@ type CatalogEntry = {
   slug: string;
   path: string;
   title: string;
-  topic: string;
+  section: string;
   pinned?: boolean;
 };
 
@@ -327,7 +327,7 @@ export function AdminDashboard({
 
   async function copyPackage(entry: CatalogEntry) {
     const path = entry.kind === "post" ? `/blog/${entry.path}` : `/columns/${entry.column}/${entry.path}`;
-    await navigator.clipboard.writeText(`${entry.title}\n${entry.topic}\n${publicSiteUrl}${path}`);
+    await navigator.clipboard.writeText(`${entry.title}\n${entry.section}\n${publicSiteUrl}${path}`);
     setNotice("标题、栏目与公开链接已复制，可直接粘贴到任意发布平台。"
     );
   }
@@ -431,7 +431,7 @@ export function AdminDashboard({
         <div className="admin-catalog">
           {catalogEntries.map((entry) => (
             <article key={`${entry.kind}-${entry.column ?? ""}-${entry.path}`}>
-              <div><span>{entry.kind === "post" ? `博文${entry.pinned ? " · 已置顶" : ""}` : "专栏"} · {entry.topic}</span><h3>{entry.title}</h3></div>
+              <div><span>{entry.kind === "post" ? `博文${entry.pinned ? " · 已置顶" : ""}` : "专栏"} · {entry.section}</span><h3>{entry.title}</h3></div>
               <div className="admin-distribution-actions">
                 {entry.kind === "post" && (
                   <button type="button" disabled={pinningPath === entry.path} onClick={() => updatePinned(entry)}>

package/app/components/ArticleMeasure.tsx

@@ -1,51 +1,57 @@
 "use client";
 
 import { useEffect } from "react";
-import { tableBreakout, tocShift } from "../../ui/garden/enhance.mjs";
+import { figureBreakout, figureImageWidth, tableBreakout, tocShift } from "../../ui/garden/enhance.mjs";
 
 function translatedX(element: Element) {
   const value = new DOMMatrix(getComputedStyle(element).transform).m41;
   return Number.isFinite(value) ? value : 0;
 }
 
+// The table is width:100% and wraps its cells, so scrollWidth never exceeds
+// the column. Measure the unwrapped width instead.
+function naturalWidth(table: HTMLTableElement) {
+  const previous = table.style.width;
+  table.style.width = "max-content";
+  const width = table.scrollWidth;
+  table.style.width = previous;
+  return width;
+}
+
+function resetWide(element: HTMLElement) {
+  element.classList.remove("ux-wide");
+  element.style.removeProperty("--wl");
+  element.style.removeProperty("--wr");
+}
+
 export function ArticleMeasure() {
   useEffect(() => {
     const article = document.querySelector("article");
     const toc = document.querySelector<HTMLElement>(".toc");
     if (!article) return undefined;
     const root = document.documentElement;
-    let frame = 0;
+    // Natural content widths are expensive (a max-content relayout per table),
+    // so they are cached and only refreshed on resize and load.
+    const natural = new WeakMap<HTMLElement, number>();
+    let measureFrame = 0;
+    let tocFrame = 0;
+    let refreshPending = false;
 
-    const layout = () => {
-      const articleBox = article.getBoundingClientRect();
-      const viewport = root.clientWidth;
-      article.querySelectorAll<HTMLElement>(".table-wrap").forEach((wrap) => {
-        const table = wrap.querySelector("table");
-        wrap.classList.remove("ux-wide");
-        wrap.style.removeProperty("--wl");
-        wrap.style.removeProperty("--wr");
-        if (!table) return;
-        const margin = tableBreakout({
-          viewport,
-          articleLeft: articleBox.left,
-          articleRight: articleBox.right,
-          tableClient: wrap.clientWidth,
-          tableScroll: table.scrollWidth,
-        });
-        if (margin.left > 0) {
-          wrap.style.setProperty("--wl", `${margin.left}px`);
-          wrap.style.setProperty("--wr", `${margin.right}px`);
-          wrap.classList.add("ux-wide");
-        }
-      });
+    const tableWidth = (wrap: HTMLElement, refresh: boolean) => {
+      if (!refresh && natural.has(wrap)) return natural.get(wrap) ?? 0;
+      const table = wrap.querySelector("table");
+      const width = table ? naturalWidth(table) : 0;
+      natural.set(wrap, width);
+      return width;
+    };
 
+    const placeToc = () => {
       if (!toc) {
         root.removeAttribute("data-toc-yield");
         return;
       }
       const box = toc.getBoundingClientRect();
-      const dx = translatedX(toc);
-      const originalLeft = box.left - dx;
+      const originalLeft = box.left - translatedX(toc);
       const overlapRights: number[] = [];
       article.querySelectorAll<HTMLElement>(".ux-wide").forEach((element) => {
         const wide = element.getBoundingClientRect();
@@ -55,7 +61,7 @@ export function ArticleMeasure() {
       const shift = tocShift({
         tocLeft: originalLeft,
         tocWidth: box.width,
-        viewport,
+        viewport: root.clientWidth,
         overlapRights,
       });
       if (shift.shift > 0) {
@@ -68,27 +74,93 @@ export function ArticleMeasure() {
       }
     };
 
-    const schedule = () => {
-      if (frame) return;
-      frame = window.requestAnimationFrame(() => {
-        frame = 0;
-        layout();
+    const measure = (refresh: boolean) => {
+      // Measure the text column, not the whole article grid (which includes the TOC rail).
+      const articleBox = (article.querySelector(".markdown-body") ?? article).getBoundingClientRect();
+      const viewport = root.clientWidth;
+      const widen = (element: HTMLElement, margin: { left: number; right: number }) => {
+        if (margin.left <= 0) return;
+        element.style.setProperty("--wl", `${margin.left}px`);
+        element.style.setProperty("--wr", `${margin.right}px`);
+        element.classList.add("ux-wide");
+      };
+      // Tables: as wide as their unwrapped content, up to 300px a side.
+      article.querySelectorAll<HTMLElement>(".table-wrap").forEach((wrap) => {
+        const width = tableWidth(wrap, refresh);
+        resetWide(wrap);
+        if (!width) return;
+        widen(wrap, tableBreakout({
+          viewport,
+          articleLeft: articleBox.left,
+          articleRight: articleBox.right,
+          tableClient: wrap.clientWidth,
+          tableScroll: width,
+        }));
+      });
+      // Images: as wide as they display (2x screenshots at half their pixels), up to 1040px in total.
+      article.querySelectorAll<HTMLElement>(".fig").forEach((figure) => {
+        const image = figure.querySelector("img");
+        resetWide(figure);
+        if (!image) return;
+        // Back to CSS sizing: natural size, capped at the column.
+        image.style.removeProperty("width");
+        if (!image.naturalWidth) return;
+        const attrWidth = Number(image.getAttribute("width")) || 0;
+        const breakout = figureBreakout({
+          viewport,
+          articleLeft: articleBox.left,
+          articleRight: articleBox.right,
+          figureClient: figure.clientWidth,
+          imageClient: image.clientWidth,
+          naturalWidth: image.naturalWidth,
+          attrWidth,
+        });
+        widen(figure, breakout);
+        // Only a widened image, or one with a width attribute, gets an inline width.
+        const width = figureImageWidth({ naturalWidth: image.naturalWidth, attrWidth, widened: breakout.left > 0 });
+        if (width) image.style.width = `${width}px`;
+      });
+      placeToc();
+    };
+
+    // Resize and load refresh the cached widths; the ResizeObserver reuses them.
+    const scheduleMeasure = (refresh: boolean) => {
+      refreshPending ||= refresh;
+      if (measureFrame) return;
+      measureFrame = window.requestAnimationFrame(() => {
+        measureFrame = 0;
+        const shouldRefresh = refreshPending;
+        refreshPending = false;
+        measure(shouldRefresh);
+      });
+    };
+    const refresh = () => scheduleMeasure(true);
+    const reuse = () => scheduleMeasure(false);
+    // Scrolling only moves wide elements past the TOC; no width is measured.
+    const onScroll = () => {
+      if (tocFrame) return;
+      tocFrame = window.requestAnimationFrame(() => {
+        tocFrame = 0;
+        placeToc();
       });
     };
 
-    layout();
-    window.addEventListener("resize", schedule);
-    window.addEventListener("scroll", schedule, { passive: true });
-    window.addEventListener("load", schedule);
-    const observer = new ResizeObserver(schedule);
+    measure(true);
+    window.addEventListener("resize", refresh);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("load", refresh);
+    const observer = new ResizeObserver(reuse);
     observer.observe(article);
-    article.querySelectorAll("img").forEach((image) => image.addEventListener("load", schedule));
+    const images = [...article.querySelectorAll("img")];
+    images.forEach((image) => image.addEventListener("load", refresh));
     return () => {
-      window.removeEventListener("resize", schedule);
-      window.removeEventListener("scroll", schedule);
-      window.removeEventListener("load", schedule);
+      window.removeEventListener("resize", refresh);
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("load", refresh);
+      images.forEach((image) => image.removeEventListener("load", refresh));
       observer.disconnect();
-      if (frame) window.cancelAnimationFrame(frame);
+      if (measureFrame) window.cancelAnimationFrame(measureFrame);
+      if (tocFrame) window.cancelAnimationFrame(tocFrame);
     };
   }, []);
   return null;

package/app/components/ArticleTags.tsx

@@ -0,0 +1,17 @@
+import { tagFilterHref } from "../lib/tag-filter";
+
+export function ArticleTags({ tags }: { tags?: string[] }) {
+  const list = (tags ?? []).filter(Boolean);
+  if (!list.length) return null;
+  return (
+    <ul className="article-tagrow" aria-label="标签">
+      {list.map((tag) => (
+        <li key={tag}>
+          <a className="tag-chip p-category" href={tagFilterHref([tag])}>
+            #{tag}
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/app/components/BlogArchive.tsx

@@ -1,18 +1,21 @@
 "use client";
 
 import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { useState } from "react";
-import { columns, postHref, posts, topics } from "../lib/content";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useMemo, useState } from "react";
+import { columnIndexHref, columnOfPost, columns, postHref, posts } from "../lib/content";
+import {
+  TAG_PARAM,
+  filterByTags,
+  selectedTags,
+  tagFilterHref,
+  tagOptions,
+  tagSummary,
+  toggleTag,
+  visibleTagOptions,
+} from "../lib/tag-filter";
 import { ContentEmptyState } from "./ContentEmptyState";
 
-export const archiveHref = (topic?: string) => {
-  const params = new URLSearchParams();
-  if (topic) params.set("topic", topic);
-  const query = params.toString();
-  return query ? `/blog?${query}` : "/blog";
-};
-
 function day(value: string) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value.slice(0, 10);
@@ -24,12 +27,37 @@ function day(value: string) {
   }).format(date);
 }
 
+function ColumnLabel({ path }: { path: string }) {
+  const column = columnOfPost({ path });
+  return column ? <Link className="cat" href={columnIndexHref(column.slug)}>{column.title}</Link> : null;
+}
+
+const NO_TAGS: string[] = [];
+
+/** Reads the selected tags from the URL; needs a Suspense boundary. */
 export function BlogArchive() {
+  const router = useRouter();
+  const pathname = usePathname() || "/blog";
   const searchParams = useSearchParams();
+  const paramKey = searchParams.getAll(TAG_PARAM).join("\u0000");
+  const selected = useMemo(() => selectedTags(paramKey ? paramKey.split("\u0000") : []), [paramKey]);
+  return <ArchiveView selected={selected} go={(next) => router.push(tagFilterHref(next, pathname), { scroll: false })} />;
+}
+
+/**
+ * The full, unfiltered list. Rendered into the static page as the Suspense
+ * fallback, so the list is there before scripts run (or without them).
+ */
+export function BlogArchiveFallback() {
+  return <ArchiveView selected={NO_TAGS} go={(next) => window.location.assign(tagFilterHref(next))} />;
+}
+
+function ArchiveView({ selected, go }: { selected: string[]; go: (next: string[]) => void }) {
   const [compact, setCompact] = useState(false);
-  const requestedTopic = searchParams.get("topic") ?? "";
-  const selectedTopic = topics.includes(requestedTopic) ? requestedTopic : undefined;
-  const filtered = (selectedTopic ? posts.filter((post) => post.topic === selectedTopic) : posts)
+  const [expanded, setExpanded] = useState(false);
+  const options = useMemo(() => tagOptions(posts, selected), [selected]);
+  const { shown, hidden } = visibleTagOptions(options, expanded);
+  const filtered = filterByTags(posts, selected)
     .slice()
     .sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
   const years = new Map<string, typeof filtered>();
@@ -53,23 +81,37 @@ export function BlogArchive() {
   return (
     <div className="sh-listgrid">
       <div>
-        <ul className="sh-filters" aria-label="按分类筛选">
-          <li>
-            <Link className="sh-chip" href="/blog" aria-current={selectedTopic ? undefined : "true"}>
-              全部<span className="n">{posts.length}</span>
-            </Link>
-          </li>
-          {topics.map((topic) => (
-            <li key={topic}>
-              <Link className="sh-chip" href={archiveHref(topic)} aria-current={selectedTopic === topic ? "true" : undefined}>
-                {topic}<span className="n">{posts.filter((post) => post.topic === topic).length}</span>
-              </Link>
-            </li>
-          ))}
-        </ul>
+        {options.length ? (
+          <div className="sh-tagfilter">
+            <ul className="sh-tagchips" aria-label="按标签筛选">
+              {shown.map((option) => (
+                <li key={option.tag}>
+                  <button
+                    type="button"
+                    className="sh-tagchip"
+                    aria-pressed={option.selected}
+                    disabled={option.disabled}
+                    onClick={() => go(toggleTag(selected, option.tag))}
+                  >
+                    <span className="label">#{option.tag}</span>
+                    <span className="n num">{option.next}</span>
+                    {option.selected ? <span className="x" aria-hidden="true">×</span> : null}
+                  </button>
+                </li>
+              ))}
+              {hidden > 0 || expanded ? (
+                <li>
+                  <button type="button" className="sh-tagmore" aria-expanded={expanded} onClick={() => setExpanded(!expanded)}>
+                    {expanded ? "收起" : `展开全部 ${options.length} 个标签`}
+                  </button>
+                </li>
+              ) : null}
+            </ul>
+          </div>
+        ) : null}
         <div className="sh-status">
-          <span aria-live="polite">{selectedTopic ? `${selectedTopic} ${filtered.length} 篇` : `全部 ${posts.length} 篇`}</span>
-          {selectedTopic ? <Link href="/blog">清除筛选</Link> : null}
+          <span aria-live="polite">{tagSummary(selected.length, filtered.length)}</span>
+          {selected.length ? <button type="button" onClick={() => go([])}>清除</button> : null}
           <div className="sh-view" role="group" aria-label="列表密度">
             <button type="button" aria-pressed={!compact} onClick={() => setCompact(false)}>摘要</button>
             <button type="button" aria-pressed={compact} onClick={() => setCompact(true)}>紧凑</button>
@@ -94,16 +136,26 @@ export function BlogArchive() {
                       </h3>
                       {post.description ? <p>{post.description}</p> : null}
                     </div>
-                    {post.topic ? <Link className="cat" href={archiveHref(post.topic)}>{post.topic}</Link> : null}
+                    <ColumnLabel path={post.path} />
                   </li>
                 ))}
               </ol>
             </section>
-          )) : <ContentEmptyState kind="posts" />}
+          )) : selected.length ? (
+            <div className="sh-tagempty">
+              <p>没有同时带这些标签的文章。</p>
+              <div className="acts">
+                {selected.length > 1 ? (
+                  <button type="button" onClick={() => go(selected.slice(0, -1))}>去掉「{selected[selected.length - 1]}」</button>
+                ) : null}
+                <button type="button" onClick={() => go([])}>看全部文章</button>
+              </div>
+            </div>
+          ) : <ContentEmptyState kind="posts" />}
         </div>
       </div>
       <aside className="sh-rail" aria-label="按年份跳转">
-        <h2>按年份</h2>
+        {years.size ? <h2>按年份</h2> : null}
         <ol>
           {[...years.keys()].map((year) => (
             <li key={year}>
@@ -117,7 +169,7 @@ export function BlogArchive() {
             <ol>
               {series.map(([slug, entries]) => (
                 <li key={slug}>
-                  <Link href={`/columns#${slug}`}><span>{entries[0]?.columnTitle ?? slug}</span><span className="n num">{entries.length}</span></Link>
+                  <Link href={columnIndexHref(slug)}><span>{entries[0]?.columnTitle ?? slug}</span><span className="n num">{entries.length}</span></Link>
                 </li>
               ))}
             </ol>