hd-garden 0.4.0 → 0.5.0

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

@@ -2,7 +2,7 @@
 name: garden-interactive-chart
 description: >-
   Writes Garden interactive charts as self-contained HTML in a same-name
-  sidecar directory and embeds them with a short widget fence. Use when adding
+  sidecar directory and embeds them with a short garden html fence. Use when adding
   or editing Garden widgets, steppers, inspect grids, param benches,
   compare views, traces, KV cache charts, or any 可交互图表 / 同名目录 HTML.
 ---
@@ -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
-```widget
-src: ./understand-kv-cache/waste.html
-caption: 朴素 decode 每步重算全部过去 token；6 个 token 共 21 次计算，其中 15 次是浪费。
+```garden html
+src: ./windowsill-herbs/layers.html
+title: 水从土面渗到排水孔，大约要一分钟。
 ```
 ````
 
@@ -51,8 +51,8 @@ caption: 朴素 decode 每步重算全部过去 token；6 个 token 共 21 次
 
 - `src` 必须是该同名目录里的本地 `.html` 或 `.pdf`，不能指到 `assets/`、别的文章或 `https://`
 - 带 `garden-chart` 高度回报的 HTML 是图表，直接铺开；普通 HTML 和 PDF 默认收成示意入口，读者展开后再加载
-- `caption` 必须是判断，不能是「见下图」
-- 一份 HTML 一张图；文件名用 `waste.html`、`stepper.html` 这种短 kebab
+- `title` 必须是判断，不能是「见下图」
+- 一份 HTML 一张图；文件名用 `layers.html`、`diagram.html` 这种短 kebab
 - HTML 自包含：CSS、SVG、脚本都在这一个文件里
 - 先写 HTML，再写围栏；围栏里不要再摊步进数组或采样点
 
@@ -77,8 +77,8 @@ caption: 朴素 decode 每步重算全部过去 token；6 个 token 共 21 次
 
 ## 交稿前
 
-- [ ] 文件在同名目录内，围栏只有 `src` + `caption`
+- [ ] 文件在同名目录内，围栏只有 `src` + `title`
 - [ ] 单独打开 HTML 就能用；iframe 能撑开高度
 - [ ] 浅色 / 深色主题都跟 Garden 纸面
 - [ ] 减少动态时不自动循环
-- [ ] `caption` 让关 JS 的人也能读到结论
+- [ ] `title` 让关 JS 的人也能读到结论

package/.agents/skills/garden-ui/SKILL.md

@@ -1,8 +1,8 @@
 ---
 name: garden-ui
 description: >-
-  Compiles the intent blocks in one Garden post into ui blocks (or prose, or a
-  widget), recompiles stale or broken ui blocks, and suggests where a post
+  Compiles the intent blocks in one Garden post into ui blocks (or prose, or
+  garden html), recompiles stale or broken ui blocks, and suggests where a post
   could use interaction. Use when the user says 编译这篇 / 编译意图块 / 重编译
   <id> / 这篇哪里适合交互, or pastes a garden ui check fix prompt.
 ---
@@ -43,7 +43,7 @@ description: >-
 3. 每块读原话和所在小节，三选一：
    - **写回正文**：一句话、一张表或一张 Mermaid 就能说清时。
    - **写 `ui`**：读者需要拖、点、翻才能看懂时。
-   - **写 `widget`**：目录表达不了的画布动画、音频、物理模拟等。按 [garden-interactive-chart](../garden-interactive-chart/SKILL.md) 在同名目录写 HTML，并在 `widget` 的 YAML 里加 `intent:` 保留原话。
+   - **写 `garden html`**：目录表达不了的画布动画、音频、物理模拟等。按 [garden-interactive-chart](../garden-interactive-chart/SKILL.md) 在同名目录写 HTML，用 `title` 写下判断。
 
 4. 写 `ui` 时：
    - 原话原样放进块头的 `intent`，一个字都不改。`compiled` 不用写，`apply` 会写。
@@ -69,7 +69,7 @@ description: >-
    ````
 
    - 没写 id 的 `intent` 块用 `--intent-hash <intentHash>` 定位；原话重复时改用 `--at <startLine>`。
-   - 新内容可以是一个 `ui` 围栏、一个 `widget` 围栏，或一段普通 Markdown（写回正文时）。
+   - 新内容可以是一个 `ui` 围栏、一个 `garden html` 围栏，或一段普通 Markdown（写回正文时）。
    - 成功时 stdout 是 `{"ok":true,...}`。失败时 stderr 是 JSON，按 `code` 处理：
      - `apply-invalid`：新内容没通过校验，按 `diagnostics` 改了再写。
      - `apply-base`：块在扫描之后被改过。重新 `scan`，用新的 `hash`。

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,
@@ -99,19 +100,14 @@ export default async function PostPage({
               </time>
             </li>
             {post.updated ? <li>更新于 {formatDate(post.updated)}</li> : null}
-            <li>{post.readingTime}</li>
             <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 */}
@@ -127,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,14 +123,11 @@ export default async function ColumnEntryPage({
                 {formatDate(entry.date)}
               </time>
             </li>
-            <li>{entry.readingTime}</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>
+  );
+}