hd-garden 0.3.12 → 0.4.0

package/app/layout.tsx

@@ -2,6 +2,9 @@ import type { Metadata } from "next";
 import { Geist_Mono } from "next/font/google";
 import "katex/dist/katex.min.css";
 import "./globals.css";
+import "./styles/tokens.css";
+import "./styles/a2.css";
+import "./styles/shell.css";
 import { SiteChrome } from "./components/SiteChrome";
 import {
   getSiteUrl,
@@ -82,6 +85,12 @@ export default function RootLayout({
   return (
     <html lang="zh-CN" suppressHydrationWarning>
       <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html:
+              '(function(){try{var t=localStorage.getItem("theme");var d=t==="dark"||(!t&&matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.dataset.theme=d?"dark":"light";}catch(e){}})();',
+          }}
+        />
         {mentionEndpoint && <link rel="webmention" href={mentionEndpoint} />}
         {analyticsDomain && (
           <script

package/app/lib/a2-meta.ts

@@ -0,0 +1,22 @@
+const shanghaiOffsetMs = 8 * 60 * 60 * 1000;
+
+function shanghaiDate(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return new Date(date.getTime() + shanghaiOffsetMs);
+}
+
+/** Calendar date in Asia/Shanghai, the zone the demo uses for 「2026 年 9 月 18 日」. */
+export function demoDateLabel(value: string) {
+  const date = shanghaiDate(value);
+  if (!date) return value;
+  return `${date.getUTCFullYear()} 年 ${date.getUTCMonth() + 1} 月 ${date.getUTCDate()} 日`;
+}
+
+export function demoDateTime(value: string) {
+  const date = shanghaiDate(value);
+  if (!date) return value.slice(0, 10);
+  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(date.getUTCDate()).padStart(2, "0");
+  return `${date.getUTCFullYear()}-${month}-${day}`;
+}

package/app/lib/a2-preview.ts

@@ -0,0 +1,50 @@
+import fs from "node:fs";
+import path from "node:path";
+import matter from "gray-matter";
+
+const dir = path.join(process.cwd(), "parity", "articles");
+
+const originals: Record<string, string> = {
+  "ai-agent-react-vs-workflow": "https://hedon.top/blog/ai-agent/ai-agent-react-vs-workflow/",
+  "rust-action-spinlock": "https://hedon.top/blog/rust-action-spinlock/",
+  "claude-code-source": "https://hedon.top/blog/claude-code-source/",
+  "go-gc-tri-color-marking": "https://hedon.top/blog/go/go-gc-tri-color-marking/",
+  "kv-cache-interactive": "https://hedon.top/blog/llm-kv-cache/",
+};
+
+export type A2Article = {
+  slug: string;
+  title: string;
+  description: string;
+  date: string;
+  topic: string;
+  cover: string;
+  original: string;
+  content: string;
+};
+
+export function a2Slugs() {
+  if (!fs.existsSync(dir)) return [];
+  return fs.readdirSync(dir).filter((name) => name.endsWith(".md")).map((name) => name.slice(0, -3)).sort();
+}
+
+export function readA2Article(slug: string): A2Article | null {
+  const file = path.join(dir, `${slug}.md`);
+  if (!fs.existsSync(file)) return null;
+  const parsed = matter(fs.readFileSync(file, "utf8"));
+  const data = parsed.data ?? {};
+  const cover = typeof data.cover === "string" ? data.cover : "";
+  const date = data.date instanceof Date && !Number.isNaN(data.date.getTime())
+    ? data.date.toISOString()
+    : typeof data.date === "string" ? data.date : "";
+  return {
+    slug,
+    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,
+  };
+}

package/app/lib/content.ts

@@ -38,22 +38,65 @@ export const formatDate = (value: string, withTime = false) => {
   }).format(date);
 };
 
+const NUMBERED_ARTICLE = /^#{2,3}[ \t]+\d/m;
+
+/** An article that already writes its own heading numbers is not auto-numbered. */
+export const articleUsesHeadingNumbers = (markdown: string) => NUMBERED_ARTICLE.test(markdown);
+
+/**
+ * Prototype render: an article with no `##` treats `###` as the top section.
+ * Display level is `depth - base + 2`, and anything past h3 stays an h4.
+ */
+export const articleHeadingBase = (markdown: string) => (/^##[ \t]/m.test(markdown) ? 2 : 3);
+
+export const displayHeadingLevel = (depth: number, base: number) => {
+  if (depth < 2 || depth > 4) return depth;
+  const level = depth - base + 2;
+  return level > 3 ? 4 : level;
+};
+
+/** Pull a leading `2.1` into the section marker and leave the heading sentence. */
+export const splitHeadingNumber = (text: string) => {
+  const match = /^(\d+(?:\.\d+)*)\.?[ \t]+([\s\S]+)$/u.exec(text.trim());
+  return match ? { no: match[1], text: match[2] } : null;
+};
+
 /**
  * Parses the same Markdown heading text that ReactMarkdown sends to
  * rehype-slug. Every heading depth advances the slugger so headings outside
  * the H2-H5 TOC range cannot shift the IDs shown in the directory.
+ * `no` follows the prototype: keep an author-written number, otherwise
+ * auto-number h2/h3 only when the article has no numbered headings.
  */
 export const extractHeadings = (markdown: string) => {
   const slugger = new GithubSlugger();
-  const headings: Array<{ depth: number; text: string; id: string }> = [];
+  const numbered = articleUsesHeadingNumbers(markdown);
+  const base = articleHeadingBase(markdown);
+  const headings: Array<{ depth: number; text: string; id: string; no?: string }> = [];
   const tree = unified().use(remarkParse).use(markdownPlugins).parse(markdown);
+  let h2 = 0;
+  let h3 = 0;
 
   visit(tree, "heading", (node) => {
-    const text = toString(node).trim();
-    const id = slugger.slug(text);
-    if (text && node.depth >= 2 && node.depth <= 5) {
-      headings.push({ depth: node.depth, text, id });
+    const raw = toString(node).trim();
+    const id = slugger.slug(raw);
+    if (!(raw && node.depth >= 2 && node.depth <= 5)) return;
+    const level = displayHeadingLevel(node.depth, base);
+    let text = raw;
+    let no: string | undefined;
+    if (level === 2 || level === 3) {
+      const split = splitHeadingNumber(raw);
+      if (split) {
+        no = split.no;
+        text = split.text;
+        if (level === 2) { h2 += 1; h3 = 0; }
+        else h3 += 1;
+      } else if (!numbered) {
+        if (level === 2) { h2 += 1; h3 = 0; no = String(h2); }
+        else { h3 += 1; no = h2 ? `${h2}.${h3}` : String(h3); }
+      }
     }
+    headings.push({ depth: level, text, id, ...(no ? { no } : {}) });
   });
 
   return headings;

package/app/lib/fallback-site-config.ts

@@ -46,7 +46,7 @@ export const siteConfig = {
       },
     },
     garden: {
-      title: "一个基于 Markdown 的个人博客框架。",
+      title: "用 Markdown 写。\n推送之后，网站自己更新。",
       subtitle: "",
     },
   },

package/app/lib/markdown-plugins.ts

@@ -3,6 +3,7 @@ import remarkCjkFriendly from "remark-cjk-friendly";
 import remarkBreaks from "remark-breaks";
 import remarkMath from "remark-math";
 import type { PluggableList } from "unified";
+import { remarkGarden } from "./remark-garden.mjs";
 
 // Keep article rendering and heading extraction on the same Markdown syntax.
 export const markdownPlugins: PluggableList = [
@@ -10,4 +11,5 @@ export const markdownPlugins: PluggableList = [
   remarkCjkFriendly,
   remarkBreaks,
   remarkMath,
+  remarkGarden,
 ];

package/app/lib/remark-a2.mjs

@@ -0,0 +1,208 @@
+import { toString } from "mdast-util-to-string";
+
+const ALERT_TITLE = {
+  note: "提醒",
+  tip: "建议",
+  important: "重要",
+  warning: "警告",
+  caution: "注意",
+};
+
+const LEGACY_KIND = {
+  info: "note",
+  success: "tip",
+  warning: "warning",
+  danger: "caution",
+  note: "note",
+};
+
+const ALERT_ICON = {
+  note: '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6.25"/><path d="M8 7.2v4"/><path d="M8 4.8v.1" stroke-width="2"/></svg>',
+  tip: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 12.5h4M6.5 14.5h3M8 1.75a4.5 4.5 0 0 0-2.6 8.2c.4.3.6.7.6 1.2v.35h4v-.35c0-.5.2-.9.6-1.2A4.5 4.5 0 0 0 8 1.75Z"/></svg>',
+  important: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.25 3.25a1 1 0 0 1 1-1h9.5a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7l-3 2.5v-2.5h-.75a1 1 0 0 1-1-1Z"/><path d="M8 4.75v3"/><path d="M8 9.4v.1" stroke-width="2"/></svg>',
+  warning: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2 1.75 13.25h12.5Z"/><path d="M8 6.5v3.25"/><path d="M8 11.6v.1" stroke-width="2"/></svg>',
+  caution: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5.3 1.75h5.4l3.55 3.55v5.4l-3.55 3.55H5.3l-3.55-3.55V5.3Z"/><path d="M8 4.75v3.75"/><path d="M8 10.9v.1" stroke-width="2"/></svg>',
+};
+
+function meaningfulChildren(node) {
+  return (node.children ?? []).filter((child) => !(child.type === "text" && !String(child.value).trim()));
+}
+
+function visibleText(node) {
+  const parts = [];
+  const visit = (current) => {
+    if (!current || current.type === "html") return;
+    if (current.type === "text") {
+      parts.push(current.value);
+      return;
+    }
+    for (const child of current.children ?? []) visit(child);
+  };
+  visit(node);
+  return parts.join("").trim();
+}
+
+function isBlankParagraph(node) {
+  return node?.type === "paragraph" && toString(node).trim() === "" && meaningfulChildren(node).length === 0;
+}
+
+function alertTitle(kind, label) {
+  return {
+    type: "paragraph",
+    data: { hName: "p", hProperties: { className: ["markdown-alert-title"] } },
+    children: [
+      { type: "html", value: ALERT_ICON[kind] },
+      { type: "text", value: label || ALERT_TITLE[kind] },
+    ],
+  };
+}
+
+const ALERT_KIND = {
+  NOTE: "note",
+  INFO: "note",
+  TIP: "tip",
+  SUCCESS: "tip",
+  IMPORTANT: "important",
+  WARNING: "warning",
+  CAUTION: "caution",
+  DANGER: "caution",
+  FAILURE: "caution",
+};
+
+function paragraphFirstLine(node) {
+  let line = "";
+  for (const child of node.children ?? []) {
+    if (child.type === "break") break;
+    if (child.type === "text") {
+      const newline = child.value.indexOf("\n");
+      line += newline >= 0 ? child.value.slice(0, newline) : child.value;
+      if (newline >= 0) break;
+      continue;
+    }
+    line += toString(child);
+  }
+  return line;
+}
+
+function withoutMarkerLine(node) {
+  const children = [];
+  let skipping = true;
+  for (const child of node.children ?? []) {
+    if (!skipping) {
+      children.push(child);
+      continue;
+    }
+    if (child.type === "break") {
+      skipping = false;
+      continue;
+    }
+    if (child.type === "text") {
+      const newline = child.value.indexOf("\n");
+      if (newline >= 0) {
+        skipping = false;
+        const rest = child.value.slice(newline + 1);
+        if (rest) children.push({ type: "text", value: rest });
+      }
+    }
+  }
+  if (!children.some((child) => child.type !== "text" || child.value.trim())) return null;
+  return { type: "paragraph", children };
+}
+
+function gfmAlert(node) {
+  if (node?.type !== "paragraph") return null;
+  const match = /^\[!(NOTE|INFO|TIP|SUCCESS|IMPORTANT|WARNING|CAUTION|DANGER|FAILURE)\][ \t]*(.*)$/iu.exec(paragraphFirstLine(node).trim());
+  if (!match) return null;
+  return {
+    kind: ALERT_KIND[match[1].toUpperCase()],
+    label: match[2].trim(),
+    body: withoutMarkerLine(node),
+  };
+}
+
+function legacyAlert(node) {
+  if (node?.type !== "paragraph" || visibleText(node)) return null;
+  const html = (node.children ?? []).filter((child) => child.type === "html").map((child) => child.value).join("");
+  const match = /garden-callout-marker--(info|success|warning|danger|note)/u.exec(html);
+  if (!match) return null;
+  return LEGACY_KIND[match[1]] || "note";
+}
+
+function strongOnlyText(node) {
+  if (node?.type !== "paragraph") return "";
+  const children = meaningfulChildren(node);
+  if (children.length !== 1 || children[0].type !== "strong") return "";
+  return toString(children[0]).trim();
+}
+
+function rewriteAlert(node) {
+  const children = node.children ?? [];
+  const gfm = gfmAlert(children[0]);
+  const legacy = gfm ? null : legacyAlert(children[0]);
+  if (!gfm && !legacy) return;
+  const kind = gfm ? gfm.kind : legacy;
+  let label = gfm ? gfm.label : "";
+  let rest = gfm?.body ? [gfm.body, ...children.slice(1)] : children.slice(1);
+  if (!label) {
+    const custom = strongOnlyText(rest.find((child) => !isBlankParagraph(child)));
+    if (custom) {
+      label = custom;
+      const index = rest.findIndex((child) => !isBlankParagraph(child));
+      rest = rest.filter((_, childIndex) => childIndex !== index);
+    }
+  }
+  while (rest.length && isBlankParagraph(rest[0])) rest.shift();
+  node.children = [alertTitle(kind, label), ...rest];
+  node.data ??= {};
+  node.data.hProperties ??= {};
+  const existing = node.data.hProperties.className;
+  const classes = Array.isArray(existing) ? existing : existing ? [existing] : [];
+  node.data.hProperties.className = [...classes, "markdown-alert", `markdown-alert-${kind}`];
+}
+
+function figureCaption(image) {
+  const title = String(image.title ?? "").trim();
+  const alt = String(image.alt ?? "").trim();
+  if (title) return title;
+  if (alt && !/^image|^截图|^img/iu.test(alt)) return alt;
+  return "";
+}
+
+function asFigure(node) {
+  if (node?.type !== "paragraph" || node.data?.hName) return null;
+  const children = meaningfulChildren(node);
+  if (children.length !== 1 || children[0].type !== "image") return null;
+  const image = children[0];
+  const caption = figureCaption(image);
+  const card = {
+    type: "paragraph",
+    data: { hName: "div", hProperties: { className: ["fig-card"] } },
+    children: [image],
+  };
+  const figureChildren = caption
+    ? [card, {
+      type: "paragraph",
+      data: { hName: "figcaption" },
+      children: [{ type: "text", value: caption }],
+    }]
+    : [card];
+  return {
+    type: "paragraph",
+    data: { hName: "figure", hProperties: { className: ["fig"] } },
+    children: figureChildren,
+  };
+}
+
+function walk(node) {
+  if (!node || typeof node !== "object" || !Array.isArray(node.children)) return;
+  if (node.type === "blockquote") rewriteAlert(node);
+  node.children = node.children.map((child) => asFigure(child) ?? child);
+  for (const child of node.children) walk(child);
+}
+
+/** Demo alert cards and captioned figures. Article rendering only. */
+export function remarkA2() {
+  return (tree) => {
+    walk(tree);
+  };
+}

package/app/lib/remark-garden.mjs

@@ -0,0 +1,88 @@
+import { diffToNewCode, protectMathIdentifiers } from "../../ui/garden/enhance.mjs";
+import { classifyFence } from "../../ui/garden/parse.mjs";
+
+function gardenElement(payload) {
+  return {
+    type: "gardenBlock",
+    data: {
+      hName: "garden-block",
+      hProperties: { dataPayload: encodeURIComponent(JSON.stringify(payload)) },
+    },
+  };
+}
+
+function codeDiffElement(code, diff) {
+  return {
+    type: "gardenCodeDiff",
+    data: {
+      hName: "garden-codediff",
+      hProperties: {
+        dataNew: encodeURIComponent(diffToNewCode(diff.value)),
+        dataDiff: encodeURIComponent(diff.value),
+      },
+    },
+    children: [code],
+  };
+}
+
+function fenceNodeToRecord(node) {
+  return { lang: String(node.lang || "").toLowerCase(), meta: String(node.meta || ""), info: `${node.lang || ""} ${node.meta || ""}`.trim() };
+}
+
+function rewriteChildren(node) {
+  if (!Array.isArray(node.children)) return;
+  const next = [];
+  for (let index = 0; index < node.children.length; index += 1) {
+    const child = node.children[index];
+    const following = node.children[index + 1];
+    if (child?.type === "code" && following?.type === "code" && String(following.lang || "").toLowerCase() === "diff") {
+      const current = fenceNodeToRecord(child);
+      const kind = classifyFence({ lang: current.lang, meta: current.meta, info: current.info });
+      if (kind.kind === "code") {
+        next.push(codeDiffElement(child, following));
+        index += 1;
+        continue;
+      }
+    }
+    if (child?.type === "code") {
+      const record = fenceNodeToRecord(child);
+      const kind = classifyFence({ ...record, body: child.value, line: 1, endLine: 1 });
+      if (kind.kind === "legacy") {
+        next.push(gardenElement({ legacy: true, from: kind.lang || record.lang, suggestion: kind.suggestion }));
+        continue;
+      }
+      if (kind.kind === "garden" && kind.block) {
+        next.push(gardenElement(kind.block));
+        continue;
+      }
+    }
+    next.push(child);
+  }
+  node.children = next;
+}
+
+function walk(node) {
+  if (!node || typeof node !== "object") return;
+  if (node.type === "math" || node.type === "inlineMath") {
+    node.value = protectMathIdentifiers(node.value);
+  }
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) walk(child);
+    rewriteChildren(node);
+  }
+}
+
+export function remarkGarden() {
+  return (tree) => {
+    walk(tree);
+  };
+}
+
+export function readGardenPayload(value) {
+  if (!value) return null;
+  try {
+    return JSON.parse(decodeURIComponent(String(value)));
+  } catch {
+    return null;
+  }
+}