Work on i18n helpers and cms config

package.json

@@ -16,11 +16,11 @@
 		"@inlang/paraglide-js": "1.1.0",
 		"@inlang/paraglide-js-adapter-vite": "^1.2.0",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.0.7",
+		"@sveltejs/kit": "^2.0.8",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@types/eslint": "8.56.0",
-		"@typescript-eslint/eslint-plugin": "^6.18.0",
-		"@typescript-eslint/parser": "^6.18.0",
+		"@typescript-eslint/eslint-plugin": "^6.18.1",
+		"@typescript-eslint/parser": "^6.18.1",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",

src/lib/i18n/handle.server.ts

@@ -5,17 +5,18 @@ import { link } from './link';
 
 /**
  * Handle hook for:
- * - setting SSR lang
- * - transforming html lang attribute placeholder
- * - rewriting unlocalized SSR redirects lang segment in location
+ *
+ * - Setting SSR lang.
+ * - Transforming html lang attribute placeholder.
+ * - Rewriting unlocalized SSR redirects lang segment in location.
  */
 const handle = (async ({ event, resolve }) => {
 	event.locals.lang = getEventLang(event);
 	setLanguageTag(() => event.locals.lang);
 	const response = await resolve(event, {
 		transformPageChunk(input) {
 			return input.html.replace('%lang%', event.locals.lang);
-		}
+		},
 	});
 	if (!isRedirect(response)) {
 		return response;

src/lib/i18n/link.ts

@@ -4,35 +4,70 @@ import {
 	sourceLanguageTag,
 	type AvailableLanguageTag,
 } from '$translations/runtime';
-import type { HTMLAnchorAttributes } from 'svelte/elements';
 
-export function delang<L extends string>(location: L) {
+/**
+ * Remove an app-oriented href's lang param.
+ */
+export function removeLang<L extends string>(location: L) {
 	const [_, maybeLang, ...rest] = location.split('/');
 	if (availableLanguageTags.includes(maybeLang as AvailableLanguageTag)) {
 		return `/${rest.join('/')}`;
 	}
 	return location;
 }
 
-export function link<L extends string>(location: L, lang: AvailableLanguageTag = languageTag()) {
-	const tail = delang(location);
+/**
+ * Apply a lang param to an app-oriented href.
+ *
+ * **Attention**: If a lang param is included in the passed location string, it will be replaced.
+ */
+export function link<L extends string>(
+	/**
+	 * Route location agnostic of lang segment.
+	 */
+	location: L,
+	/**
+	 * Custom lang to apply when wishing to target a lang different than the current one.
+	 */
+	lang: AvailableLanguageTag = languageTag()
+) {
+	const tail = removeLang(location);
 	if (lang === sourceLanguageTag) {
 		return tail;
 	}
 	return `/${lang}${location}`;
 }
 
-export function linkAttributes<P extends string>(
-	path: P,
-	{
-		lang = languageTag(),
-	}: {
-		lang?: AvailableLanguageTag;
-	} = {}
-) {
-	const href = link(path, lang);
-	return {
-		href,
-		hreflang: lang,
-	} satisfies Partial<HTMLAnchorAttributes>;
-}
+/**
+ * Compose a set of attributes for a given link and language.
+ */
+// export function linkAttributes<P extends string>(
+// 	path: P,
+// 	{
+// 		lang = languageTag(),
+// 	}: {
+// 		lang?: AvailableLanguageTag;
+// 	} = {}
+// ) {
+// 	const href = link(path, lang);
+// 	return {
+// 		href,
+// 		hreflang: lang,
+// 	} satisfies Partial<HTMLAnchorAttributes>;
+// }
+
+/**
+ * ```
+ *
+ * <a {...attributes}>
+ *   <svelte:component this={spinner} />
+ *   This is a link
+ * </a>
+ * ```
+ */
+// export function loadableLink() {
+// 	return {
+// 		attributes,
+// 		spinner
+// 	}
+// }

src/routes/[[lang=lang]]/+layout.svelte

@@ -1,25 +1,38 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { link } from '$lib/i18n/link';
-	import { availableLanguageTags, languageTag } from '$translations/runtime';
+	import { availableLanguageTags, languageTag, setLanguageTag } from '$translations/runtime';
+	import { untrack } from 'svelte';
 
 	let { children } = $props();
+	let mounted = $state(false);
 
-	// setLanguageTag()
+	// On mount
+	$effect(() => {
+		untrack(() => {
+			mounted = true;
+		});
+	});
+
+	const lang = $derived($page.data.lang);
+	setLanguageTag(() => lang);
 </script>
 
 <svelte:head>
 	{#each availableLanguageTags as lang}
-		<link rel="alternate" hreflang={lang} href={link($page.url.pathname, lang)} />
+		<link rel="alternate" hreflang={lang} href={link($page.url.toString(), lang)} />
 	{/each}
 </svelte:head>
 
 <header>
 	<nav>
 		{#each availableLanguageTags as lang}
-			<a href={lang}>{lang}</a>
+			<a href={link('/', lang)}>{lang}</a>
 		{/each}
 	</nav>
+	<nav>
+		<a href={link('/test')}>Test</a>
+	</nav>
 </header>
 <main>
 	{languageTag()}