Adding routing and stub about page
This commit is contained in:
parent
61b1b3372b
commit
c78c61ac49
11 changed files with 3331 additions and 3183 deletions
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -7,3 +7,5 @@ result-*
|
|||
.direnv
|
||||
|
||||
/client/node_modules
|
||||
/client/.parcel-cache/
|
||||
/client/dist/
|
||||
|
|
|
|||
57
client/package-lock.json
generated
57
client/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,5 +4,9 @@ html {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
27
client/src/components/header/header.css
Normal file
27
client/src/components/header/header.css
Normal 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;
|
||||
}
|
||||
}
|
||||
14
client/src/components/header/index.tsx
Normal file
14
client/src/components/header/index.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
17
client/src/components/header/nav.tsx
Normal file
17
client/src/components/header/nav.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
16
client/src/pages/about.tsx
Normal file
16
client/src/pages/about.tsx
Normal 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
14
client/src/pages/root.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
nodejs_24
|
||||
typescript
|
||||
typescript-language-server
|
||||
prettier
|
||||
];
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue