github pages grr cloudflare pages better

Precontation · Precontation · commit 39b7da1beee5 · 2026-01-21T23:52:57.000-08:00
diff --git a/404.html b/404.html
@@ -0,0 +1,20 @@
+<!-- This is for when GitHub pages is stupid -->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="refresh" content="0; url=/?redirect=%2F" />
+    <script>
+      const redirect = window.location.pathname;
+      const search = window.location.search;
+      const hash = window.location.hash;
+
+      const newUrl =
+        "/" + "?redirect=" + encodeURIComponent(redirect + search + hash);
+
+      window.location.replace(newUrl);
+    </script>
+    <title>Redirecting…</title>
+  </head>
+  <body></body>
+</html>
diff --git a/src/layout.tsx b/src/layout.tsx
@@ -1,12 +1,10 @@
 import { Outlet } from "react-router-dom";
-import SetColor from "./components/SetColor";
 import SwitcherLink from "./components/SwitcherLink";
 
 export default function Layout() {
   return (
     <body className="antialiased flex flex-col min-h-screen align-middle">
       <div className="flex flex-col min-h-dvh">
-        <SetColor />
         <header className="backdrop-blur-3xl border-b sticky top-0 min-w-full z-100">
           <nav className="flex gap-10 h-10 justify-center">
             <SwitcherLink to="" name="Home"></SwitcherLink>
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,17 +1,20 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import SetColor from "./components/SetColor";
 import "./index.css";
 import Layout from "./layout";
 import Home from "./pages";
 import About from "./pages/about";
 import ActualAbout from "./pages/aboutActual";
+import ErrorPage from "./pages/error";
 import Games from "./pages/games";
 
 const routes = [
   {
     path: "/",
     element: <Layout />,
+    errorElement: <ErrorPage />,
     children: [
       {
         index: true,
@@ -38,6 +41,7 @@ const router = createBrowserRouter(routes, {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
+    <SetColor />
     <RouterProvider router={router} />
   </StrictMode>,
 );
diff --git a/src/pages/error.tsx b/src/pages/error.tsx
@@ -0,0 +1,54 @@
+import { isRouteErrorResponse, useRouteError } from "react-router";
+
+const ErrorPage = () => {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    return (
+      <div className="flex flex-col items-center gap-5 h-dvh place-content-center">
+        <h1 className="justify-center text-7xl w-fit text-primary overflow-hidden font-fancy">
+          {error.status} {error.statusText}
+        </h1>
+        <h2 className="justify-center text-3xl w-fit text-secondary overflow-clip font-semifancy">
+          Uh oh!
+        </h2>
+        <h2 className="justify-center text-3xl w-fit text-secondary overflow-clip font-semifancy">
+          Developer info: {error.data}
+        </h2>
+      </div>
+    );
+  } else if (error instanceof Error) {
+    return (
+      <div className="flex flex-col items-center gap-5 h-dvh place-content-center">
+        <h1 className="justify-center text-7xl w-fit text-primary overflow-hidden font-fancy">
+          Error!
+        </h1>
+        <h2 className="justify-center text-3xl w-fit text-secondary overflow-clip font-semifancy">
+          Uh oh!
+        </h2>
+        <h2 className="justify-center text-3xl w-fit text-secondary overflow-clip font-semifancy">
+          {error.message}
+        </h2>
+        <br />
+
+        <h2 className="justify-center text-3xl w-fit text-secondary overflow-clip font-semifancy">
+          Developer info:
+        </h2>
+        <pre>{error.stack}</pre>
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex flex-col items-center gap-5 h-dvh place-content-center">
+        <h1 className="justify-center text-7xl w-fit text-primary overflow-hidden font-fancy">
+          Unknown error!
+        </h1>
+        <h2 className="justify-center text-3xl w-fit text-secondary overflow-clip font-semifancy">
+          Uh oh!
+        </h2>
+      </div>
+    );
+  }
+};
+
+export default ErrorPage;
