rework page metadata and links

website/src/lib/components/Footer.svelte

@@ -3,7 +3,8 @@
 	import LanguageSelect from '$lib/components/LanguageSelect.svelte';
 	import Logo from '$lib/components/Logo.svelte';
 	import { AtSign, BookOpenText, Heart, Home, Map } from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
+	import { _, locale } from 'svelte-i18n';
+	import { getURLForLanguage } from '$lib/languages';
 </script>
 
 <footer class="w-full">
@@ -24,15 +25,27 @@
 			<div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
 				<div class="flex flex-col items-start gap-1">
 					<span class="font-semibold">{$_('homepage.website')}</span>
-					<Button variant="link" class="h-6 px-0 text-muted-foreground" href="./about">
+					<Button
+						variant="link"
+						class="h-6 px-0 text-muted-foreground"
+						href={getURLForLanguage('/[...language]', $locale)}
+					>
 						<Home size="16" class="mr-1" />
 						{$_('homepage.home')}
 					</Button>
-					<Button variant="link" class="h-6 px-0 text-muted-foreground" href="./">
+					<Button
+						variant="link"
+						class="h-6 px-0 text-muted-foreground"
+						href={getURLForLanguage('/[...language]/app', $locale)}
+					>
 						<Map size="16" class="mr-1" />
 						{$_('homepage.app')}
 					</Button>
-					<Button variant="link" class="h-6 px-0 text-muted-foreground" href="./documentation">
+					<Button
+						variant="link"
+						class="h-6 px-0 text-muted-foreground"
+						href={getURLForLanguage('/[...language]/documentation', $locale)}
+					>
 						<BookOpenText size="16" class="mr-1" />
 						{$_('homepage.documentation')}
 					</Button>

