hd-garden 0.5.12 → 0.5.13

package/app/components/SiteHeader.tsx

@@ -14,7 +14,8 @@ 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 { cropMatchedText, highlightParts, noResultsText } from "../../ui/garden/search-preview.mjs";
+import { resolveDark, themeSwitchProps } from "../../ui/garden/theme.mjs";
 import { createIdbStore, loadFullIndex, saveDataOn, whenIdleAfterLoad } from "../../ui/garden/search-full.mjs";
 import { siteConfig } from "../site.config";
 
@@ -187,14 +188,22 @@ export function SiteHeader() {
     });
   }, []);
 
+  // One theme for the desktop button and the mobile menu switch. Until the
+  // reader picks one, it follows the system, also when the system changes.
   useEffect(() => {
-    const stored = window.localStorage.getItem("theme");
-    const useDark =
-      stored === "dark" ||
-      (!stored && window.matchMedia("(prefers-color-scheme: dark)").matches);
-    document.documentElement.dataset.theme = useDark ? "dark" : "light";
-    const frame = window.requestAnimationFrame(() => setDark(useDark));
-    return () => window.cancelAnimationFrame(frame);
+    const system = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => {
+      const stored = window.localStorage.getItem("theme");
+      const useDark = resolveDark(stored, system.matches);
+      document.documentElement.dataset.theme = useDark ? "dark" : "light";
+      setDark(useDark);
+    };
+    const frame = window.requestAnimationFrame(apply);
+    system.addEventListener("change", apply);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      system.removeEventListener("change", apply);
+    };
   }, []);
 
   useEffect(() => {
@@ -351,6 +360,10 @@ export function SiteHeader() {
               {item.label}
             </Link>
           ))}
+          <button className="sh-menu-theme" {...themeSwitchProps(dark, toggleTheme)}>
+            <span>深色模式</span>
+            <span className="sh-switch" aria-hidden="true" />
+          </button>
         </nav>
       </header>
 
@@ -404,9 +417,11 @@ export function SiteHeader() {
               role="listbox"
               aria-label="搜索结果"
             >
-              <p className="search-label">
-                {query ? `${resultTotal} 篇相关文章` : "最近内容"}
-              </p>
+              {query && engine && resultTotal === 0 ? null : (
+                <p className="search-label">
+                  {query ? `${resultTotal} 篇相关文章` : "最近内容"}
+                </p>
+              )}
               {results.map((result, index) => {
                 const preview = searchPreview(result.item, result.matches);
                 return (
@@ -445,7 +460,8 @@ export function SiteHeader() {
               })}
               {results.length === 0 && (
                 <p className="empty-state">
-                  {engine ? "没有找到，换个更宽松的关键词试试。" : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
+                  {/* The query is a React text child, so it is escaped. */}
+                  {engine ? noResultsText(query) : engineFailed ? "搜索暂时打不开，请稍后再试。" : "正在载入…"}
                 </p>
               )}
             </div>

package/app/globals.css

@@ -3730,6 +3730,12 @@ html[data-theme="dark"] .search-panel {
   color: var(--muted);
   font-size: var(--fs-small);
   text-align: center;
+  overflow-wrap: anywhere;
+}
+
+/* No results: the one line sits in the middle of the list area. */
+.search-results:has(> .empty-state:only-child) {
+  align-content: center;
 }
 
 .search-footer {

package/app/styles/shell.css

@@ -68,7 +68,7 @@ html[data-mod="other"] .sh-search .kbd-other{display:inline}
 .i-sun,html[data-theme="dark"] .i-moon{display:none}
 html[data-theme="dark"] .i-sun{display:inline}
 /* No JavaScript: the theme cannot be switched, the page follows the system (build/dark-fallback-postcss.mjs). */
-@media (scripting:none){.sh-theme{display:none}}
+@media (scripting:none){.sh-theme,.sh-menu-theme{display:none}}
 .sh-menu{display:none}
 
 /* ---------- page frame ---------- */
@@ -272,8 +272,13 @@ html[data-theme="dark"] .sh-pal-scrim{background:rgba(0,0,0,.55)}
   .sh-menu.is-open{opacity:1;transform:none;visibility:visible;transition:opacity .18s ease,transform .18s var(--ease)}
   .sh-menu a{display:flex;align-items:center;min-height:52px;font-size:var(--fs-lead);color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
   .sh-menu a[aria-current="page"],.sh-menu a[aria-current="true"]{color:var(--blue);font-weight:600}
-  .sh-menu .theme-row{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:15px;color:var(--soft)}
-  .sh-menu .theme-row button{font:400 15px/1 var(--sans);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:0 14px;min-height:40px;cursor:pointer}
+  /* Theme switch at the bottom of the menu: the same toggle as the desktop button. */
+  .sh-menu a:last-of-type{border-bottom:0}
+  .sh-menu-theme{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin-top:8px;padding:0;border:0;border-top:1px solid var(--rule);background:none;font:400 var(--fs-body)/1 var(--sans);color:var(--text);cursor:pointer;text-align:left}
+  .sh-switch{position:relative;flex:none;width:40px;height:24px;border-radius:12px;background:var(--rule-strong);transition:background-color .18s ease}
+  .sh-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgb(20 20 19 / 18%);transition:transform .18s var(--ease)}
+  .sh-menu-theme[aria-checked="true"] .sh-switch{background:var(--ink)}
+  .sh-menu-theme[aria-checked="true"] .sh-switch::after{transform:translateX(16px);background:var(--paper)}
   .sh-theme{display:none}
   .sh-main{padding:0 20px}
   .sh-head{padding:40px 0 24px}

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

@@ -7,8 +7,27 @@
 // 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.
+//
+// Static hosts do not know the .rsc extension either: GitHub Pages serves it as
+// application/octet-stream, and vinext only accepts text/x-component, so every
+// client navigation fell back to a full page load, aimed at the payload URL
+// minus ".rsc" (for home that is "/index"). In the browser navigation code the
+// export also accepts application/octet-stream, and a fallback to "/index"
+// goes to "/". Only a 2xx response with a body counts: vinext's own
+// `!navResponse.ok` check stays in front, and the build stops if it is gone.
+//
+// Rewrites vinext 0.0.50. Remove this plugin once vinext fixes it upstream
+// (draft issue: /workspace/dev/vinext-issue.md); a vinext whose code no longer
+// matches stops the build.
 
 const TARGET = /[\\/]vinext[\\/]dist[\\/]server[\\/]app-rsc-cache-busting\.js$/u;
+const NAVIGATION = /[\\/]vinext[\\/]dist[\\/]server[\\/]app-browser-entry\.js$/u;
+const RSC_CHECK = 'const isRscResponse = (navResponse.headers.get("content-type") ?? "").startsWith("text/x-component");';
+const RSC_CHECK_EXPORTED = 'const isRscResponse = /^(text\\/x-component|application\\/octet-stream)/.test(navResponse.headers.get("content-type") ?? "");';
+const FALLBACK = "let pathname = stripRscSuffix(parsed.pathname);";
+// Must stay: any non-2xx response is a failure whatever its content-type.
+const FAILURE = "if (!navResponse.ok || !isRscResponse || !navResponse.body) {";
+const FALLBACK_EXPORTED = 'let pathname = stripRscSuffix(parsed.pathname); if (pathname === "/index") pathname = "/";';
 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}`;";
 
@@ -20,21 +39,39 @@ export function exportRscAddress(code, id = "app-rsc-cache-busting.js") {
   return code.replace(ADDRESS, EXPORTED);
 }
 
+/** Rewrite vinext's client navigation for static hosts; throws if vinext changed shape. */
+export function exportNavigation(code, id = "app-browser-entry.js") {
+  for (const needle of [RSC_CHECK, FALLBACK, FAILURE]) {
+    if (code.split(needle).length !== 2) {
+      throw new Error(`garden static RSC path: could not find \`${needle}\` exactly once in ${id}. vinext changed; update build/static-rsc-path-plugin.mjs (or remove it if vinext fixed static hosting).`);
+    }
+  }
+  return code.replace(RSC_CHECK, RSC_CHECK_EXPORTED).replace(FALLBACK, FALLBACK_EXPORTED);
+}
+
 export default function staticRscPath({ enabled = process.env.STATIC_EXPORT === "1" } = {}) {
-  let seen = false;
+  const seen = new Set();
   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 };
