Adding routing and stub about page

This commit is contained in:
April Eaton 2026-01-11 19:51:08 +01:00
parent 61b1b3372b
commit c78c61ac49
Signed by: AprilEaton
GPG key ID: 0BCF829D48AE5C9D
11 changed files with 3331 additions and 3183 deletions

2
.gitignore vendored
View file

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

View file

@ -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",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001763.tgz",
"integrity": "sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ==",
"version": "1.0.30001764",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001764.tgz",
"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",

View file

@ -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"
}
}

View file

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

View file

@ -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 (
<>
<h1>Parcel React App</h1>
<p>Edit <code>src/App.tsx</code> to get started!</p>
</>
<BrowserRouter>
<Routes>
<Route path="/" element={<Root />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}

View file

@ -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;
}
}

View file

@ -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>
);
}

View file

@ -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>
);
}

View file

@ -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>
</>
);
}

14
client/src/pages/root.tsx Normal file
View file

@ -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>
</>
);
}

View file

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