Fixes

src/App.svelte

@@ -8,6 +8,7 @@
 	import routes from './__routes'
 	import Error from './__error.svelte'
 	import LazyRoute from '$lib/router/LazyRoute.svelte'
+	import LazyRouteGuard from '$lib/router/LazyRouteGuard.svelte'
 
 	let isMounted = false
 	onMount(() => {
@@ -27,10 +28,12 @@
 
 <Router>
 	{#if !$isLoading && isMounted}
-		{#each routes as { path, layout, component }}
+		{#each routes as { path, layout, component, loading }}
+			<Route {path} let:location let:params>
 				<svelte:component this={layout}>
-				<LazyRoute {path} {component} />
+					<LazyRouteGuard {location} {params} {component} {loading} />
 				</svelte:component>
+			</Route>
 		{/each}
 		<Route path="/*" component={Error} />
 	{/if}

src/__layout.svelte

@@ -1,3 +1,3 @@
-<main>
+<main class="container">
 	<slot />
 </main>

src/lib/components/Link.svelte

@@ -2,10 +2,33 @@
 	import { link } from '$lib/router'
 
 	export let href: string | null = null
+
 	let className = ''
 	export { className as class }
+
+	const isValidHttpUrl = (string) => {
+		let url: URL
+		try {
+			url = new URL(string)
+		} catch (_) {
+			return false
+		}
+		return url.protocol === 'http:' || url.protocol === 'https:'
+	}
 </script>
 
-<a {href} class={className} use:link on:click|preventDefault>
+{#if href}
+	{#if isValidHttpUrl(href)}
+		<a {href} class={className}>
 			<slot />
-</a>
+		</a>
+	{:else}
+		<a {href} class={className} use:link>
+			<slot />
+		</a>
+	{/if}
+{:else}
+	<button class={className} on:click>
+		<slot />
+	</button>
+{/if}

src/routes/index.svelte

@@ -3,7 +3,17 @@
 	import { _ } from 'svelte-i18n'
 </script>
 
-<h1>Home</h1>
-<p>{$_('page.home.title')}</p>
-
-<Link href="/oauth">Auth</Link>
+<div class="flex justify-center mt-20">
+	<h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+		<span class="block text-indigo-600">{$_('page.home.title')}</span>
+		<p>
+			<Link class="underline" href="https://appwrite.io/">Appwrite</Link>
+		</p>
+		<p>
+			<Link class="underline" href="/oauth">OAuth</Link>
+		</p>
+		<p>
+			<Link class="underline" href="https://github.com/lewis-wow/appwrite-svelte-rocket-start">Repository</Link>
+		</p>
+	</h1>
+</div>