website/src/lib/components/Head.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import { page } from '$app/stores';
+	import { languages } from '$lib/languages';
+	import { _, isLoading } from 'svelte-i18n';
+
+	$: location = $page.route.id?.split('/').slice(1).at(1) ?? 'home';
+</script>
+
+<svelte:head>
+	{#if $isLoading}
+		<title>gpx.studio — the online GPX file editor</title>
+		<meta
+			name="description"
+			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+		/>
+		<meta property="og:title" content="gpx.studio — the online GPX file editor" />
+		<meta
+			property="og:description"
+			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+		/>
+		<meta name="twitter:title" content="gpx.studio — the online GPX file editor" />
+		<meta
+			name="twitter:description"
+			content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
+		/>
+	{:else}
+		<title>gpx.studio — {$_(`metadata.${location}_title`)}</title>
+		<meta name="description" content={$_('metadata.description')} />
+		<meta property="og:title" content="gpx.studio — {$_(`metadata.${location}_title`)}" />
+		<meta property="og:description" content={$_('metadata.description')} />
+		<meta name="twitter:title" content="gpx.studio — {$_(`metadata.${location}_title`)}" />
+		<meta name="twitter:description" content={$_('metadata.description')} />
+	{/if}
+
+	<meta property="og:image" content="https://gpx.studio/og_logo.png" />
+	<meta property="og:url" content="https://gpx.studio/" />
+	<meta property="og:type" content="website" />
+	<meta property="og:site_name" content="gpx.studio" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:image" content="https://gpx.studio/og_logo.png" />
+	<meta name="twitter:url" content="https://gpx.studio/" />
+	<meta name="twitter:site" content="@gpxstudio" />
+	<meta name="twitter:creator" content="@gpxstudio" />
+
+	<link
+		rel="alternate"
+		hreflang="x-default"
+		href="https://gpx.studio{base}/{location === 'home' ? '' : location}"
+	/>
+	{#each Object.keys(languages) as lang}
+		<link
+			rel="alternate"
+			hreflang={lang}
+			href="https://gpx.studio{base}/{lang === 'en' ? '' : lang + '/'}{location === 'home'
+				? ''
+				: location}"
+		/>
+	{/each}
+</svelte:head>

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>

website/src/lib/components/Menu.svelte

@@ -73,6 +73,7 @@
 	import { mode, setMode, systemPrefersMode } from 'mode-watcher';
 	import { _, locale } from 'svelte-i18n';
 	import { getURLForLanguage, languages } from '$lib/languages';
+	import { page } from '$app/stores';
 
 	const {
 		distanceUnits,
@@ -123,7 +124,7 @@
 	<div
 		class="w-fit flex flex-row items-center justify-center p-1 bg-background rounded-b-md md:rounded-md pointer-events-auto shadow-md"
 	>
-		<a href="./" target="_blank">
+		<a href={getURLForLanguage('/[...language]', $locale)} target="_blank">
 			<Logo class="h-5 mt-0.5 mx-2 md:hidden" iconOnly={true} />
 			<Logo class="h-5 mt-0.5 mx-2 hidden md:block" />
 		</a>
@@ -363,9 +364,9 @@
 						</Menubar.SubTrigger>
 						<Menubar.SubContent>
 							<Menubar.RadioGroup bind:value={$locale}>
-								{#each Object.entries(languages) as [code, name]}
-									<a href={getURLForLanguage(code)}>
-										<Menubar.RadioItem value={code}>{name}</Menubar.RadioItem>
+								{#each Object.entries(languages) as [lang, label]}
+									<a href={getURLForLanguage($page.route.id, lang)}>
+										<Menubar.RadioItem value={lang}>{label}</Menubar.RadioItem>
 									</a>
 								{/each}
 							</Menubar.RadioGroup>
@@ -415,7 +416,7 @@
 		<div class="h-fit flex flex-row items-center ml-1 gap-1">
 			<Button
 				variant="ghost"
-				href="./documentation"
+				href={getURLForLanguage('/[...language]/documentation', $locale)}
 				target="_blank"
 				class="cursor-default h-fit rounded-sm px-3 py-0.5"
 			>

website/src/lib/components/Nav.svelte

@@ -3,24 +3,37 @@
 	import { Button } from '$lib/components/ui/button';
 	import ModeSwitch from '$lib/components/ModeSwitch.svelte';
 	import { BookOpenText, Home, Map } from 'lucide-svelte';
-	import { _ } from 'svelte-i18n';
+	import { getURLForLanguage } from '$lib/languages';
+	import { _, locale } from 'svelte-i18n';
 </script>
 
 <nav class="w-full sticky top-0 bg-background z-10">
 	<div class="mx-6 py-2 flex flex-row items-center border-b gap-4 md:gap-8">
-		<a href="./" class="shrink-0">
+		<a href={getURLForLanguage('/[...language]', $locale)} class="shrink-0">
 			<Logo class="h-8 sm:hidden" iconOnly={true} />
 			<Logo class="h-7 hidden sm:block" />
 		</a>
-		<Button variant="link" class="text-base px-0" href="./">
+		<Button
+			variant="link"
+			class="text-base px-0"
+			href={getURLForLanguage('/[...language]', $locale)}
+		>
 			<Home size="18" class="mr-1.5" />
 			{$_('homepage.home')}
 		</Button>
-		<Button variant="link" class="text-base px-0" href="./app">
+		<Button
+			variant="link"
+			class="text-base px-0"
+			href={getURLForLanguage('/[...language]/app', $locale)}
+		>
 			<Map size="18" class="mr-1.5" />
 			{$_('homepage.app')}
 		</Button>
-		<Button variant="link" class="text-base px-0" href="./documentation">
+		<Button
+			variant="link"
+			class="text-base px-0"
+			href={getURLForLanguage('/[...language]/documentation', $locale)}
+		>
 			<BookOpenText size="18" class="mr-1.5" />
 			{$_('homepage.documentation')}
 		</Button>

website/src/lib/components/file-list/FileList.ts

@@ -1,5 +1,5 @@
 import { dbUtils, getFile } from "$lib/db";
-import { castDraft, freeze } from "immer";
+import { freeze } from "immer";
 import { GPXFile, Track, TrackSegment, Waypoint } from "gpx";
 import { selection } from "./Selection";
 import { newGPXFile } from "$lib/stores";