localization v2

frontend/src/routes/+layout.svelte

@@ -6,6 +6,8 @@
 	// Register your translations for each locale
 	register('en', () => import('../locales/en.json'));
 	register('es', () => import('../locales/es.json'));
+	register('fr', () => import('../locales/fr.json'));
+	register('de', () => import('../locales/de.json'));
 
 	if (browser) {
 		init({
@@ -37,3 +39,11 @@
 	<Toast />
 	<slot />
 {/await}
+
+<svelte:head>
+	<title>AdventureLog</title>
+	<meta
+		name="description"
+		content="Embark, explore, remember with AdventureLog. AdventureLog is the ultimate travel companion."
+	/>
+</svelte:head>

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

@@ -49,5 +49,15 @@ export const actions: Actions = {
 		} else {
 			return redirect(302, '/');
 		}
+	},
+	setLocale: async ({ url, cookies }) => {
+		const locale = url.searchParams.get('locale');
+		// change the theme only if it is one of the allowed themes
+		if (locale && ['en', 'es'].includes(locale)) {
+			cookies.set('locale', locale, {
+				path: '/',
+				maxAge: 60 * 60 * 24 * 365
+			});
+		}
 	}
 };

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

@@ -26,6 +26,13 @@
 	let resultsPerPage: number = 25;
 
 	let count = data.props.count || 0;
+
+	$: {
+		if (count != adventures.length) {
+			count = adventures.length;
+		}
+	}
+
 	let totalPages = Math.ceil(count / resultsPerPage);
 	let currentPage: number = 1;
 

frontend/src/routes/adventures/[id]/+page.svelte

@@ -5,6 +5,7 @@
 	import { goto } from '$app/navigation';
 	import Lost from '$lib/assets/undraw_lost.svg';
 	import { DefaultMarker, MapLibre, Popup } from 'svelte-maplibre';
+	import { t } from 'svelte-i18n';
 
 	export let data: PageData;
 	console.log(data);
@@ -22,10 +23,8 @@
 	let image_url: string | null = null;
 
 	import ClipboardList from '~icons/mdi/clipboard-list';
-	import EditAdventure from '$lib/components/AdventureModal.svelte';
 	import AdventureModal from '$lib/components/AdventureModal.svelte';
 	import ImageDisplayModal from '$lib/components/ImageDisplayModal.svelte';
-	import { typeToString } from '$lib';
 
 	onMount(() => {
 		if (data.props.adventure) {
@@ -171,7 +170,7 @@
 									>{adventure.is_public ? 'Public' : 'Private'}</span
 								>
 							</div>
-								{#if adventure.location}
+							{#if adventure.location}
 								<div class="flex items-center gap-2">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -265,7 +264,7 @@
 								<div>
 									<p class="text-sm text-muted-foreground">Adventure Type</p>
 									<p class="text-base font-medium">
-										{typeToString(adventure.type)}
+										{$t(`adventures.activities.${adventure.type}`)}
 									</p>
 								</div>
 								{#if data.props.collection}

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

@@ -27,6 +27,12 @@
 	let totalPages = Math.ceil(count / resultsPerPage);
 	let currentPage: number = 1;
 
+	$: {
+		if (count != collections.length) {
+			count = collections.length;
+		}
+	}
+
 	function handleChangePage() {
 		return async ({ result }: any) => {
 			if (result.type === 'success') {

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

@@ -1,7 +1,7 @@
 <script>
 	// @ts-nocheck
 
-	import { isAdventureVisited, typeToString } from '$lib';
+	import { isAdventureVisited } from '$lib';
 	import AdventureModal from '$lib/components/AdventureModal.svelte';
 	import {
 		DefaultMarker,
@@ -14,6 +14,7 @@
 		FillLayer,
 		SymbolLayer
 	} from 'svelte-maplibre';
+	import { t } from 'svelte-i18n';
 	export let data;
 
 	let clickedName = '';
@@ -162,7 +163,9 @@
 				<Popup openOn="click" offset={[0, -10]}>
 					<div class="text-lg text-black font-bold">{marker.name}</div>
 					<p class="font-semibold text-black text-md">Visited</p>
-					<p class="font-semibold text-black text-md">{typeToString(marker.type)}</p>
+					<p class="font-semibold text-black text-md">
+						{$t(`adventures.activities.${marker.type}`)}
+					</p>
 					{#if marker.visits && marker.visits.length > 0}
 						<p class="text-black text-sm">
 							{#each marker.visits as visit}
@@ -201,7 +204,9 @@
 				<Popup openOn="click" offset={[0, -10]}>
 					<div class="text-lg text-black font-bold">{marker.name}</div>
 					<p class="font-semibold text-black text-md">Planned</p>
-					<p class="font-semibold text-black text-md">{typeToString(marker.type)}</p>
+					<p class="font-semibold text-black text-md">
+						{$t(`adventures.activities.${marker.type}`)}}
+					</p>
 					{#if marker.visits && marker.visits.length > 0}
 						<p class="text-black text-sm">
 							{#each marker.visits as visit}