Fix 404 github pages error

zahrabayatt · Nov 1, 2024 · 5afe6e5 · 5afe6e5
1 parent 9807586
commit 5afe6e5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -7,13 +7,29 @@
     <script>
       const colorMode = localStorage.getItem("colorMode");
       const prefersDark = window.matchMedia(
-        "(prefers-color-scheme: dark)"
+        "(prefers-color-scheme: dark)",
       ).matches;
 
       document.documentElement.classList.toggle(
         "dark",
-        colorMode === "dark" || (!colorMode && prefersDark)
+        colorMode === "dark" || (!colorMode && prefersDark),
       );
+      (function (l) {
+        if (l.search[1] === "/") {
+          var decoded = l.search
+            .slice(1)
+            .split("&")
+            .map(function (s) {
+              return s.replace(/~and~/g, "&");
+            })
+            .join("?");
+          window.history.replaceState(
+            null,
+            null,
+            l.pathname.slice(0, -1) + decoded + l.hash,
+          );
+        }
+      })(window.location);
     </script>
     <title>To Do App</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "to-do-app",
+  "homepage": "https://zahrabayatt.github.io/to-do-app/",
   "private": true,
   "version": "0.0.0",
   "type": "module",

diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>React Router</title>
+    <script type="text/javascript">
+      var pathSegmentsToKeep = 1;
+
+      var l = window.location;
+      l.replace(
+        l.protocol +
+          "//" +
+          l.hostname +
+          (l.port ? ":" + l.port : "") +
+          l.pathname
+            .split("/")
+            .slice(0, 1 + pathSegmentsToKeep)
+            .join("/") +
+          "/?/" +
+          l.pathname
+            .slice(1)
+            .split("/")
+            .slice(pathSegmentsToKeep)
+            .join("/")
+            .replace(/&/g, "~and~") +
+          (l.search ? "&" + l.search.slice(1).replace(/&/g, "~and~") : "") +
+          l.hash,
+      );
+    </script>
+  </head>
+  <body></body>
+</html>
diff --git a/src/router.tsx b/src/router.tsx
@@ -9,10 +9,10 @@ import TasksPage from "./pages/TasksPage";
 import CategoriesPage from "./pages/CategoriesPage";
 import TasksPageSearch from "./types/TasksPageSearch";
 
-// Root route that wraps everything
 const rootRoute = createRootRoute({
   component: Layout,
   errorComponent: ErrorPage,
+  notFoundComponent: ErrorPage,
 });
 
 const tasksRoute = createRoute({
@@ -32,17 +32,13 @@ const categoriesRoute = createRoute({
   component: CategoriesPage,
 });
 
-// Build the route tree
 const routeTree = rootRoute.addChildren([tasksRoute, categoriesRoute]);
 
-// Create the router instance
 const router = createRouter({
   routeTree: routeTree,
   basepath: import.meta.env.BASE_URL,
-  defaultNotFoundComponent: ErrorPage,
 });
 
-// Register the router type
 declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router;