hd-garden 0.4.0 → 0.5.0

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>

package/app/components/ContentEmptyState.tsx

@@ -6,25 +6,25 @@ import { ArrowRight, Article, Books, Quotes } from "@phosphor-icons/react/ssr";
 const emptyContent = {
   posts: {
     icon: Article,
-    eyebrow: "NO POSTS YET / 暂无博文",
+    eyebrow: "暂无博文",
     title: "暂无博文。",
-    description: "发布文章后会在这里按主题与时间归档。",
+    description: "文章会按时间排在这里。",
     actionHref: "/",
     actionLabel: "返回首页",
   },
   thoughts: {
     icon: Quotes,
-    eyebrow: "NO THOUGHTS YET / 暂无随想",
+    eyebrow: "暂无随想",
     title: "暂无随想。",
-    description: "日常的碎片记录、短笔记与链接会落在这里。",
+    description: "短笔记和链接会在这里。",
     actionHref: "/blog",
     actionLabel: "先读博文",
   },
   columns: {
     icon: Books,
-    eyebrow: "NO COLUMNS YET / 暂无专栏",
+    eyebrow: "暂无专栏",
     title: "暂无专栏。",
-    description: "文章积累成系列后会在这里按顺序呈现。",
+    description: "一组文章会按顺序列在这里。",
     actionHref: "/blog",
     actionLabel: "浏览全部博文",
   },

package/app/components/GardenAdminGuide.tsx

@@ -17,7 +17,7 @@ const adminJobs = [
   },
   {
     title: "改文章里的交互",
-    description: "写作台把一句话收成可交互的块。组件页能看到每一种块长什么样。",
+    description: "写作台把一句话收成可以动手试的一块。",
   },
 ];
 

package/app/components/GardenContentGuide.tsx

