Lead the README with a walkthrough clip and link GitHub from the app

README.md

@@ -9,6 +9,8 @@ and every call is a door.
 
 ![Inside main(): the call room, with the if/else lanes ahead behind their tinted door frames](docs/media/hero.jpg)
 
+![Walking a codebase: the world map of this repository, then into main(), its if fork and a call door](docs/media/walkthrough.webp)
+
 Paste the URL of any public JavaScript or TypeScript repository on GitHub, or
 walk a local folder. The code is parsed in your browser tab, and a folder is
 never uploaded. Once a repository is open, the address bar is its share link,

apps/web/src/hud.test.tsx

@@ -39,4 +39,10 @@ describe("Hud", () => {
     expect(render(false)).toContain('href="/"');
     expect(render(true)).not.toContain('href="/"');
   });
+
+  it("links the GitHub repository only while the pointer is free", () => {
+    const github = 'href="https://github.com/valuecodes/code-backrooms"';
+    expect(render(false)).toContain(github);
+    expect(render(true)).not.toContain(github);
+  });
 });

apps/web/src/hud.tsx

@@ -1,5 +1,6 @@
 import type { Quality } from "@repo/renderer/effects";
 
+import { SourceLink } from "~/source-link";
 import type { ZoneProgress } from "~/use-area-world";
 
 type HudProps = {
@@ -179,6 +180,7 @@ const Hud = ({
           </div>
         ))}
       </dl>
+      <SourceLink />
     </div>
   );
 };

apps/web/src/landing.test.tsx

@@ -45,6 +45,15 @@ describe("LandingView", () => {
 
   const GITHUB = { url: "", valid: false, ready: false };
 
+  it("links this project's GitHub repository in a new tab", () => {
+    // Still a live link while a read runs: it leaves the app.
+    const html = render({ reading: "reading…" });
+    expect(html).toContain(
+      'href="https://github.com/valuecodes/code-backrooms" target="_blank" rel="noreferrer"'
+    );
+    expect(html).toContain('aria-label="Code Backrooms on GitHub"');
+  });
+
   it("offers no zip picker, and one folder picker either way", () => {
     for (const html of [render(), render({ github: GITHUB })]) {
       expect(html).not.toContain(".zip");
@@ -68,7 +77,7 @@ describe("LandingView", () => {
     const html = render({ reading: "reading my-repo…" });
     expect(html).toContain("reading my-repo…");
     expect(html.match(/<input[^>]*disabled=""/g)).toHaveLength(1);
-    expect(html).not.toContain("href=");
+    expect(html).not.toContain('href="?');
   });
 
   it("darkens the backdrop while reading instead of dropping it", () => {
@@ -80,7 +89,7 @@ describe("LandingView", () => {
   });
 
   it("draws a backdrop behind the page, hidden from screen readers", () => {
-    expect(render()).not.toContain("aria-hidden");
+    expect(render()).not.toContain("-z-10");
     const html = render({ backdrop: <canvas id="drift" /> });
     expect(html).toMatch(
       /<div aria-hidden="true" class="absolute inset-0 -z-10"><canvas id="drift"><\/canvas>/

apps/web/src/landing.tsx

@@ -17,6 +17,7 @@ import { GitHubForm } from "~/github-form";
 import type { GitHubField } from "~/github-form";
 import { gitHubPath, parseGitHubUrl } from "~/github-url";
 import { createReadGuard, folderLabel, readErrorMessage } from "~/local-reads";
+import { SourceLink } from "~/source-link";
 import { searchOfRepo } from "~/source-request";
 import type { SourceRequest } from "~/source-request";
 import { TurnstileCheck, turnstileSiteKey } from "~/turnstile";
@@ -240,6 +241,7 @@ const LandingView = ({
         </p>
       </div>
       <p className="text-xs text-amber-100/50">{HINTS}</p>
+      <SourceLink />
     </main>
   );
 };

apps/web/src/source-link.tsx

@@ -0,0 +1,28 @@
+import type { MouseEvent } from "react";
+
+const SOURCE_URL = "https://github.com/valuecodes/code-backrooms";
+
+// PointerLockControls locks the pointer on any click that reaches the
+// document: opening the repository must not also start walking.
+const keepClick = (event: MouseEvent) => {
+  event.stopPropagation();
+};
+
+/** This project on GitHub, as a button under a page's key list. */
+const SourceLink = () => (
+  <a
+    href={SOURCE_URL}
+    target="_blank"
+    rel="noreferrer"
+    aria-label="Code Backrooms on GitHub"
+    onClick={keepClick}
+    className="pointer-events-auto flex items-center gap-2 rounded bg-amber-100/15 px-4 py-1.5 text-sm text-amber-50 hover:bg-amber-100/25"
+  >
+    <svg aria-hidden viewBox="0 0 16 16" className="size-4" fill="currentColor">
+      <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" />
+    </svg>
+    GitHub
+  </a>
+);
+
+export { SourceLink };