Componentize islands

src/lib/islands/input-island.svelte

@@ -0,0 +1,41 @@
+<script>
+    import Island from "$lib/islands/island.svelte";
+    export let variables = {
+        title: "Uninitialised",
+        action: "/",
+        placeholder: "Uninitialised",
+        queryName: "uninitiailsed"
+    };
+</script>
+
+<form action={variables.action}>
+    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder}>
+    <br>
+    <button class="form-button" type="submit">Submit</button>
+</form>
+
+<style>
+    .form-input {
+        width: 75%;
+        height: 30px;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        border-radius: 50px;
+        border: none;
+        text-align: center;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    }
+    .form-button {
+        width: 50%;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        border: none;
+        border-radius: 20px;
+        padding: 5px;
+        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+        font-size: 16px;
+        font-weight: 400;
+        background-color: var(--main-bg-color);
+        color: var(--link-color);
+    }
+</style>

src/lib/islands/island.svelte

@@ -0,0 +1,25 @@
+<script>
+    export const title = "Uninitialised"
+</script>
+
+<div>
+    <span>{title}</span>
+    <slot />
+</div>
+
+<style>
+span {
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: 600;
+    font-size: 20px;
+}
+div {
+    width: 75%;
+    max-width: 400px;
+    margin: auto;
+    margin-top: 25px;
+    padding: 10px;
+    background-color: var(--overlay-color);
+    border-radius: 10px;
+}
+</style>

src/lib/islands/quick-link-island.svelte

@@ -0,0 +1,4 @@
+<script>
+
+</script>
+

src/lib/navigation/nav.svelte

@@ -3,20 +3,17 @@
       {
         title: "Home",
         path: "/",
-        svgPath: "/images/navigation/home.svg",
+        svgPath: "/images/navigation/home.svg"
-        pngPath: "/images/nav/home_icon-25.png"
       },
       {
         title: "PIS Finder",
         path: "/pis",
-        svgPath: "/images/navigation/info.svg",
+        svgPath: "/images/navigation/info.svg"
-        pngPath: ""
       },
       {
         title: "More",
         path: "/more",
-        svgPath: "/images/navigation/more.svg",
+        svgPath: "/images/navigation/more.svg"
-        pngPath: "/images/nav/hamburger.svg"
       }
     ]
     import { page } from "$app/stores";

src/routes/+page.svelte

@@ -1,7 +1,25 @@
 <script>
 import Header from '$lib/header.svelte'
-import Nav from '$lib/nav.svelte'
+import Nav from '$lib/navigation/nav.svelte'
+import InputIsland from '$lib/islands/input-island.svelte'
+
 const title = "Home"
+const inputIslands = [
+    {
+        title: "Live Departure Boards",
+        action: "/ldb",
+        placeholder: "Enter CRS/TIPLOC",
+        queryName: "station"
+    },
+    {
+        title: "Train Details & PIS",
+        action: "/result-timetable",
+        placeholder: "Enter Headcode",
+        queryName: "headcode"
+    }
+]
+const variables = {title: "test",action:"/", placeholder:"test",queryName:"test"}
+
 </script>
 <svelte:head>
     <title>OwlBoard - {title}</title>
@@ -9,70 +27,13 @@ const title = "Home"
 
 
 <Header {title} />
-<div class="form-box">
+
-    <form action="/ldb">
+{#each inputIslands as variables}
-        <span class="input-title">Live Departure Boards</span>
+    <InputIsland {variables} />
-        <br>
+{/each}
-        <input class="form-input" type="text" id="input-station" name="station" placeholder="Enter CRS/TIPLOC">
+
-        <br>
-        <button class="form-button" type="submit">Submit</button>
-    </form>
-</div>
-<div class="form-box">
-    <form action="/result-timetable">
-        <span class="input-title">Train Details & PIS</span>
-        <br>
-        <input class="form-input" type="text" id="input-headcode" name="headcode" placeholder="Enter Headcode">
-        <br>
-        <button class="form-button" type="submit">Submit</button>
-    </form>
-</div>
-<div class="form-box">
-    <span class="input-title">Quick Links</span>
-    <div class="quick-links">
-    </div>
-</div>
 <Nav />
 
 <style>
-    .input-title {
+
-        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        font-weight: 600;
-        font-size: 20px;
-    }
-    .form-box {
-        width: 75%;
-        max-width: 400px;
-        margin: auto;
-        margin-top: 25px;
-        padding: 10px;
-        background-color: var(--overlay-color);
-        border-radius: 10px;
-    }
-    .form-input {
-        width: 75%;
-        height: 30px;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        border-radius: 50px;
-        border: none;
-        text-align: center;
-        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    }
-    .form-button {
-        width: 50%;
-        margin-bottom: 5px;
-        margin-top: 5px;
-        border: none;
-        border-radius: 20px;
-        padding: 5px;
-        font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        font-size: 16px;
-        font-weight: 400;
-        background-color: var(--main-bg-color);
-        color: var(--link-color);
-    }
-    .quick-links {
-        display: flex;
-    }
 </style>

src/routes/ldb/+page.svelte

@@ -1,6 +1,6 @@
 <script>
    import Header from '$lib/header.svelte'
-   import Nav from '$lib/nav.svelte'
+   import Nav from '$lib/navigation/nav.svelte'
    
    import {onMount} from 'svelte'
 

src/routes/more/+page.svelte

@@ -1,6 +1,6 @@
 <script>
     import Header from '$lib/header.svelte'
-    import Nav from '$lib/nav.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
     const title = "More"   
     
     const links = [

src/routes/pis/+page.svelte

@@ -1,6 +1,6 @@
 <script>
     import Header from '$lib/header.svelte'
-    import Nav from '$lib/nav.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
     
     const title = "PIS"
  </script>

src/routes/result-timetable/+page.svelte

@@ -1,6 +1,6 @@
 <script>
     import Header from '$lib/header.svelte'
-    import Nav from '$lib/nav.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
     
     import { onMount } from 'svelte'
 
@@ -14,7 +14,7 @@
         const headcode = await getHeadcode();
         document.getElementById('headcode').textContent = headcode;
         const data = await fetch(`https://owlboard.info/api/v1/train/headcode/today/${headcode}`)
-        document.getElementById('data_raw').textContent = data.text;
+        document.getElementById('data_raw').textContent = await data.text();
     })
 
  </script>