hd-garden 0.3.13 → 0.4.0

package/app/components/MermaidDiagram.tsx

@@ -4,17 +4,38 @@ import { useEffect, useId, useState } from "react";
 
 let mermaidRenderQueue: Promise<unknown> = Promise.resolve();
 
+function token(name: string) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
 function renderMermaid(source: string, id: string) {
   const task = mermaidRenderQueue.then(async () => {
     const mermaid = (await import("mermaid")).default;
+    const dark = document.documentElement.getAttribute("data-theme") === "dark";
+    const prepared = source
+      .replace(/^\s*classDef .*$/gm, "")
+      .replace(/^\s*style .*$/gm, "");
     mermaid.initialize({
       startOnLoad: false,
-      theme: "neutral",
-      fontFamily: "var(--font-mono)",
       securityLevel: "strict",
       suppressErrorRendering: true,
+      theme: "base",
+      fontFamily: token("--sans") || "-apple-system, PingFang SC, sans-serif",
+      flowchart: { useMaxWidth: true, htmlLabels: false },
+      themeVariables: {
+        darkMode: dark,
+        background: token("--paper"),
+        primaryColor: token("--card"),
+        primaryBorderColor: token("--rule-strong"),
+        primaryTextColor: token("--ink"),
+        lineColor: token("--muted"),
+        secondaryColor: token("--well"),
+        tertiaryColor: token("--well"),
+        fontSize: "14px",
+        edgeLabelBackground: token("--paper"),
+      },
     });
-    return mermaid.render(id, source);
+    return mermaid.render(id, prepared);
   });
   mermaidRenderQueue = task.then(
     () => undefined,
@@ -25,93 +46,45 @@ function renderMermaid(source: string, id: string) {
 
 export function MermaidDiagram({ source }: { source: string }) {
   const reactId = useId();
-  const [view, setView] = useState<"render" | "code">("render");
   const [svg, setSvg] = useState("");
-  const [error, setError] = useState(false);
-  const panelId = `mermaid-panel-${reactId.replaceAll(":", "")}`;
+  const [theme, setTheme] = useState("light");
+
+  useEffect(() => {
+    const sync = () => setTheme(document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light");
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
+    return () => observer.disconnect();
+  }, []);
 
   useEffect(() => {
     let active = true;
     const draw = async () => {
-      setError(false);
+      setSvg("");
       try {
-        const id = `mermaid-${reactId.replaceAll(":", "")}`;
+        const id = `mermaid-${reactId.replaceAll(":", "")}-${theme}`;
         const result = await renderMermaid(source, id);
         if (active) setSvg(result.svg);
       } catch {
-        if (active) setError(true);
+        if (active) setSvg("");
       }
     };
     void draw();
     return () => {
       active = false;
     };
-  }, [reactId, source]);
+  }, [reactId, source, theme]);
 
   return (
     <figure
-      className="mermaid-block language-mermaid"
-      data-mermaid-theme="neutral"
+      className={`g-mermaid mermaid-block language-mermaid${svg ? " ok" : ""}`}
+      data-g="mermaid"
+      data-mermaid-theme="a2"
     >
-      <figcaption className="mermaid-toolbar">
-        <span>Mermaid</span>
-        <span
-          className="mermaid-view-switcher"
-          role="tablist"
-          aria-label="切换 Mermaid 显示方式"
-        >
-          <button
-            type="button"
-            role="tab"
-            aria-selected={view === "render"}
-            aria-controls={panelId}
-            tabIndex={view === "render" ? 0 : -1}
-            onClick={() => setView("render")}
-          >
-            图表
-          </button>
-          <button
-            type="button"
-            role="tab"
-            aria-selected={view === "code"}
-            aria-controls={panelId}
-            tabIndex={view === "code" ? 0 : -1}
-            onClick={() => setView("code")}
-          >
-            Code
-          </button>
-        </span>
-      </figcaption>
-      {view === "render" ? (
-        <div
-          className="mermaid-canvas"
-          id={panelId}
-          role="tabpanel"
-          aria-live="polite"
-        >
-          {svg ? (
-            <div
-              className="mermaid-svg"
-              dangerouslySetInnerHTML={{ __html: svg }}
-            />
-          ) : null}
-          {!svg && !error ? (
-            <span className="mermaid-loading">正在绘制图表…</span>
-          ) : null}
-          {error ? (
-            <span className="mermaid-error">图表渲染失败，请检查语法。</span>
-          ) : null}
-        </div>
-      ) : (
-        <pre
-          className="mermaid-code"
-          id={panelId}
-          role="tabpanel"
-          data-language="MERMAID"
-        >
-          <code>{source}</code>
-        </pre>
-      )}
+      {svg ? <div className="g-mermaid-out mermaid-svg" dangerouslySetInnerHTML={{ __html: svg }} /> : null}
+      <pre className="code mermaid-src">
+        <code>{source}</code>
+      </pre>
     </figure>
   );
 }

package/app/components/SiteFooter.tsx

@@ -3,18 +3,14 @@ import { githubUrl, siteConfig } from "../site.config";
 
 export function SiteFooter() {
   return (
-    <footer className="site-footer">
-      <div className="footer-inner">
+    <footer className="sh-footer">
+      <div className="sh-foot">
         <p>
           © {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"
-          >
+          <a href={githubUrl} aria-label="GitHub" rel="me">
             <GithubLogo size={19} />
             GitHub
           </a>

package/app/components/SiteHeader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import {
   useCallback,
   useEffect,
@@ -10,21 +11,15 @@ import {
   type KeyboardEvent,
 } from "react";
 import Fuse, { type FuseResultMatch } from "fuse.js";
-import {
-  Cactus,
-  MagnifyingGlass,
-  Moon,
-  Sun,
-  X,
-} from "@phosphor-icons/react";
+import { MagnifyingGlass, X } from "@phosphor-icons/react";
 import { searchRecords } from "../lib/content";
 import { siteConfig } from "../site.config";
 
 const nav = [
-  { href: "/", label: "首页" },
-  { href: "/blog", label: "博文" },
+  { href: "/blog", label: "文章" },
   { href: "/thoughts", label: "随想" },
   { href: "/columns", label: "专栏" },
+  { href: "/tags", label: "标签" },
   { href: "/about", label: "关于" },
 ];
 
@@ -141,6 +136,8 @@ function searchPreview(
 }
 
 export function SiteHeader() {
+  const pathname = usePathname() || "/";
+  const [menuOpen, setMenuOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [dark, setDark] = useState(false);
@@ -176,6 +173,11 @@ export function SiteHeader() {
     return () => window.cancelAnimationFrame(frame);
   }, []);
 
+  useEffect(() => {
+    const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+    document.documentElement.dataset.mod = isMac ? "mac" : "other";
+  }, []);
+
   useEffect(() => {
     const onKey = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
@@ -272,49 +274,61 @@ export function SiteHeader() {
     window.localStorage.setItem("theme", next ? "dark" : "light");
   };
 
+  const current = (href: string) => {
+    if (href === "/blog") {
+      return pathname === "/blog" || pathname.startsWith("/blog/") || pathname.startsWith("/a2/");
+    }
+    return pathname === href || pathname.startsWith(`${href}/`);
+  };
+
   return (
     <>
-      <header className="site-header">
-        <div className="header-inner">
-          <Link href="/" className="brand" aria-label={`${siteConfig.name} 首页`}>
-            <span className="brand-mark">
-              <Cactus size={34} weight="thin" aria-hidden="true" />
-            </span>
-            <span>
-              <strong>{siteConfig.name}</strong>
-              <small>{siteConfig.tagline}</small>
-            </span>
-          </Link>
-
-          <nav className="main-nav" aria-label="主导航">
+      <header className="sh-header">
+        <div className="sh-bar">
+          <Link href="/" className="sh-word">{siteConfig.name}</Link>
+          <nav className="sh-nav" aria-label="站点导航">
             {nav.map((item) => (
-              <Link key={item.href} href={item.href}>
+              <Link key={item.href} href={item.href} aria-current={current(item.href) ? "page" : undefined}>
                 {item.label}
               </Link>
             ))}
           </nav>
-
-          <div className="header-actions">
-            <button
-              ref={searchTriggerRef}
-              className="icon-button search-trigger"
-              onClick={openSearch}
-              aria-label="搜索文章"
-              aria-expanded={searchOpen}
-              aria-controls="site-search-dialog"
-            >
-              <MagnifyingGlass size={22} weight="regular" />
-              <span className="key-hint">⌘K</span>
+          <div className="sh-tools">
+            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} aria-label="搜索文章" aria-expanded={searchOpen} aria-controls="site-search-dialog">
+              <svg viewBox="0 0 20 20" aria-hidden="true">
+                <circle cx="9" cy="9" r="5.8" />
+                <path d="M13.3 13.3 17 17" />
+              </svg>
+              <span className="lbl">搜索文章</span>
+              <kbd><span className="kbd-mod kbd-mac">⌘</span><span className="kbd-mod kbd-other">Ctrl</span>{" "}K</kbd>
             </button>
-            <button
-              className="icon-button"
-              onClick={toggleTheme}
-              aria-label={dark ? "切换到浅色模式" : "切换到深色模式"}
-            >
-              {dark ? <Sun size={23} /> : <Moon size={23} />}
+            <button className="sh-icon sh-search-m" type="button" onClick={openSearch} aria-label="搜索文章">
+              <svg viewBox="0 0 20 20" aria-hidden="true">
+                <circle cx="9" cy="9" r="5.8" />
+                <path d="M13.3 13.3 17 17" />
+              </svg>
+            </button>
+            <button className="sh-icon sh-theme" type="button" onClick={toggleTheme} aria-label={dark ? "切换到浅色模式" : "切换到深色模式"}>
+              <svg className="i-moon" viewBox="0 0 20 20" aria-hidden="true">
+                <path d="M16.5 12.2A6.8 6.8 0 0 1 7.8 3.5a6.8 6.8 0 1 0 8.7 8.7Z" />
+              </svg>
+              <svg className="i-sun" viewBox="0 0 20 20" aria-hidden="true">
+                <circle cx="10" cy="10" r="3.6" />
+                <path d="M10 1.8v2M10 16.2v2M1.8 10h2M16.2 10h2M4.2 4.2l1.4 1.4M14.4 14.4l1.4 1.4M4.2 15.8l1.4-1.4M14.4 5.6l1.4-1.4" />
+              </svg>
+            </button>
+            <button className="sh-icon sh-menu-btn" type="button" aria-expanded={menuOpen} aria-controls="sh-menu" aria-label={menuOpen ? "关闭菜单" : "打开菜单"} onClick={() => setMenuOpen((open) => !open)}>
+              {menuOpen ? <X size={18} /> : <span aria-hidden="true">☰</span>}
             </button>
           </div>
         </div>
+        <nav className={`sh-menu${menuOpen ? " is-open" : ""}`} id="sh-menu" aria-label="站点导航（移动端）">
+          {nav.map((item) => (
+            <Link key={item.href} href={item.href} aria-current={current(item.href) ? "page" : undefined} onClick={() => setMenuOpen(false)}>
+              {item.label}
+            </Link>
+          ))}
+        </nav>
       </header>
 
       {searchOpen && (

package/app/components/TableOfContents.tsx

@@ -11,7 +11,7 @@ import {
 } from "react";
 import { List, X } from "@phosphor-icons/react";
 
-type Heading = { depth: number; text: string; id: string };
+type Heading = { depth: number; text: string; id: string; no?: string };
 
 type TocNode = Heading & { children: TocNode[] };
 
@@ -354,6 +354,7 @@ export function TableOfContents({
             onFocus={() => prefetchHeadingLayout(node.id)}
             aria-current={activeId === node.id ? "location" : undefined}
           >
+            {node.no ? <span className="t-no">{node.no}</span> : null}
             {node.text}
           </a>
           {node.children.length > 0 ? (
@@ -407,7 +408,7 @@ export function TableOfContents({
         onClick={() => closeMobileToc(true)}
       />
       <aside
-        className="toc"
+        className="toc toc-rail"
         id={panelId}
         aria-label={label}
         data-mobile-open={mobileOpen}

package/app/components/TagIndex.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+import { postHref, type ContentEntry } from "../lib/content";
+
+function day(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value.slice(0, 10);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Asia/Shanghai",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(date);
+}
+
+function joinTags(names: string[]) {
+  if (names.length <= 1) return names[0] ?? "";
+  return `${names.slice(0, -1).join("、")}和${names[names.length - 1]}`;
+}
+
+export function TagIndex({ posts }: { posts: ContentEntry[] }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useSearchParams();
+  const tags = useMemo(() => {
+    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);
+    }
+    return [...counts.entries()].sort((left, right) => right[1] - left[1] || left[0].localeCompare(right[0], "zh"));
+  }, [posts]);
+  const requested = params.get("t") ?? "";
+  const active = tags.some(([tag]) => tag === requested) ? requested : "";
+  const common = tags.filter(([, count]) => count > 1);
+  const once = tags.filter(([, count]) => count === 1);
+  const visible = posts
+    .filter((post) => active && (post.tags ?? []).includes(active))
+    .slice()
+    .sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
+  const choose = (tag: string) => {
+    const next = active === tag ? "" : tag;
+    router.replace(next ? `${pathname}?t=${encodeURIComponent(next)}` : pathname, { scroll: false });
+  };
+
+  return (
+    <div className="sh-listgrid" id="sh-tags">
+      <div>
+        <ul className="sh-tagcloud" aria-label="常用标签">
+          {common.map(([tag, count]) => (
+            <li key={tag}>
+              <button type="button" className="sh-chip" data-tag={tag} aria-pressed={active === tag} onClick={() => choose(tag)}>
+                {tag}<span className="n">{count}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+        {once.length ? (
+          <details className="sh-once" open={once.some(([tag]) => tag === active) || undefined}>
+            <summary>只出现一次的标签<span className="num">{once.length}</span><svg viewBox="0 0 14 14" aria-hidden="true"><path d="M3.5 5.5 7 9l3.5-3.5" /></svg></summary>
+            <ul className="sh-tagcloud">
+              {once.map(([tag]) => (
+                <li key={tag}>
+                  <button type="button" className="sh-chip" data-tag={tag} aria-pressed={active === tag} onClick={() => choose(tag)}>
+                    {tag}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          </details>
+        ) : null}
+        <section className="sh-tagresult" id="sh-tagresult" aria-live="polite">
+          <h2 id="sh-tag-h">{active ? `“${active}”的 ${visible.length} 篇文章` : "选择一个标签"}</h2>
+          <p className="hint" hidden={Boolean(active)}>
+            {common.length ? `还没有选择标签。常用的有 ${joinTags(common.slice(0, 4).map(([tag]) => tag))}。` : "还没有选择标签。"}
+          </p>
+          <ol className="sh-rows">
+            {visible.map((post) => (
+              <li className="sh-row" key={post.path}>
+                <time className="num" dateTime={day(post.date)}>{day(post.date)}</time>
+                <h3><Link href={postHref(post)}>{post.title}</Link></h3>
+                {post.description ? <p>{post.description}</p> : null}
+                {post.topic ? <span className="cat">{post.topic}</span> : null}
+              </li>
+            ))}
+          </ol>
+        </section>
+      </div>
+      <aside className="sh-rail" aria-label="说明">
+        <h2>标签与分类</h2>
+        <p>分类回答“这篇属于哪一块”，每篇一个；标签回答“提到了什么”，每篇可以有多个。</p>
+      </aside>
+    </div>
+  );
+}

package/app/components/garden/GardenBlock.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { readGardenPayload } from "../../lib/remark-garden.mjs";
+import {
+  GardenCard,
+  GardenChart,
+  GardenCompare,
+  GardenFigure,
+  GardenHtml,
+  GardenIdea,
+  GardenInteractive,
+  GardenLegacy,
+  GardenStat,
+  GardenTimeline,
+  GardenUnknown,
+} from "./blocks";
+
+export function GardenBlock({ dataPayload }: { dataPayload?: string }) {
+  const block = readGardenPayload(dataPayload);
+  if (!block) return null;
+  if (block.legacy && block.suggestion) return <GardenLegacy suggestion={String(block.suggestion)} />;
+  if (!block.name) return <GardenIdea text={String(block.idea || block.children || "")} />;
+  if (block.error) return <GardenUnknown name={String(block.name)} />;
+  const props = (block.props ?? {}) as Record<string, unknown>;
+  switch (block.name) {
+    case "card":
+      return <GardenCard props={props} />;
+    case "stat":
+      return <GardenStat props={props} />;
+    case "compare":
+      return <GardenCompare props={props} />;
+    case "timeline":
+      return <GardenTimeline props={props} />;
+    case "chart":
+      return <GardenChart props={props} />;
+    case "figure":
+      return <GardenFigure props={props}>{String(block.children ?? "")}</GardenFigure>;
+    case "html":
+      return <GardenHtml props={props}>{String(block.children ?? "")}</GardenHtml>;
+    case "interactive":
+      return <GardenInteractive block={{ id: block.id, props, children: block.children }} />;
+    default:
+      return <GardenUnknown name={String(block.name)} />;
+  }
+}