Prettier formatting

src/lib/islands/input-island-form.svelte

@@ -1,45 +1,54 @@
 <script>
-    import Island from "$lib/islands/island.svelte";
-    export let variables = {
-        title: "Uninitialised",
-        action: "/",
-        placeholder: "Uninitialised",
-        queryName: "uninitiailsed"
-    };
+  import Island from '$lib/islands/island.svelte';
+  export let variables = {
+    title: 'Uninitialised',
+    action: '/',
+    placeholder: 'Uninitialised',
+    queryName: 'uninitiailsed'
+  };
 </script>
 
 <Island {variables}>
-<form action={variables.action}>
-    <input class="form-input" type="text" id="input-headcode" name={variables.queryName} placeholder={variables.placeholder} autocomplete="off">
-    <br>
+  <form action={variables.action}>
+    <input
+      class="form-input"
+      type="text"
+      id="input-headcode"
+      name={variables.queryName}
+      placeholder={variables.placeholder}
+      autocomplete="off"
+    />
+    <br />
     <button type="submit">Submit</button>
-</form>
+  </form>
 </Island>
 
 <style>
-    .form-input {
-        width: 75%;
-        height: 32px;
-        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;
-        text-transform: uppercase;
-        font-size: 15px;
-    }
-    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>
+  .form-input {
+    width: 75%;
+    height: 32px;
+    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;
+    text-transform: uppercase;
+    font-size: 15px;
+  }
+  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

@@ -1,20 +1,21 @@
 <script>
-    export let variables = {title:""}
+  export let variables = { title: '' };
 </script>
 
 <div>
-    <span>{variables.title}</span>
-    <slot />
+  <span>{variables.title}</span>
+  <slot />
 </div>
 
 <style>
