hd-garden 0.14.7 → 0.14.10

package/app/components/FeaturedTitle.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import Link from "next/link";
+import { useLayoutEffect, useRef } from "react";
+import { mountFeatureTitle } from "../../ui/garden/feature-title-fit.mjs";
+import runtimeSource from "../../ui/garden/feature-title-fit.mjs?raw";
+
+// Preserve one authored runtime across SSR/browser builds; function.toString()
+// would be changed independently by server and client optimizers.
+const FEATURE_TITLE_BOOT = `(()=>{${runtimeSource.replace(/^export /gm, "")}\nmountFeatureTitle(document.currentScript.parentElement);})();`;
+
+type FeaturedTitleProps = { title: string; href: string; description?: string };
+
+export function FeaturedTitle({ title, href, description }: FeaturedTitleProps) {
+  const heading = useRef<HTMLHeadingElement>(null);
+  useLayoutEffect(() => mountFeatureTitle(heading.current?.parentElement), [title, href, description]);
+  return <>
+    <h2 id="ft" ref={heading} data-feature-title=""><Link href={href}>{title}</Link></h2>
+    {description ? <p data-feature-summary="">{description}</p> : null}
+    <style data-feature-title-rules="">{""}</style>
+    <script data-feature-title-boot="" dangerouslySetInnerHTML={{ __html: FEATURE_TITLE_BOOT }} />
+  </>;
+}

package/app/components/MarkdownArticle.tsx

@@ -15,6 +15,7 @@ import Link from "next/link";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import rehypeKatex from "rehype-katex";
+import {rehypeKeepPunctuation} from "../../ui/garden/rehype-keep-punctuation.mjs";
 import rehypeSlug from "rehype-slug";
 import rehypeHighlight from "rehype-highlight";
 import { rehypeHeadingAnchors } from "../../ui/garden/heading-anchors.mjs";
