hd-garden 0.5.0 → 0.5.2

package/app/components/SiteHeader.tsx

@@ -10,11 +10,79 @@ import {
   useState,
   type KeyboardEvent,
 } from "react";
-import Fuse, { type FuseResultMatch } from "fuse.js";
+import type Fuse from "fuse.js";
 import { MagnifyingGlass, X } from "@phosphor-icons/react";
-import { searchRecords } from "../lib/content";
+import { searchFull, searchIndexUrl } from "@garden/site-config";
+import { createSearch } from "../../ui/garden/search-match.mjs";
+import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 
+/** One entry of /search-index.json: titles, tags, dates and a short excerpt, never the full body. */
+type SearchRecord = {
+  title: string;
+  description: string;
+  section: string;
+  path: string;
+  content: string;
+  tags?: string[];
+  date?: string;
+};
+
+type SearchEngine = { records: SearchRecord[]; fuse: Fuse<SearchRecord> };
+let engineLoad: Promise<SearchEngine> | null = null;
+
+type MatchRange = readonly [number, number];
+type SearchMatch = { key?: string; indices: readonly MatchRange[] };
+type SearchHit = { item: SearchRecord; matches?: readonly SearchMatch[] };
+
+let fullLoad: Promise<Map<string, string>> | null = null;
+
+/**
+ * Every body as plain text. Started in the background after the page has
+ * loaded, or when search opens first; read from IndexedDB when this version
+ * was fetched before.
+ */
+function loadFullText() {
+  const scope = searchFull.url.slice(0, searchFull.url.lastIndexOf("/"));
+  fullLoad ??= loadFullIndex({ url: searchFull.url, hash: searchFull.hash, store: createIdbStore(scope) })
+    .then((docs) => new Map(docs))
+    .catch((error: unknown) => {
+      fullLoad = null;
+      throw error;
+    });
+  return fullLoad;
+}
+
+/** Index and Fuse are fetched together, the first time search is about to open. */
+function loadSearchEngine() {
+  engineLoad ??= Promise.all([
+    fetch(searchIndexUrl).then((response) => {
+      if (!response.ok) throw new Error(`search index ${response.status}`);
+      return response.json() as Promise<SearchRecord[]>;
+    }),
+    import("fuse.js"),
+  ])
+    .then(([records, { default: FuseClass }]) => ({
+      records,
+      fuse: new FuseClass(records, {
+        keys: [
+          { name: "title", weight: 0.5 },
+          { name: "description", weight: 0.3 },
+          { name: "tags", weight: 0.2 },
+          { name: "content", weight: 0.15 },
+        ],
+        threshold: 0.36,
+        ignoreLocation: true,
+        includeMatches: true,
+      }),
+    }))
+    .catch((error) => {
+      engineLoad = null;
+      throw error;
+    });
+  return engineLoad;
+}
+
 const nav = [
   { href: "/blog", label: "文章" },
   { href: "/thoughts", label: "随想" },
@@ -23,10 +91,8 @@ const nav = [
   { href: "/about", label: "关于" },
 ];
 
-type MatchRange = readonly [number, number];
-
 function rangesFor(
-  matches: readonly FuseResultMatch[] | undefined,
+  matches: readonly SearchMatch[] | undefined,
   key: string,
 ): readonly MatchRange[] {
   return matches?.find((match) => match.key === key)?.indices ?? [];
@@ -119,8 +185,8 @@ function cropMatchedText(text: string, ranges: readonly MatchRange[]) {
 }
 
 function searchPreview(
-  item: (typeof searchRecords)[number],
-  matches: readonly FuseResultMatch[] | undefined,
+  item: SearchRecord,
+  matches: readonly SearchMatch[] | undefined,
 ): { text: string; ranges: readonly MatchRange[] } {
   const descriptionRanges = rangesFor(matches, "description");
   if (descriptionRanges.length) {
@@ -147,7 +213,25 @@ export function SiteHeader() {
   const resultRefs = useRef<Array<HTMLAnchorElement | null>>([]);
   const previousFocusRef = useRef<HTMLElement | null>(null);
 
+  const [engine, setEngine] = useState<SearchEngine | null>(null);
+  const [engineFailed, setEngineFailed] = useState(false);
+  const [fullText, setFullText] = useState<Map<string, string> | null>(null);
+  const prefetchSearch = useCallback(() => {
+    loadSearchEngine().then(setEngine, () => setEngineFailed(true));
+  }, []);
+
+  // Full text arrives quietly once the page is done; search upgrades when it lands.
+  useEffect(() => {
+    if (saveDataOn()) return;
+    return whenIdleAfterLoad(() => {
+      loadFullText().then(setFullText, () => {});
+    });
+  }, []);
+
   const openSearch = useCallback(() => {
+    setEngineFailed(false);
+    loadSearchEngine().then(setEngine, () => setEngineFailed(true));
+    loadFullText().then(setFullText, () => {});
     previousFocusRef.current =
       document.activeElement instanceof HTMLElement
         ? document.activeElement
@@ -190,24 +274,14 @@ export function SiteHeader() {
     return () => window.removeEventListener("keydown", onKey);
   }, [closeSearch, openSearch, searchOpen]);
 
-  const fuse = useMemo(
-    () =>
-      new Fuse(searchRecords, {
-        keys: [
-          { name: "title", weight: 0.5 },
-          { name: "description", weight: 0.3 },
-          { name: "content", weight: 0.15 },
-        ],
-        threshold: 0.36,
-        ignoreLocation: true,
-        includeMatches: true,
-      }),
-    [],
-  );
-
-  const results = query.trim()
-    ? fuse.search(query).slice(0, 6)
-    : searchRecords.slice(0, 5).map((item) => ({ item, matches: [] }));
+  // Excerpts first, full text once it is here. Typos fall back to Fuse's fuzzy match.
+  const matcher = useMemo(() => (engine ? createSearch(engine.records, fullText) : null), [engine, fullText]);
+  const results: SearchHit[] = useMemo(() => {
+    if (!engine || !matcher) return [];
+    if (!query.trim()) return engine.records.slice(0, 5).map((item) => ({ item, matches: [] }));
+    const exact = matcher.search(query, 6) as unknown as SearchHit[];
+    return exact.length ? exact : engine.fuse.search(query).slice(0, 6);
+  }, [engine, matcher, query]);
 
   useEffect(() => {
     if (!searchOpen) return;
@@ -293,7 +367,7 @@ export function SiteHeader() {
             ))}
           </nav>
           <div className="sh-tools">
-            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} aria-label="搜索文章" aria-expanded={searchOpen} aria-controls="site-search-dialog">
+            <button ref={searchTriggerRef} className="sh-search" type="button" onClick={openSearch} onPointerEnter={prefetchSearch} onFocus={prefetchSearch} 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" />
@@ -301,7 +375,7 @@ export function SiteHeader() {
               <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="sh-icon sh-search-m" type="button" onClick={openSearch} aria-label="搜索文章">
+            <button className="sh-icon sh-search-m" type="button" onClick={openSearch} onPointerDown={prefetchSearch} 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" />
@@ -415,7 +489,9 @@ export function SiteHeader() {
                 );
               })}
               {results.length === 0 && (
-                <p className="empty-state">没有找到，换个更宽松的关键词试试。</p>
+                <p className="empty-state">
+                  {engine ? "没有找到，换个更宽松的关键词试试。" : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
+                </p>
               )}
             </div>
             <footer className="search-footer">

package/app/garden-modules.d.ts

@@ -19,7 +19,7 @@ declare module "@garden/generated-content" {
     publishAt?: string;
     draft?: boolean;
     tags?: string[];
-    references?: { title: string; url?: string }[];
+    references?: { title: string; url?: string; domain?: string }[];
     pinned?: boolean;
     readingTime?: string;
     kind: "post" | "column" | "thought";
@@ -33,6 +33,8 @@ declare module "@garden/generated-content" {
     columnCoverAlt?: string;
     order?: number;
     cover?: string;
+    /** Resized WebP copies of a local cover, when the build had sharp. */
+    coverImage?: { src: string; srcset: string; width: number; height: number };
     original?: string;
     mediaType?: "image" | "audio" | "video" | "link" | "text";
     media?: string | MediaItem[];
@@ -47,9 +49,24 @@ declare module "@garden/generated-content" {
   export const columns: ContentEntry[];
   export const thoughts: ContentEntry[];
   export const a2WordCounts: Record<string, number>;
+  export type LinkCardMeta = {
+    title: string;
+    description?: string;
+    siteName?: string;
+    author?: string;
+    publishedTime?: string;
+    image?: string;
+  };
+  export type LinkAssets = { favicons: Record<string, string>; cards: Record<string, LinkCardMeta> };
+  export const linkAssets: LinkAssets;
 }
 
 declare module "@garden/site-config" {
+  export const searchIndexUrl: string;
+  /** The full-text index file and the hash its contents are cached under. */
+  export const searchFull: { url: string; hash: string };
+  /** The site address (site.config.yaml `url`, else SITE_URL) and base path, for spotting links back to the site. */
+  export const siteLinks: { address: string; basePath: string };
   export const siteConfig: {
     name: string;
     tagline: string;
@@ -58,6 +75,8 @@ declare module "@garden/site-config" {
     author: { name: string; github: string; githubBio: string; githubPinned?: string[] };
     pages: Record<string, Record<string, unknown>>;
     footer: string;
+    linkPreview?: { worker?: string };
+    url?: string;
   };
   export const githubUrl: string;
 }

package/app/globals.css

@@ -15,7 +15,7 @@
   --accent: #30302e;
   --accent-soft: #f0eee6;
   --selection: #e8e5db;
-  --font-mono: var(--font-geist-mono), "SFMono-Regular", Consolas,
+  --font-mono: "SFMono-Regular", Consolas,
     "Liberation Mono", "Noto Sans Mono CJK SC", monospace;
   --content: 740px;
   --wide: 1040px;
@@ -2061,15 +2061,32 @@ button {
   text-decoration-thickness: 2px;
 }
 
-/* A per-line border stays continuous across inline code and descenders. */
-.markdown-body u {
+/* Highlighter for key claims, as in the A2 demo: a soft stroke under the lower part of the line. */
+.markdown-body u,
+.markdown-body mark,
+.markdown-body .hl {
+  color: var(--ink);
+  font-weight: 500;
   text-decoration: none;
-  border-bottom: 1px solid currentColor;
-  padding-bottom: 0.1em;
+  border-bottom: 0;
+  background: linear-gradient(to bottom, transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%);
+  padding: 0 0.08em;
   -webkit-box-decoration-break: clone;
   box-decoration-break: clone;
 }
 
+.markdown-body u strong,
+.markdown-body u u,
+.markdown-body mark strong,
+.markdown-body mark u,
+.markdown-body .hl strong,
+.markdown-body .hl u {
+  font-weight: 600;
+  text-decoration: none;
+  background: none;
+  padding: 0;
+}
+
 .markdown-body strong {
   color: var(--ink);
 }
@@ -2763,65 +2780,103 @@ button {
   color: #7f8790;
 }
 
+/* References: one quiet warm-grey card after the article. */
 .article-references {
-  margin-top: 64px;
+  margin-top: 56px;
+  padding: 22px 24px 16px;
+  background: var(--card-hover);
+  border: 1px solid var(--rule);
+  border-radius: var(--r);
+}
+
+:root[data-theme="dark"] .article-references,
+html[data-theme="dark"] .article-references {
+  background: var(--card);
 }
 
-.article-references > p {
+.article-references > h2 {
   margin: 0 0 14px;
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 700;
+  padding: 0;
+  border: 0;
+  font: 600 17px / 1.4 var(--sans);
+  color: var(--ink);
 }
 
-.article-references table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 12px;
+.article-references > h2::before {
+  content: none;
 }
 
-.article-references td {
+.article-references ol {
+  list-style: none;
+  margin: 0;
   padding: 0;
-  border: 1px solid var(--line);
-  color: var(--ink-soft);
-  text-align: left;
-  overflow-wrap: anywhere;
+  counter-reset: ref;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--soft);
 }
 
-.article-references td:first-child {
-  width: 1%;
-  color: var(--accent);
+.article-references li {
+  position: relative;
+  margin: 0 0 6px;
+  padding-left: 2.1em;
+  counter-increment: ref;
+  break-inside: avoid;
+}
+
+.article-references li::before {
+  content: counter(ref);
+  position: absolute;
+  top: 0.15em;
+  left: 0;
+  width: 1.5em;
+  color: var(--muted);
+  font-size: 12px;
   font-variant-numeric: tabular-nums;
   text-align: right;
-  white-space: nowrap;
 }
 
-.article-references td a,
-.article-references td > span {
-  display: block;
-  padding: 11px 13px;
+.article-references a,
+.article-references .ref-title {
+  color: var(--text);
 }
 
-.article-references td:first-child a,
-.article-references td:first-child > span {
-  padding-right: 8px;
-  color: var(--accent);
-  text-decoration: none;
+.article-references a {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 4px;
+  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
+  transition: text-decoration-color 0.15s ease;
 }
 
-.article-references td a {
-  color: inherit;
-  text-decoration: none;
+.article-references a:hover {
+  text-decoration-color: var(--ink);
+  text-decoration-thickness: 2px;
 }
 
-.article-references td a span {
-  text-decoration: underline;
-  text-decoration-color: var(--accent);
-  text-underline-offset: 4px;
+.article-references .ref-domain {
+  font-size: 12px;
+  color: var(--muted);
+  white-space: nowrap;
 }
 
-.article-references td a:hover span {
-  color: var(--accent);
+@media (min-width: 900px) {
+  .article-references.is-split ol {
+    columns: 2;
+    column-gap: 32px;
+  }
+}
+
+@media (max-width: 640px) {
+  .article-references {
+    padding: 18px 16px 12px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .article-references a {
+    transition: none;
+  }
 }
 
 .article-references + .next-entry {

package/app/layout.tsx

@@ -1,5 +1,4 @@
 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";
@@ -13,11 +12,6 @@ import {
 } from "./lib/site";
 import { githubUrl, siteConfig } from "./site.config";
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export async function generateMetadata(): Promise<Metadata> {
   const siteUrl = await getSiteUrl();
 
@@ -100,7 +94,7 @@ export default function RootLayout({
           />
         )}
       </head>
-      <body className={geistMono.variable}>
+      <body>
         <a className="skip-link" href="#main-content">
           跳到正文
         </a>

package/app/lib/archive.ts

@@ -0,0 +1,43 @@
+import { columnOfPost, columns, posts } from "./content";
+
+/**
+ * What the /blog list needs per post. The page passes this to the client
+ * archive as props, so post bodies never reach the browser bundle.
+ */
+export type ArchivePost = {
+  path: string;
+  title: string;
+  date: string;
+  tags?: string[];
+  description?: string;
+  pinned?: boolean;
+  column?: { slug: string; title: string };
+};
+
+export type ArchiveSeries = { slug: string; title: string; count: number };
+
+export function archivePosts(): ArchivePost[] {
+  return posts.map((post) => {
+    const column = columnOfPost(post);
+    return {
+      path: post.path,
+      title: post.title,
+      date: post.date,
+      ...(post.tags?.length ? { tags: post.tags } : {}),
+      ...(post.description ? { description: post.description } : {}),
+      ...(post.pinned ? { pinned: true } : {}),
+      ...(column ? { column } : {}),
+    };
+  });
+}
+
+export function archiveSeries(): ArchiveSeries[] {
+  const series = new Map<string, ArchiveSeries>();
+  for (const entry of columns) {
+    const slug = entry.column ?? "";
+    const current = series.get(slug);
+    if (current) current.count += 1;
+    else series.set(slug, { slug, title: entry.columnTitle ?? slug, count: 1 });
+  }
+  return [...series.values()];
+}

package/app/lib/content.ts

@@ -9,11 +9,12 @@ import {
 import GithubSlugger from "github-slugger";
 import { canonicalSiteDate } from "../../scripts/site-date.mjs";
 import { demoDateLabel } from "./a2-meta";
-import { contentToSearchText } from "../../ui/core/transform.mjs";
+import { searchableText } from "../../ui/garden/search-index.mjs";
 import { toString } from "mdast-util-to-string";
 import remarkParse from "remark-parse";
 import { unified } from "unified";
 import { visit } from "unist-util-visit";
+import { splitHeadingNumber } from "./heading-number";
 
 export { columns, posts, thoughts };
 export type { ContentEntry, MediaItem };
@@ -65,11 +66,8 @@ export const displayHeadingLevel = (depth: number, base: number) => {
   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;
-};
+/** Kept exactly as the author wrote it; see heading-number.ts. */
+export { splitHeadingNumber };
 
 /**
  * Parses the same Markdown heading text that ReactMarkdown sends to
@@ -112,15 +110,7 @@ export const extractHeadings = (markdown: string) => {
   return headings;
 };
 
-const toSearchableText = (markdown: string) =>
-  contentToSearchText(markdown)
-    .replace(/```[^\n]*\n([\s\S]*?)```/g, " $1 ")
-    .replace(/!\[([^\]]*)\]\([^)]+\)/g, " $1 ")
-    .replace(/\[([^\]]+)\]\([^)]+\)/g, " $1 ")
-    .replace(/<[^>]+>/g, " ")
-    .replace(/[#>*_~`|[\]{}()]/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
+const toSearchableText = (markdown: string) => searchableText(markdown);
 
 export const estimateWordCount = (markdown: string) => {
   const text = toSearchableText(markdown);
@@ -131,30 +121,6 @@ export const estimateWordCount = (markdown: string) => {
   return hanCharacters + otherWords;
 };
 
-export const searchRecords = [
-  ...posts.map((item) => ({
-    title: item.title,
-    description: item.description ?? "",
-    section: "文章",
-    path: postHref(item),
-    content: toSearchableText(item.content),
-  })),
-  ...columns.map((item) => ({
-    title: item.title,
-    description: item.description ?? "",
-    section: item.columnTitle ?? "专栏",
-    path: columnHref(item),
-    content: toSearchableText(item.content),
-  })),
-  ...thoughts.map((item) => ({
-    title: item.title,
-    description: toSearchableText(item.content),
-    section: "随想",
-    path: `/thoughts/${item.slug}`,
-    content: toSearchableText(item.content),
-  })),
-];
-
 export const findPost = (path: string): ContentEntry | undefined =>
   posts.find((post) => post.path === path);
 

package/app/lib/generated-content.ts

@@ -19,7 +19,7 @@ export type ContentEntry = {
   publishAt?: string;
   draft?: boolean;
   tags?: string[];
-  references?: { title: string; url?: string }[];
+  references?: { title: string; url?: string; domain?: string }[];
   pinned?: boolean;
   readingTime?: string;
   kind: "post" | "column" | "thought";

package/app/lib/heading-number.ts

@@ -0,0 +1,9 @@
+/**
+ * Pull an author-written section number (`2.`, `4.1`, `4.1.`) into the section
+ * marker and leave the heading sentence. The number is kept exactly as
+ * written, trailing dot included, so `## 2. KV Cache` shows `2.`.
+ */
+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;
+};

package/app/lib/remark-a2.mjs

@@ -18,10 +18,10 @@ const LEGACY_KIND = {
 
 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>',
+  tip: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1.75a4.25 4.25 0 0 0-2.5 7.7c.4.3.6.7.6 1.2v.6h3.8v-.6c0-.5.2-.9.6-1.2A4.25 4.25 0 0 0 8 1.75z"/><path d="M6.2 13.6h3.6"/></svg>',
+  important: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.25 3.25a1.5 1.5 0 0 1 1.5-1.5h8.5a1.5 1.5 0 0 1 1.5 1.5v6.5a1.5 1.5 0 0 1-1.5 1.5H7.5l-3 2.75v-2.75h-.75a1.5 1.5 0 0 1-1.5-1.5z"/><path d="M8 4.5v3"/><path d="M8 9.4v.1" stroke-width="2"/></svg>',
+  warning: '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M7.13 2.4a1 1 0 0 1 1.74 0l5.6 9.9a1 1 0 0 1-.87 1.5H2.4a1 1 0 0 1-.87-1.5z"/><path d="M8 6.3v3.1"/><path d="M8 11.4v.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.3L1.75 10.7V5.3z"/><path d="M8 4.8v3.6"/><path d="M8 10.6v.1" stroke-width="2"/></svg>',
 };
 
 function meaningfulChildren(node) {