Rebuild the github-pages template on the Remix SPA preview

Switch from a Service Worker fetch handler to the client-side SPA router
from remix-run/remix#11629: the router declares RouterTypes.output =
RemixNode so handlers return JSX, and the SPA component from remix/ui/spa
dispatches navigations and form submissions through the in-memory router.

Frames stay: the guest book page is a <Frame name="welcome"> shell whose
src resolves through the same router via createRoot's frameInit, with the
frame name carried as the x-remix-target request header. Frames only
re-resolve when their src changes, so the POST action stamps a freshness
token into the src; the sign form is keyed by entry count so submissions
mount a fresh form instead of morphing old values.

The worker entry, Document shell, render middleware, and @pitlane/dev
plugin are gone — the build is a plain Vite SPA (dist + 404.html).

pnpm plumbing for the preview build: allowBuilds only matches git-hosted
packages by exact resolved commit, so both workspace files pin the remix
prepare (true) and decline the prebuilt @remix-run/* scripts (false);
blockExoticSubdeps is disabled for the preview's git-tarball dependency
graph, and the deploy workflow stops CI's frozen-lockfile default from
leaking into the git checkout prepared during install.

Author: markmals

github-pages/.github/workflows/deploy.yml

@@ -27,11 +27,17 @@ jobs:
               with:
                   cache: true
 
+            # Remix installs from a preview build prepared out of a git
+            # checkout whose own lockfile is intentionally out of date; keep
+            # this app's install frozen via the CLI flag, but stop CI's
+            # frozen-lockfile default from leaking into that nested install.
             - run: vp install --frozen-lockfile
+              env:
+                  npm_config_frozen_lockfile: "false"
 
             # Project pages live under /<repo>/; delete BASE_PATH for user/org
             # pages (username.github.io) or a custom domain. The build task
-            # also stages sw.js and the SPA 404 fallback into dist/client.
+            # also stages the SPA 404 fallback into dist.
             - run: vp run build
               env:
                   BASE_PATH: /${{ github.event.repository.name }}/
@@ -40,7 +46,7 @@ jobs:
 
             - uses: actions/upload-pages-artifact@v3
               with:
-                  path: dist/client
+                  path: dist
 
             - id: deployment
               uses: actions/deploy-pages@v4

github-pages/README.md

@@ -1,10 +1,17 @@
 # Pitlane — GitHub Pages Template
 
-A [Remix 3](https://remix.run) guest book starter built with [`@pitlane/dev`](https://pitlane.tools/package/dev) that runs entirely in the browser: the Remix fetch router lives inside a Service Worker, and data persists locally in IndexedDB via [`idb-keyval`](https://github.com/jakearchibald/idb-keyval). Once built, it deploys as pure static files.
+A [Remix 3](https://remix.run) guest book starter that runs entirely in the browser: the Remix fetch router returns UI nodes directly — no server, no service worker, no HTTP — and the `SPA` component from `remix/ui/spa` renders them, intercepting navigations and form submissions. Frames resolve through the same in-memory router, and data persists locally in IndexedDB via [`idb-keyval`](https://github.com/jakearchibald/idb-keyval). Once built, it deploys as pure static files.
 
-| Runtime        | Package manager | Database                 | Deploys to                                  |
-| -------------- | --------------- | ------------------------ | ------------------------------------------- |
-| Service Worker | pnpm            | IndexedDB (`idb-keyval`) | [GitHub Pages](https://pages.github.com) |
+| Runtime       | Package manager | Database                 | Deploys to                               |
+| ------------- | --------------- | ------------------------ | ---------------------------------------- |
+| Browser (SPA) | pnpm            | IndexedDB (`idb-keyval`) | [GitHub Pages](https://pages.github.com) |
+
+> [!NOTE]
+> This template tracks a preview build of [remix-run/remix#11629](https://github.com/remix-run/remix/pull/11629)
+> (SPA routing with custom fetch router outputs). The `remix` dependency installs
+> straight from that PR's preview branch, and `pnpm-workspace.yaml` pins the
+> matching `allowBuilds` keys — pnpm only matches git-hosted packages by exact
+> commit, so regenerate those keys whenever the preview commit moves.
 
 ## Scaffold
 
@@ -35,16 +42,32 @@ vp install # install dependencies
 vp dev     # start the dev server
 ```
 
-There is no server and no server database: the router runs in a Service Worker, and
-every guest book entry is stored in the visitor's own browser through `AppStorage`
-([app/data/app-storage.ts](./app/data/app-storage.ts)), a small schema-validated
-KV layer over IndexedDB.
+## Architecture
+
+The router declares `RouterTypes.output = RemixNode`, so handlers return JSX
+instead of Responses ([app/router.tsx](./app/router.tsx)). The browser entry
+([app/entry.browser.tsx](./app/entry.browser.tsx)) renders an `SPA` component
+that dispatches every same-origin navigation and form submission through the
+router — POST submissions arrive as an in-memory `Request` complete with
+`FormData`.
+
+Frames work the same way they do on a server: the guest book page is a
+`<Frame name="welcome">` shell, and the frame's `src` resolves through the
+router with the frame name in the `x-remix-target` header
+([app/actions/guest-book.tsx](./app/actions/guest-book.tsx)). After a
+submission the action stamps a freshness token into the frame `src`, which is
+what tells the frame to re-resolve — old content stays visible until the new
+fragment lands.
+
+Guest book entries live in the visitor's own browser through `AppStorage`
+([app/data/app-storage.ts](./app/data/app-storage.ts)), a small
+schema-validated KV layer over IndexedDB.
 
 ## Commands
 
 ```sh
 vp dev              # dev server
-vp run build        # production build (static site in dist/client, incl. sw.js)
+vp run build        # production build (static site in dist, incl. 404.html)
 vp preview          # serve the production build
 vp check            # format, lint, and type-check
 vp run typecheck    # typecheck using tsc
@@ -59,10 +82,10 @@ Short version:
    **GitHub Actions**.
 2. Push to `main`. The [workflow](./.github/workflows/deploy.yml) builds with
    `BASE_PATH=/<repo>/` (so the app works at `username.github.io/<repo>/`), adds the
-   SPA `404.html` fallback, and uploads `dist/client` to Pages.
+   SPA `404.html` fallback, and uploads `dist` to Pages.
 
 Deploying to a **user/org page** (`username.github.io`) or a **custom domain**?
 Delete the `BASE_PATH` line from the workflow — the app then serves from `/`.
 
-The service worker registers at the configured base, routes navigations through the
-Remix router, and passes asset requests straight to the Pages CDN.
+GitHub Pages serves `404.html` (a copy of the app shell) for unknown routes, so
+deep links boot the SPA and the router renders the matching page client-side.

github-pages/app/actions/guest-book.tsx

@@ -1,26 +1,31 @@
-import { Document } from "#app/components/Document.tsx";
+import * as s from "remix/data-schema";
+import { createController } from "remix/router";
+import { Frame } from "remix/ui";
+
 import { Welcome } from "#app/components/Welcome.tsx";
 import { CreateGuestBookEntry, GuestBook } from "#app/data/schemas.ts";
 import { routes } from "#app/routes.ts";
-import * as s from "remix/data-schema";
-import { redirect } from "remix/response/redirect";
-import { createController } from "remix/router";
 
 export default createController(routes.guestBook, {
     actions: {
-        async index({ storage, headers, render, url }) {
-            let entries = await storage.getMany(GuestBook);
-
+        async index({ storage, headers, url }) {
             if (headers.get("x-remix-target") === "welcome") {
-                return render(<Welcome entries={entries} />);
+                let entries = await storage.getMany(GuestBook);
+                return <Welcome entries={entries} />;
             }
 
-            return render(<Document url={url} />);
+            return <Frame name="welcome" src={url.toString()} />;
         },
-        async action({ storage, formData }) {
+        async action({ storage, formData, url }) {
             let payload = s.parse(CreateGuestBookEntry, formData);
             await storage.set(GuestBook, payload);
-            return redirect(routes.guestBook.index.href());
+
+            // A frame only re-resolves when its src changes, so stamp the
+            // submission time into the src. The old content stays visible
+            // while the fresh guest book loads — no fallback flash.
+            let src = new URL(url);
+            src.searchParams.set("submitted", Date.now().toString());
+            return <Frame name="welcome" src={src.toString()} />;
         },
     },
 });

github-pages/app/components/CharacterCounter.tsx

@@ -1,10 +1,11 @@
-import { theme } from "#app/components/Theme.tsx";
-import { clientEntry, css, on } from "remix/ui";
+import { type Handle, css, on } from "remix/ui";
 import { inputStyle } from "remix/ui/combobox";
 
+import { theme } from "#app/components/Theme.tsx";
+
 const MAX_LENGTH = 280;
 
-export let CharacterCounter = clientEntry(import.meta.url, handle => {
+export function CharacterCounter(handle: Handle) {
     let count = 0;
 
     return () => {
@@ -58,4 +59,4 @@ export let CharacterCounter = clientEntry(import.meta.url, handle => {
             </div>
         );
     };
-});
+}

github-pages/app/components/Document.tsx

@@ -0,0 +1,34 @@
+import { css } from "remix/ui";
+
+import { theme } from "#app/components/Theme.tsx";
+import { routes } from "#app/routes.ts";
+
+export function NotFound() {
+    return () => (
+        <main
+            mix={css({
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: theme.space.lg,
+                minHeight: "100vh",
+                justifyContent: "center",
+                fontFamily: theme.fontFamily.sans,
+                color: theme.colors.text.primary,
+                padding: "4rem 1rem",
+            })}
+        >
+            <h1
+                mix={css({
+                    fontSize: theme.fontSize.xxl,
+                    fontWeight: theme.fontWeight.bold,
+                })}
+            >
+                Page not found
+            </h1>
+            <a href={routes.guestBook.index.href()} mix={css({ color: theme.colors.text.muted })}>
+                Back to the guest book
+            </a>
+        </main>
+    );
+}

github-pages/app/components/NotFound.tsx

@@ -1,11 +1,12 @@
+import { css, type Handle } from "remix/ui";
+import { button } from "remix/ui/button";
+import { inputStyle } from "remix/ui/combobox";
+
 import type { GuestBookEntry } from "#app/data/schemas.ts";
 
 import { CharacterCounter } from "#app/components/CharacterCounter.tsx";
 import { theme } from "#app/components/Theme.tsx";
 import { routes } from "#app/routes.ts";
-import { css, type Handle } from "remix/ui";
-import { button } from "remix/ui/button";
-import { inputStyle } from "remix/ui/combobox";
 
 export interface WelcomeProps {
     entries: GuestBookEntry[];
@@ -43,12 +44,12 @@ export function Welcome(handle: Handle<WelcomeProps>) {
                     <picture>
                         <source
                             media="(prefers-color-scheme: dark)"
-                            srcSet="/remix-3-logo-dark.svg"
+                            srcSet={import.meta.env.BASE_URL + "remix-3-logo-dark.svg"}
                         />
                         <img
                             alt="Remix 3"
                             mix={[css({ height: "2.5rem" })]}
-                            src="/remix-3-logo-light.svg"
+                            src={import.meta.env.BASE_URL + "remix-3-logo-light.svg"}
                         />
                     </picture>
                     <h1
@@ -158,8 +159,11 @@ export function Welcome(handle: Handle<WelcomeProps>) {
                         )}
                     </div>
 
+                    {/* Keyed by entry count so each submission mounts a fresh,
+                        empty form instead of morphing the previous values. */}
                     <form
                         action={routes.guestBook.action.href()}
+                        key={`sign-form-${entries.length}`}
                         method={routes.guestBook.action.method}
                         mix={[
                             css({
@@ -184,7 +188,6 @@ export function Welcome(handle: Handle<WelcomeProps>) {
                         <CharacterCounter />
                         <button
                             mix={[button({ tone: "primary" }), css({ alignSelf: "flex-end" })]}
-                            rmx-target="welcome"
                             type="submit"
                         >
                             Sign
@@ -208,7 +211,6 @@ function ResourceLink(handle: Handle<ResourceLinkProps>) {
         return (
             <a
                 href={href}
-                target="_blank"
                 mix={[
                     css({
                         color: theme.colors.text.link,
@@ -219,6 +221,7 @@ function ResourceLink(handle: Handle<ResourceLinkProps>) {
                         },
                     }),
                 ]}
+                target="_blank"
             >
                 {label}
             </a>