Add routing

This commit is contained in:
2025-02-17 21:23:38 +01:00
parent b6c7edecfd
commit 1cbcb8ce4c
11 changed files with 119 additions and 5 deletions
+53 -1
View File
@@ -9,7 +9,8 @@
"version": "0.0.0",
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react-dom": "^18.3.1",
"react-router": "^7.1.5"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
@@ -1190,6 +1191,12 @@
"@swc/counter": "^0.1.3"
}
},
"node_modules/@types/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
"license": "MIT"
},
"node_modules/@types/estree": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
@@ -1814,6 +1821,15 @@
"dev": true,
"license": "MIT"
},
"node_modules/cookie": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
"license": "MIT",
"engines": {
"node": ">=18"
}
},
"node_modules/cross-spawn": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3911,6 +3927,30 @@
"dev": true,
"license": "MIT"
},
"node_modules/react-router": {
"version": "7.1.5",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
"integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==",
"license": "MIT",
"dependencies": {
"@types/cookie": "^0.6.0",
"cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0",
"turbo-stream": "2.4.0"
},
"engines": {
"node": ">=20.0.0"
},
"peerDependencies": {
"react": ">=18",
"react-dom": ">=18"
},
"peerDependenciesMeta": {
"react-dom": {
"optional": true
}
}
},
"node_modules/reflect.getprototypeof": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -4129,6 +4169,12 @@
"semver": "bin/semver.js"
}
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
"integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
"license": "MIT"
},
"node_modules/set-function-length": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -4495,6 +4541,12 @@
"dev": true,
"license": "0BSD"
},
"node_modules/turbo-stream": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
"integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
"license": "ISC"
},
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+2 -1
View File
@@ -12,7 +12,8 @@
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
"react-dom": "^18.3.1",
"react-router": "^7.1.5"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
+13 -1
View File
@@ -1,7 +1,19 @@
import { Route, Routes } from 'react-router';
import Home from 'pages/Home';
import Languages from 'pages/Languages';
import Typing from 'pages/Typing';
import NotFound from 'pages/NotFound';
function App() {
return <Typing />;
return (
<Routes>
<Route index element={<Home />} />
<Route path='languages' element={<Languages />} />
<Route path='typing/:lang' element={<Typing />} />
<Route path='*' element={<NotFound />} />
</Routes>
);
}
export default App;
+6 -1
View File
@@ -1,8 +1,13 @@
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router';
import App from './App.tsx';
import './index.css';
// TODO: Bring back strict mode when building and deploying
createRoot(document.getElementById('root')).render(<App />);
createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
);
+3
View File
@@ -0,0 +1,3 @@
.container {
text-align: left;
}
+11
View File
@@ -0,0 +1,11 @@
import './index.css';
function Home() {
return (
<div className='container'>
<h1>Home</h1>
</div>
);
}
export default Home;
+3
View File
@@ -0,0 +1,3 @@
.container {
text-align: left;
}
+11
View File
@@ -0,0 +1,11 @@
import './index.css';
function Languages() {
return (
<div className='container'>
<h1>Languages</h1>
</div>
);
}
export default Languages;
+3
View File
@@ -0,0 +1,3 @@
.container {
text-align: left;
}
+11
View File
@@ -0,0 +1,11 @@
import './index.css';
function NotFound() {
return (
<div className='container'>
<h1>Not Found</h1>
</div>
);
}
export default NotFound;
+3 -1
View File
@@ -6,8 +6,10 @@ import Code from 'components/Code';
import Stats from 'components/Stats';
import './index.css';
import { useParams } from 'react-router';
function Typing() {
const {lang} = useParams();
const [code, setCode] = useState<string>('');
const [loaded, setLoaded] = useState<boolean>(false);
@@ -16,7 +18,7 @@ function Typing() {
setCode('');
const response = await fetch(
`${import.meta.env.VITE_API_URL}/generate?lang=lisp`,
`${import.meta.env.VITE_API_URL}/generate?lang=${lang}`,
);
if (!response.ok || !response.body) return;