Make temporary content for pages

Switch to SCSS for styling

front/jsconfig.json

@@ -22,7 +22,10 @@
      * Typecheck JS in `.svelte` and `.js` files by default.
      * Disable this if you'd like to use dynamic types.
      */
-    "checkJs": true
+    "checkJs": true,
+    "paths": {
+      "%": ["./src"]
+    }
   },
   /**
    * Use global.d.ts instead of compilerOptions.types

front/src/App.svelte

@@ -2,7 +2,7 @@
     import Router from 'svelte-spa-router';
     import { replace, link } from 'svelte-spa-router';
     import active from 'svelte-spa-router/active'
-    import routes from './routes';
+    import routes from '%/routes.js';
 
     let oldLocation = undefined;
     let showNavBar = false;
@@ -22,43 +22,56 @@
 
 {#if showNavBar }
     <nav>
-        <ul>
+        <ul style="justify-content: flex-end">
             <li><a href="/" use:link use:active>Home</a></li>
             <li><a href="/contact" use:link use:active>Contact Us</a></li>
         </ul>
+
         <span>TastyBites</span>
-        <ul>
+
+        <ul style="justify-content: flex-start">
             <li><a href="/orders" use:link use:active>Orders</a></li>
-            <li><a href="/cart" use:link use:active>Shopping Cart</a></li>
+            <li><a href="/cart" use:link use:active>Cart</a></li>
         </ul>
     </nav>
 {/if}
-<Router
-    {routes}
-    restoreScrollState={true}
-    on:routeLoading={routeLoading}
-    on:conditionsFailed={conditionFailure}
-/>
+<main>
+    <Router
+        {routes}
+        restoreScrollState={true}
+        on:routeLoading={routeLoading}
+        on:conditionsFailed={conditionFailure}
+    />
+</main>
 <footer>
     <p>TastyBites is a fake restaurant</p>
 </footer>
 
-<style lang="sass">
-    nav
-        display: flex
-        justify-content: center
-        align-items: center
-        padding: 1rem
-        background-color: #f8f9fa
-        border-bottom: 1px solid #e9ecef
-        ul
-            padding: 0
-            margin: 0
-            display: flex
-            list-style: none
-            li
-                margin: 0 1rem
-        span
-            margin: 0 1rem
-            font-weight: bolder
+<style lang="scss">
+    nav {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 1rem;
+        background-color: #f8f9fa;
+        border-bottom: 1px solid #e9ecef;
+        ul {
+            width: 300px;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            list-style: none;
+            li {
+                margin: 0 1rem;
+            }
+            span {
+                margin: 0 1rem;
+                font-weight: bolder;
+            }
+        }
+    }
+    main {
+        padding: 1rem;
+        flex-grow: 1;
+    }
 </style>

front/src/app.css

@@ -1,3 +0,0 @@
-*, *::before, *::after {
-    box-sizing: border-box;
-}

front/src/main.js

@@ -1,5 +1,5 @@
-import './app.css'
-import App from './App.svelte'
+import '%/styles/main.scss'
+import App from '%/App.svelte'
 
 const app = new App({
   target: document.getElementById('app'),

front/src/pages/Page404.svelte

@@ -1,5 +1,7 @@
 <script>
     import { link } from 'svelte-spa-router';
+
+    export let params = {};
 </script>
 
 <h1>404</h1>

front/src/pages/components/ItemList.svelte

@@ -0,0 +1,26 @@
+<script>
+    import MenuItem from "%/pages/components/MenuItem.svelte";
+
+    export let items = [];
+</script>
+
+<ul>
+    {#each items as item}
+        <li><MenuItem name={item.name} price={item.price} id={item.name} /></li>
+    {/each}
+</ul>
+
+<style lang="scss">
+    ul {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 16px
+    }
+    li {
+        margin: 0;
+    }
+</style>

front/src/pages/components/MenuItem.svelte

@@ -0,0 +1,26 @@
+<script>
+    import { link } from 'svelte-spa-router';
+
+    export let name;
+    export let price;
+    export let id;
+</script>
+
+<a href="/item/{id}" use:link>
+    <span>{name}</span>
+    <span>£{price}</span>
+</a>
+
+<style lang="scss">
+    a {
+        width: 200px;
+        height: 200px;
+        background-color: #f0f0f0;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+</style>

front/src/pages/index/Announcement.svelte

@@ -0,0 +1,26 @@
+<script>
+    import temp from '/temp.jpg';
+</script>
+
+<div>
+    <img src={temp} alt="Rufus" />
+</div>
+
+<style lang="scss">
+    div {
+        height: 400px;
+        background-color: #f0f0f0;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        position: relative;
+        overflow: hidden;
+    }
+    div > img{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: auto;
+    }
+</style>

front/src/pages/index/PageIndex.svelte

@@ -0,0 +1,36 @@
+<script>
+    import { link } from 'svelte-spa-router';
+    import Announcement from "%/pages/index/Announcement.svelte";
+    import ItemList from "%/pages/components/ItemList.svelte";
+
+    const items = [
+        {name: "Breakfast", price: 69.99},
+        {name: "Dinner", price: 21},
+        {name: "Brick", price: 0},
+        {name: "Toast", price: 4382749832743},
+        {name: "water", price: 1},
+        {name: "half eaten mouldy bread", price: -9999}
+    ];
+</script>
+
+<Announcement />
+<a href="/annoucements" use:link style="float: right">Learn More</a>
+
+<div class="spacer"></div>
+
+<h2>Menu</h2>
+<ItemList {items} />
+<a href="/menu" use:link style="float: right">See All</a>
+
+
+
+<div class="spacer"></div>
+
+<h2>About Us</h2>
+<p>Link to the /about page</p>
+
+<style lang="scss">
+    .spacer {
+        height: 50px;
+    }
+</style>

front/src/routes.js

@@ -1,22 +1,22 @@
 import { wrap } from "svelte-spa-router/wrap";
-import PageLoading from "./routes/PageLoading.svelte";
-import Page404 from "./routes/Page404.svelte";
+import PageLoading from "%/pages/PageLoading.svelte";
+import Page404 from "%/pages/Page404.svelte";
 
 const routes = {
     "/": wrap({
-        asyncComponent: () => import("./routes/PageIndex.svelte"),
+        asyncComponent: () => import("%/pages/index/PageIndex.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true },
     }),
     "/contact": wrap({
-        asyncComponent: () => import("./routes/PageContact.svelte"),
+        asyncComponent: () => import("%/pages/PageContact.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true },
     }),
     "/cart": wrap({
-        asyncComponent: () => import("./routes/PageShoppingCart.svelte"),
+        asyncComponent: () => import("%/pages/PageShoppingCart.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true },

front/src/routes/PageIndex.svelte

@@ -1,2 +0,0 @@
-<h1>TastyBites reeeee</h1>
-<p>aurgh</p>

front/src/styles/main.scss

@@ -0,0 +1,9 @@
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+}
+body, #app {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}

front/vite.config.js

@@ -3,5 +3,13 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()],
+    plugins: [
+        svelte(),
+    ],
+    base: './',
+    resolve: {
+        alias: {
+            '%': __dirname + '/src',
+        }
+    },
 })