-span {
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  span {
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     font-weight: 600;
     font-size: 20px;
-    color: var(--main-text-color)
-}
-div {
+    color: var(--main-text-color);
+  }
+  div {
     width: 85%;
     max-width: 400px;
     margin: auto;
@@ -22,5 +23,5 @@ div {
     padding: 10px;
     background-color: var(--overlay-color);
     border-radius: 10px;
-}
-</style>
+  }
+</style>

src/lib/islands/overlay-island.svelte

@@ -1,22 +1,23 @@
 <script>
-	import { fade } from "svelte/transition";
+  import { fade } from 'svelte/transition';
 
-    export let variables = {title:""}
+  export let variables = { title: '' };
 </script>
 
-<div in:fade={{duration: 150}} out:fade={{duration: 150}}>
-    <span>{variables.title}</span>
-    <slot />
+<div in:fade={{ duration: 150 }} out:fade={{ duration: 150 }}>
+  <span>{variables.title}</span>
+  <slot />
 </div>
 
 <style>
-span {
-    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  span {
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular',
+      'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
     color: var(--main-text-color);
     font-weight: 600;
     font-size: 20px;
-}
-div {
+  }
+  div {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -32,5 +33,5 @@ div {
     background-color: var(--overlay-color);
     border-radius: 10px;
     z-index: 1000;
-}
-</style>
+  }
+</style>

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

@@ -1,57 +1,54 @@
 <script>
-    import Island from "$lib/islands/island.svelte";
-    import { ql } from "$lib/stores/quick-links.js"
-    export let variables = {
-        title: "Quick Links",
-    };
-
+  import Island from '$lib/islands/island.svelte';
+  import { ql } from '$lib/stores/quick-links.js';
+  export let variables = {
+    title: 'Quick Links'
+  };
 </script>
 
 <Island {variables}>
-    
-    {#if $ql.length === 0}
+  {#if $ql.length === 0}
     <p>Go to <a href="/more/settings">settings</a> to add your Quick Links</p>
-    {/if}
-    <div class="buttons">
-        {#each $ql as link}
-            {#if link.length === 3}
-                <a class="link" href="/ldb?station={link}">
-                   {link.toUpperCase()}
-                </a>
-            {:else if link.length === 4}
-                <a class="link" href="/train?headcode={link}">
-                    {link.toUpperCase()}
-                </a>
-            {/if}
-        {/each}
-    </div>
-
+  {/if}
+  <div class="buttons">
+    {#each $ql as link}
+      {#if link.length === 3}
+        <a class="link" href="/ldb?station={link}">
+          {link.toUpperCase()}
+        </a>
+      {:else if link.length === 4}
+        <a class="link" href="/train?headcode={link}">
+          {link.toUpperCase()}
+        </a>
+      {/if}
+    {/each}
+  </div>
 </Island>
 
 <style>
-    .buttons {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        width: 90%;
-        margin: auto;
-        padding-top: 5px;
-    }
-    .link {
-        flex: 1;
-        width: 20%;
-        min-width: 50px;
-        margin: 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;
-        text-decoration: none;
-        background-color: var(--main-bg-color);
-        color: var(--link-color);
-    }
+  .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 90%;
+    margin: auto;
+    padding-top: 5px;
+  }
+  .link {
+    flex: 1;
+    width: 20%;
+    min-width: 50px;
+    margin: 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;
+    text-decoration: none;
+    background-color: var(--main-bg-color);
+    color: var(--link-color);
+  }
 </style>
-

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

@@ -1,116 +1,117 @@
 <script>
-    import Island from "$lib/islands/island.svelte";
-    import { ql } from "$lib/stores/quick-links.js";
-    export let variables = {
-      title: "Quick Links",
-    };
-  
-    let qlData =[]
-    $: {
-        qlData = $ql;
-        console.log(qlData);
-    }
+  import Island from '$lib/islands/island.svelte';
+  import { ql } from '$lib/stores/quick-links.js';
+  export let variables = {
+    title: 'Quick Links'
+  };
 
-    let saveButton = "Save"
+  let qlData = [];
+  $: {
+    qlData = $ql;
+    console.log(qlData);
+  }
 
-    async function timeout(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
+  let saveButton = 'Save';
 
-    async function saveQl() {
-      // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
-      const inputs = document.getElementsByClassName('qlInput');
-      let inputLinks = []
-      for (let item of inputs) {
-        let text = item?.value;
-        if (text !== '') {
-            inputLinks.push(text);
-        }
+  async function timeout(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  async function saveQl() {
+    // Fetch the content of all text entries within the island then run ql.set([ARRAY OF INPUT CONTENT])
+    const inputs = document.getElementsByClassName('qlInput');
+    let inputLinks = [];
+    for (let item of inputs) {
+      let text = item?.value;
+      if (text !== '') {
+        inputLinks.push(text);
       }
-      console.log(inputLinks)
-      ql.set(inputLinks)
-      saveButton = "&#10004;"
-      await timeout(3000);
-      saveButton = "Saved"
     }
+    console.log(inputLinks);
+    ql.set(inputLinks);
+    saveButton = '&#10004;';
+    await timeout(3000);
+    saveButton = 'Saved';
+  }
 
-    function clearQl() {
-        ql.set([]);
-        saveButton = "Saved"
-    }
+  function clearQl() {
+    ql.set([]);
+    saveButton = 'Saved';
+  }
 
-    function addQlBox() {
-        saveButton = "Save"
-        const updatedQl = [...$ql, ""];
-        $ql = updatedQl;
-        ql.set(updatedQl);
-    }
+  function addQlBox() {
+    saveButton = 'Save';
+    const updatedQl = [...$ql, ''];
+    $ql = updatedQl;
+    ql.set(updatedQl);
+  }
 
-    function handleClick(event) {
-      // Handle the click event here
-      console.log("Island Clicked");
-      // You can access the `variables` passed to the Island component here if needed
-    }
-  </script>
-  
-  <Island on:click={handleClick} {variables}>
-    {#if $ql.length === 0}
-      <p>Click the + button to add links</p>
-    {/if}
-    <div id="buttons" class="buttons">
-      <p>Quick links can be CRS Codes or Headcodes</p>
-      {#each qlData as link}
-        <input class="qlInput" type="text" value={link}>
-      {/each}
-      <button on:click={addQlBox} id="qlAdd">+</button>
-    </div>
-    <button on:click={saveQl}>{@html saveButton}</button>
-    <button on:click={clearQl}>Clear</button>
-  </Island>
-  
+  function handleClick(event) {
+    // Handle the click event here
+    console.log('Island Clicked');
+    // You can access the `variables` passed to the Island component here if needed
+  }
+</script>
+
+<Island on:click={handleClick} {variables}>
+  {#if $ql.length === 0}
+    <p>Click the + button to add links</p>
+  {/if}
+  <div id="buttons" class="buttons">
+    <p>Quick links can be CRS Codes or Headcodes</p>
+    {#each qlData as link}
+      <input class="qlInput" type="text" value={link} />
+    {/each}
+    <button on:click={addQlBox} id="qlAdd">+</button>
+  </div>
+  <button on:click={saveQl}>{@html saveButton}</button>
+  <button on:click={clearQl}>Clear</button>
+</Island>
 
 <style>
-    p {
-        margin-bottom: 0;
-    }
-    #qlAdd {
-        width: 40px;
-    }
-    .buttons {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        width: 90%;
-        margin: auto;
-        padding-top: 5px;
-    }
-    input {
-        flex: 1;
-        width: 20%;
-        min-width: 50px;
-        margin: 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;
-        text-decoration: none;
-        text-align: center;
-        text-transform: uppercase;
-    }
-    button {
-        width: 30%;
-        margin-bottom: 5px;
-        margin-top: 10px;
-        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>
+  p {
+    margin-bottom: 0;
+  }
+  #qlAdd {
+    width: 40px;
+  }
+  .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    width: 90%;
+    margin: auto;
+    padding-top: 5px;
+  }
+  input {
+    flex: 1;
+    width: 20%;
+    min-width: 50px;
+    margin: 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;
+    text-decoration: none;
+    text-align: center;
+    text-transform: uppercase;
+  }
+  button {
+    width: 30%;
+    margin-bottom: 5px;
+    margin-top: 10px;
+    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/result-island.svelte

@@ -1,27 +1,24 @@
 <script>
-    import Island from "$lib/islands/island.svelte";
-    export let resultObject = {
-        results: true,
-        title: "",
-        resultLines: []
-    };
-
-    let variables = {
-        title: resultObject.title
-    }
+  import Island from '$lib/islands/island.svelte';
+  export let resultObject = {
+    results: true,
+    title: '',
+    resultLines: []
+  };
 
+  let variables = {
+    title: resultObject.title
+  };
 </script>
 
 <Island {variables}>
-
-    {#each resultObject.resultLines as line}
-        <p>{line}</p>
-    {/each}
-
+  {#each resultObject.resultLines as line}
+    <p>{line}</p>
+  {/each}
 </Island>
 
 <style>
-    p {
-        color: white;
-    }
-</style>
+  p {
+    color: white;
+  }
+</style>