docs progress

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

@@ -211,7 +211,7 @@
 	</div>
 	<div class="px-12 flex flex-col items-center">
 		<div class="max-w-5xl flex flex-col items-center gap-6">
-			<DocsLoader path="home/funding.md" />
+			<DocsLoader path="home/funding.mdx" />
 			<Button
 				href="https://ko-fi.com/gpxstudio"
 				target="_blank"
@@ -224,7 +224,7 @@
 	</div>
 	<div class="px-12 flex flex-col items-center">
 		<div class="max-w-5xl">
-			<DocsLoader path="home/translation.md" />
+			<DocsLoader path="home/translation.mdx" />
 		</div>
 	</div>
 	<div class="px-12 md:px-24 flex flex-col items-center">
@@ -239,7 +239,7 @@
 					<Logo company="mapbox" class="w-60" />
 				</a>
 			</div>
-			<DocsLoader path="home/mapbox.md" />
+			<DocsLoader path="home/mapbox.mdx" />
 		</div>
 	</div>
 </div>

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

@@ -4,13 +4,7 @@
 	import { locale } from 'svelte-i18n';
 	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
 	import { page } from '$app/stores';
-
-	let guides: Record<string, string[]> = {
-		'getting-started': [],
-		menu: ['file', 'edit', 'view', 'settings'],
-		toolbar: ['routing', 'poi', 'scissors', 'time', 'merge', 'extract', 'reduce', 'clean'],
-		'map-controls': []
-	};
+	import { guides } from '$lib/components/docs/docs';
 </script>
 
 <div class="p-12 flex flex-row gap-24">
@@ -24,7 +18,7 @@
 					? 'font-semibold text-foreground'
 					: ''}"
 			>
-				<DocsLoader path={`${guide}.svx`} titleOnly={true} />
+				<DocsLoader path={`${guide}.mdx`} titleOnly={true} />
 			</Button>
 			{#each guides[guide] as subGuide}
 				<Button
@@ -36,10 +30,12 @@
 						? 'font-semibold text-foreground'
 						: ''}"
 				>
-					<DocsLoader path={`${guide}/${subGuide}.svx`} titleOnly={true} />
+					<DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
 				</Button>
 			{/each}
 		{/each}
 	</div>
-	<slot />
+	<div class="grow">
+		<slot />
+	</div>
 </div>

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

@@ -1,6 +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}.svx" />
+<DocsLoader path="{$page.params.guide}.mdx" />
+
+<div class="flex flex-row 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>