Cleanup

src/components/Navbar.svelte

@@ -6,7 +6,7 @@
 
 <div class="navbar bg-base-100">
 	<div class="navbar-start">
-		<span class="text-xl">Svelte Boilerplate</span>
+		<a href="/" class="btn btn-ghost normal-case text-xl">Svelte Boilerplate</a>
 	</div>
 	<div class="navbar-center hidden lg:flex">
 		<ul class="menu menu-horizontal px-1">

src/lib/features/device/getUserDevices.ts

@@ -0,0 +1,14 @@
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '../../supabase/database.types';
+
+const GetUserDevices = (supabase: SupabaseClient<Database>) => async (owner: string) => {
+	const { data, error } = await supabase.from('device').select().eq('owner', owner);
+
+	if (error) {
+		console.error(error);
+	}
+
+	return data;
+};
+
+export default GetUserDevices;

src/lib/features/device/index.ts

@@ -0,0 +1,3 @@
+import GetUserDevices from './getUserDevices';
+
+export { GetUserDevices };

src/routes/+layout.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import '../app.css';
-	import Navbar from '../components/Navbar.svelte';
 	import { invalidate } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import type { LayoutData } from './$types';
+	import Navbar from '$components/Navbar.svelte';
 
 	export let data: LayoutData;
 

src/routes/+page.svelte

@@ -1 +1 @@
-<div>WIP: Home</div>
+<h1>This is the Home Page of the Svelte Boilerplate</h1>

src/routes/about/+page.svelte

@@ -1 +1 @@
-<div>WIP: About</div>
+<h1>This is the About Page of the Svelte Boilerplate</h1>

src/routes/devices/+page.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-    import type { PageData } from './$types';
-  
-    export let data: PageData;
-    $: ({ devices } = data);
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	$: ({ devices } = data);
 </script>
 
 <div>WIP: Devices</div>
 
 {#if devices?.length}
-    <ul>
-        {#each devices as device}
-            <li>{device.name}</li>
-        {/each}
-    </ul>
+	<ul>
+		{#each devices as device}
+			<li>{device.name}</li>
+		{/each}
+	</ul>
 {:else}
-    <div>No devices found</div>
-{/if}
+	<div>No devices found</div>
+{/if}

src/routes/devices/+page.ts

@@ -1,17 +1,17 @@
+import { GetUserDevices } from '$lib/features/device';
 import { redirect } from '@sveltejs/kit';
-import GetUserDevices from "../../lib/features/device/getUserDevices/getUserDevices";
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ parent }) => {
-    const { supabase, session } = await parent();
-    if (!session) {
-        throw redirect(303, '/');
-    }
+	const { supabase, session } = await parent();
+	if (!session) {
+		throw redirect(303, '/');
+	}
 
-    const getUserDevices = GetUserDevices(supabase);
-    const devices = await getUserDevices(session.user.id);
+	const getUserDevices = GetUserDevices(supabase);
+	const devices = await getUserDevices(session.user.id);
 
-    return {
-        devices
-    };
-};
+	return {
+		devices
+	};
+};

src/routes/login/+page.svelte

@@ -41,22 +41,22 @@
 	</form>
 
 	{#if messageSent}
-	<div class="toast">	
-		<div class="alert alert-success">
-			<div>
-				<span>An email was sent with a magic link. Please check your mailbox.</span>
+		<div class="toast">
+			<div class="alert alert-success">
+				<div>
+					<span>An email was sent with a magic link. Please check your mailbox.</span>
+				</div>
 			</div>
 		</div>
-	</div>
 	{/if}
 
 	{#if showError}
-	<div class="toast">	
-		<div class="m-4 alert alert-error">
-			<div>
-				<span>Unable to login for the email provided.</span>
+		<div class="toast">
+			<div class="m-4 alert alert-error">
+				<div>
+					<span>Unable to login for the email provided.</span>
+				</div>
 			</div>
 		</div>
-	</div>
 	{/if}
 </div>

src/routes/logout/+page.svelte

@@ -26,12 +26,12 @@
 	</div>
 
 	{#if showError}
-	<div class="toast">
-		<div class="alert alert-error">
-			<div>
-				<span>Unable to login for the email provided.</span>
+		<div class="toast">
+			<div class="alert alert-error">
+				<div>
+					<span>Unable to login for the email provided.</span>
+				</div>
 			</div>
 		</div>
-	</div>
 	{/if}
 </div>

svelte.config.js

@@ -11,7 +11,11 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+
+		alias: {
+			'$components/*': 'src/components/*'
+		}
 	}
 };