+      if (!enabled || this.environment?.name !== "client") return null;
+      const file = id.split("?")[0];
+      if (TARGET.test(file)) {
+        seen.add("address");
+        return { code: exportRscAddress(code, id), map: null };
+      }
+      if (NAVIGATION.test(file)) {
+        seen.add("navigation");
+        return { code: exportNavigation(code, id), map: null };
+      }
+      return 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.");
+      if (enabled && !error && this.environment?.name === "client" && seen.size < 2) {
+        this.error("garden static RSC path: vinext's app-rsc-cache-busting.js or app-browser-entry.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.12",
+  "version": "0.5.13",
   "private": false,
   "description": "用 Markdown 写作、用 GitHub Pages 发布的个人博客引擎。",
   "license": "MIT",

package/ui/garden/search-preview.mjs

@@ -67,3 +67,9 @@ export function highlightParts(text, ranges) {
   if (cursor < text.length) parts.push({ text: text.slice(cursor), matched: false });
   return parts;
 }
+
+/** The one line shown when a search finds nothing. Render it as text (React escapes it). */
+export function noResultsText(query) {
+  const value = String(query ?? "").trim();
+  return value ? `没有找到和「${value}」相关的文章` : "还没有可以搜索的内容";
+}

package/ui/garden/theme.mjs

@@ -0,0 +1,15 @@
+// Theme logic shared by the desktop button and the mobile menu switch.
+
+/** Dark when the reader chose dark, or chose nothing and the system is dark. */
+export function resolveDark(stored, systemDark) {
+  return stored === "dark" || (!stored && Boolean(systemDark));
+}
+
+/**
+ * Props for the menu's 「深色模式」 row: a native button, so the whole row is
+ * clickable and Space and Enter toggle it; role="switch" with aria-checked
+ * taken from the same state on every render.
+ */
+export function themeSwitchProps(dark, onToggle) {
+  return { type: "button", role: "switch", "aria-checked": Boolean(dark), onClick: onToggle };
+}