rework page metadata and links

website/src/lib/components/LanguageSelect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import * as Select from '$lib/components/ui/select';
 	import { getURLForLanguage, languages } from '$lib/languages';
 	import { Languages } from 'lucide-svelte';
@@ -18,14 +18,25 @@
 	}
 </script>
 
-<Select.Root bind:selected onSelectedChange={(s) => goto(getURLForLanguage(s?.value))}>
+<Select.Root bind:selected>
 	<Select.Trigger class="w-[180px] {$$props.class ?? ''}">
 		<Languages size="16" />
 		<Select.Value class="ml-2 mr-auto" />
 	</Select.Trigger>
 	<Select.Content>
-		{#each Object.entries(languages) as [key, value]}
-			<Select.Item value={key}>{value}</Select.Item>
+		{#each Object.entries(languages) as [lang, label]}
+			<a href={getURLForLanguage($page.route.id, lang)}>
+				<Select.Item value={lang}>{label}</Select.Item>
+			</a>
 		{/each}
 	</Select.Content>
 </Select.Root>
+
+<!-- hidden links for svelte crawling -->
+<div class="hidden">
+	{#each Object.entries(languages) as [lang, label]}
+		<a href={getURLForLanguage($page.route.id, lang)}>
+			{label}
+		</a>
+	{/each}
+</div>