Adding routing and stub about page

.gitignore

@@ -7,3 +7,5 @@ result-*
 .direnv
 
 /client/node_modules
+/client/.parcel-cache/
+/client/dist/

client/package-lock.json

@@ -9,12 +9,13 @@
             "version": "0.0.0",
             "dependencies": {
                 "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+                "react-dom": "^19.1.0",
+                "react-router": "^7.12.0"
             },
             "devDependencies": {
                 "@types/react": "^19.0.0",
                 "@types/react-dom": "^19.0.0",
-        "parcel": "^2.14.0"
+                "parcel": "^2.16.3"
             }
         },
         "node_modules/@lezer/common": {
@@ -352,6 +353,7 @@
             "integrity": "sha512-b9ll4jaFYfXSv6NZAOJ2P0uuyT/Doel7ho2AHLSUz2thtcL6HEb2+qdV2f9wriVvbEoPAj9VuSOgNc0t0f5iMw==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@mischnic/json-sourcemap": "^0.1.1",
                 "@parcel/cache": "2.16.3",
@@ -2132,6 +2134,7 @@
             "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "csstype": "^3.2.2"
             }
@@ -2215,6 +2218,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.9.0",
                 "caniuse-lite": "^1.0.30001759",
@@ -2230,9 +2234,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-      "version": "1.0.30001763",
+            "version": "1.0.30001764",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001763.tgz",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
-      "integrity": "sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ==",
+            "integrity": "sha512-9JGuzl2M+vPL+pz70gtMF9sHdMFbY9FJaQBi186cHKH3pSzDvzoUJUPV6fqiKIMyXbud9ZLg4F3Yza1vJ1+93g==",
             "dev": true,
             "funding": [
                 {
@@ -2317,6 +2321,19 @@
                 "node": ">=18"
             }
         },
+        "node_modules/cookie": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+            "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/express"
+            }
+        },
         "node_modules/csstype": {
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -2975,6 +2992,7 @@
             "resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
             "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -2984,6 +3002,7 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
             "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "scheduler": "^0.27.0"
             },
@@ -3001,6 +3020,28 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-router": {
+            "version": "7.12.0",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
+            "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
+            "license": "MIT",
+            "dependencies": {
+                "cookie": "^1.0.1",
+                "set-cookie-parser": "^2.6.0"
+            },
+            "engines": {
+                "node": ">=20.0.0"
+            },
+            "peerDependencies": {
+                "react": ">=18",
+                "react-dom": ">=18"
+            },
+            "peerDependenciesMeta": {
+                "react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/regenerator-runtime": {
             "version": "0.14.1",
             "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -3048,6 +3089,12 @@
                 "node": ">=10"
             }
         },
+        "node_modules/set-cookie-parser": {
+            "version": "2.7.2",
+            "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+            "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+            "license": "MIT"
+        },
         "node_modules/supports-color": {
             "version": "7.2.0",
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

client/package.json

@@ -9,11 +9,12 @@
     },
     "dependencies": {
         "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-router": "^7.12.0"
     },
     "devDependencies": {
         "@types/react": "^19.0.0",
         "@types/react-dom": "^19.0.0",
-    "parcel": "^2.14.0"
+        "parcel": "^2.16.3"
     }
 }

client/src/App.css

@@ -4,5 +4,9 @@ html {
     display: flex;
     align-items: center;
     justify-content: center;
-  height: 100%;
+}
+
+body {
+    height: 100%;
+    width: 100%;
 }

client/src/App.tsx

@@ -1,10 +1,15 @@
-import './App.css';
+import "/src/App.css";
+import { About } from "./pages/about";
+import { Root } from "./pages/root";
+import { BrowserRouter, Route, Routes } from "react-router";
 
 export function App() {
   return (
-    <>
+    <BrowserRouter>
-      <h1>Parcel React App</h1>
+      <Routes>
-      <p>Edit <code>src/App.tsx</code> to get started!</p>
+        <Route path="/" element={<Root />} />
-    </>
+        <Route path="/about" element={<About />} />
+      </Routes>
+    </BrowserRouter>
   );
 }

client/src/components/header/header.css

@@ -0,0 +1,27 @@
+header {
+    border-color: #c6a0f6;
+    border-width: 2px;
+    border-style: solid;
+
+    position: sticky top;
+}
+
+nav {
+    padding: 0.25rem;
+    li {
+        display: inline-block;
+        list-style-type: none;
+        padding: 0.25rem;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0.25rem;
+    }
+
+    a {
+        color: #cad3f5;
+        text-decoration: none;
+        font-weight: bold;
+    }
+}

client/src/components/header/index.tsx

@@ -0,0 +1,14 @@
+import "./header.css";
+import { Nav } from "./nav";
+
+export function Header() {
+  return (
+    <header>
+      <div id="hd-left" className="header-section">
+        <Nav />
+      </div>
+      <div id="hd-middle" className="header-section"></div>
+      <div id="hd-right" className="header-section"></div>
+    </header>
+  );
+}

client/src/components/header/nav.tsx

@@ -0,0 +1,17 @@
+import { Link } from "react-router";
+import "./header.css";
+
+export function Nav() {
+  return (
+    <nav>
+      <ul>
+        <li>
+          <Link to="/">Home</Link>
+        </li>
+        <li>
+          <Link to="/about">About</Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}

client/src/pages/about.tsx

@@ -0,0 +1,16 @@
+import { Header } from "/src/components/header";
+import "/src/App.css";
+
+export function About() {
+  return (
+    <>
+      <Header />
+      <h1>About Starve Me Now!</h1>
+      <p>
+        Firstly, this is intended for those who have a starvation/diet control
+        fetish. This is <b>not</b> intended to help with weight loss or similar
+        reasons to fast.
+      </p>
+    </>
+  );
+}

client/src/pages/root.tsx

@@ -0,0 +1,14 @@
+import { Header } from "/src/components/header";
+import "/src/App.css";
+
+export function Root() {
+  return (
+    <>
+      <Header />
+      <h1>Starve Me Now!</h1>
+      <p>
+        Edit <code>src/App.tsx</code> to get started!
+      </p>
+    </>
+  );
+}

flake.nix

@@ -29,6 +29,7 @@
               nodejs_24
               typescript
               typescript-language-server
+              prettier
             ];
           };
         };