T45a Site · Stack: reloads open in the current mode, the first paint keeps the system's, plain route changes

frontend/index.html

@@ -4,10 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Ely · GPUI components</title>
-    <meta name="description" content="A component library for GPUI, in light and dark. Every component runs live in the browser." />
+    <meta name="description" content="A component library for GPUI, in light and dark. Its stories run live in the browser, or as native captures where a browser cannot run them." />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="Ely · GPUI components" />
-    <meta property="og:description" content="A component library for GPUI. Every part runs live in the browser, compiled from Rust to WebAssembly." />
+    <meta property="og:description" content="A component library for GPUI, its stories live in the browser, compiled from Rust to WebAssembly." />
     <meta property="og:image" content="https://ely-site.zhangyanghaha0407.workers.dev/og.png" />
     <meta property="og:image:width" content="2400" />
     <meta property="og:image:height" content="1260" />
@@ -15,11 +15,14 @@
     <meta name="twitter:image" content="https://ely-site.zhangyanghaha0407.workers.dev/og.png" />
     <script>
       // The saved mode, or the system's, before first paint.
+      let saved = null;
       try {
-        const saved = localStorage.getItem("ely-theme");
-        const dark = saved ? saved === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
-        document.documentElement.classList.toggle("dark", dark);
-      } catch {}
+        saved = localStorage.getItem("ely-theme");
+      } catch (error) {
+        console.warn("theme: no saved mode", error);
+      }
+      const dark = saved ? saved === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
+      document.documentElement.classList.toggle("dark", dark);
     </script>
   </head>
   <body>

frontend/src/Live.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Icon } from "./icons";
 import { mode, useMode } from "./theme";
 
@@ -14,7 +14,8 @@ export function Live({ page, story, title }: { page: string; story: string; titl
   const [state, setState] = useState<State>("starting");
   const [full, setFull] = useState(false);
   const [run, setRun] = useState(0);
-  const [start] = useState(mode);
+  // Each new frame opens in the mode the site has then.
+  const start = useMemo(() => mode(), [run]);
   const src = (t: string) => `/gallery/?page=${page}&story=${story}&theme=${t}`;
 
   useEffect(() => {

frontend/src/data.ts

@@ -16,8 +16,6 @@ export interface Chapter {
 
 export const chapters: Chapter[] = manifest.pages;
 
-export const storyCount = chapters.reduce((sum, chapter) => sum + chapter.stories.length, 0);
-
 export const componentCount = new Set(chapters.flatMap((c) => c.stories.flatMap((s) => s.components))).size;
 
 /** Every story in reading order, for paging and search. */

frontend/src/icons.tsx

@@ -1,16 +1,11 @@
-import ArrowLeft from "reicon/icons/ArrowLeft";
-import ArrowRight from "reicon/icons/ArrowRight";
 import ArrowRightUp from "reicon/icons/ArrowRightUp";
 import Maximize from "reicon/icons/Maximize";
 import Minimize from "reicon/icons/Minimize";
 import Moon from "reicon/icons/Moon";
 import Refresh from "reicon/icons/Refresh";
-import Search from "reicon/icons/Search";
-import Sound from "reicon/icons/Sound";
 import Sun from "reicon/icons/Sun";
-import VolumeCross from "reicon/icons/VolumeCross";
 
-const set = { ArrowLeft, ArrowRight, ArrowRightUp, Maximize, Minimize, Moon, Refresh, Search, Sound, Sun, VolumeCross };
+const set = { ArrowRightUp, Maximize, Minimize, Moon, Refresh, Sun };
 
 // simple-icons' GitHub mark (CC0); Reicon has none.
 const GITHUB =

frontend/src/main.tsx

@@ -29,7 +29,6 @@ const router = createRouter({
   routeTree: root.addChildren([home, index, chapter, story]),
   trailingSlash: "always",
   scrollRestoration: true,
-  defaultViewTransition: true,
 });
 
 declare module "@tanstack/react-router" {

frontend/src/styles.css

@@ -115,5 +115,4 @@ img.shot { display: block; max-width: 100%; height: auto; }
 
 @media (prefers-reduced-motion: reduce) {
   * { transition: none !important; animation: none !important; }
-  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
 }