@@ -23,7 +23,6 @@ const postSource = `---
 title: 我的第一篇文章
 date: 2026-08-03 09:00:00
 description: 这篇文章记录我为什么重新开始写博客。
-topic: 写作
 tags: [Markdown, 博客]
 pinned: false
 cover: writing/first-post.jpg
@@ -100,7 +99,7 @@ const guides: Guide[] = [
       <>文件名就是地址。标题和日期写在开头。先存着就标成草稿。</>,
       <>图片、音频、视频和链接按顺序放进 <code>media</code>。</>,
     ],
-    result: "它会出现在随想页和首页，并且有自己的链接。",
+    result: "它会出现在随想页，并且有自己的链接。",
     path: "content/thoughts/walk-after-rain.md",
     source: thoughtSource,
     language: "markdown",

package/app/components/GardenMediaGuide.tsx

@@ -5,7 +5,7 @@ const embedTypes = [
   },
   {
     title: "X / Twitter",
-    description: "显示成一张带出处的卡片，不依赖对方的脚本。",
+    description: "显示成一张带出处的卡片。",
   },
   {
     title: "微信公众号",
@@ -13,7 +13,7 @@ const embedTypes = [
   },
   {
     title: "其他网站",
-    description: "自己写标题、摘要和封面。不在构建时去抓那个网址。",
+    description: "自己写标题、摘要和封面。",
   },
 ];
 
@@ -53,7 +53,7 @@ export function GardenMediaGuide() {
       </ul>
 
       <p className="garden-media-boundary">
-        摘要写在文章里。构建时不去抓任意网址。原站打不开，文章还在。需要时用 <code>make embed URL=...</code> 拉一次，看过再贴进去。
+        摘要写在文章里。原站打不开，文章还在。需要时用 <code>make embed URL=...</code> 拉一次，看过再贴进去。
       </p>
     </section>
   );

package/app/components/GithubProfile.tsx

@@ -253,7 +253,7 @@ export async function GithubProfile() {
         <header>
           <div>
             <p className="eyebrow">PINNED / 置顶仓库</p>
-            <h3 id="github-pinned-title">正在持续构建的项目</h3>
+            <h3 id="github-pinned-title">正在做的项目</h3>
           </div>
           <PushPin size={20} aria-hidden="true" />
         </header>

package/app/components/MarkdownImage.tsx

@@ -2,9 +2,11 @@
 
 import { useEffect, useState, type ComponentPropsWithoutRef } from "react";
 
-type MarkdownImageProps = ComponentPropsWithoutRef<"img">;
+// react-markdown also hands over its syntax-tree `node`; it must not reach the DOM.
+type MarkdownImageProps = ComponentPropsWithoutRef<"img"> & { node?: unknown };
 
-export function MarkdownImage({ alt = "", src, ...props }: MarkdownImageProps) {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function MarkdownImage({ alt = "", src, node, ...props }: MarkdownImageProps) {
   const [open, setOpen] = useState(false);
   const description = alt || "查看原图";
 

package/app/components/SiteFooter.tsx

@@ -9,13 +9,13 @@ export function SiteFooter() {
           © {new Date().getFullYear()} {siteConfig.author.name} · {siteConfig.footer}
           <span className="footer-framework"> · 基于 <a href="https://github.com/hedon954/garden" target="_blank" rel="noreferrer">Garden</a> 构建</span>
         </p>
-        <div>
-          <a href={githubUrl} aria-label="GitHub" rel="me">
-            <GithubLogo size={19} />
+        <div className="sh-foot-links">
+          <a href={githubUrl} rel="me">
+            <GithubLogo size={16} aria-hidden="true" />
             GitHub
           </a>
-          <a href="/rss.xml" aria-label="RSS 订阅">
-            <Rss size={18} />
+          <a href="/rss.xml">
+            <Rss size={16} aria-hidden="true" />
             RSS
           </a>
         </div>

package/app/components/SiteHeader.tsx

@@ -197,7 +197,6 @@ export function SiteHeader() {
           { name: "title", weight: 0.5 },
           { name: "description", weight: 0.3 },
           { name: "content", weight: 0.15 },
-          { name: "topic", weight: 0.05 },
         ],
         threshold: 0.36,
         ignoreLocation: true,
@@ -401,10 +400,7 @@ export function SiteHeader() {
                     className={`search-result${activeResult === index ? " active" : ""}`}
                   >
                     <span>
-                      <HighlightedText
-                        text={result.item.topic}
-                        ranges={rangesFor(result.matches, "topic")}
-                      />
+                      {result.item.section}
                     </span>
                     <strong>
                       <HighlightedText

package/app/components/TagRedirect.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { TAG_PARAM, selectedTags, tagFilterHref } from "../lib/tag-filter";
+
+/** Old `/tags?t=X` links open the same filter on `/blog?t=X`. */
+export function TagRedirect() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const tags = selectedTags(params.getAll(TAG_PARAM));
+  const target = tags.length ? tagFilterHref(tags) : "";
+  useEffect(() => {
+    if (target) router.replace(target);
+  }, [router, target]);
+  return null;
+}

package/app/garden/page.tsx

@@ -7,7 +7,7 @@ import { siteConfig } from "../site.config";
 
 export const metadata = {
   title: "Garden",
-  description: "用 Markdown 写文章。推送到 GitHub 之后，页面、搜索和 RSS 一起生成。",
+  description: "用 Markdown 写文章。推送之后，页面、搜索和 RSS 一起更新。",
 };
 
 const jumps = [
@@ -45,7 +45,7 @@ const setupSteps = [
   {
     title: "发布",
     command: "make update",
-    body: "先检查，再提交并推送。main 更新后，网站、搜索和 RSS 会重新生成。",
+    body: "先检查，再提交并推送。main 更新后，网站、搜索和 RSS 会一起更新。",
   },
 ];
 
@@ -54,7 +54,7 @@ export default function GardenPage() {
     <main className="page-shell garden-page">
       <PageIntro title={siteConfig.pages.garden.title} subtitle={siteConfig.pages.garden.subtitle}>
         <p className="garden-lede">
-          文章放在你自己的仓库里。你改文件，GitHub 构建网站。
+          文章放在你自己的仓库里。你改文件，网站跟着更新。
         </p>
         <div className="garden-actions">
           <a
@@ -133,10 +133,10 @@ export default function GardenPage() {
         <header className="garden-section-heading">
           <h2 id="garden-after-title">推送之后</h2>
         </header>
-        <p className="garden-after-lead">你的仓库，到 GitHub 构建，再到公开网站。</p>
+        <p className="garden-after-lead">推送之后，网站公开更新。</p>
         <div className="garden-after-copy">
-          <p>框架画页面。你的文章不放在框架仓库里，而在你自己的内容仓库。读者打开的是生成出来的静态页。</p>
-          <p>同一次构建会带上正文、目录、前后篇、搜索、RSS 和 sitemap。后台和评论都可以以后再加，不接也能发布。</p>
+          <p>文章在你自己的仓库里。读者打开的是已经发布的页面。</p>
+          <p>一次更新会带上正文、目录、前后篇、搜索、RSS 和 sitemap。后台和评论都可以以后再加。</p>
         </div>
       </section>
 

package/app/garden-modules.d.ts

@@ -18,7 +18,6 @@ declare module "@garden/generated-content" {
     updated?: string;
     publishAt?: string;
     draft?: boolean;
-    topic?: string;
     tags?: string[];
     references?: { title: string; url?: string }[];
     pinned?: boolean;

package/app/globals.css

@@ -3,8 +3,8 @@
 @import "./admin-ui.css";
 
 :root {
-  --paper: #f8f8f6;
-  --paper-deep: #eeeeeb;
+  --paper: #faf9f5;
+  --paper-deep: #f0eee6;
   --card: #ffffff;
   --ink: #202124;
   --ink-soft: #34383d;
@@ -12,28 +12,28 @@
   --faint: #a1a6ad;
   --line: #deded9;
   --line-strong: #c9c9c2;
-  --accent: #d82d48;
-  --accent-soft: #f9e8eb;
-  --selection: #f3c9d1;
+  --accent: #30302e;
+  --accent-soft: #f0eee6;
+  --selection: #e8e5db;
   --font-mono: var(--font-geist-mono), "SFMono-Regular", Consolas,
     "Liberation Mono", "Noto Sans Mono CJK SC", monospace;
-  --content: 700px;
+  --content: 740px;
   --wide: 1040px;
 }
 
 :root[data-theme="dark"] {
-  --paper: #171819;
-  --paper-deep: #202224;
-  --card: #1e2022;
+  --paper: #1f1e1d;
+  --paper-deep: #262624;
+  --card: #262624;
   --ink: #ededeb;
   --ink-soft: #d8d8d4;
   --muted: #a6adb6;
   --faint: #747b84;
   --line: #35383b;
   --line-strong: #4b4f54;
-  --accent: #ff5d76;
-  --accent-soft: #3b242a;
-  --selection: #68333e;
+  --accent: #eeece7;
+  --accent-soft: #30302e;
+  --selection: rgb(238 236 231 / 18%);
 }
 
 * {
@@ -252,11 +252,6 @@ button {
   margin-top: 72px;
 }
 
-.home-thought-list {
-  display: grid;
-  gap: 24px;
-}
-
 .section-heading {
   min-height: 40px;
   margin-bottom: 21px;
@@ -1423,32 +1418,6 @@ button {
   color: var(--accent);
 }
 
-.topic-strip {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 8px 0 38px;
-}
-
-.topic-strip a {
-  padding: 6px 10px;
-  background: var(--paper-deep);
-  color: var(--muted);
-  font-size: 11px;
-  border: 1px solid transparent;
-}
-
-.topic-strip a:hover,
-.topic-strip a:focus-visible {
-  color: var(--ink);
-  border-color: var(--line-strong);
-}
-
-.topic-strip a.active {
-  background: var(--ink);
-  color: var(--paper);
-}
-
 .archive-list {
   border-top: 1px solid var(--line-strong);
 }
@@ -1496,13 +1465,6 @@ button {
   border: 1px solid var(--line);
 }
 
-.archive-topic {
-  color: var(--accent);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-}
-
 .pinned-badge {
   margin-left: 9px;
   display: inline-flex;
@@ -2089,12 +2051,14 @@ button {
 
 .markdown-body a {
   text-decoration: underline;
-  text-decoration-color: var(--accent);
+  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
   text-underline-offset: 4px;
 }
 
+/* Links stay ink; hover darkens and thickens the underline instead. */
 .markdown-body a:hover {
-  color: var(--accent);
+  text-decoration-color: var(--ink);
+  text-decoration-thickness: 2px;
 }
 
 /* A per-line border stays continuous across inline code and descenders. */
@@ -2186,25 +2150,6 @@ button {
   color: var(--accent);
 }
 
-.markdown-body table {
-  width: 100%;
-  margin: 34px 0;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-
-.markdown-body th,
-.markdown-body td {
-  padding: 11px 13px;
-  border: 1px solid var(--line);
-  text-align: left;
-}
-
-.markdown-body th {
-  background: var(--paper-deep);
-  color: var(--ink);
-}
-
 .markdown-body pre {
   position: relative;
   margin: 32px 0;
@@ -2879,25 +2824,10 @@ button {
   color: var(--accent);
 }
 
-.article-references + .article-tags,
 .article-references + .next-entry {
   margin-top: 36px;
 }
 
-.article-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 68px 0 24px;
-}
-
-.article-tags span {
-  padding: 4px 8px;
-  background: var(--paper-deep);
-  color: var(--muted);
-  font-size: 10px;
-}
-
 .webmentions,
 .comments {
   margin-top: 78px;
@@ -3078,7 +3008,7 @@ button {
   margin: 0 auto;
   padding: 58px 0 120px;
   display: grid;
-  grid-template-columns: var(--column-sidebar-width) minmax(0, 700px) var(--column-sidebar-width);
+  grid-template-columns: var(--column-sidebar-width) minmax(0, var(--content)) var(--column-sidebar-width);
   gap: 54px;
   justify-content: center;
 }
@@ -3697,12 +3627,6 @@ button {
   color: var(--accent);
 }
 
-.footer-framework a {
-  text-decoration: underline;
-  text-decoration-color: var(--line-strong);
-  text-underline-offset: 3px;
-}
-
 @media (max-width: 1080px) {
   .post-reading-page {
     --toc-width: 210px;
@@ -3917,7 +3841,7 @@ button {
   }
 
   .column-reading-page {
-    grid-template-columns: minmax(0, 700px);
+    grid-template-columns: minmax(0, var(--content));
   }
 
   .series-nav {
@@ -4202,8 +4126,7 @@ button {
     gap: 4px 9px;
   }
 
-  .archive-meta time,
-  .archive-topic {
+  .archive-meta time {
     font-size: 9px;
   }
 
@@ -4274,11 +4197,6 @@ button {
     font-size: 17px;
   }
 
-  .markdown-body table {
-    display: block;
-    overflow-x: auto;
-  }
-
   .markdown-body .external-embed-card,
   .markdown-body .external-embed-card:has(> img) {
     grid-template-columns: 1fr 22px;

package/app/lib/a2-meta.ts

@@ -13,6 +13,16 @@ export function demoDateLabel(value: string) {
   return `${date.getUTCFullYear()} 年 ${date.getUTCMonth() + 1} 月 ${date.getUTCDate()} 日`;
 }
 
+/** Home list label. The current Shanghai year drops the year so the column stays narrow. */
+export function homeListDate(value: string, now = new Date()) {
+  const date = shanghaiDate(value);
+  if (!date) return value;
+  const today = shanghaiDate(now.toISOString());
+  const monthDay = `${date.getUTCMonth() + 1} 月 ${date.getUTCDate()} 日`;
+  if (today && date.getUTCFullYear() === today.getUTCFullYear()) return monthDay;
+  return `${date.getUTCFullYear()} 年 ${monthDay}`;
+}
+
 export function demoDateTime(value: string) {
   const date = shanghaiDate(value);
   if (!date) return value.slice(0, 10);

package/app/lib/a2-preview.ts

@@ -17,7 +17,6 @@ export type A2Article = {
   title: string;
   description: string;
   date: string;
-  topic: string;
   cover: string;
   original: string;
   content: string;
@@ -42,7 +41,6 @@ export function readA2Article(slug: string): A2Article | null {
     title: String(data.title ?? slug),
     description: String(data.description ?? ""),
     date,
-    topic: String(data.topic ?? ""),
     cover: cover && !/^https?:/iu.test(cover) ? `https://hedon.top/media/covers/${cover}` : cover,
     original: originals[slug] ?? "",
     content: parsed.content,