optional parameter for language, instead of rest parameter

website/src/routes/[[language]]/help/+layout.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { getURLForLanguage } from '$lib/utils';
+	import { locale } from 'svelte-i18n';
+	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
+	import { page } from '$app/stores';
+	import { guides } from '$lib/components/docs/docs';
+</script>
+
+<div class="px-12 pt-6 pb-12 flex flex-row gap-24">
+	<div class="hidden md:flex flex-col gap-2 w-40 sticky top-[108px] self-start shrink-0">
+		{#each Object.keys(guides) as guide}
+			<Button
+				variant="link"
+				href={getURLForLanguage($locale, `/help/${guide}`)}
+				class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
+					.params.guide === guide
+					? 'font-semibold text-foreground'
+					: ''}"
+			>
+				<DocsLoader path={`${guide}.mdx`} titleOnly={true} />
+			</Button>
+			{#each guides[guide] as subGuide}
+				<Button
+					variant="link"
+					href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
+					class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
+						.params.guide ===
+					guide + '/' + subGuide
+						? 'font-semibold text-foreground'
+						: ''}"
+				>
+					<DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
+				</Button>
+			{/each}
+		{/each}
+	</div>
+	<div class="grow">
+		<slot />
+	</div>
+</div>

website/src/routes/[[language]]/help/+page.svelte

@@ -0,0 +1,38 @@
+<script>
+	import { Button } from '$lib/components/ui/button';
+	import { getURLForLanguage } from '$lib/utils';
+	import { locale } from 'svelte-i18n';
+	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
+	import { guides, guideIcons } from '$lib/components/docs/docs';
+</script>
+
+<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+	{#each Object.keys(guides) as guide}
+		<Button
+			variant="outline"
+			href={getURLForLanguage($locale, `/help/${guide}`)}
+			class="h-full pt-6 pb-3 px-0"
+		>
+			<div class="flex flex-col w-full">
+				<div class="text-center text-5xl">
+					{guideIcons[guide]}
+				</div>
+				<div class="text-2xl text-center my-3 w-full whitespace-normal px-6">
+					<DocsLoader path={`${guide}.mdx`} titleOnly={true} />
+				</div>
+				<div class="flex flex-row justify-center flex-wrap gap-x-6 px-6">
+					{#each guides[guide] as subGuide}
+						<Button
+							variant="link"
+							href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
+							class="h-fit px-0 py-1 text-muted-foreground   text-base text-center whitespace-normal"
+						>
+							<svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" />
+							<DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
+						</Button>
+					{/each}
+				</div>
+			</div>
+		</Button>
+	{/each}
+</div>

website/src/routes/[[language]]/help/[...guide]/+page.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { getNextGuide, getPreviousGuide } from '$lib/components/docs/docs';
+	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { getURLForLanguage } from '$lib/utils';
+	import { ChevronLeft, ChevronRight } from 'lucide-svelte';
+
+	$: previousGuide = getPreviousGuide($page.params.guide);
+	$: nextGuide = getNextGuide($page.params.guide);
+</script>
+
+<DocsLoader path="{$page.params.guide}.mdx" />
+
+<div class="flex flex-row flex-wrap gap-3 pt-6">
+	{#if previousGuide}
+		<Button
+			variant="outline"
+			class="mr-auto"
+			href={getURLForLanguage(undefined, `/help/${previousGuide}`)}
+		>
+			<ChevronLeft size="14" class="mr-1 mt-0.5" />
+			<DocsLoader path="{previousGuide}.mdx" titleOnly={true} />
+		</Button>
+	{/if}
+	{#if nextGuide}
+		<Button
+			variant="outline"
+			class="ml-auto"
+			href={getURLForLanguage(undefined, `/help/${nextGuide}`)}
+		>
+			<DocsLoader path="{nextGuide}.mdx" titleOnly={true} />
+			<ChevronRight size="14" class="ml-1 mt-0.5" />
+		</Button>
+	{/if}
+</div>