19 implement i18n (#29)

* init paraglide

* change export

* shared session check

* message param

* format

* check user is present

A session can exist without a user, if the user was recently deleted

* wtf

* lol bad redirect code

src/lib/components/Navigation/Navbar/Navbar.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
+	import { messages } from '$lib/i18n';
+
 	let { title, username }: { title: string; username: string } = $props();
 
-	let greeting = $derived(`Welcome ${username}!`);
+	let message = $derived(messages.greeting({ name: username }));
 </script>
 
 <header class="navbar justify-between bg-base-200 px-4">
 	<h2 class="prose prose-xl">Hestia</h2>
 	<h1 class="prose prose-2xl">{title}</h1>
-	<p class="prose prose-lg">{greeting}</p>
+	<p class="prose prose-lg">{message}</p>
 </header>
 
 <style>

src/lib/i18n/index.ts

@@ -0,0 +1,4 @@
+import * as runtime from '$lib/paraglide/runtime';
+import { createI18n } from '@inlang/paraglide-sveltekit';
+export * as messages from '$lib/paraglide/messages';
+export const i18n = createI18n(runtime);

src/lib/server/auth/index.ts

@@ -0,0 +1,22 @@
+import { redirect, type ServerLoadEvent } from '@sveltejs/kit';
+import dayjs from 'dayjs';
+import { prisma } from '../prisma';
+
+export async function validateSession(event: ServerLoadEvent) {
+	const sessionId = event.cookies.get('auth_session');
+	if (!sessionId) {
+		redirect(302, '/login');
+	}
+	const session = await prisma.session.findUnique({
+		where: { id: sessionId },
+		include: { user: true },
+	});
+	if (!session || !session.user) {
+		redirect(302, '/login');
+	}
+	const expiry = session.expiresAt;
+	if (dayjs(expiry).isBefore(dayjs())) {
+		redirect(302, '/login');
+	}
+	return session;
+}

src/routes/+layout.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { i18n } from '$lib/i18n';
+	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
 	import '../app.css';
 	let { children } = $props();
 </script>
@@ -7,8 +9,10 @@
 	{@render children()}
 </div>
 
-<style>
-	.layout {
-		@apply h-screen w-screen bg-base-100;
-	}
-</style>
+<ParaglideJS {i18n}>
+	<style>
+		.layout {
+			@apply h-screen w-screen bg-base-100;
+		}
+	</style>
+</ParaglideJS>

src/routes/+page.server.ts

@@ -1,18 +1,5 @@
-import { prisma } from '$lib/server/prisma';
-import { redirect } from '@sveltejs/kit';
+import { validateSession } from '$lib/server/auth';
 
 export async function load(event) {
-	const sessionId = event.cookies.get('auth_session');
-	if (!sessionId) {
-		redirect(303, '/login');
-	}
-	const user = await prisma.session.findUnique({
-		where: {
-			id: sessionId,
-		},
-	});
-	if (!user) {
-		redirect(300, '/login');
-	}
-	return {};
-}
+	await validateSession(event);
+}

src/routes/app/+layout.server.ts

@@ -1,25 +1,9 @@
-import { prisma } from '$lib/server/prisma';
-import { redirect } from '@sveltejs/kit';
-import dayjs from 'dayjs';
+import { validateSession } from '$lib/server/auth';
 
 export async function load(event) {
-	const sessionId = event.cookies.get('auth_session');
-	if (!sessionId) {
-		redirect(300, '/login');
-	}
-	const session = await prisma.session.findUnique({
-		where: { id: sessionId },
-		include: { user: true },
-	});
-	if (!session) {
-		redirect(300, '/login');
-	}
-	const expiry = session.expiresAt;
-	if (dayjs(expiry).isBefore(dayjs())) {
-		redirect(300, '/login');
-	}
-
-	const { password: _, ...rest } = session.user;
+	const {
+		user: { password: _, ...rest },
+	} = await validateSession(event);
 	return {
 		user: rest,
 	};

src/routes/app/+layout.svelte

@@ -14,4 +14,4 @@
 </script>
 
 <Navbar title="Svelte" username={data.user.name} />
-{@render children()}
+{@render children()}