hd-garden 0.4.1 → 0.5.1

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

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { CoverImage } from "../../components/CoverImage";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import {
@@ -16,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,
@@ -100,21 +102,16 @@ 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 */}
-              <img className="u-photo" src={post.cover} alt={`${post.title} 封面`} />
+              <CoverImage className="u-photo" src={post.cover} image={post.coverImage} alt={`${post.title} 封面`} sizes="(max-width: 920px) calc(100vw - 40px), 880px" priority />
             </figure>
           )}
         </header>
@@ -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,7 +1,8 @@
 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";
+import { archivePosts, archiveSeries } from "../lib/archive";
 
 export const metadata = {
   title: siteDocumentTitle,
@@ -9,14 +10,16 @@ export const metadata = {
 };
 
 export default function BlogIndex() {
+  const list = archivePosts();
+  const series = archiveSeries();
   return (
     <main className="sh-main" id="content">
       <div className="sh-head">
         <h1 id="sh-title">文章</h1>
         <p className="sh-deck">阶段性的完整沉淀，关于工程、架构与技术思考。共 {posts.length} 篇，按年份归档。</p>
       </div>
-      <Suspense>
-        <BlogArchive />
+      <Suspense fallback={<BlogArchiveFallback posts={list} series={series} />}>
+        <BlogArchive posts={list} series={series} />
       </Suspense>
     </main>
   );

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

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { CoverImage } from "../../../components/CoverImage";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { ArrowLeft, ArrowRight } from "@phosphor-icons/react/ssr";
@@ -17,6 +18,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,21 +124,14 @@ 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 */}
-              <img
-                className="u-photo"
-                src={entry.cover}
-                alt={`${entry.title} 封面`}
-              />
+              <CoverImage className="u-photo" src={entry.cover} image={entry.coverImage} alt={`${entry.title} 封面`} sizes="(max-width: 920px) calc(100vw - 40px), 880px" priority />
             </figure>
           )}
         </header>

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/ArticleReferences.tsx

@@ -1,6 +1,9 @@
+import { referenceColumns, referenceDomain } from "../../ui/garden/references.mjs";
+
 type ReferenceItem = {
   title: string;
   url?: string;
+  domain?: string;
 };
 
 export function ArticleReferences({
@@ -9,39 +12,36 @@ export function ArticleReferences({
   references?: ReferenceItem[];
 }) {
   if (!references?.length) return null;
+  const split = referenceColumns(references.length) === 2;
 
   return (
-    <section className="article-references" aria-labelledby="article-references-heading">
-      <p id="article-references-heading">参考</p>
-      <table>
-        <tbody>
-          {references.map((item, index) => {
-            const number = index + 1;
-            return (
-              <tr key={index}>
-                <td>
-                  {item.url ? (
-                    <a href={item.url} tabIndex={-1} aria-hidden="true">
-                      {number}
-                    </a>
-                  ) : (
-                    <span>{number}</span>
-                  )}
-                </td>
-                <td>
-                  {item.url ? (
-                    <a href={item.url} rel="noreferrer">
-                      <span>{item.title}</span>
-                    </a>
-                  ) : (
-                    <span>{item.title}</span>
-                  )}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+    <section
+      className={split ? "article-references is-split" : "article-references"}
+      aria-labelledby="article-references-heading"
+    >
+      <h2 id="article-references-heading">参考</h2>
+      <ol>
+        {references.map((item, index) => {
+          const domain = item.domain ?? referenceDomain(item.url);
+          return (
+            <li key={index}>
+              {item.url ? (
+                <a href={item.url} rel="noreferrer">
+                  {item.title}
+                </a>
+              ) : (
+                <span className="ref-title">{item.title}</span>
+              )}
+              {domain ? (
+                <>
+                  {" "}
+                  <span className="ref-domain">{domain}</span>
+                </>
+              ) : null}
+            </li>
+          );
+        })}
+      </ol>
     </section>
   );
 }

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>
+  );
+}