@@ -254,6 +255,7 @@ export function MarkdownArticle({ content, lang, fieldTables, refDemos, handbook
           rehypeRaw,
           rehypeGardenBlocks,
           rehypeKatex,
+          rehypeKeepPunctuation,
           rehypeSlug,
           // Not rehype-autolink-headings "wrap": a heading with a link in it would nest <a> in <a> (React #418).
           [rehypeHeadingAnchors, { className: ["h-anchor"] }],

package/app/components/TableOfContents.tsx

@@ -4,39 +4,28 @@ import {
   useCallback,
   useEffect,
   useId,
+  useMemo,
   useRef,
   useState,
   useSyncExternalStore,
   type MouseEvent,
   type ReactNode,
 } from "react";
+import { usePathname } from "next/navigation";
+import { nestHeadings, expandedTocSections, toggleTocSection, type TocHeading, type TocNode, type TocExpansion } from "../lib/toc-expansion";
 import { createPortal } from "react-dom";
 import { TOC_PANEL_ID, TOC_CONTROL_ID, TOC_CLOSED_ID } from "../lib/reading-navigation";
-import { X } from "@phosphor-icons/react";
+import { CaretUp, CaretDown, X } from "@phosphor-icons/react";
 import { ui, type UiLang } from "../lib/i18n";
 
-type Heading = { depth: number; text: string; id: string; no?: string };
+type TocProps = { headings: TocHeading[]; label?: string; lang?: UiLang };
 
-type TocNode = Heading & { children: TocNode[] };
-
-const nestHeadings = (headings: Heading[]) => {
-  const roots: TocNode[] = [];
-  const stack: TocNode[] = [];
-
-  for (const heading of headings) {
-    const node: TocNode = { ...heading, children: [] };
-    while (stack.at(-1) && stack.at(-1)!.depth >= heading.depth) {
-      stack.pop();
-    }
-
-    const parent = stack.at(-1);
-    if (parent) parent.children.push(node);
-    else roots.push(node);
-    stack.push(node);
-  }
-
-  return roots;
-};
+// A route/content change starts a fresh reading session, including when React
+// reuses the component during normal client navigation.
+export function TableOfContents(props: TocProps) {
+  const pathname = usePathname();
+  return <ContentsSession key={`${pathname}:${JSON.stringify(props.headings)}`} {...props} />;
+}
 
 const getCssScrollPaddingTop = () => {
   const value = window.getComputedStyle(document.documentElement).scrollPaddingTop;
@@ -131,22 +120,15 @@ function subscribeControlHost(changed: () => void) {
   return () => observer.disconnect();
 }
 
-export function TableOfContents({
+function ContentsSession({
   headings,
   label,
   lang,
-}: {
-  headings: Heading[];
-  label?: string;
-  /** Defaults to the site language; the bilingual handbook passes its own. */
-  lang?: UiLang;
-}) {
+}: TocProps) {
   const t = ui(lang);
   label ??= t.toc;
-  const [activeId, setActiveId] = useState(headings[0]?.id);
-  const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
-    () => new Set(),
-  );
+  const [activeId, setActiveId] = useState<string>();
+  const [expansion, setExpansion] = useState<TocExpansion>({ mode: "follow" });
   const [mobileOpen, setMobileOpen] = useState(false);
   const panelId = TOC_PANEL_ID;
   const controlHost = useSyncExternalStore(subscribeControlHost, readControlHost, serverControlHost);
@@ -157,7 +139,8 @@ export function TableOfContents({
   const mobileCloseRef = useRef<HTMLButtonElement>(null);
   const restoreMobileTriggerFocusRef = useRef(false);
   const anchorCleanupRef = useRef<(() => void) | undefined>(undefined);
-  const tree = nestHeadings(headings);
+  const tree = useMemo(() => nestHeadings(headings), [headings]);
+  const expanded = useMemo(() => expandedTocSections(tree, expansion, activeId), [tree, expansion, activeId]);
 
   const closeMobileToc = useCallback((restoreFocus = false) => {
     restoreMobileTriggerFocusRef.current = restoreFocus;
@@ -250,9 +233,9 @@ export function TableOfContents({
       const current = reachedPageEnd
         ? visibleHeadings.at(-1)?.id
         : visibleHeadings.filter((heading) => heading.top <= readingProbe).at(-1)
-            ?.id ?? visibleHeadings[0]?.id;
+            ?.id;
 
-      if (current) setActiveId((previous) => (previous === current ? previous : current));
+      setActiveId((previous) => (previous === current ? previous : current));
     };
     const scheduleUpdate = () => {
       if (!frame) frame = window.requestAnimationFrame(updateActiveHeading);
@@ -341,7 +324,7 @@ export function TableOfContents({
     const activeItem = list?.querySelector<HTMLElement>(
       '[aria-current="location"]',
     );
-    if (!list || !activeItem) return;
+    if (!list || !activeItem || !activeItem.getClientRects().length) return;
 
     const edge = 10;
     const listBounds = list.getBoundingClientRect();
@@ -358,16 +341,20 @@ export function TableOfContents({
       const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
       list.scrollTo({ top: nextTop, behavior: reduceMotion ? "auto" : "smooth" });
     }
-  }, [activeId, collapsedSections, mobileOpen]);
-
-  const toggleSection = (id: string) => {
-    setCollapsedSections((current) => {
-      const next = new Set(current);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
+  }, [activeId, expanded, mobileOpen]);
+
+  useEffect(() => {
+    const focused = document.activeElement;
+    if (!(focused instanceof HTMLElement) || !listRef.current?.contains(focused) || focused.getClientRects().length) return;
+    let section = focused.closest(".toc-section");
+    while (section) {
+      const link = section.querySelector<HTMLAnchorElement>(":scope > .toc-item-row > a");
+      if (link?.getClientRects().length) { link.focus({ preventScroll: true }); break; }
+      section = section.parentElement?.closest(".toc-section") ?? null;
+    }
+  }, [expanded]);
+
+  const toggleSection = (id: string) => setExpansion((current) => toggleTocSection(expandedTocSections(tree, current, activeId), id));
 
   const navigateToHeading = (event: MouseEvent<HTMLAnchorElement>, id: string) => {
     event.preventDefault();
@@ -390,7 +377,7 @@ export function TableOfContents({
   };
 
   const renderNode = (node: TocNode, path: number[]): ReactNode => {
-    const collapsed = collapsedSections.has(node.id);
+    const collapsed = !expanded.has(node.id);
     const childListId = `${listId}-${path.join("-")}`;
 
     return (
@@ -422,7 +409,7 @@ export function TableOfContents({
           ) : null}
         </div>
         {node.children.length > 0 ? (
-          <ol id={childListId} className="toc-sublist" hidden={collapsed}>
+          <ol id={childListId} className="toc-sublist" role="list" data-collapsed={collapsed}>
             {node.children.map((child, index) => renderNode(child, [...path, index]))}
           </ol>
         ) : null}
@@ -465,9 +452,23 @@ export function TableOfContents({
         id={panelId}
         aria-label={label}
         data-mobile-open={mobileOpen}
+        data-toc-mode={expansion.mode}
+        data-toc-active={activeId || ""}
       >
         <div className="toc-header">
           <p>{label}</p>
+          {tree.some((node) => node.children.length > 0) ? <div className="toc-mode-controls">
+            <button
+              type="button"
+              data-toc-mode-toggle=""
+              aria-controls={listId}
+              aria-label={expansion.mode === "follow" ? t.tocExpandAll : t.tocResumeFollow}
+              title={expansion.mode === "follow" ? t.tocExpandAll : t.tocResumeFollow}
+              onClick={() => setExpansion({ mode: expansion.mode === "follow" ? "all" : "follow" })}
+            >
+              {expansion.mode === "follow" ? <CaretDown size={14} aria-hidden="true" /> : <CaretUp size={14} aria-hidden="true" />}
+            </button>
+          </div> : null}
           <button
             ref={mobileCloseRef}
             className="toc-mobile-close"
@@ -481,7 +482,7 @@ export function TableOfContents({
             <X size={18} aria-hidden="true" />
           </a>
         </div>
-        <ol id={listId} ref={listRef} className="toc-list">
+        <ol id={listId} ref={listRef} className="toc-list" role="list">
           {tree.map((node, index) => renderNode(node, [index]))}
         </ol>
       </aside>

package/app/globals.css

@@ -1,6 +1,7 @@
 @import "tailwindcss";
 @import "../ui/react/ui.css";
 @import "../ui/compose/compose.css";
+@import "../ui/garden/inline-math.css";
 @import "./admin-ui.css";
 
 :root {
@@ -1734,6 +1735,8 @@ button {
 }
 
 .toc-header > p {
+  flex: 1 1 auto;
+  min-width: 0;
   margin: 0;
   color: var(--accent);
   font-size: 12px;
@@ -1754,10 +1757,13 @@ button {
 
 .toc .toc-sublist {
   margin: 0;
-  padding: 0 0 0 12px;
+  padding: 0;
+  padding-inline-start: 1.25em;
   list-style: none;
 }
 
+.toc .toc-sublist[data-collapsed="true"] { display: none; }
+
 .toc-item-row {
   display: flex;
   align-items: flex-start;
@@ -1804,10 +1810,11 @@ button {
   line-height: 1.6;
 }
 
-.toc li.toc-depth-4,
-.toc li.toc-depth-5 {
-  font-size: 11px;
-}
+.toc-list > .toc-section > .toc-item-row > a { font-weight: 600; }
+.toc-sublist > .toc-section > .toc-item-row > a { font-weight: 400; }
+.toc-mode-controls { display: flex; align-items: center; flex: 0 0 auto; margin-left: auto; }
+.toc-mode-controls button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; touch-action: manipulation; }
+.toc-mode-controls button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
 
 .toc a:hover {
   color: var(--ink);
@@ -2557,6 +2564,7 @@ button {
   overflow-wrap: normal;
 }
 
+
 .markdown-body .footnotes {
   margin-top: 64px;
   padding-top: 22px;
@@ -3868,13 +3876,16 @@ html[data-theme="dark"] .search-footer {
     padding-right: max(20px, env(safe-area-inset-right));
   }
 
-  .toc .toc-item-row > a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; }
-  .toc .toc-section-toggle { min-width: 44px; min-height: 44px; }
+  .toc .toc-item-row > a { display: flex; align-items: center; min-height: 40px; padding-block: 4px; }
+  .toc .toc-section-toggle { min-width: 40px; min-height: 40px; }
+  .toc .toc-mode-controls button { width: 44px; height: 44px; }
 
-  .toc li {
-    margin: 10px 0;
+  .toc .toc-list .toc-section {
+    margin: 2px 0;
     font-size: 13px;
+    line-height: 1.5;
   }
+  .toc-list > .toc-section + .toc-section { margin-top: 6px; }
 
   .post-reading-page {
     width: min(var(--content), calc(100% - 48px));
@@ -5393,9 +5404,10 @@ html[data-theme="dark"] .search-footer {
 /* Without JavaScript every sub-list stays open and the collapse toggles do
    nothing, so hide them at every width. */
 @media (scripting: none) {
-  .toc-section-toggle {
+  .toc-section-toggle, .toc-mode-controls {
     display: none;
   }
+  .toc .toc-sublist[data-collapsed="true"] { display: block; }
 }
 
 /* No JavaScript: the drawer button cannot open anything, so swap in plain

package/app/lib/i18n.ts

@@ -38,6 +38,8 @@ const zh = {
   columnNewestFirst: (title: string | undefined) => `${title}，从新到旧`,
   toc: "本篇目录",
   tocShort: "目录",
+  tocResumeFollow: "恢复跟读",
+  tocExpandAll: "全部展开",
   tocPage: "本页目录",
   open: "打开",
   close: "关闭",
@@ -296,6 +298,8 @@ const en: typeof zh = {
   columnNewestFirst: (title: string | undefined) => `${title}, newest first`,
   toc: "Contents",
   tocShort: "TOC",
+  tocResumeFollow: "Resume following",
+  tocExpandAll: "Expand all",
   tocPage: "On this page",
   open: "Open ",
   close: "Close ",

package/app/lib/toc-expansion.ts

@@ -0,0 +1,49 @@
+export type TocHeading = { depth: number; text: string; id: string; no?: string };
+export type TocNode = TocHeading & { children: TocNode[] };
+export type TocExpansion =
+  | { mode: "follow" }
+  | { mode: "all" }
+  | { mode: "manual"; expanded: ReadonlySet<string> };
+
+export function nestHeadings(headings: readonly TocHeading[]): TocNode[] {
+  const roots: TocNode[] = [], stack: TocNode[] = [];
+  for (const heading of headings) {
+    const node: TocNode = { ...heading, children: [] };
+    let parent = stack.at(-1);
+    while (parent && parent.depth >= node.depth) {
+      stack.pop();
+      parent = stack.at(-1);
+    }
+    if (parent) parent.children.push(node);
+    else roots.push(node);
+    stack.push(node);
+  }
+  return roots;
+}
+
+// The nearest shallower heading is the parent even when heading ranks skip.
+// Opening only this path exposes the current heading and its immediate children.
+export function expandedTocSections(tree: readonly TocNode[], state: TocExpansion, activeId?: string): ReadonlySet<string> {
+  if (state.mode === "manual") return state.expanded;
+  const expanded = new Set<string>();
+  function visit(nodes: readonly TocNode[]): boolean {
+    let containsActive = false;
+    for (const node of nodes) {
+      const onPath = visit(node.children) || node.id === activeId;
+      if (node.children.length && (state.mode === "all" || onPath)) expanded.add(node.id);
+      containsActive ||= onPath;
+    }
+    return containsActive;
+  }
+  visit(tree);
+  return expanded;
+}
+
+// An individual disclosure is an explicit manual browsing choice. Freeze the
+// current visible branches instead of fighting the next scroll-spy update.
+export function toggleTocSection(expanded: ReadonlySet<string>, id: string): TocExpansion {
+  const next = new Set(expanded);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  return { mode: "manual", expanded: next };
+}

package/app/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { FeaturedTitle } from "./components/FeaturedTitle";
 import { CoverImage } from "./components/CoverImage";
 import { fullListDate, homeListDate } from "./lib/a2-meta";
 import { columnStatusLabel, siteLang, ui } from "./lib/i18n";
@@ -65,8 +66,7 @@ export default function Home() {
               <span>{t.homeLatestBadge}</span>
               <time className="num" dateTime={day(feature.date)}>{fullListDate(feature.date, siteLang)}</time>
             </p>
-            <h2 id="ft"><Link href={postHref(feature)}>{feature.title}</Link></h2>
-            {feature.description ? <p>{feature.description}</p> : null}
+            <FeaturedTitle title={feature.title} href={postHref(feature)} description={feature.description} />
             {feature.tags?.length ? (
               <p className="tags">{feature.tags.map((tag) => <span key={tag}>#{tag}</span>)}</p>
             ) : null}

package/app/raw.d.ts

@@ -2,3 +2,8 @@ declare module "*.md?raw" {
   const source: string;
   export default source;
 }
+
+declare module "*.mjs?raw" {
+  const source: string;
+  export default source;
+}

package/app/styles/shell.css

@@ -166,7 +166,8 @@ html[data-theme="dark"] .sh-rail{color:var(--muted)}
 .sh-feature .cover{border-radius:var(--r-lg);aspect-ratio:auto;display:block;overflow:hidden;background:none}
 .sh-feature .cover img{display:block;width:100%;height:auto}
 .sh-feature .kicker{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-small);color:var(--muted);margin:0 0 12px}
-.sh-feature h2{font:700 30px/1.35 var(--sans);color:var(--ink);margin:0;text-wrap:balance}
+.sh-feature>div{min-width:0}
+.sh-feature h2{font:700 max(1.875rem,1.125em)/1.35 var(--sans);color:var(--ink);margin:0;text-wrap:balance;overflow-wrap:anywhere}
 .sh-feature h2 a{text-decoration:none}
 .sh-feature h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-lg)}
 .sh-feature:hover h2 a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@@ -289,7 +290,7 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-intro{padding:44px 0 0}
   .sh-intro p{font-size:var(--fs-body)}
   .sh-feature{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:36px}
-  .sh-feature h2{font-size:24px}
+  .sh-feature h2{font-size:max(1.5rem,1.125em)}
   .sh-section{margin-top:56px}
   .sh-cols{grid-template-columns:minmax(0,1fr);gap:16px}
   .sh-row,.sh-home-grid .sh-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:16px 0 17px}

package/editors/dist/typora/manifest.json

@@ -5,7 +5,7 @@
   "author": "hedon",
   "authorUrl": "https://github.com/hedon954",
   "repo": "hedon954/garden",
-  "version": "0.14.7",
+  "version": "0.14.10",
   "minAppVersion": "1.5.0",
   "minCoreVersion": "2.10.52",
   "platforms": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.14.7",
+  "version": "0.14.10",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",
@@ -66,7 +66,7 @@
     "start": "node bin/garden.mjs start",
     "admin:local": "node --env-file=.env.admin.local bin/garden.mjs start --host 0.0.0.0 --port 3000",
     "admin:cloudflare": "npm run build && wrangler deploy --config dist/server/wrangler.json",
-    "test": "npm run build && node --experimental-strip-types --test tests/*.test.mjs",
+    "test": "npm run build && node --experimental-strip-types --test --test-concurrency=2 tests/*.test.mjs",
     "ui:build": "node scripts/build-ui-preview.mjs",
     "editors:build": "node editors/vscode/build.mjs && node editors/obsidian/build.mjs && node editors/typora/build.mjs",
     "editors:pack": "node scripts/pack-editors.mjs",

package/scripts/file-preview.mjs

@@ -15,6 +15,7 @@
 import fs from "node:fs";
 import rehypeHighlight from "rehype-highlight";
 import rehypeKatex from "rehype-katex";
+import { rehypeKeepPunctuation } from "../ui/garden/rehype-keep-punctuation.mjs";
 import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import rehypeStringify from "rehype-stringify";
@@ -104,6 +105,7 @@ export function renderFilePreview(markdown, { idPrefix = "gf-", lang = "zh" } =
       .use(remarkRehype, { allowDangerousHtml: true })
       .use(rehypeRaw)
       .use(rehypeKatex)
+      .use(rehypeKeepPunctuation)
       .use(rehypeSlug, { prefix: idPrefix })
       .use(rehypeHighlight)
       .use(rehypePreviewSafety)
@@ -190,6 +192,7 @@ export function previewStyleSheet() {
     `:not(pre)>code{font:400 14px/1 ${mono};padding:3px 6px;border-radius:5px}`,
     ".table-wrap{overflow-x:auto}table{border-collapse:collapse}th,td{border:1px solid;padding:6px 10px}",
     "a{color:inherit}.katex-html{display:none}",
+    fs.readFileSync(new URL("../ui/garden/inline-math.css", import.meta.url), "utf8"),
     theme(light),
     ...rules.flatMap((sheet) => sheet.light),
     `@media (prefers-color-scheme:dark){${theme(dark)}${rules.flatMap((sheet) => sheet.dark).join("")}}`,