hd-garden 0.4.0 → 0.5.0

package/app/tags/page.tsx

@@ -1,28 +1,39 @@
+import Link from "next/link";
 import { Suspense } from "react";
 import { posts } from "../lib/content";
-import { TagIndex } from "../components/TagIndex";
+import { tagCounts, tagFilterHref } from "../lib/tag-filter";
+import { TagRedirect } from "../components/TagRedirect";
 import { siteDocumentTitle } from "../site.config";
 
 export const metadata = {
   title: siteDocumentTitle,
-  description: "按标签浏览文章。标签不是专栏，也不是分类。",
+  description: "全部标签。",
 };
 
 export default function TagsPage() {
-  const counts = new Map<string, number>();
-  for (const post of posts) {
-    for (const tag of post.tags ?? []) counts.set(tag, (counts.get(tag) ?? 0) + 1);
-  }
-  const once = [...counts.values()].filter((count) => count === 1).length;
+  const tags = tagCounts(posts);
   return (
     <main className="sh-main" id="content">
       <div className="sh-head">
         <h1>标签</h1>
-        <p className="sh-deck">{counts.size} 个标签，按使用次数排序；只用过一次的 {once} 个收在下面。点选一个标签，下方列出对应文章。</p>
+        <p className="sh-deck">{tags.length} 个标签，按文章数排序。点一个标签，查看带这个标签的文章。</p>
       </div>
       <Suspense>
-        <TagIndex posts={posts} />
+        <TagRedirect />
       </Suspense>
+      {tags.length ? (
+        <ul className="sh-tagchips sh-tagindex" aria-label="全部标签">
+          {tags.map(([tag, count]) => (
+            <li key={tag}>
+              <Link className="sh-tagchip" href={tagFilterHref([tag])}>
+                #{tag}<span className="n num">{count}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p className="sh-deck">还没有标签。</p>
+      )}
     </main>
   );
 }

package/package.json

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

package/scripts/build-content.mjs

@@ -184,7 +184,7 @@ function assertWidgetSidecar(src, markdownPath, sourcePath) {
   ) {
     fail(
       sourcePath,
-      `widget src 必须位于同名目录 ${stem}/ 内的 .html 或 .pdf，例如 ./${stem}/notes.pdf`,
+      `widget src 必须位于同名目录 ${stem}/ 内的 .html 或 .pdf，例如 ./${stem}/diagram.html`,
     );
   }
   return absoluteSource;
@@ -337,7 +337,6 @@ function validateAndNormalize(data, content, markdownPath, kind, sourcePath, lin
 
   if (kind === "post") {
     requireString(data, "description", sourcePath);
-    requireString(data, "topic", sourcePath);
   }
   if (kind === "thought" && data.mediaType) {
     if (!["image", "audio", "video", "link", "text"].includes(data.mediaType)) {
@@ -348,6 +347,8 @@ function validateAndNormalize(data, content, markdownPath, kind, sourcePath, lin
   const publishTime = Date.parse(publishAt ?? date);
   if (!includeDrafts && (data.draft === true || publishTime > now)) return null;
   delete data.coverAlt;
+  // Older posts may still carry `topic:`; it is no longer used.
+  delete data.topic;
   const references = normalizeReferences(data.references, sourcePath);
   delete data.references;
 
@@ -562,7 +563,6 @@ export type ContentEntry = {
   updated?: string;
   publishAt?: string;
   draft?: boolean;
-  topic?: string;
   tags?: string[];
   references?: { title: string; url?: string }[];
   pinned?: boolean;

package/scripts/check-post.mjs

@@ -272,9 +272,6 @@ const checkFile = (filePath) => {
   if (typeof data.description !== "string" || !data.description.trim()) {
     error(errors, "missing-description", 1, `${sourcePath}: front matter 缺少有效的 description`);
   }
-  if (typeof data.topic !== "string" || !data.topic.trim()) {
-    error(errors, "missing-topic", 1, `${sourcePath}: front matter 缺少有效的 topic`);
-  }
   if (data.slug !== undefined) {
     error(errors, "unexpected-slug", 1, `${sourcePath}: 不要写 slug，文件名就是标识`);
   }

package/scripts/new-post.mjs

@@ -13,7 +13,6 @@ async function main() {
   const titleSlug = title.toLowerCase().replace(/[^a-z0-9]+/gu, "-").replace(/^-|-$/gu, "");
   const slug = option("SLUG") || titleSlug || `post-${date.slice(0, 10)}-${randomUUID().slice(0, 8)}`;
   const directory = option("DIR");
-  const topic = option("TOPIC") || "未分类";
 
   if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/u.test(slug)) {
     throw new Error("SLUG 只能包含小写字母、数字和连字符，不含 .md 后缀。");
@@ -43,7 +42,6 @@ async function main() {
     `title: ${JSON.stringify(title)}`,
     `date: ${date}`,
     `description: ${JSON.stringify("请填写一句话摘要。")}`,
-    `topic: ${JSON.stringify(topic)}`,
     "tags: []",
     "draft: true",
     "---",
@@ -67,7 +65,7 @@ async function main() {
   console.log(`已创建草稿：${path.relative(root, destination)}`);
   console.log(`文章路径：/blog/${[...segments, slug].join("/")}/`);
   console.log("预览：CONTENT_INCLUDE_DRAFTS=1 make dev");
-  console.log("发布前请完善摘要、分类与正文，并将 draft 改为 false，再运行 make update。");
+  console.log("发布前请完善摘要、标签与正文，并将 draft 改为 false，再运行 make update。");
 }
 
 main().catch((error) => {

package/site.config.yaml

@@ -1,12 +1,12 @@
 name: Hedon Garden
-tagline: 写作 · 构建 · 保持好奇
-description: 一个可 fork、可长期维护的 Markdown 个人博客系统。
+tagline: 写作 · 记录 · 保持好奇
+description: 文章、随想和专栏。
 locale: zh_CN
 
 author:
   name: Your Name
   github: your-github-id
-  githubBio: Write a short introduction for your GitHub profile card.
+  githubBio: 一句自我介绍。
   # 可选：本地没有 GITHUB_TOKEN 时用作置顶仓库降级数据。
   githubPinned: []
 
@@ -16,28 +16,28 @@ pages:
     title: |-
       记一些正在做的事，
       和想清楚的问题。
-    subtitle: 关注软件工程、系统设计与技术实践，也记录偶发的探索和工作笔记。
+    subtitle: 软件、笔记，和偶尔的工作记录。
   blog:
     title: 博文
-    subtitle: 阶段性的完整梳理与技术总结。
+    subtitle: 写完的长文。
   thoughts:
     title: 随想
-    subtitle: 碎片的念头、偶遇的灵感、短笔记与链接。
+    subtitle: 短笔记、图片和链接。
   columns:
     title: 专栏
-    subtitle: 按顺序组织的专题系列，沿着清晰的脉络连点成线。
+    subtitle: 按顺序读的一组文章。
   about:
     title: 你好，我是 Your Name。
-    subtitle: 欢迎来到我的个人网站。
-    heading: 关于我与这里
+    subtitle: 文章和笔记都在这里。
+    heading: 关于
     paragraphs:
-      - 一名工程师 / 创作者。平时主要关注系统开发、技术探索与软件设计。
-      - 这里是我的公开工作台与数字自留地。比起社交网络上的碎片动态，我更倾向于把探索过程沉淀为有据可查的代码、设计与长篇笔记。
+      - 一名工程师。平时写代码，也把想清楚的问题记下来。
+      - 这里放文章、随想和专栏。
     quote: ""
     focus:
-      - 软件工程与系统架构
-      - 原生工具与高质量交互
-      - 个人长期知识沉淀
+      - 软件
+      - 笔记
+      - 日常
     cta:
       href: /blog
       label: 浏览博文
@@ -45,4 +45,4 @@ pages:
     title: "用 Markdown 写。\n推送之后，网站自己更新。"
     subtitle: ""
 
-footer: 持续记录与构建。
+footer: 持续记录。

package/templates/site/Makefile

@@ -4,15 +4,14 @@ MESSAGE ?= 更新博客
 
 .PHONY: help new embed skill prepare dev check build update
 
-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                 用引擎创建文章草稿" '  make new TITLE="文章标题" SLUG=my-post DIR=writing TOPIC="写作"' '  make embed URL="https://example.com"  拉取外部网页摘要' "  make skill               安装可交互图表 skill" "  make dev                 安装依赖并本地预览" "  make build               构建公开站点" "  make update              检查、提交并触发自动发布"
+	@printf "%s\n" "Garden 常用命令：" "  make new                 用引擎创建文章草稿" '  make new TITLE="文章标题" SLUG=my-post DIR=writing' '  make embed URL="https://example.com"  拉取外部网页摘要' "  make skill               安装可交互图表 skill" "  make dev                 安装依赖并本地预览" "  make build               构建公开站点" "  make update              检查、提交并触发自动发布"
 
 new: prepare
 	npx garden new

package/templates/site/site.config.yaml

@@ -1,12 +1,12 @@
 name: Garden
-tagline: 写作 · 构建 · 保持好奇
-description: 一个可长期维护的 Markdown 个人博客。
+tagline: 写作 · 记录 · 保持好奇
+description: 文章、随想和专栏。
 locale: zh_CN
 
 author:
   name: Your Name
   github: your-github-id
-  githubBio: Write a short introduction for your GitHub profile card.
+  githubBio: 一句自我介绍。
   githubPinned: []
 
 pages:
@@ -14,28 +14,28 @@ pages:
     title: |-
       记一些正在做的事，
       和想清楚的问题。
-    subtitle: 关注软件工程、系统设计与技术实践，也记录偶发的探索和工作笔记。
+    subtitle: 软件、笔记，和偶尔的工作记录。
   blog:
     title: 博文
-    subtitle: 阶段性的完整梳理与技术总结。
+    subtitle: 写完的长文。
   thoughts:
     title: 随想
-    subtitle: 碎片的念头、偶遇的灵感、短笔记与链接。
+    subtitle: 短笔记、图片和链接。
   columns:
     title: 专栏
-    subtitle: 按顺序组织的专题系列，沿着清晰的脉络连点成线。
+    subtitle: 按顺序读的一组文章。
   about:
     title: 你好，我是 Your Name。
-    subtitle: 欢迎来到我的个人网站。
-    heading: 关于我与这里
+    subtitle: 文章和笔记都在这里。
+    heading: 关于
     paragraphs:
-      - 一名工程师 / 创作者。平时主要关注系统开发、技术探索与软件设计。
-      - 这里是我的公开工作台与数字自留地。比起社交网络上的碎片动态，我更倾向于把探索过程沉淀为有据可查的代码、设计与长篇笔记。
+      - 一名工程师。平时写代码，也把想清楚的问题记下来。
+      - 这里放文章、随想和专栏。
     quote: ""
     focus:
-      - 软件工程与系统架构
-      - 原生工具与高质量交互
-      - 个人长期知识沉淀
+      - 软件
+      - 笔记
+      - 日常
     cta:
       href: /blog
       label: 浏览博文
@@ -43,4 +43,4 @@ pages:
     title: "用 Markdown 写。\n推送之后，网站自己更新。"
     subtitle: ""
 
-footer: 持续记录与构建。
+footer: 持续记录。

package/ui/garden/check.mjs

@@ -34,10 +34,8 @@ export function checkGardenMarkdown(markdown, { draft = false, title = "", title
 
   if (title) {
     const split = splitTitle(title);
-    // Titles stay exactly as written. splitTitle already keeps one line when it cannot split.
-    if (split.issue === "multiple") {
-      push(titleLine, "title-split", "标题里有不止一个分隔符，无法分成正好两行。", "只留一个 丨、｜ 或 \" | \"。", "warning");
-    } else if (split.issue === "empty") {
+    // More than one separator still splits at the first. Only an empty side stays one line.
+    if (split.issue === "empty") {
       push(titleLine, "title-split", "分隔符两侧都要有文字。", "写成「主题丨副题」。", "warning");
     }
   }

package/ui/garden/enhance.mjs

@@ -74,6 +74,63 @@ export function tableBreakout({
   return { left: margin, right: margin };
 }
 
+/**
+ * The width used to decide whether an image widens past the column: its width
+ * attribute when it has one, otherwise half its pixels (screenshots are
+ * usually 2x). 0 while the image has not loaded. Never more than the image
+ * itself, so nothing is enlarged.
+ */
+export function imageDisplayWidth({ naturalWidth = 0, attrWidth = 0, density = 2 }) {
+  if (attrWidth > 0) return naturalWidth > 0 ? Math.min(attrWidth, naturalWidth) : attrWidth;
+  if (!(naturalWidth > 0)) return 0;
+  return Math.round(naturalWidth / density);
+}
+
+/**
+ * The inline width an article image gets, or 0 to leave it to CSS
+ * (width:auto; max-width:100%), which shows it at its natural size and caps
+ * it at the column, never stretched and never halved. A widened image takes
+ * its display width; an image in the column only follows its width attribute,
+ * never past its own pixels.
+ */
+export function figureImageWidth({ naturalWidth = 0, attrWidth = 0, widened = false, density = 2 }) {
+  if (widened) return imageDisplayWidth({ naturalWidth, attrWidth, density });
+  if (attrWidth > 0) return naturalWidth > 0 ? Math.min(attrWidth, naturalWidth) : attrWidth;
+  return 0;
+}
+
+/**
+ * How far a figure steps out on each side. Screenshots are usually 2x, so an
+ * image displays at naturalWidth / density unless it states its own width.
+ * A figure widens only when that display width is wider than the column, and
+ * never past the display width, maxWidth in total, or the room on screen.
+ */
+export function figureBreakout({
+  viewport,
+  articleLeft,
+  articleRight,
+  figureClient,
+  imageClient = figureClient,
+  naturalWidth = 0,
+  attrWidth = 0,
+  density = 2,
+  maxWidth = 1040,
+  minViewport = 900,
+  edge = 24,
+}) {
+  if (viewport < minViewport) return { left: 0, right: 0 };
+  const display = imageDisplayWidth({ naturalWidth, attrWidth, density });
+  // Wider than the text column, or it stays in the column.
+  if (!(display > figureClient)) return { left: 0, right: 0 };
+  const need = Math.floor(display - imageClient);
+  if (!(need > 1)) return { left: 0, right: 0 };
+  const target = Math.min(figureClient + need, Math.max(maxWidth, figureClient));
+  const room = Math.max(0, Math.min(articleLeft - edge, viewport - edge - articleRight));
+  const side = Math.min(room, Math.floor((target - figureClient) / 2));
+  if (side <= 0) return { left: 0, right: 0 };
+  return { left: side, right: side };
+}
+
 /**
  * Slide the TOC right of a wide element measured against the TOC's original
  * position. Hide it when the shifted TOC would not fit on screen.

package/ui/garden/title.mjs

@@ -1,17 +1,14 @@
 const SEPARATOR = /丨|｜| \| /gu;
 
 /**
- * A title splits into exactly two lines when it contains one 丨, ｜ or " | ".
- * Anything else stays one line. The separator stays in the accessible name.
+ * A title splits into two lines at the first 丨, ｜ or " | ".
+ * Later separators stay on the second line. An empty side stays one line.
+ * The separator stays in the accessible name.
  */
 export function splitTitle(title) {
   const text = String(title ?? "");
-  const matches = [...text.matchAll(SEPARATOR)];
-  if (matches.length === 0) return { split: false, title: text, lines: [text], separator: null, issue: null };
-  if (matches.length > 1) {
-    return { split: false, title: text, lines: [text], separator: null, issue: "multiple" };
-  }
-  const match = matches[0];
+  const match = [...text.matchAll(SEPARATOR)][0];
+  if (!match) return { split: false, title: text, lines: [text], separator: null, issue: null };
   const before = text.slice(0, match.index).trim();
   const after = text.slice(match.index + match[0].length).trim();
   const separator = match[0] === " | " ? " | " : match[0];

package/ui/host.mjs

@@ -61,11 +61,11 @@ const THEMES = {
     rule: "#E6E3DC",
     ruleStrong: "#D6D2C9",
     card: "#FFFFFF",
-    paper: "#F8F7F3",
-    well: "#F0EEE8",
-    blue: "#2C55B4",
-    blueTint: "#EAF0FC",
-    blueLine: "rgba(44,85,180,.28)",
+    paper: "#FAF9F5",
+    well: "#F0EEE6",
+    blue: "#30302E",
+    blueTint: "#F0EEE6",
+    blueLine: "rgba(20,20,19,.22)",
   },
   dark: {
     ink: "#EEECE7",
@@ -73,14 +73,14 @@ const THEMES = {
     soft: "#BDB9B0",
     muted: "#A09B91",
     grey: "#A09B91",
-    rule: "#2F2D29",
-    ruleStrong: "#45423C",
-    card: "#1E1D1A",
-    paper: "#161513",
-    well: "#22211D",
-    blue: "#93B2F4",
-    blueTint: "rgba(147,178,244,.13)",
-    blueLine: "rgba(147,178,244,.35)",
+    rule: "#3D3D3A",
+    ruleStrong: "#4D4C48",
+    card: "#262624",
+    paper: "#1F1E1D",
+    well: "#262624",
+    blue: "#EEECE7",
+    blueTint: "#30302E",
+    blueLine: "rgba(238,236,231,.25)",
   },
 };
 

package/ui/preview/dist/garden-ui.css

@@ -22,23 +22,23 @@
   --gui-control-border: var(--rule-strong, #d6d2c9);
   --gui-check-border: var(--rule-strong, #d6d2c9);
   --gui-control-bg: var(--card, #fff);
-  --gui-surface: var(--well, #f0eee8);
-  --gui-chip: var(--well, #f0eee8);
-  --gui-hover: var(--well, #f0eee8);
+  --gui-surface: var(--well, #f0eee6);
+  --gui-chip: var(--well, #f0eee6);
+  --gui-hover: var(--well, #f0eee6);
   --gui-solid: var(--ink, #1b1a18);
   --gui-solid-hover: var(--soft, #4a4844);
-  --gui-on-solid: var(--paper, #f8f7f3);
-  --gui-segment: var(--well, #f0eee8);
+  --gui-on-solid: var(--paper, #faf9f5);
+  --gui-segment: var(--well, #f0eee6);
   --gui-segment-selected: var(--card, #fff);
   --gui-segment-shadow: none;
-  --gui-progress: var(--blue, #2c55b4);
-  --gui-progress-track: var(--well, #f0eee8);
-  --gui-focus: var(--blue, #2c55b4);
-  --gui-bubble: var(--blue-tint, #eaf0fc);
+  --gui-progress: var(--blue, #30302e);
+  --gui-progress-track: var(--well, #f0eee6);
+  --gui-focus: var(--blue, #30302e);
+  --gui-bubble: var(--blue-tint, #f0eee6);
   --gui-popover-border: var(--rule, #e6e3dc);
   --gui-shadow: none;
-  --gui-code-bg: var(--well, #f0eee8);
-  --gui-accent: var(--blue, #2c55b4);
+  --gui-code-bg: var(--well, #f0eee6);
+  --gui-accent: var(--blue, #30302e);
   --gui-series-plain: var(--ink, #1b1a18);
   --gui-series-accent: var(--blue);
   --gui-series-new: #00a240;