init paraglide

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

@@ -1,14 +1,16 @@
 <script lang="ts">
+	import { greeting } from '$lib/i18n';
+
 	let { title, username }: { title: string; username: string } = $props();
 
-	let greeting = $derived(`Welcome ${username}!`);
+	let message = $derived(`${greeting()} ${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>
-</style>
+</style>

src/lib/i18n/index.ts

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

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>