libris · jesperengstrom · Jan 18, 2024 · Jan 12, 2024 · Jan 12, 2024 · Jan 12, 2024
diff --git a/lxl-web/src/app.d.ts b/lxl-web/src/app.d.ts
@@ -4,7 +4,10 @@ declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
-		// interface PageData {}
+		interface PageData {
+			locale: import('$lib/i18n/locales').LocaleCode;
+			t: Awaited<ReturnType<typeof import('$lib/i18n').getTranslator>>;
+		}
 		// interface Platform {}
 	}
 }

diff --git a/lxl-web/src/app.html b/lxl-web/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="%lang%">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />

diff --git a/lxl-web/src/hooks.server.ts b/lxl-web/src/hooks.server.ts
@@ -0,0 +1,18 @@
+import { defaultLocale, Locales } from '$lib/i18n/locales';
+
+export const handle = async ({ event, resolve }) => {
+	// set HTML lang
+	// https://github.com/sveltejs/kit/issues/3091#issuecomment-1112589090
+	const path = event.url.pathname;
+	let lang = defaultLocale;
+
+	Object.keys(Locales).forEach((locale) => {
+		if (path && (path.startsWith(`/${locale}/`) || path.endsWith(`/${locale}`))) {
+			lang = locale;
+		}
+	});
+
+	return resolve(event, {
+		transformPageChunk: ({ html }) => html.replace('%lang%', lang)
+	});
+};
diff --git a/lxl-web/src/lib/components/LangPicker.svelte b/lxl-web/src/lib/components/LangPicker.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { Locales, defaultLocale } from '$lib/i18n/locales';
+
+	function mapLocales(currentLocale: string) {
+		return Object.keys(Locales).map((locale) => {
+			// remove any existing lang param and add the new one (if needed)
+			const arr = $page.url.pathname.split('/').filter((p) => !!p && p !== currentLocale);
+			if (locale !== defaultLocale) {
+				arr.unshift(locale);
+			}
+			const url = `/${arr.join('/')}${$page.url.search}`;
+
+			return { value: locale, name: Locales[locale], url };
+		});
+	}
+
+	$: localesObj = mapLocales($page.data.locale);
+</script>
+
+<nav>
+	<ul class="flex">
+		{#each localesObj as locale}
+			<li class="m-1">
+				{#if locale.value === $page.data.locale}
+					<span class="font-bold">{locale.name}</span>
+				{:else}
+					<!-- server hook (html lang) needs full page reload -->
+					<a href={locale.url} data-sveltekit-reload>{locale.name}</a>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+</nav>
diff --git a/lxl-web/src/lib/components/Search.svelte b/lxl-web/src/lib/components/Search.svelte
@@ -26,7 +26,7 @@
 	}
 </script>
 
-<form action="/search" on:submit={handleSubmit}>
+<form action="search" on:submit={handleSubmit}>
 	<!-- svelte-ignore a11y-autofocus -->
 	<input
 		type="search"

diff --git a/lxl-web/src/lib/i18n/index.ts b/lxl-web/src/lib/i18n/index.ts
@@ -0,0 +1,48 @@
+import { dev } from '$app/environment';
+import { interpolate } from './interpolate';
+import { defaultLocale, type LocaleCode } from './locales';
+import sv from './locales/sv.js';
+
+// always import default translation?
+const loadedTranslations: Record<string, typeof sv> = {
+	sv
+};
+
+export async function getTranslator(locale: LocaleCode) {
+	if (!loadedTranslations[locale]) {
+		loadedTranslations[locale] = (await import(`./locales/${locale}.js`)).default;
+		// add error handling?
+	}
+
+	return (key: string, values?: { [key: string]: string }): string => {
+		if (!key.includes('.')) {
+			// do we require nested keys?
+			throw new Error('Incorrect i11n key');
+		}
+		const [section, item] = key.split('.') as [string, string];
+
+		// @ts-expect-error - how to typecheck??
+		const localeResult = loadedTranslations[locale][section]?.[item];
+
+		if (localeResult) {
+			return interpolate(localeResult, values);
+		} else {
+			console.warn(`Missing ${locale} translation for ${key}`);
+		}
+
+		// @ts-expect-error - how to typecheck??
+		const fallbackResult = loadedTranslations[defaultLocale][section][item];
+
+		if (fallbackResult) {
+			return interpolate(fallbackResult, values);
+		}
+
+		const error = `Missing fallback translation for ${key}`;
+		if (dev) {
+			throw new Error(error);
+		}
+
+		console.error(error);
+		return key;
+	};
+}
diff --git a/lxl-web/src/lib/i18n/interpolate.test.ts b/lxl-web/src/lib/i18n/interpolate.test.ts
@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { interpolate } from './interpolate';
+
+describe('iterpolate', () => {
+	it('replaces placeholders with corresponding values', () => {
+		const template = 'Hi {name}, welcome to {site}!';
+		const values = { name: 'Kalle', site: 'Libris' };
+		expect(interpolate(template, values)).toEqual('Hi Kalle, welcome to Libris!');
+	});
+});
diff --git a/lxl-web/src/lib/i18n/interpolate.ts b/lxl-web/src/lib/i18n/interpolate.ts
@@ -0,0 +1,8 @@
+const placeholder = /{(.*?)}/g;
+
+export function interpolate(template: string, values?: Record<string, string>) {
+	if (!values) {
+		return template;
+	}
+	return template.replace(placeholder, (match, key) => values[key] || match);
+}
diff --git a/lxl-web/src/lib/i18n/locales.ts b/lxl-web/src/lib/i18n/locales.ts
@@ -0,0 +1,14 @@
+export enum Locales {
+	sv = 'Svenska',
+	en = 'English'
+}
+
+export type LocaleCode = keyof typeof Locales;
+export const defaultLocale = 'sv';
+
+export function getSupportedLocale(userLocale: string | undefined): LocaleCode {
+	const locale = Object.keys(Locales).find((supportedLocale) => {
+		return userLocale?.includes(supportedLocale);
+	}) as LocaleCode;
+	return locale || defaultLocale;
+}
diff --git a/lxl-web/src/lib/i18n/locales/en.js b/lxl-web/src/lib/i18n/locales/en.js
@@ -0,0 +1,11 @@
+/** @type {typeof import('./sv.js').default} */
+export default {
+	home: {
+		welcome_text: 'Welcome to {site}, today is {day}'
+	},
+	search: {
+		result_info: 'Search result for: {q}'
+	},
+	errors: {},
+	general: {}
+};
diff --git a/lxl-web/src/lib/i18n/locales/sv.js b/lxl-web/src/lib/i18n/locales/sv.js
@@ -0,0 +1,12 @@
+export default {
+	home: {
+		welcome_text: 'Välkommen till {site}, idag är det {day}'
+	},
+	search: {
+		result_info: 'Sökresultat för: {q}'
+	},
+	errors: {},
+	general: {
+		// shared stuff go here
+	}
+};
diff --git a/lxl-web/src/routes/(app)/+layout.ts b/lxl-web/src/routes/(app)/+layout.ts
@@ -0,0 +1,9 @@
+import { getTranslator } from '$lib/i18n/index.js';
+import { getSupportedLocale, defaultLocale } from '$lib/i18n/locales';
+
+export async function load({ params }) {
+	const locale = getSupportedLocale(params?.lang); // will use default locale if no lang param
+	const t = await getTranslator(locale);
+	const base = locale === defaultLocale ? '/' : `/${locale}/`;
+	return { locale, t, base };
+}
diff --git a/lxl-web/src/routes/(app)/[[lang=lang]]/+layout.svelte b/lxl-web/src/routes/(app)/[[lang=lang]]/+layout.svelte
@@ -1,10 +1,19 @@
-<script>
+<script lang="ts">
 	import Search from '$lib/components/Search.svelte';
+	import LangPicker from '$lib/components/LangPicker.svelte';
 	import '../../../app.css';
+
+	export let data;
 </script>
 
-<header>
-	<a href="/">Libris</a>
-	<Search />
+<svelte:head>
+	<base href={data.base} />
+</svelte:head>
+<header class="mx-4 flex">
+	<div class="flex-1">
+		<a href={data.base}>Libris</a>
+		<Search />
+	</div>
+	<LangPicker />
 </header>
 <slot />
diff --git a/lxl-web/src/routes/(app)/[[lang=lang]]/+page.svelte b/lxl-web/src/routes/(app)/[[lang=lang]]/+page.svelte
@@ -1 +1,10 @@
-<h1>Welcome to Libris(?)</h1>
+<script lang="ts">
+	export let data;
+</script>
+
+<h1>
+	{data.t('home.welcome_text', {
+		site: 'Libris',
+		day: `${(() => new Intl.DateTimeFormat(data.locale, { weekday: 'long' }).format(new Date()))()}`
+	})}
+</h1>
diff --git a/lxl-web/src/routes/(app)/[[lang=lang]]/search/+page.server.ts b/lxl-web/src/routes/(app)/[[lang=lang]]/search/+page.server.ts
@@ -11,6 +11,7 @@ export const load = (async ({ fetch, url }) => {
 	const records = await recordsRes.json();
 
 	const items = records.items.map((item) => ({
+		fnurgel: new URL(item['@id']).pathname.replace('/', ''),
 		'@id': item['@id']
 	}));
 

diff --git a/lxl-web/src/routes/(app)/[[lang=lang]]/search/+page.svelte b/lxl-web/src/routes/(app)/[[lang=lang]]/search/+page.svelte
@@ -7,9 +7,11 @@
 	$: q = $page.url.searchParams.get('q');
 </script>
 
-<h1>Search results for: {q}</h1>
-<ul>
-	{#each data.items as item (item['@id'])}
-		<li>{item['@id']}</li>
-	{/each}
-</ul>
+<div class="m-3">
+	<h1>{$page.data.t('search.result_info', { q: `${q}` })}</h1>
+	<ul>
+		{#each data.items as item (item['@id'])}
+			<li><a class="underline" href={item.fnurgel}>{item.fnurgel}</a></li>
+		{/each}
+	</ul>
+</div>
diff --git a/lxl-web/svelte.config.js b/lxl-web/svelte.config.js
@@ -8,7 +8,10 @@ const config = {
 	preprocess: vitePreprocess(),
 
 	kit: {
-		adapter: adapter()
+		adapter: adapter(),
+		paths: {
+			relative: false
+		}
 	}
 };