more localization

frontend/src/routes/+layout.svelte

@@ -12,6 +12,7 @@
 	register('it', () => import('../locales/it.json'));
 	register('zh', () => import('../locales/zh.json'));
 	register('nl', () => import('../locales/nl.json'));
+	register('sv', () => import('../locales/sv.json'));
 
 	if (browser) {
 		init({

frontend/src/routes/+page.server.ts

@@ -1,5 +1,7 @@
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
 import { redirect, type Actions } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { getRandomBackground } from '$lib';
 
 const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
 

frontend/src/routes/login/+page.svelte

@@ -3,6 +3,7 @@
 
 	export let data;
 	console.log(data);
+	import { t } from 'svelte-i18n';
 
 	import FileImageBox from '~icons/mdi/file-image-box';
 
@@ -32,36 +33,38 @@
 		<div class="flex-1">
 			<h3 class="text-center">AdventureLog</h3>
 			<article class="text-center text-4xl mb-4 font-extrabold">
-				<h1>Login</h1>
+				<h1>{$t('auth.login')}</h1>
 			</article>
 
 			<div class="flex justify-center">
 				<form method="post" use:enhance class="w-full max-w-xs">
-					<label for="username">Username</label>
+					<label for="username">{$t('auth.username')}</label>
 					<input
 						name="username"
 						id="username"
 						class="block input input-bordered w-full max-w-xs"
 					/><br />
-					<label for="password">Password</label>
+					<label for="password">{$t('auth.password')}</label>
 					<input
 						type="password"
 						name="password"
 						id="password"
 						class="block input input-bordered w-full max-w-xs"
 					/><br />
-					<button class="py-2 px-4 btn btn-primary mr-2">Login</button>
+					<button class="py-2 px-4 btn btn-primary mr-2">{$t('auth.login')}</button>
 
 					<div class="flex justify-between mt-4">
-						<p><a href="/signup" class="underline">Signup</a></p>
-						<p><a href="/settings/forgot-password" class="underline">Forgot Password</a></p>
+						<p><a href="/signup" class="underline">{$t('auth.signup')}</a></p>
+						<p>
+							<a href="/settings/forgot-password" class="underline">{$t('auth.forgot_password')}</a>
+						</p>
 					</div>
 				</form>
 			</div>
 
 			{#if ($page.form?.message && $page.form?.message.length > 1) || $page.form?.type === 'error'}
 				<div class="text-center text-error mt-4">
-					{$page.form.message || 'Unable to login with the provided credentials.'}
+					{$page.form.message || $t('auth.login_error')}
 				</div>
 			{/if}
 		</div>

frontend/src/routes/worldtravel/+page.svelte

@@ -2,6 +2,7 @@
 	import CountryCard from '$lib/components/CountryCard.svelte';
 	import type { Country } from '$lib/types';
 	import type { PageData } from './$types';
+	import { t } from 'svelte-i18n';
 
 	export let data: PageData;
 	console.log(data);
@@ -51,10 +52,11 @@
 	}
 </script>
 
-<h1 class="text-center font-bold text-4xl">Country List</h1>
+<h1 class="text-center font-bold text-4xl">{$t('worldtravel.country_list')}</h1>
 <!-- result count -->
 <p class="text-center mb-4">
-	{filteredCountries.length} countries found
+	{filteredCountries.length}
+	{$t('worldtravel.num_countries')}
 </p>
 <div class="flex items-center justify-center mb-4">
 	<div class="join">
@@ -62,7 +64,7 @@
 			class="join-item btn"
 			type="radio"
 			name="filter"
-			aria-label="All"
+			aria-label={$t('worldtravel.all')}
 			checked
 			on:click={() => (filterOption = 'all')}
 		/>
@@ -70,26 +72,26 @@
 			class="join-item btn"
 			type="radio"
 			name="filter"
-			aria-label="Partially Visited"
+			aria-label={$t('worldtravel.partially_visited')}
 			on:click={() => (filterOption = 'partial')}
 		/>
 		<input
 			class="join-item btn"
 			type="radio"
 			name="filter"
-			aria-label="Completely Visited"
+			aria-label={$t('worldtravel.completely_visited')}
 			on:click={() => (filterOption = 'complete')}
 		/>
 		<input
 			class="join-item btn"
 			type="radio"
 			name="filter"
-			aria-label="Not Visited"
+			aria-label={$t('worldtravel.not_visited')}
 			on:click={() => (filterOption = 'not')}
 		/>
 	</div>
 	<select class="select select-bordered w-full max-w-xs ml-4" bind:value={subRegionOption}>
-		<option value="">All Subregions</option>
+		<option value="">{$t('worldtravel.all_subregions')}</option>
 		{#each worldSubregions as subregion}
 			<option value={subregion}>{subregion}</option>
 		{/each}
@@ -99,14 +101,16 @@
 <div class="flex items-center justify-center mb-4">
 	<input
 		type="text"
-		placeholder="Search"
+		placeholder={$t('navbar.search')}
 		class="input input-bordered w-full max-w-xs"
 		bind:value={searchQuery}
 	/>
 	{#if searchQuery.length > 0}
 		<!-- clear button -->
 		<div class="flex items-center justify-center ml-4">
-			<button class="btn btn-neutral" on:click={() => (searchQuery = '')}> Clear Search </button>
+			<button class="btn btn-neutral" on:click={() => (searchQuery = '')}>
+				{$t('worldtravel.clear_search')}
+			</button>
 		</div>
 	{/if}
 </div>
@@ -119,7 +123,7 @@
 </div>
 
 {#if filteredCountries.length === 0}
-	<p class="text-center font-bold text-2xl mt-12">No countries found</p>
+	<p class="text-center font-bold text-2xl mt-12">{$t('worldtravel.no_countries_found')}</p>
 {/if}
 
 <svelte:head>