hd-garden 0.4.0 → 0.5.0

package/ui/react/components/media.tsx

@@ -97,8 +97,8 @@ let mermaidQueue: Promise<unknown> = Promise.resolve();
 
 const MERMAID_FONT = 'ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, "PingFang SC", sans-serif';
 const MERMAID_THEMES = {
-  light: { background: "#F8F7F3", primaryColor: "#FFFFFF", primaryBorderColor: "#D6D2C9", primaryTextColor: "#1B1A18", lineColor: "#6E6B64", secondaryColor: "#F0EEE8", tertiaryColor: "#F0EEE8", fontSize: "14px" },
-  dark: { background: "#161513", primaryColor: "#1E1D1A", primaryBorderColor: "#45423C", primaryTextColor: "#EEECE7", lineColor: "#A09B91", secondaryColor: "#22211D", tertiaryColor: "#22211D", fontSize: "14px" },
+  light: { background: "#FAF9F5", primaryColor: "#FFFFFF", primaryBorderColor: "#D6D2C9", primaryTextColor: "#1B1A18", lineColor: "#6E6B64", secondaryColor: "#F0EEE6", tertiaryColor: "#F0EEE6", fontSize: "14px" },
+  dark: { background: "#1F1E1D", primaryColor: "#262624", primaryBorderColor: "#45423C", primaryTextColor: "#EEECE7", lineColor: "#A09B91", secondaryColor: "#30302E", tertiaryColor: "#30302E", fontSize: "14px" },
 };
 
 function renderMermaid(source: string, id: string, dark: boolean) {

package/ui/react/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;

package/app/components/TagIndex.tsx

@@ -1,97 +0,0 @@
-"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>
-  );
-}