docs progress

website/src/lib/components/docs/DocsImage.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let src;
+	export let alt: string;
+</script>
+
+<div class="flex flex-col items-center py-6 w-full">
+	<div class="rounded-md overflow-clip shadow-lg mx-auto">
+		<enhanced:img {src} {alt} class="w-full max-w-3xl" />
+	</div>
+	<p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
+</div>

website/src/lib/components/docs/DocsLoader.svelte

@@ -7,7 +7,7 @@
 	let module = undefined;
 	let metadata: Record<string, any> = {};
 
-	const modules = import.meta.glob('/src/lib/docs/**/*.{md,svx}');
+	const modules = import.meta.glob('/src/lib/docs/**/*.mdx');
 
 	function loadModule(path: string) {
 		modules[path]().then((mod) => {
@@ -47,14 +47,21 @@
 		@apply mb-3;
 	}
 
-	:global(.markdown p > a) {
+	:global(.markdown h3) {
+		@apply text-lg;
+		@apply font-semibold;
+		@apply pt-1.5;
+	}
+
+	:global(.markdown a) {
 		@apply text-blue-500;
 		@apply hover:underline;
 	}
 
-	:global(.markdown p > a) {
-		@apply text-blue-500;
-		@apply hover:underline;
+	:global(.markdown kbd) {
+		@apply p-1;
+		@apply rounded-md;
+		@apply border;
 	}
 
 	:global(.markdown ul) {
@@ -62,6 +69,11 @@
 		@apply pl-4;
 	}
 
+	:global(.markdown li) {
+		@apply mt-1;
+		@apply first:mt-0;
+	}
+
 	:global(.markdown hr) {
 		@apply my-5;
 	}

website/src/lib/components/docs/DocsNote.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let type: 'note' | 'warning' = 'note';
+</script>
+
+<div class="bg-accent border-l-8 border-blue-500 p-2 text-sm rounded-md">
+	<slot />
+</div>

website/src/lib/components/docs/docs.ts

@@ -0,0 +1,58 @@
+export const guides: Record<string, string[]> = {
+    'getting-started': [],
+    menu: ['file', 'edit', 'view', 'settings'],
+    'files-and-stats': [],
+    toolbar: ['routing', 'poi', 'scissors', 'time', 'merge', 'extract', 'reduce', 'clean'],
+    'map-controls': [],
+    'gpx': [],
+};
+
+export function getPreviousGuide(currentGuide: string): string | undefined {
+    let subguides = currentGuide.split('/');
+
+    if (subguides.length === 1) {
+        let keys = Object.keys(guides);
+        let index = keys.indexOf(currentGuide);
+        if (index === 0) {
+            return undefined;
+        }
+        let previousGuide = keys.at(index - 1);
+        if (previousGuide === undefined) {
+            return undefined;
+        } else if (guides[previousGuide].length === 0) {
+            return previousGuide;
+        } else {
+            return `${previousGuide}/${guides[previousGuide][guides[previousGuide].length - 1]}`;
+        }
+    } else {
+        let subguideIndex = guides[subguides[0]].indexOf(subguides[1]);
+        if (subguideIndex > 0) {
+            return `${subguides[0]}/${guides[subguides[0]][subguideIndex - 1]}`;
+        } else {
+            return subguides[0];
+        }
+    }
+}
+
+export function getNextGuide(currentGuide: string): string | undefined {
+    let subguides = currentGuide.split('/');
+
+    if (subguides.length === 1) {
+        if (guides[currentGuide].length === 0) {
+            let keys = Object.keys(guides);
+            let index = keys.indexOf(currentGuide);
+            return keys.at(index + 1);
+        } else {
+            return `${currentGuide}/${guides[currentGuide][0]}`;
+        }
+    } else {
+        let subguideIndex = guides[subguides[0]].indexOf(subguides[1]);
+        if (subguideIndex < guides[subguides[0]].length - 1) {
+            return `${subguides[0]}/${guides[subguides[0]][subguideIndex + 1]}`;
+        } else {
+            let keys = Object.keys(guides);
+            let index = keys.indexOf(subguides[0]);
+            return keys.at(index + 1);
+        }
+    }
+}