README.md

@@ -44,6 +44,7 @@ bun build
 - https://svelte.dev/docs/kit/introduction
 - https://zod.dev/
 - https://day.js.org/
+- https://inlang.com/c/svelte
 
 ### Frontend
 

messages/en.json

@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"greeting": "Hello"
+}

package.json

@@ -38,7 +38,7 @@
 		"@storybook/test": "^8.4.7",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.9.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@types/bun": "^1.1.14",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.12.22",
@@ -61,6 +61,7 @@
 	},
 	"dependencies": {
 		"@flaticon/flaticon-uicons": "^3.3.1",
+		"@inlang/paraglide-sveltekit": "^0.15.0",
 		"@lucia-auth/adapter-prisma": "^4.0.1",
 		"@pothos/core": "^4.3.0",
 		"@pothos/plugin-prisma": "^4.4.0",

project.inlang/.gitignore

@@ -0,0 +1 @@
+cache

project.inlang/project_id

@@ -0,0 +1 @@
+309efd37fde7fcb319e88bd3fa47f3ff10e868625e8bd1771591d658e463f28f

project.inlang/settings.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@2/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@0/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{languageTag}.json"
+	},
+	"sourceLanguageTag": "en",
+	"languageTags": ["en"]
+}

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

@@ -1,13 +1,15 @@
 <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>

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>
 
+<ParaglideJS {i18n}>
 	<style>
 		.layout {
 			@apply h-screen w-screen bg-base-100;
 		}
 	</style>
+</ParaglideJS>

vite.config.ts

@@ -1,8 +1,15 @@
 import { defineConfig } from 'vitest/config';
+import { paraglide } from '@inlang/paraglide-sveltekit/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [
+		sveltekit(),
+		paraglide({
+			project: './project.inlang',
+			outdir: './src/lib/paraglide',
+		}),
+	],
 
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}'],