hd-garden 0.5.11 → 0.5.12

package/app/components/SiteHeader.tsx

@@ -14,6 +14,7 @@ import type Fuse from "fuse.js";
 import { MagnifyingGlass, X } from "@phosphor-icons/react";
 import { brand, searchFull, searchIndexUrl } from "@garden/site-config";
 import { createSearch } from "../../ui/garden/search-match.mjs";
+import { cropMatchedText, highlightParts } from "../../ui/garden/search-preview.mjs";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 
@@ -106,38 +107,9 @@ function HighlightedText({
   ranges: readonly MatchRange[];
 }) {
   if (!ranges.length) return text;
-
-  const merged = [...ranges]
-    .sort((left, right) => left[0] - right[0])
-    .reduce<MatchRange[]>((result, range) => {
-      const previous = result.at(-1);
-      if (previous && range[0] <= previous[1] + 1) {
-        result[result.length - 1] = [
-          previous[0],
-          Math.max(previous[1], range[1]),
-        ];
-      } else {
-        result.push(range);
-      }
-      return result;
-    }, []);
-
-  const parts: Array<{ text: string; matched: boolean }> = [];
-  let cursor = 0;
-  merged.forEach(([start, end]) => {
-    if (start > cursor) {
-      parts.push({ text: text.slice(cursor, start), matched: false });
-    }
-    parts.push({ text: text.slice(start, end + 1), matched: true });
-    cursor = end + 1;
-  });
-  if (cursor < text.length) {
-    parts.push({ text: text.slice(cursor), matched: false });
-  }
-
   return (
     <>
-      {parts.map((part, index) =>
+      {highlightParts(text, ranges).map((part, index) =>
         part.matched ? (
           <mark className="search-match" key={`${part.text}-${index}`}>
             {part.text}
@@ -150,55 +122,23 @@ function HighlightedText({
   );
 }
 
-function cropMatchedText(text: string, ranges: readonly MatchRange[]) {
-  if (!ranges.length) return { text, ranges };
-
-  const [focusStart, focusEnd] = ranges[0];
-  let start = Math.max(0, focusStart - 42);
-  let end = Math.min(text.length, Math.max(focusEnd + 52, start + 112));
-
-  if (start > 0) {
-    const nextSpace = text.indexOf(" ", start);
-    if (nextSpace !== -1 && nextSpace < focusStart) start = nextSpace + 1;
-  }
-  if (end < text.length) {
-    const previousSpace = text.lastIndexOf(" ", end);
-    if (previousSpace > focusEnd) end = previousSpace;
-  }
-
-  const prefix = start > 0 ? "…" : "";
-  const suffix = end < text.length ? "…" : "";
-  const visibleRanges = ranges
-    .filter(([rangeStart, rangeEnd]) => rangeEnd >= start && rangeStart < end)
-    .map(
-      ([rangeStart, rangeEnd]) =>
-        [
-          Math.max(rangeStart, start) - start + prefix.length,
-          Math.min(rangeEnd, end - 1) - start + prefix.length,
-        ] as MatchRange,
-    );
-
-  return {
-    text: `${prefix}${text.slice(start, end)}${suffix}`,
-    ranges: visibleRanges,
-  };
-}
+type SearchPreview = { prefix: string; text: string; suffix: string; ranges: readonly MatchRange[] };
 
 function searchPreview(
   item: SearchRecord,
   matches: readonly SearchMatch[] | undefined,
-): { text: string; ranges: readonly MatchRange[] } {
+): SearchPreview {
   const descriptionRanges = rangesFor(matches, "description");
   if (descriptionRanges.length) {
-    return cropMatchedText(item.description, descriptionRanges);
+    return cropMatchedText(item.description, descriptionRanges) as SearchPreview;
   }
 
   const contentRanges = rangesFor(matches, "content");
   if (contentRanges.length) {
-    return cropMatchedText(item.content, contentRanges);
+    return cropMatchedText(item.content, contentRanges) as SearchPreview;
   }
 
-  return { text: item.description, ranges: [] };
+  return { prefix: "", text: item.description, suffix: "", ranges: [] };
 }
 
 export function SiteHeader() {
@@ -495,7 +435,10 @@ export function SiteHeader() {
                       />
                     </strong>
                     <small>
+                      {/* The 「…」 sit outside the highlight. */}
+                      {preview.prefix}
                       <HighlightedText text={preview.text} ranges={preview.ranges} />
+                      {preview.suffix}
                     </small>
                   </Link>
                 );

package/app/globals.css

@@ -3718,6 +3718,13 @@ html[data-theme="dark"] .search-panel {
   -webkit-box-decoration-break: clone;
 }
 
+/* The excerpt is one line cut by text-overflow. Inside it a highlight is
+   atomic: it shows whole, or the line's 「…」 replaces it whole and is drawn
+   with the excerpt's colours, never inside the highlight. */
+.search-result small .search-match {
+  display: inline-block;
+}
+
 .empty-state {
   padding: 32px 12px;
   color: var(--muted);

package/build/static-rsc-path-plugin.mjs

@@ -0,0 +1,41 @@
+// Static export: request the home page's RSC payload where the export writes it.
+//
+// vinext's client builds every RSC address as `<pathname>.rsc` (trailing slash
+// dropped), so the home page becomes `/.rsc`. The static export writes that
+// payload to `index.rsc` (vinext's getRscOutputPath maps "/" there). A static
+// host has no server to bridge the two, so every <Link href="/"> prefetch, and
+// any client navigation home, hit a 404. With output: "export" this plugin
+// changes the address builder (toRscRequestPath) so "/" asks for `/index.rsc`.
+// Every other path already matches the exported file. Prefetching stays on.
+
+const TARGET = /[\\/]vinext[\\/]dist[\\/]server[\\/]app-rsc-cache-busting\.js$/u;
+const ADDRESS = "return `${pathname.length > 1 && pathname.endsWith(\"/\") ? pathname.slice(0, -1) : pathname}.rsc${query}`;";
+const EXPORTED = "return `${pathname === \"/\" ? \"/index\" : pathname.length > 1 && pathname.endsWith(\"/\") ? pathname.slice(0, -1) : pathname}.rsc${query}`;";
+
+/** Rewrite vinext's RSC address builder; throws if vinext changed shape. */
+export function exportRscAddress(code, id = "app-rsc-cache-busting.js") {
+  if (!code.includes("function toRscRequestPath(") || !code.includes(ADDRESS)) {
+    throw new Error(`garden static RSC path: could not find vinext's RSC address builder in ${id}. vinext changed; update build/static-rsc-path-plugin.mjs so the home page asks for /index.rsc.`);
+  }
+  return code.replace(ADDRESS, EXPORTED);
+}
+
+export default function staticRscPath({ enabled = process.env.STATIC_EXPORT === "1" } = {}) {
+  let seen = false;
+  return {
+    name: "garden-static-rsc-path",
+    apply: "build",
+    transform(code, id) {
+      // Browser bundle only: the prerender server still answers "/.rsc" itself.
+      if (!enabled || this.environment?.name !== "client" || !TARGET.test(id.split("?")[0])) return null;
+      seen = true;
+      return { code: exportRscAddress(code, id), map: null };
+    },
+    buildEnd(error) {
+      // The client build always pulls the address builder in; not seeing it means vinext moved it.
+      if (enabled && !error && this.environment?.name === "client" && !seen) {
+        this.error("garden static RSC path: vinext's app-rsc-cache-busting.js was not part of the client build; update build/static-rsc-path-plugin.mjs.");
+      }
+    },
+  };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-garden",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/ui/garden/search-preview.mjs

@@ -0,0 +1,69 @@
+// Search result excerpts: crop around the first match and split into
+// highlighted parts. Match ranges are inclusive [start, end] offsets.
+
+/** Sort and join ranges that touch or overlap. */
+export function mergeRanges(ranges) {
+  return [...ranges]
+    .sort((left, right) => left[0] - right[0])
+    .reduce((result, range) => {
+      const previous = result.at(-1);
+      if (previous && range[0] <= previous[1] + 1) result[result.length - 1] = [previous[0], Math.max(previous[1], range[1])];
+      else result.push([range[0], range[1]]);
+      return result;
+    }, []);
+}
+
+// A term cut by the edge is kept whole when it adds at most this many characters.
+const KEEP_WHOLE = 16;
+
+/**
+ * Crop `text` to a window around the first match. The 「…」 marks come back
+ * apart from the text, so they are never inside a highlight, and a match the
+ * window would cut is either kept whole or left out whole.
+ * @returns {{ prefix: string, text: string, suffix: string, ranges: Array<[number, number]> }}
+ */
+export function cropMatchedText(text, ranges) {
+  const merged = mergeRanges(ranges).filter(([start, end]) => end >= start && start < text.length);
+  if (!merged.length) return { prefix: "", text, suffix: "", ranges: [] };
+
+  const [focusStart, focusEnd] = merged[0];
+  let start = Math.max(0, focusStart - 42);
+  let end = Math.min(text.length, Math.max(focusEnd + 52, start + 112));
+
+  if (start > 0) {
+    const nextSpace = text.indexOf(" ", start);
+    if (nextSpace !== -1 && nextSpace < focusStart) start = nextSpace + 1;
+  }
+  if (end < text.length) {
+    const previousSpace = text.lastIndexOf(" ", end);
+    if (previousSpace > focusEnd) end = previousSpace;
+  }
+
+  // No match may straddle a cut: widen to take it whole, or stop before it.
+  for (const [rangeStart, rangeEnd] of merged) {
+    if (rangeStart < start && rangeEnd >= start) start = start - rangeStart <= KEEP_WHOLE ? rangeStart : rangeEnd + 1;
+    if (rangeStart < end && rangeEnd >= end) end = rangeEnd + 1 - end <= KEEP_WHOLE ? Math.min(text.length, rangeEnd + 1) : rangeStart;
+  }
+
+  return {
+    prefix: start > 0 ? "…" : "",
+    text: text.slice(start, end),
+    suffix: end < text.length ? "…" : "",
+    ranges: merged
+      .filter(([rangeStart, rangeEnd]) => rangeStart >= start && rangeEnd < end)
+      .map(([rangeStart, rangeEnd]) => [rangeStart - start, rangeEnd - start]),
+  };
+}
+
+/** Split text into plain and matched parts. */
+export function highlightParts(text, ranges) {
+  const parts = [];
+  let cursor = 0;
+  for (const [start, end] of mergeRanges(ranges)) {
+    if (start > cursor) parts.push({ text: text.slice(cursor, start), matched: false });
+    parts.push({ text: text.slice(start, end + 1), matched: true });
+    cursor = end + 1;
+  }
+  if (cursor < text.length) parts.push({ text: text.slice(cursor), matched: false });
+  return parts;
+}

package/vite.config.ts

@@ -5,6 +5,7 @@ import vinext from "vinext";
 import { defineConfig } from "vite";
 import hostingConfig from "./.openai/hosting.json";
 import { sites } from "./build/sites-vite-plugin";
+import staticRscPath from "./build/static-rsc-path-plugin.mjs";
 import { gardenPackageRoot, gardenSiteRoot } from "./scripts/garden-paths.mjs";
 
 const SITE_CREATOR_PLACEHOLDER_DATABASE_ID =
@@ -121,6 +122,7 @@ export default defineConfig(async () => {
     plugins: [
       gardenContent(),
       vinext(),
+      staticRscPath(),
       sites(),
       cloudflare({
         viteEnvironment: { name: "rsc", childEnvironments: ["ssr"] },