Add initial logic for 'boards'

Run `npm run format`

.gitea/workflows/build-push.yaml

@@ -3,7 +3,7 @@ run-name: ${{ gitea.actor }} is building and pushing
 
 on:
   create:
-    tags: "*"
+    tags: '*'
 
 env:
   GITEA_DOMAIN: git.fjla.uk
@@ -36,4 +36,4 @@ jobs:
           push: true
           tags: |
             ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:${{ gitea.ref_name }}
-            ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:latest
+            ${{ env.GITEA_DOMAIN }}/${{ env.RESULT_IMAGE_NAME }}:latest

src/app.html

@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="manifest" href="/manifest.webmanifest" />
-		<meta name="title" content="OwlBoard | Your fasted route to live and reference data" />
+		<meta name="title" content="OwlBoard | Your fastest route to live and reference data" />
 		<meta
 			name="description"
 			content="Live station departures, Live train tracking, PIS Codes & more"

src/lib/components/ui/LocationSearchBox.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+	import Textbox from '$lib/components/ui/Textbox.svelte';
+	import { onMount } from 'svelte';
+	import { fade } from 'svelte/transition';
+	import { goto } from '$app/navigation';
+
+	import { LOCATIONS } from '$lib/locations-object.svelte.ts';
+
+
+
+	let { value = $bindable() } = $props();
+
+	let showResults = $state(false);
+	let selectedIndex = $state(-1);
+
+	const MAX_RESULTS = 5;
+
+
+	function tokenize(query: string) {
+		return query.toLowerCase().trim().split(/\s+/).filter(Boolean);
+	}
+
+	let results = $derived.by(() => {
+		if (value.length < 3) return [];
+
+		const tokens = tokenize(value);
+		const lowerQuery = value.toLowerCase().trim();
+
+		return LOCATIONS.data
+			.filter((r) => tokens.every((t) => r.s.includes(t)))
+			.sort((a, b) => {
+				// Check if query matches CRS
+				const aIsCrs = a.c?.toLowerCase() === lowerQuery;
+				const bIsCrs = b.c?.toLowerCase() === lowerQuery;
+
+				// Sort matching CRS first
+				if (aIsCrs && !bIsCrs) return -1;
+				if (!aIsCrs && bIsCrs) return 1;
+
+				// Alphabetical Sort
+				return a.n.localeCompare(b.n);
+			})
+			.slice(0, MAX_RESULTS);
+	})
+
+
+	$effect(() => {
+        if (results) selectedIndex = -1;
+    });
+
+	// Hide results when click outside of container
+	$effect(() => {
+		if (showResults) {
+			const onClick = (e: MouseEvent) => {
+				const target = e.target as HTMLElement;
+				if (!target.closest('.location-search')) {
+					showResults = false;
+				}
+			};
+
+			document.addEventListener('click', onClick);
+			return () => document.removeEventListener('click', onClick);
+		}
+	});
+
+	function choose(loc: LocationRecord) {
+		showResults = false;
+		selectedIndex = -1;
+		value = '';
+		console.log('Selected Location: ', JSON.stringify(loc));
+        const queryString = loc.c || loc.t
+		goto(`/board?loc=${queryString.toLowerCase()}`);
+	}
+
+	function handleKey(e: KeyboardEvent) {
+		if (!results.length) return;
+
+		if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			selectedIndex = Math.min(selectedIndex + 1, results.length - 1);
+		}
+
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			selectedIndex = Math.max(selectedIndex - 1, 0);
+		}
+
+		if (e.key === 'Enter' && selectedIndex >= 0) {
+			choose(results[selectedIndex]);
+		}
+	}
+</script>
+
+<div class="location-search">
+	<Textbox
+		bind:value
+		placeholder="Enter Location"
+		oninput={() => (showResults = true)}
+		onkeydown={handleKey}
+		capital
+	/>
+
+	{#if showResults && results.length}
+		<ul
+			id="location-results"
+			popover={showResults && results.length ? 'manual' : null}
+			role="listbox"
+			class="suggestions"
+			transition:fade={{ duration: 200 }}
+		>
+			{#each results as loc, i}
+				<li class="result-item" class:selected={i === selectedIndex} onclick={() => choose(loc)}>
+					<div class="crs-badge-container">
+						{#if loc.c}
+							<span class="crs-badge">{loc.c}</span>
+						{/if}
+					</div>
+					<div class="details">
+						<span class="name">{loc.n || loc.t}</span>
+						<span class="tiploc">{loc.t}</span>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+
+<style>
+	.location-search {
+		position: relative;
+		width: 100%;
+	}
+
+	.suggestions[popover] {
+		position: absolute;
+		inset: unset;
+		margin: 0;
+		margin-top: 3px;
+		border: none;
+		border-radius: 5px;
+		padding: 0;
+		width: 100%;
+		max-height: 350px;
+		top: 100%;
+		background-color: var(--color-title);
+		color: var(--color-bg-dark);
+		box-shadow: var(--shadow-std);
+		display: block;
+		z-index: 9999;
+	}
+
+	.suggestions:not([popover]) {
+		display: none;
+	}
+
+	.result-item {
+		font-family: 'URW Gothic', sans-serif;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0.5rem 1rem;
+		cursor: pointer;
+		min-height: 48px;
+		transition: all 0.15s;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+	}
+
+	.result-item.selected,
+	.result-item:hover {
+		background-color: var(--color-accent);
+		color: var(--color-title);
+	}
+
+	.crs-badge {
+		font-family: ui-monospace, monospace;
+		font-size: 1.1rem;
+		font-weight: 700;
+		background: var(--color-accent);
+		color: var(--color-title);
+		padding: 3px 6px;
+		border-radius: 10px;
+		transition: all 0.1s;
+	}
+
+	.crs-badge.empty {
+		filter: opacity(0);
+	}
+
+	.result-item:hover .crs-badge {
+		filter: brightness(1.3);
+	}
+
+	.details {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.name {
+		font-size: 1.1rem;
+		font-weight: 700;
+		text-align: right;
+	}
+
+	.tiploc {
+		text-align: right;
+		font-size: 0.8rem;
+	}
+</style>

src/lib/components/ui/Textbox.svelte

@@ -1,94 +1,94 @@
 <script lang="ts">
-    import { fade } from 'svelte/transition';
-    import type { HTLMInputAttributes } from 'svelte/elements';
+	import { fade } from 'svelte/transition';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
-    interface Props extends HTMLInputAttributes {
-        value?: string;
-        label?: string;
-        placeholder?: string;
-        type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
-        error?: string;
-        uppercase?: boolean;
-        [key: string]: any;
-    }
+	interface Props extends HTMLInputAttributes {
+		value?: string;
+		label?: string;
+		placeholder?: string;
+		type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
+		error?: string;
+		uppercase?: boolean;
+		[key: string]: any;
+	}
 
-    let {
-        value = $bindable(''),
-        label,
-        placeholder = '',
-        type = 'text',
-        error = '',
-        uppercase = false,
-        ...rest
-    }: Props = $props();
+	let {
+		value = $bindable(''),
+		label,
+		placeholder = '',
+		type = 'text',
+		error = '',
+		uppercase = false,
+		...rest
+	}: Props = $props();
 
-    let isFocussed = $state(false);
+	let isFocussed = $state(false);
 </script>
 
 <div class="input-wrapper" class:focussed={isFocussed} class:has-error={!!error}>
-    {#if label}
-        <label for="adaptive-input">{label}</label>
-    {/if}
+	{#if label}
+		<label for="adaptive-input">{label}</label>
+	{/if}
 
-    <input
-        id="adaptive-input"
-        class:all-caps={uppercase}
-        {type}
-        {placeholder}
-        bind:value={value}
-        onfocus={() => isFocussed = true}
-        onblur={() => isFocussed = false}
-        {...rest}
-    />
+	<input
+		id="adaptive-input"
+		class:all-caps={uppercase}
+		{type}
+		{placeholder}
+		bind:value
+		onfocus={() => (isFocussed = true)}
+		onblur={() => (isFocussed = false)}
+		{...rest}
+	/>
 
-    {#if error}
-        <span class="error-message" transition:fade>{error}</span>
-    {/if}
+	{#if error}
+		<span class="error-message" transition:fade>{error}</span>
+	{/if}
 </div>
 
 <style>
-    .input-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        width: 100%;
-        font-family: 'URW Gothic', sans-serif;
-    }
+	.input-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+		font-family: 'URW Gothic', sans-serif;
+	}
 
-    label {
-        font-size: 0.9rem;
-        font-weight: 400;
-        color: var(--color-title)
-    }
+	label {
+		font-size: 0.9rem;
+		font-weight: 400;
+		color: var(--color-title);
+	}
 
-    input {
-        min-height: 48px;
-        padding: 0 16px;
-        background-color: var(--color-title);
-        border: 2px solid transparent;
-        border-radius: 20px;
-        color: var(--color-bg-dark);
-        font-size: 1.5rem;
-        transition: all 0.2s ease-in-out;
-        outline: none;
-        text-align: center;
-    }
+	input {
+		min-height: 40px;
+		padding: 0 16px;
+		background-color: var(--color-title);
+		border: 2px solid transparent;
+		border-radius: 20px;
+		color: var(--color-bg-dark);
+		font-size: 1.2rem;
+		transition: all 0.2s ease-in-out;
+		outline: none;
+		text-align: center;
+	}
 
-    .all-caps {
-        text-transform: uppercase;
-    }
+	.all-caps {
+		text-transform: uppercase;
+	}
 
-    .focussed input {
-        border-color: var(--color-bg-light);
-    }
+	.focussed input {
+		border-color: var(--color-bg-light);
+	}
 
-    .has-error input {
-        border-color: #ff4d4d;
-    }
+	.has-error input {
+		border-color: #ff4d4d;
+	}
 
-    .error-message {
-        color: #ff4d4d;
-        font-size: 1rem;
-        text-align: center;
-    }
-</style>
+	.error-message {
+		color: #ff4d4d;
+		font-size: 1rem;
+		text-align: center;
+	}
+</style>

src/lib/components/ui/cards/BaseCard.svelte

@@ -1,94 +1,101 @@
 <script lang="ts">
-    import type { Snippet } from 'svelte';
-    import { IconHelpCircle } from '@tabler/icons-svelte';
-    import { slide } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import { IconHelpCircle } from '@tabler/icons-svelte';
+	import { slide } from 'svelte/transition';
 
-    interface Props {
-        children: Snippet;
-        header?: string;
-        helpText?: string;
-    }
+	interface Props {
+		children: Snippet;
+		header?: string;
+		helpText?: string;
+	}
 
-    let {
-        children,
-        header = "",
-        helpText,
-    }: Props = $props();
+	let { children, header = '', helpText }: Props = $props();
 
-    let showHelp = $state(false);
+	let showHelp = $state(false);
 </script>
 
 <div class="card">
-    {#if header || helpText}
-        <header class="card-header">
-            <div class="header-content">
-                {header}
-            </div>
-            {#if helpText}
-                <button
-                    type="button"
-                    class="help-toggle"
-                    onclick={() => showHelp = !showHelp}
-                    aria-label="Show Help"
-                >
-                    <IconHelpCircle size={26} stroke={2.25} color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'} />
-                </button>
-            {/if}
-        </header>
+	{#if header || helpText}
+		<header class="card-header">
+			<div class="header-content">
+				{header}
+			</div>
+			{#if helpText}
+				<button
+					type="button"
+					class="help-toggle"
+					onclick={() => (showHelp = !showHelp)}
+					aria-label="Show Help"
+				>
+					<IconHelpCircle
+						size={26}
+						stroke={2.25}
+						color={showHelp ? 'var(--color-brand)' : 'var(--color-title)'}
+					/>
+				</button>
+			{/if}
+		</header>
 
-        {#if showHelp && helpText}
-            <div class="help-drawer" transition:slide={{ duration: 400 }}>
-                <p>{helpText}</p>
-            </div>
-        {/if}
-    {/if}
+		{#if showHelp && helpText}
+			<div class="help-drawer" transition:slide={{ duration: 400 }}>
+				<p>{helpText}</p>
+			</div>
+		{/if}
+	{/if}
 
-    <div class="card-body">
-        {@render children?.()}
-    </div>
+	<div class="card-body">
+		{@render children?.()}
+	</div>
 </div>
 
 <style>
-    .card {
-        background: var(--color-accent);
-        position: relative;
-        border-radius: 20px;
-        overflow: hidden;
-        width: 95%;
-        max-width: 600px;
-        text-align: center;
-        font-family: 'URW Gothic', sans-serif;
-        color: var(--color-title);
-    }
+	.card {
+		background: var(--color-accent);
+		position: relative;
+		border-radius: 20px;
+		overflow: visible;
+		width: 95%;
+		max-width: 600px;
+		text-align: center;
+		font-family: 'URW Gothic', sans-serif;
+		color: var(--color-brand);
+		padding: 10px 0;
+	}
 
-    .header-content { flex: 1;
-    font-size: 1.5rem; font-weight: 600; }
+	.header-content {
+		flex: 1;
+		margin: 0;
+		font-size: 1.3rem;
+		font-weight: 600;
+	}
 
-    .help-toggle {
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        background: none;
-        border: none;
-        padding: 4px;
-        cursor: help;
-        opacity: 0.6;
-        z-index: 2;
-        transition: opacity 0.2s, transform 0.2s;
-    }
+	.help-toggle {
+		position: absolute;
+		top: 8px;
+		right: 8px;
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: help;
+		opacity: 0.6;
+		z-index: 2;
+		transition:
+			opacity 0.2s,
+			transform 0.2s;
+	}
 
-    .help-toggle:hover {
-        opacity: 1;
-        transform: scale(1.1);
-    }
+	.help-toggle:hover {
+		opacity: 1;
+		transform: scale(1.1);
+	}
 
-    .help-drawer {
-        background-color: var(--color-accent);
-        padding: 4px 16px;
-        font-size: 0.95rem;
-        line-height: 1.2;
-        margin: auto;
-        border-bottom: 1px solid rgba(255,255,255,0.05);
-        color: var(--color-title);
-    }
-</style>
+	.help-drawer {
+		background-color: var(--color-accent);
+		padding: 4px 16px;
+		font-size: 0.95rem;
+		line-height: 1.2;
+		margin: auto;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+		color: var(--color-title);
+	}
+</style>

src/lib/components/ui/cards/LocationBoardCard.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
+	import LocationSearchBox from '$lib/components/ui/LocationSearchBox.svelte';
+
+	let locationValue = $state('');
+
+	function resetSearchBox() {
+		value = '';
+	}
+</script>
+
+<BaseCard header={'Live Arrivals & Departures'}>
+	<div class="card-content">
+		<LocationSearchBox bind:value={locationValue} />
+	</div>
+</BaseCard>
+
+<style>
+	.card-content {
+		text-align: center;
+		width: 90%;
+		margin: auto;
+		padding: 10px 0 10px 0;
+	}
+</style>

src/lib/locations-object.svelte.ts

@@ -0,0 +1,38 @@
+	interface LocationRecord {
+		n: string; // name
+		t: string; // tiploc
+		c?: string; // crs
+		s: string; // search string
+	}
+
+class LocationStore {
+    data = $state<LocationRecord[]>([]);
+    loaded = $state(false);
+
+    async init(fetcher = fetch) {
+        if (this.loaded) return;
+
+        try {
+            const res = await fetcher('/api/tiplocs');
+            this.data = await res.json();
+            this.loaded = true;
+        } catch (err) {
+            console.error('Failed to load locations', err);
+        }
+    }
+
+    find(id: string | null): LocationRecord | undefined {
+        if (!id) return undefined;
+
+        const query = id.toUpperCase().trim();
+
+        console.log(query);
+
+        return this.data.find((loc) => {
+            return loc.t === query || loc.c === query;
+        });
+    }
+
+}
+
+export const LOCATIONS = new LocationStore();

src/routes/+error.svelte

@@ -58,13 +58,15 @@
 		font-size: 1.1rem;
 		color: var(--color-title);
 		max-width: 300px;
-        margin-top: 5px;
-		margin-bottom: 30px;
+		margin-top: 5px;
+		margin-bottom: 20px;
 	}
 
 	.debug-info {
 		background: rgba(255, 255, 255, 0.05);
-		padding: 5px 12px;
+		padding: 5px 15px;
+		margin-top: 0;
+		margin-bottom: 20px;
 		border-radius: 4px;
 		font-size: 0.8rem;
 		opacity: 0.6;

src/routes/+layout.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { slide, fade } from 'svelte/transition';
+	import { onMount } from 'svelte';
+
+	import { LOCATIONS } from '$lib/locations-object.svelte.ts';
 
 	import '$lib/global.css';
 
@@ -10,6 +13,8 @@
 
 	import { IconHome, IconDialpad, IconSettings, IconHelp, IconDots } from '@tabler/icons-svelte';
 
+	onMount(() => LOCATIONS.init(fetch));
+
 	let { children } = $props();
 
 	// Navigation State
@@ -18,9 +23,9 @@
 
 	const navItems = [
 		{ label: 'Home', path: '/', icon: IconHome },
-		{ label: 'PIS', path: '/pis', icon: IconDialpad },
-		{ label: 'Options', path: '/preferences', icon: IconSettings },
-		{ label: 'About', path: '/about', icon: IconHelp }
+		{ label: 'PIS', path: '/pis/', icon: IconDialpad },
+		{ label: 'Options', path: '/preferences/', icon: IconSettings },
+		{ label: 'About', path: '/about/', icon: IconHelp }
 	];
 
 	let navWidth = $state(0);
@@ -34,7 +39,7 @@
 		if (navWidth === 0) return navItems.length;
 		const available = navWidth;
 		const totalItems = navItems.length;
-		const countWithoutMore = Math.floor(available/ ITEM_WIDTH);
+		const countWithoutMore = Math.floor(available / ITEM_WIDTH);
 
 		if (countWithoutMore >= totalItems) return totalItems;
 
@@ -78,7 +83,7 @@
 <nav bind:clientWidth={navWidth}>
 	<!-- Dynamic Nav Elements Here! -->
 	{#each visibleItems as item}
-		{@const isActive = activePath === item.path}
+		{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
 		<a
 			href={item.path}
 			class="nav-item"
@@ -110,7 +115,7 @@
 			></div>
 			<div class="menu-popover" transition:slide={{ axis: 'y', duration: 250 }}>
 				{#each hiddenItems as item}
-					{@const isActive = activePath === item.path}
+					{@const isActive = activePath.replace(/\/$/, '') === item.path.replace(/\/$/, '')}
 					<a
 						href={item.path}
 						class="menu-popover-item"
@@ -128,10 +133,11 @@
 </nav>
 
 <div class="viewport-guard">
-	<img src={logoPlain} alt="OwlBoard Logo" width=100 height=100>
+	<img src={logoPlain} alt="OwlBoard Logo" width="100" height="100" />
 	<h1 class="viewport-guard-title">Narrow Gauge Detected</h1>
 	<p>
-		Just as trains need the right track width, our data needs a bit more room to stay on the rails. Please expand your view to at least 300px to view the app.
+		Just as trains need the right track width, our data needs a bit more room to stay on the rails.
+		Please expand your view to at least 300px to view the app.
 	</p>
 </div>
 
@@ -193,7 +199,8 @@
 		box-shadow: var(--shadow-up);
 	}
 
-	.nav-item, .more-menu-wrapper {
+	.nav-item,
+	.more-menu-wrapper {
 		display: flex;
 		flex: 1;
 		flex-direction: column;
@@ -317,8 +324,10 @@
 			margin: auto;
 			padding-top: 30px;
 		}
-	
-		header, main, nav {
+
+		header,
+		main,
+		nav {
 			display: none;
 		}
 	}

src/routes/+layout.ts

@@ -1,3 +1,4 @@
 export const prerender = true;
 export const trailingSlash = 'always';
-export const csr = true;
+export const csr = true;
+export const ssr = false;

src/routes/+page.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-	import Button from '$lib/components/ui/Button.svelte';
-	import Textbox from '$lib/components/ui/Textbox.svelte';
-	import BaseCard from '$lib/components/ui/cards/BaseCard.svelte';
-
-	function test() {
-		console.log('Button Clicked');
-	}
+	import LocationBoardCard from '$lib/components/ui/cards/LocationBoardCard.svelte';
 </script>
 
-<br /><br /><br />
-<Button>Default</Button>
-<Button color={'brand'} onclick={test}>Brand</Button>
-<Button color={'accent'}>Accent</Button>
-<Textbox placeholder={"Textbox am I"} uppercase={true} error={""} />
+<div class="card-container">
+	<LocationBoardCard />
+</div>
 
-<BaseCard header={"Hello"} helpText={"This is help text"}>Hello</BaseCard>
-
-<h2>OwlBoard</h2>
+<style>
+	.card-container {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: 20px;
+		justify-content: center;
+		padding: 20px 10px;
+	}
+</style>

src/routes/about/+page.svelte

@@ -29,7 +29,10 @@
 		daily basis.
 	</p>
 	<p class="amble">
-Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with many of the sculptures still in the area.
+		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
+		associated with the Roman Goddess as well as with wisdom. The name also links to Bath, where the
+		app has been built and is run, representing the 'Minerva Owl' sculpture trail in the city, with
+		many of the sculptures still in the area.
 	</p>
 	<p class="opensource">
 		Some components that combine to form OwlBoard are open-source, see the <a

src/routes/board/+page.svelte

@@ -0,0 +1,15 @@
+<section>
+    Live board are not yet implemented on the server
+</section>
+
+<style>
+    section {
+        font-family: 'URW Gothic', sans-serif;
+        text-align: center;
+        font-size: 2rem;
+        width: 90%;
+        margin: auto;
+        padding-top: 25px;
+        max-width: 500px;
+    }
+</style>

src/routes/board/+page.ts

@@ -0,0 +1,37 @@
+import { LOCATIONS } from '$lib/locations-object.svelte';
+import type { PageLoad } from './$types';
+import { error } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ url }) => {
+    const locId = url.searchParams.get('loc');
+
+    if (!LOCATIONS.loaded) {
+        await LOCATIONS.init(fetch);
+    }
+
+    let title: string = "";
+
+    if (!locId) {
+        error(400, {
+            message: 'Location not provided',
+            owlCode: 'NO_LOCATION_IN_PATH',
+        });
+    }
+
+    if (locId) {
+        const location = LOCATIONS.find(locId);
+
+        if (location) {
+            title = location.n || location.t;
+        } else {
+            error(404, {
+                message: `Location (${locId}) not found`,
+                owlCode: 'INVALID_LOCATION_CODE',
+            });
+        }
+    }
+	return {
+		title,
+        location,
+	};
+};

static/api/tiplocs

@@ -0,0 +1,104 @@
+[
+  {"n":"Manchester Piccadilly","t":"MANPICD","c":"MAN","s":"manchester piccadilly man manpicd"},
+  {"n":"Manchester Victoria","t":"MCV","c":"MCV","s":"manchester victoria mcv"},
+  {"n":"Manchester Oxford Road","t":"MCOR","c":"MCO","s":"manchester oxford road mco mcor"},
+  {"n":"Manchester Airport","t":"MANAPTL","c":"MIA","s":"manchester airport mia manaptl"},
+  {"n":"London Euston","t":"EUSTON","c":"EUS","s":"london euston eus euston"},
+  {"n":"London Kings Cross","t":"KGX","c":"KGX","s":"london kings cross kgx kingscross"},
+  {"n":"London St Pancras International","t":"STPANCR","c":"STP","s":"london st pancras international stp stpancr"},
+  {"n":"London Paddington","t":"PADTON","c":"PAD","s":"london paddington pad padton"},
+  {"n":"London Victoria","t":"VIC","c":"VIC","s":"london victoria vic"},
+  {"n":"London Liverpool Street","t":"LIVST","c":"LST","s":"london liverpool street lst livst"},
+  {"n":"London Bridge","t":"LONGBR","c":"LBG","s":"london bridge lbg longbr"},
+  {"n":"Birmingham New Street","t":"BHMNEWST","c":"BHM","s":"birmingham new street bhm bhmnewst bham"},
+  {"n":"Birmingham Moor Street","t":"BHMMRS","c":"BMO","s":"birmingham moor street bmo bhmmrs"},
+  {"n":"Birmingham Snow Hill","t":"BHMSH","c":"BSW","s":"birmingham snow hill bsw bhmsh"},
+  {"n":"Leeds","t":"LEEDS","c":"LDS","s":"leeds lds"},
+  {"n":"York","t":"YORK","c":"YRK","s":"york yrk"},
+  {"n":"Liverpool Lime Street","t":"LIVLST","c":"LIV","s":"liverpool lime street liv livlst"},
+  {"n":"Liverpool Central","t":"LIVCEN","c":"LVC","s":"liverpool central lvc livcen"},
+  {"n":"Sheffield","t":"SHEFFLD","c":"SHF","s":"sheffield shf sheffld"},
+  {"n":"Nottingham","t":"NOTTM","c":"NOT","s":"nottingham not nottm"},
+  {"n":"Derby","t":"DERBY","c":"DBY","s":"derby dby"},
+  {"n":"Leicester","t":"LEICEST","c":"LEI","s":"leicester lei leicest"},
+  {"n":"Bristol Temple Meads","t":"BRSTLTM","c":"BRI","s":"bristol temple meads bri brstltm"},
+  {"n":"Cardiff Central","t":"CDFCEN","c":"CDF","s":"cardiff central cdf cdfcen"},
+  {"n":"Newcastle","t":"NEWCAST","c":"NCL","s":"newcastle ncl newcast"},
+  {"n":"Edinburgh Waverley","t":"EDINBUR","c":"EDB","s":"edinburgh waverley edb edinbur"},
+  {"n":"Glasgow Central","t":"GLASCEN","c":"GLC","s":"glasgow central glc glascen"},
+  {"n":"Glasgow Queen Street","t":"GLAQS","c":"GLQ","s":"glasgow queen street glq glaqs"},
+  {"n":"Reading","t":"READING","c":"RDG","s":"reading rdg"},
+  {"n":"Oxford","t":"OXFORD","c":"OXF","s":"oxford oxf"},
+  {"n":"Cambridge","t":"CAMBRDG","c":"CBG","s":"cambridge cbg cambrdg"},
+  {"n":"Peterborough","t":"PBOUGH","c":"PBO","s":"peterborough pbo pbough"},
+  {"n":"Doncaster","t":"DONCAST","c":"DON","s":"doncaster don doncast"},
+  {"n":"Crewe","t":"CREWE","c":"CRE","s":"crewe cre"},
+  {"n":"Preston","t":"PRESTON","c":"PRE","s":"preston pre"},
+  {"n":"Blackpool North","t":"BPLNOR","c":"BPN","s":"blackpool north bpn bplnor"},
+  {"n":"Bolton","t":"BOLTON","c":"BON","s":"bolton bon"},
+  {"n":"Huddersfield","t":"HUDDSFD","c":"HUD","s":"huddersfield hud huddsfd"},
+  {"n":"Stockport","t":"STOCKPT","c":"SPT","s":"stockport spt stockpt"},
+  {"n":"Wigan North Western","t":"WIGNW","c":"WGN","s":"wigan north western wgn wignw"},
+    {"n":"Bath Spa","t":"BATHSPA","c":"BTH","s":"bath spa bth bathspa"},
+ {"n":"Exeter St Davids","t":"EXD","c":"EXD","s":"exeter st davids exd"},
+  {"n":"Plymouth","t":"PLYMTH","c":"PLY","s":"plymouth ply plymth"},
+  {"n":"Truro","t":"TRURO","c":"TRU","s":"truro tru"},
+  {"n":"Aberdeen","t":"ABERDN","c":"ABD","s":"aberdeen abd aberdn"},
+  {"n":"Inverness","t":"INVNESS","c":"INV","s":"inverness inv invness"},
+  {"n":"Perth","t":"PERTH","c":"PTH","s":"perth pth"},
+  {"n":"Dundee","t":"DUNDEE","c":"DEE","s":"dundee dee"},
+  {"n":"Stirling","t":"STIRLNG","c":"STG","s":"stirling stg stirlng"},
+  {"n":"Falkirk Grahamston","t":"FLKGRA","c":"FKG","s":"falkirk grahamston fkg flkgra"},
+  {"n":"Motherwell","t":"MOTHRWL","c":"MTH","s":"motherwell mth mothrwl"},
+  {"n":"Paisley Gilmour Street","t":"PAISGL","c":"PYG","s":"paisley gilmour street pyg paisgl"},
+  {"n":"Greenock Central","t":"GRNOCK","c":"GKC","s":"greenock central gkc grnock"},
+  {"n":"Ayr","t":"AYR","c":"AYR","s":"ayr"},
+  {"n":"Carlisle","t":"CARLISL","c":"CAR","s":"carlisle car carlisl"},
+  {"n":"Penrith North Lakes","t":"PNRITH","c":"PNR","s":"penrith north lakes pnr pnrith"},
+  {"n":"Kendal","t":"KENDAL","c":"KEN","s":"kendal ken"},
+  {"n":"Windermere","t":"WNDRMRE","c":"WDM","s":"windermere wdm wndrme"},
+  {"n":"Lancaster","t":"LANCAST","c":"LAN","s":"lancaster lan lancast"},
+  {"n":"Chester","t":"CHESTER","c":"CTR","s":"chester ctr"},
+  {"n":"Warrington Bank Quay","t":"WRRGBQ","c":"WBQ","s":"warrington bank quay wbq wrrgbq"},
+  {"n":"Warrington Central","t":"WRRGCN","c":"WAC","s":"warrington central wac wrrgcn"},
+  {"n":"Runcorn","t":"RUNCORN","c":"RUN","s":"runcorn run"},
+  {"n":"Widnes","t":"WIDNES","c":"WID","s":"widnes wid"},
+  {"n":"Southport","t":"STHPORT","c":"SOP","s":"southport sop sthport"},
+  {"n":"Ormskirk","t":"ORMSKRK","c":"OMS","s":"ormskirk oms ormskrk"},
+  {"n":"Blackburn","t":"BLKBRN","c":"BBN","s":"blackburn bbn blkbrn"},
+  {"n":"Burnley Manchester Road","t":"BURNMR","c":"BYM","s":"burnley manchester road bym burnmr"},
+  {"n":"Rochdale","t":"ROCHDAL","c":"RCD","s":"rochdale rcd rochdal"},
+  {"n":"Oldham Mumps","t":"OLDMUM","c":"OMM","s":"oldham mumps omm oldmum"},
+  {"n":"Ashton-under-Lyne","t":"ASHTON","c":"AHN","s":"ashton under lyne ahn ashton"},
+  {"n":"Stalybridge","t":"STALYBG","c":"SYB","s":"stalybridge syb stalybg"},
+  {"n":"Macclesfield","t":"MACCLFD","c":"MAC","s":"macclesfield mac macclfd"},
+  {"n":"Congleton","t":"CONGLTN","c":"CNG","s":"congleton cng conglt"},
+  {"n":"Stoke-on-Trent","t":"STOKETR","c":"SOT","s":"stoke on trent sot stoketr"},
+  {"n":"Stafford","t":"STAFFRD","c":"STA","s":"stafford sta staffrd"},
+  {"n":"Tamworth","t":"TAMWTH","c":"TAM","s":"tamworth tam tamwth"},
+  {"n":"Nuneaton","t":"NUNEATN","c":"NUN","s":"nuneaton nun nuneatn"},
+  {"n":"Coventry","t":"COVNTRY","c":"COV","s":"coventry cov covntry"},
+  {"n":"Rugby","t":"RUGBY","c":"RUG","s":"rugby rug"},
+  {"n":"Milton Keynes Central","t":"MKCEN","c":"MKC","s":"milton keynes central mkc mkcen"},
+  {"n":"Birmingham Washwood Heath Junction","t":"BWHJCT","c":"","s":"birmingham washwood heath junction bwhjct"},
+  {"n":"Manchester Trafford Park Yard","t":"MTRYD","c":"","s":"manchester trafford park yard mtryd"},
+  {"n":"London Willesden Junction","t":"WLSDJCT","c":"","s":"london willesden junction wlsdjct"},
+  {"n":"Leeds Neville Hill Depot","t":"NVHLDP","c":"","s":"leeds neville hill depot nvhldp"},
+  {"n":"York Holgate Junction","t":"YHGJCT","c":"","s":"york holgate junction yhgjct"},
+  {"n":"Crewe Basford Hall Junction","t":"CBHJCT","c":"","s":"crewe basford hall junction cbhjct"},
+  {"n":"Doncaster Decoy Sidings","t":"DCDSID","c":"","s":"doncaster decoy sidings dcdsid"},
+  {"n":"Liverpool Edge Hill Yard","t":"LEHYD","c":"","s":"liverpool edge hill yard lehyd"},
+  {"n":"Bristol East Junction","t":"BREJCT","c":"","s":"bristol east junction brejct"},
+  {"n":"Glasgow Polmadie Depot","t":"GLPDEP","c":"","s":"glasgow polmadie depot glpdep"},
+  {"n":"Newcastle Manors Junction","t":"NCMJCT","c":"","s":"newcastle manors junction ncmjct"},
+  {"n":"Edinburgh Haymarket Sidings","t":"EHSID","c":"","s":"edinburgh haymarket sidings ehsid"},
+  {"n":"Reading South Junction","t":"RDSJCT","c":"","s":"reading south junction rdsjct"},
+  {"n":"Oxford Rewley Road Depot","t":"OXRDEP","c":"","s":"oxford rewley road depot oxrdep"},
+  {"n":"Cambridge Coldham Lane Junction","t":"CCLJCT","c":"","s":"cambridge coldham lane junction ccljct"},
+  {"n":"Watford North Junction","t":"WFNJCT","c":"","s":"watford north junction wfnjct"},
+  {"n":"Luton Airport Sidings","t":"LUTSID","c":"","s":"luton airport sidings lutsid"},
+  {"n":"Stevenage Hitchin Junction","t":"STHJC","c":"","s":"stevenage hitchin junction sthjc"},
+  {"n":"Chelmsford New Hall Junction","t":"CHNJCT","c":"","s":"chelmsford new hall junction chnjct"},
+  {"n":"","t":"BPWY532","c":"","s":"bpwy532"},
+  {"n":"Ipswich Derby Road Depot","t":"IPDRDP","c":"","s":"ipswich derby road depot ipdrdp"}
+]

svelte.config.js

@@ -2,15 +2,19 @@ import adapter from '@sveltejs/adapter-static';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-    kit: {
-        adapter: adapter({
-            pages: 'build',
-            assets: 'build',
-            fallback: 'index.html',
-            precompress: 'true',
-            strict: 'true'
-        })
-    }
+	kit: {
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: 'index.html',
+			precompress: 'true',
+			strict: 'true'
+		}),
+		prerender: {
+			// Temporary option during testing
+			handleHttpError: 'ignore'
+		}
+	}
 };
 
 export default config;