Merge pull request #15 from coder/cat/site-404-fix

fix(site): restore SPA path before router boots so 404 page renders

Author: DevelopmentCats

site/index.html

@@ -10,6 +10,31 @@
     />
     <title>Coder Skill Scanner</title>
 
+    <script>
+      // Restore the SPA path captured by public/404.html before main.tsx loads,
+      // so the router sees the original path and can render its 404 route.
+      (function () {
+        var url = new URL(window.location.href);
+        var p = url.searchParams.get("p");
+        // Only restore same-origin relative paths so a crafted ?p= can't try
+        // to replace the visible origin (replaceState would throw anyway).
+        if (!p || p[0] !== "/" || p[1] === "/") return;
+        url.searchParams.delete("p");
+        // Parse `p` through URL so its own query/hash compose cleanly with
+        // whatever extra params or hash were on the bounce URL.
+        var restored = new URL(p, window.location.origin);
+        url.searchParams.forEach(function (value, key) {
+          restored.searchParams.append(key, value);
+        });
+        if (!restored.hash) restored.hash = url.hash;
+        window.history.replaceState(
+          null,
+          "",
+          restored.pathname + restored.search + restored.hash,
+        );
+      })();
+    </script>
+
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link

site/public/404.html

@@ -6,7 +6,7 @@
     <script>
       // GitHub Pages SPA fallback: capture the original path in a query
       // parameter and bounce to the SPA index, which restores it before
-      // React Router boots. See site/src/main.tsx for the restore step.
+      // React Router boots. See site/index.html for the restore step.
       //
       // `%BASE_URL%` is substituted at build time by the
       // `rewrite-public-base-url` Vite plugin (see site/vite.config.ts),

site/src/main.tsx

@@ -2,13 +2,8 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { App } from "./App";
 
-// Restore SPA path captured by public/404.html (GitHub Pages deep-link trick).
-const url = new URL(window.location.href);
-const original = url.searchParams.get("p");
-if (original) {
-  url.searchParams.delete("p");
-  window.history.replaceState(null, "", original + url.search + url.hash);
-}
+// Note: the `?p=...` query param emitted by public/404.html is restored
+// by the inline script in index.html so the router sees the original path.
 
 const appRoot = document.getElementById("root");
 if (appRoot === null) {

site/src/pages/NotFoundPage.tsx

@@ -1,27 +1,48 @@
 import type { FC } from "react";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { usePageTitle } from "../lib/usePageTitle";
 
 export const NotFoundPage: FC = () => {
+  const { pathname } = useLocation();
   usePageTitle("not found");
   return (
-    <div className="mx-auto max-w-md rounded-lg border border-coder-smoke bg-coder-cinder p-8 text-center">
-      <div className="font-mono text-5xl font-semibold text-coder-neutral-200">
+    <div className="mx-auto flex max-w-xl flex-col items-center gap-6 rounded-lg border border-coder-smoke bg-coder-cinder p-10 text-center">
+      <div className="font-mono text-7xl font-semibold tracking-tight text-coder-neutral-200">
         404
       </div>
-      <p className="mt-3 text-sm text-coder-neutral-400">
-        That path doesn&apos;t exist in this report.
-      </p>
-      <div className="mt-4 flex flex-col items-center gap-2 text-sm">
+      <div className="space-y-2">
+        <h1 className="text-xl font-semibold tracking-tight text-coder-neutral-100">
+          That page isn&apos;t part of this scan report.
+        </h1>
+        <p className="text-sm text-coder-neutral-400">
+          We couldn&apos;t find{" "}
+          <span className="rounded bg-coder-smoke/60 px-1.5 py-0.5 font-mono text-xs text-coder-neutral-200">
+            {pathname}
+          </span>
+          . It may have moved, been renamed, or never existed.
+        </p>
+      </div>
+      <div className="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-sm">
         <Link to="/" className="text-coder-sky hover:underline">
-          Back to the latest scan
+          Latest scan
         </Link>
-        <Link
-          to="/history"
-          className="text-xs text-coder-neutral-400 hover:text-coder-neutral-100"
-        >
-          or browse the scan history
+        <Link to="/history" className="text-coder-sky hover:underline">
+          Scan history
         </Link>
+        <a
+          href={`${import.meta.env.BASE_URL}latest.json`}
+          className="text-coder-sky hover:underline"
+        >
+          Raw JSON
+        </a>
+        <a
+          href="https://github.com/coder/coder-skill-scanner"
+          className="text-coder-sky hover:underline"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Source
+        </a>
       </div>
     </div>
   );