hd-garden 0.3.12 → 0.4.0

package/app/components/AdminUiShell.tsx

@@ -5,10 +5,10 @@ import { getAdminUser } from "../lib/admin-auth";
 
 const SECTIONS = [
   { href: "/admin", label: "总览" },
-  { href: "/admin/ui", label: "组件工作台" },
-  { href: "/admin/ui/catalog", label: "组件清单" },
-  { href: "/admin/ui/blocks", label: "交互块" },
-  { href: "/admin/ui/evals", label: "模型自检" },
+  { href: "/admin/ui", label: "写作台" },
+  { href: "/admin/ui/catalog", label: "组件" },
+  { href: "/admin/ui/blocks", label: "文章里的块" },
+  { href: "/admin/ui/evals", label: "检查" },
 ];
 
 export const isStaticExport = () => process.env.STATIC_EXPORT === "1";
@@ -23,8 +23,8 @@ export function StaticAdminNotice() {
   return (
     <main className="admin-access-page">
       <div className="admin-access-card">
-        <h1>内容后台独立运行。</h1>
-        <p>公开博客由 GitHub Pages 静态托管；这一页只在独立后台里可用。</p>
+        <h1>后台在另一个地址。</h1>
+        <p>公开博客上看不到这一页。写随想和改交互，去单独部署的后台。</p>
         <Link href="/">返回公开博客</Link>
       </div>
     </main>
@@ -35,7 +35,7 @@ export function AdminUiShell({ active, userName, children }: { active: string; u
   return (
     <main className="admin-shell admin-ui-shell">
       <header className="admin-topbar">
-        <Link className="admin-brand" href="/admin">HEDON <span>STUDIO</span></Link>
+        <Link className="admin-brand" href="/admin">Garden<span>后台</span></Link>
         <div>
           <span>{userName}</span>
           <form action="/api/auth/logout" method="post">

package/app/components/ArticleMeasure.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { useEffect } from "react";
+import { tableBreakout, tocShift } from "../../ui/garden/enhance.mjs";
+
+function translatedX(element: Element) {
+  const value = new DOMMatrix(getComputedStyle(element).transform).m41;
+  return Number.isFinite(value) ? value : 0;
+}
+
+export function ArticleMeasure() {
+  useEffect(() => {
+    const article = document.querySelector("article");
+    const toc = document.querySelector<HTMLElement>(".toc");
+    if (!article) return undefined;
+    const root = document.documentElement;
+    let frame = 0;
+
+    const layout = () => {
+      const articleBox = article.getBoundingClientRect();
+      const viewport = root.clientWidth;
+      article.querySelectorAll<HTMLElement>(".table-wrap").forEach((wrap) => {
+        const table = wrap.querySelector("table");
+        wrap.classList.remove("ux-wide");
+        wrap.style.removeProperty("--wl");
+        wrap.style.removeProperty("--wr");
+        if (!table) return;
+        const margin = tableBreakout({
+          viewport,
+          articleLeft: articleBox.left,
+          articleRight: articleBox.right,
+          tableClient: wrap.clientWidth,
+          tableScroll: table.scrollWidth,
+        });
+        if (margin.left > 0) {
+          wrap.style.setProperty("--wl", `${margin.left}px`);
+          wrap.style.setProperty("--wr", `${margin.right}px`);
+          wrap.classList.add("ux-wide");
+        }
+      });
+
+      if (!toc) {
+        root.removeAttribute("data-toc-yield");
+        return;
+      }
+      const box = toc.getBoundingClientRect();
+      const dx = translatedX(toc);
+      const originalLeft = box.left - dx;
+      const overlapRights: number[] = [];
+      article.querySelectorAll<HTMLElement>(".ux-wide").forEach((element) => {
+        const wide = element.getBoundingClientRect();
+        const overlaps = wide.bottom > box.top - 12 && wide.top < box.bottom + 12 && wide.right > originalLeft - 12;
+        if (overlaps) overlapRights.push(wide.right);
+      });
+      const shift = tocShift({
+        tocLeft: originalLeft,
+        tocWidth: box.width,
+        viewport,
+        overlapRights,
+      });
+      if (shift.shift > 0) {
+        root.style.setProperty("--tocshift", `${shift.shift}px`);
+        root.toggleAttribute("data-toc-hide", shift.hide);
+        root.setAttribute("data-toc-yield", "");
+      } else {
+        root.removeAttribute("data-toc-yield");
+        root.removeAttribute("data-toc-hide");
+      }
+    };
+
+    const schedule = () => {
+      if (frame) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = 0;
+        layout();
+      });
+    };
+
+    layout();
+    window.addEventListener("resize", schedule);
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("load", schedule);
+    const observer = new ResizeObserver(schedule);
+    observer.observe(article);
+    article.querySelectorAll("img").forEach((image) => image.addEventListener("load", schedule));
+    return () => {
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("load", schedule);
+      observer.disconnect();
+      if (frame) window.cancelAnimationFrame(frame);
+    };
+  }, []);
+  return null;
+}

package/app/components/ArticleTitle.tsx

@@ -0,0 +1,20 @@
+import { splitTitle, titleLineScale } from "../../ui/garden/title.mjs";
+
+export function ArticleTitle({ title, className = "" }: { title: string; className?: string }) {
+  const split = splitTitle(title);
+  if (!split.split) {
+    return <h1 className={`p-name${className ? ` ${className}` : ""}`}>{title}</h1>;
+  }
+  const scale = titleLineScale(split.lines);
+  return (
+    <h1 className={`p-name h1-br${className ? ` ${className}` : ""}`} style={{ ["--l" as string]: scale }}>
+      <span className="h1-line">{split.lines[0]}</span>
+      <span className="vh">{split.separator}</span>
+      <span className="h1-line">{split.lines[1]}</span>
+    </h1>
+  );
+}
+
+export function originalUrl(entry: { original?: unknown }) {
+  return typeof entry.original === "string" && /^https?:\/\//iu.test(entry.original) ? entry.original : "";
+}

package/app/components/BlogArchive.tsx

@@ -2,124 +2,128 @@
 
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
-import { ArrowLeft, ArrowRight, PushPin } from "@phosphor-icons/react";
-import { formatDate, postHref, posts, topics } from "../lib/content";
+import { useState } from "react";
+import { columns, postHref, posts, topics } from "../lib/content";
 import { ContentEmptyState } from "./ContentEmptyState";
 
-const pageSize = 8;
-
-export const archiveHref = (topic?: string, page?: number) => {
+export const archiveHref = (topic?: string) => {
   const params = new URLSearchParams();
   if (topic) params.set("topic", topic);
-  if (page && page > 1) params.set("page", String(page));
   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);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Asia/Shanghai",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(date);
+}
+
 export function BlogArchive() {
   const searchParams = useSearchParams();
+  const [compact, setCompact] = useState(false);
   const requestedTopic = searchParams.get("topic") ?? "";
   const selectedTopic = topics.includes(requestedTopic) ? requestedTopic : undefined;
-  const filteredPosts = selectedTopic
-    ? posts.filter((post) => post.topic === selectedTopic)
-    : posts;
-  const pageCount = Math.max(1, Math.ceil(filteredPosts.length / pageSize));
-  const parsedPage = Number.parseInt(searchParams.get("page") ?? "1", 10);
-  const currentPage = Math.min(
-    pageCount,
-    Math.max(1, Number.isFinite(parsedPage) ? parsedPage : 1),
-  );
-  const visiblePosts = filteredPosts.slice(
-    (currentPage - 1) * pageSize,
-    currentPage * pageSize,
+  const filtered = (selectedTopic ? posts.filter((post) => post.topic === selectedTopic) : posts)
+    .slice()
+    .sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
+  const years = new Map<string, typeof filtered>();
+  for (const post of filtered) {
+    const year = day(post.date).slice(0, 4) || "未知";
+    const list = years.get(year);
+    if (list) list.push(post);
+    else years.set(year, [post]);
+  }
+
+  const series = Array.from(
+    columns.reduce((result, entry) => {
+      const key = entry.column ?? "";
+      const list = result.get(key);
+      if (list) list.push(entry);
+      else result.set(key, [entry]);
+      return result;
+    }, new Map<string, typeof columns>()),
   );
 
   return (
-    <>
-      <div className="topic-strip" aria-label="文章主题">
-        <Link
-          href="/blog"
-          className={!selectedTopic ? "active" : ""}
-          aria-current={!selectedTopic ? "page" : undefined}
-        >
-          全部 · {posts.length}
-        </Link>
-        {topics.map((topic) => (
-          <Link
-            href={archiveHref(topic)}
-            className={selectedTopic === topic ? "active" : ""}
-            aria-current={selectedTopic === topic ? "page" : undefined}
-            key={topic}
-          >
-            {topic} · {posts.filter((post) => post.topic === topic).length}
-          </Link>
-        ))}
-      </div>
-
-      {visiblePosts.length > 0 ? (
-        <section className="archive-list" aria-label="全部博文">
-          {visiblePosts.map((post) => (
-            <Link
-              key={post.path}
-              href={postHref(post)}
-              className={`archive-row${post.cover ? " with-cover" : ""}`}
-            >
-              {post.cover && (
-                // eslint-disable-next-line @next/next/no-img-element
-                <img
-                  className="archive-cover"
-                  src={post.cover}
-                  alt={`${post.title} 封面`}
-                  loading="lazy"
-                />
-              )}
-              <div className="archive-copy">
-                <div className="archive-meta">
-                  <time>{formatDate(post.date)}</time>
-                  <span className="archive-topic">
-                    {post.topic}
-                    {post.pinned && (
-                      <span className="pinned-badge">
-                        <PushPin size={12} weight="fill" />
-                        置顶
-                      </span>
-                    )}
-                  </span>
-                </div>
-                <h2>{post.title}</h2>
-                <p>{post.description}</p>
-              </div>
-              <ArrowRight size={19} />
+    <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>
           ))}
-        </section>
-      ) : (
-        <ContentEmptyState kind="posts" />
-      )}
-
-      {pageCount > 1 && (
-        <nav className="archive-pagination" aria-label="博文分页">
-          {currentPage > 1 ? (
-            <Link href={archiveHref(selectedTopic, currentPage - 1)}>
-              <ArrowLeft size={16} />
-              上一页
-            </Link>
-          ) : (
-            <span />
-          )}
-          <span>
-            {currentPage} / {pageCount}
-          </span>
-          {currentPage < pageCount ? (
-            <Link href={archiveHref(selectedTopic, currentPage + 1)}>
-              下一页
-              <ArrowRight size={16} />
-            </Link>
-          ) : (
-            <span />
-          )}
-        </nav>
-      )}
-    </>
+        </ul>
+        <div className="sh-status">
+          <span aria-live="polite">{selectedTopic ? `${selectedTopic} ${filtered.length} 篇` : `全部 ${posts.length} 篇`}</span>
+          {selectedTopic ? <Link href="/blog">清除筛选</Link> : 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>
+          </div>
+        </div>
+        <div id="sh-list" className={compact ? "is-compact" : undefined}>
+          {filtered.length ? [...years.entries()].map(([year, entries]) => (
+            <section className="sh-year" id={`y${year}`} key={year} aria-labelledby={`yh${year}`}>
+              <h2 id={`yh${year}`}>{year}<span className="n">{entries.length} 篇</span></h2>
+              <ol className="sh-rows">
+                {entries.map((post) => (
+                  <li className="sh-row" key={post.path}>
+                    <time className="archive-meta" dateTime={day(post.date)}>{day(post.date).slice(5)}</time>
+                    <div className="archive-copy">
+                      {post.cover ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img className="archive-cover" src={post.cover} alt="" />
+                      ) : null}
+                      <h3>
+                        <Link href={postHref(post)}>{post.title}</Link>
+                        {post.pinned ? <span className="pin">置顶</span> : null}
+                      </h3>
+                      {post.description ? <p>{post.description}</p> : null}
+                    </div>
+                    {post.topic ? <Link className="cat" href={archiveHref(post.topic)}>{post.topic}</Link> : null}
+                  </li>
+                ))}
+              </ol>
+            </section>
+          )) : <ContentEmptyState kind="posts" />}
+        </div>
+      </div>
+      <aside className="sh-rail" aria-label="按年份跳转">
+        <h2>按年份</h2>
+        <ol>
+          {[...years.keys()].map((year) => (
+            <li key={year}>
+              <a href={`#y${year}`}><span>{year}</span><span className="n num">{years.get(year)?.length ?? 0}</span></a>
+            </li>
+          ))}
+        </ol>
+        {series.length ? (
+          <>
+            <h2>专栏</h2>
+            <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>
+                </li>
+              ))}
+            </ol>
+          </>
+        ) : null}
+      </aside>
+    </div>
   );
 }

package/app/components/GardenAdminGuide.tsx

@@ -1,35 +1,31 @@
-const adminCapabilities = [
+const adminJobs = [
   {
-    number: "01",
-    title: "发布和管理随想",
-    description:
-      "新建随想、保存草稿、正式发布、撤回或删除。每次修改都会写回 content/thoughts/，不会另存一份数据库副本。",
+    title: "写随想",
+    description: "保存草稿，或直接发布。文件写回 content/thoughts/，没有另一份数据库。",
   },
   {
-    number: "02",
-    title: "上传多媒体",
-    description:
-      "图片、音频和视频可以直接上传到阿里云 OSS，随想中只保存公开地址，避免把大文件塞进 Git 历史。",
+    title: "上传附件",
+    description: "图片、音频和视频可以传到对象存储。文章里只留下地址。",
   },
   {
-    number: "03",
-    title: "管理博文置顶",
-    description:
-      "后台可以切换博文的首页置顶状态，并查看博文所属专栏。正文仍然使用 Markdown 编辑，专栏顺序仍由 columns.yaml 管理。",
+    title: "置顶",
+    description: "让一篇博文出现在首页前面。正文还是在编辑器里改。",
   },
   {
-    number: "04",
-    title: "分发到其他平台",
-    description:
-      "可以直接发布到 X，或调用自建服务同步到 CSDN、知乎和掘金；没有配置接口时，也能复制标题、栏目和公开链接。",
+    title: "发到别处",
+    description: "可以发到 X，或同步到 CSDN、知乎、掘金。没配接口时，复制标题和链接。",
+  },
+  {
+    title: "改文章里的交互",
+    description: "写作台把一句话收成可交互的块。组件页能看到每一种块长什么样。",
   },
 ];
 
 const adminFlow = [
-  ["GitHub 登录", "只允许白名单中的账号进入后台。"],
-  ["执行内容操作", "发布随想、上传附件、置顶或分发博文。"],
-  ["提交到内容仓库", "后台使用服务端令牌修改 Markdown。"],
-  ["自动更新博客", "main 分支变更后由 Actions 重新发布。"],
+  ["用 GitHub 登录", "只有名单里的账号能进来。"],
+  ["做一件事", "写随想、上传、置顶，或发到别处。"],
+  ["写回仓库", "后台把改动提交到你的内容仓库。"],
+  ["网站更新", "main 变了之后，页面会重新发布。"],
 ];
 
 export function GardenAdminGuide() {
@@ -37,11 +33,10 @@ export function GardenAdminGuide() {
     <section className="garden-admin" id="admin" aria-labelledby="garden-admin-title">
       <header className="garden-section-heading">
         <div>
-          <p className="eyebrow">ADMIN / 管理后台</p>
-          <h2 id="garden-admin-title">管理后台能做什么</h2>
+          <h2 id="garden-admin-title">后台</h2>
         </div>
         <p>
-          后台是一个可选的独立服务，处理需要登录和服务端密钥的工作。公开博客仍然是静态站点，内容仍然保存在 Git 仓库中。
+          长文继续在编辑器里写。后台只做需要登录的事：随想、附件、置顶、转发，以及文章里的交互。
         </p>
       </header>
 
@@ -50,40 +45,39 @@ export function GardenAdminGuide() {
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src="/images/garden/admin-studio.png"
-          alt="Garden 内容管理后台，包含随想发布、草稿管理与博文分发"
-          width={1440}
-          height={1000}
+          alt="Garden 后台：上面写一条随想，下面是草稿和已发布"
+          width={920}
+          height={1033}
           loading="lazy"
         />
         <figcaption>
-          <strong>实际后台界面</strong>
-          <span>随想编辑、已发布与草稿管理，以及博文置顶和分发都集中在同一个工作区。</span>
+          <strong>后台首页</strong>
+          <span>上面写一条随想。下面是草稿，以及可以置顶或转发的文章。</span>
         </figcaption>
       </figure>
 
       <div className="garden-admin-capabilities">
-        {adminCapabilities.map((capability) => (
-          <article key={capability.number}>
-            <span>{capability.number}</span>
-            <h3>{capability.title}</h3>
-            <p>{capability.description}</p>
+        {adminJobs.map((job) => (
+          <article key={job.title}>
+            <h3>{job.title}</h3>
+            <p>{job.description}</p>
           </article>
         ))}
       </div>
 
       <div className="garden-admin-boundary">
-        <strong>后台的边界</strong>
+        <strong>它不是整套编辑器</strong>
         <p>
-          它不是一套完整 CMS。长文章继续在 Typora 或其他 Markdown 编辑器中编写，专栏继续在
+          长文仍用 Typora 或其他 Markdown 编辑器。专栏顺序仍在
           <code> content/columns.yaml </code>
-          中编排；后台主要补上随想发布、媒体上传、博文置顶和内容分发。
+          里排。
         </p>
       </div>
 
-      <ol className="garden-admin-flow" aria-label="管理后台发布流程">
+      <ol className="garden-admin-flow" aria-label="从登录到网站更新">
         {adminFlow.map(([title, description], index) => (
           <li key={title}>
-            <span>{String(index + 1).padStart(2, "0")}</span>
+            <span>{index + 1}</span>
             <strong>{title}</strong>
             <p>{description}</p>
           </li>
@@ -92,21 +86,20 @@ export function GardenAdminGuide() {
 
       <div className="garden-admin-enable">
         <div>
-          <p className="eyebrow">ENABLE / 启用后台</p>
-          <h3>单独部署，再连接内容仓库</h3>
+          <h3>想用后台，再单独部署一份</h3>
           <ol>
             <li>把同一份 Garden 部署到 Node、Docker 或 Cloudflare Workers。</li>
-            <li>配置 GitHub OAuth、允许登录的账号，以及仅能写入内容仓库的令牌。</li>
-            <li>需要上传附件或跨平台分发时，再配置 OSS 和各平台接口。</li>
+            <li>配好 GitHub 登录、允许的账号，以及只能改内容仓库的令牌。</li>
+            <li>要上传附件或转发到其他网站时，再配存储和各平台接口。</li>
           </ol>
         </div>
-        <pre aria-label="管理后台核心配置示例">
+        <pre aria-label="后台需要的环境变量">
           <code>{`ADMIN_URL=https://admin.example.com
 CONTENT_REPOSITORY=owner/repository
 CONTENT_BRANCH=main
 ADMIN_GITHUB_LOGINS=your-github-login
 
-# 令牌与密钥只保存在后台服务中
+# 令牌只放在后台服务里
 CONTENT_GITHUB_TOKEN=github_pat_xxx
 GITHUB_OAUTH_CLIENT_ID=Ov23li_xxx`}</code>
         </pre>