mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2024-12-28 02:16:07 +00:00
Add a router and some temporary pages
This commit is contained in:
parent
56bd273711
commit
677ef885cf
|
|
@ -2,7 +2,6 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>TastyBites</title>
|
||||
</head>
|
||||
|
|
|
|||
22
front/package-lock.json
generated
22
front/package-lock.json
generated
|
|
@ -7,6 +7,9 @@
|
|||
"": {
|
||||
"name": "front",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"svelte-spa-router": "^4.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"svelte": "^4.2.12",
|
||||
|
|
@ -958,6 +961,14 @@
|
|||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/regexparam": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
|
||||
"integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.14.3",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.3.tgz",
|
||||
|
|
@ -1039,6 +1050,17 @@
|
|||
"svelte": "^3.19.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-spa-router": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",
|
||||
"integrity": "sha512-2JkmUQ2f9jRluijL58LtdQBIpynSbem2eBGp4zXdi7aDY1znbR6yjw0KsonD0aq2QLwf4Yx4tBJQjxIjgjXHKg==",
|
||||
"dependencies": {
|
||||
"regexparam": "2.0.2"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ItalyPaleAle"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "5.2.8",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
|
||||
|
|
|
|||
|
|
@ -12,5 +12,8 @@
|
|||
"@sveltejs/vite-plugin-svelte": "^3.0.2",
|
||||
"svelte": "^4.2.12",
|
||||
"vite": "^5.2.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"svelte-spa-router": "^4.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,45 @@
|
|||
<script>
|
||||
import Router from 'svelte-spa-router';
|
||||
import { replace, link, location } from 'svelte-spa-router';
|
||||
import active from 'svelte-spa-router/active'
|
||||
import routes from './routes';
|
||||
|
||||
let oldLocation = undefined;
|
||||
let showNavBar = false;
|
||||
|
||||
function routeLoading(event) {
|
||||
if (event.detail.location === oldLocation) {
|
||||
return; // not an actual change
|
||||
}
|
||||
showNavBar = event.detail.userData.showNavBar;
|
||||
oldLocation = event.detail.location;
|
||||
}
|
||||
|
||||
function conditionFailure(event) {
|
||||
replace("/");
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>TastyBites</h1>
|
||||
</main>
|
||||
{#if showNavBar }
|
||||
<nav>
|
||||
<p>TastyBites</p>
|
||||
<ul>
|
||||
<li><a href="/" use:link use:active>Home</a></li>
|
||||
<li><a href="/contact" use:link use:active>Contact Us</a></li>
|
||||
<li><a href="/cart" use:link use:active>Shopping Cart</a></li>
|
||||
</ul>
|
||||
<p>Location: {$location}</p>
|
||||
</nav>
|
||||
{/if}
|
||||
<Router
|
||||
{routes}
|
||||
restoreScrollState={true}
|
||||
on:routeLoading={routeLoading}
|
||||
on:conditionsFailed={conditionFailure}
|
||||
/>
|
||||
<footer>
|
||||
<p>TastyBites is a fake restaurant</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
25
front/src/routes.js
Normal file
25
front/src/routes.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import { wrap } from "svelte-spa-router/wrap";
|
||||
import PageLoading from "./routes/PageLoading.svelte";
|
||||
|
||||
const routes = {
|
||||
"/": wrap({
|
||||
asyncComponent: () => import("./routes/PageIndex.svelte"),
|
||||
loadingComponent: PageLoading,
|
||||
conditions: [],
|
||||
userData: { showNavBar: true },
|
||||
}),
|
||||
"/contact": wrap({
|
||||
asyncComponent: () => import("./routes/PageContact.svelte"),
|
||||
loadingComponent: PageLoading,
|
||||
conditions: [],
|
||||
userData: { showNavBar: true },
|
||||
}),
|
||||
"/cart": wrap({
|
||||
asyncComponent: () => import("./routes/PageShoppingCart.svelte"),
|
||||
loadingComponent: PageLoading,
|
||||
conditions: [],
|
||||
userData: { showNavBar: true },
|
||||
}),
|
||||
}
|
||||
|
||||
export default routes;
|
||||
2
front/src/routes/PageContact.svelte
Normal file
2
front/src/routes/PageContact.svelte
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<h1>Contact us</h1>
|
||||
<p>Nuh uh</p>
|
||||
2
front/src/routes/PageIndex.svelte
Normal file
2
front/src/routes/PageIndex.svelte
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<h1>TastyBites reeeee</h1>
|
||||
<p>aurgh</p>
|
||||
1
front/src/routes/PageLoading.svelte
Normal file
1
front/src/routes/PageLoading.svelte
Normal file
|
|
@ -0,0 +1 @@
|
|||
<p>Loading</p>
|
||||
2
front/src/routes/PageShoppingCart.svelte
Normal file
2
front/src/routes/PageShoppingCart.svelte
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
<h1>Shopping Cart</h1>
|
||||
<p>Empty....</p>
|
||||
Loading…
Reference in a new issue