hd-garden 0.5.0 → 0.5.1

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,22 @@ 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 };
   export const siteConfig: {
     name: string;
     tagline: string;
@@ -58,6 +73,7 @@ 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 };
   };
   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;
@@ -2763,65 +2763,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-link-card.mjs

@@ -0,0 +1,83 @@
+import { toString } from "mdast-util-to-string";
+
+/**
+ * `[text](url){card}` asks for a link card.
+ *
+ * - The marker only counts written straight after the link's `)`. Inside code
+ *   it is plain text and stays.
+ * - A paragraph that is nothing but the marked link becomes the card itself,
+ *   in the same spot; the inline link is not kept.
+ * - Otherwise the link stays in the sentence and its card follows the
+ *   paragraph (inside the same list item or quote).
+ *
+ * Cards are `garden-linkcard` elements carrying `data-url`, `data-text` and,
+ * for the standalone form, `data-standalone`.
+ */
+
+const MARKER = "{card}";
+const isHttp = (url) => /^https?:\/\//iu.test(url ?? "");
+
+function writtenAsLink(node, source) {
+  if (!source || node.position?.end?.offset === undefined) return true;
+  return source[node.position.end.offset - 1] === ")";
+}
+
+function cardNode(link, standalone) {
+  const properties = { dataUrl: link.url, dataText: toString(link).trim() };
+  if (standalone) properties.dataStandalone = "true";
+  return { type: "linkCard", data: { hName: "garden-linkcard", hProperties: properties }, children: [] };
+}
+
+const meaningful = (children) =>
+  children.filter((child) => !(child.type === "text" && !child.value.trim()) && child.type !== "break");
+
+/** Take the markers out of one parent's inline children; return the marked links. */
+function takeMarkers(parent, source) {
+  const marked = [];
+  const children = parent.children ?? [];
+  for (let index = 0; index < children.length - 1; index += 1) {
+    const link = children[index];
+    const next = children[index + 1];
+    if (link.type !== "link" || next.type !== "text" || !next.value.startsWith(MARKER)) continue;
+    if (!isHttp(link.url) || !writtenAsLink(link, source)) continue;
+    next.value = next.value.slice(MARKER.length);
+    marked.push(link);
+  }
+  parent.children = children.filter((child) => !(child.type === "text" && child.value === ""));
+  return marked;
+}
+
+function walk(parent, source) {
+  const children = parent.children ?? [];
+  for (let index = 0; index < children.length; index += 1) {
+    const node = children[index];
+    if (node.type === "code" || node.type === "inlineCode" || node.type === "html") continue;
+    if (node.type !== "paragraph") {
+      if (node.children) {
+        // Headings, table cells and the like: drop the marker, no card.
+        if (node.type === "heading" || node.type === "tableCell") takeMarkers(node, source);
+        walk(node, source);
+      }
+      continue;
+    }
+    // Links nested in emphasis count too.
+    const marked = takeMarkers(node, source);
+    for (const child of node.children) if (child.children && child.type !== "link") marked.push(...takeMarkers(child, source));
+    if (!marked.length) continue;
+    const rest = meaningful(node.children);
+    if (marked.length === 1 && rest.length === 1 && rest[0] === marked[0]) {
+      children[index] = cardNode(marked[0], true);
+      continue;
+    }
+    const cards = marked.map((link) => cardNode(link, false));
+    children.splice(index + 1, 0, ...cards);
+    index += cards.length;
+  }
+}
+
+export function remarkLinkCard() {
+  return (tree, file) => {
+    const source = typeof file?.value === "string" ? file.value : String(file?.value ?? "");
+    walk(tree, source);
+  };
+}