user guide structure draft

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

@@ -14,13 +14,13 @@
 	import { currentTool, Tool } from '$lib/stores';
 	import { onDestroy, onMount } from 'svelte';
 	import { getURLForLanguage } from '$lib/utils';
-	import routingScreenshot from '$lib/assets/img/routing.png?enhanced';
-	import mapboxOutdoorsMap from '$lib/assets/img/mapbox-outdoors.png?enhanced';
-	import mapboxSatelliteMap from '$lib/assets/img/mapbox-satellite.png?enhanced';
-	import ignMap from '$lib/assets/img/ign.png?enhanced';
-	import cyclosmMap from '$lib/assets/img/cyclosm.png?enhanced';
-	import waymarkedMap from '$lib/assets/img/waymarked.png?enhanced';
-	import mapScreenshot from '$lib/assets/img/map.png?enhanced';
+	import routingScreenshot from '$lib/assets/img/home/routing.png?enhanced';
+	import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
+	import mapboxSatelliteMap from '$lib/assets/img/home/mapbox-satellite.png?enhanced';
+	import ignMap from '$lib/assets/img/home/ign.png?enhanced';
+	import cyclosmMap from '$lib/assets/img/home/cyclosm.png?enhanced';
+	import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
+	import mapScreenshot from '$lib/assets/img/home/map.png?enhanced';
 
 	let gpxStatistics = writable(exampleGPXFile.getStatistics());
 	let slicedGPXStatistics = writable(undefined);
@@ -52,11 +52,11 @@
 				</Button>
 				<Button
 					variant="secondary"
-					href={getURLForLanguage('/[...language]/documentation', $locale)}
+					href={getURLForLanguage('/[...language]/help', $locale)}
 					class="w-1/3 min-w-fit"
 				>
 					<BookOpenText size="18" class="mr-1.5" />
-					<span>{$_('homepage.documentation')}</span>
+					<span>{$_('homepage.help')}</span>
 				</Button>
 			</div>
 		</div>

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

@@ -1,5 +0,0 @@
-<script>
-	import Docs from '$lib/components/docs/Docs.svelte';
-</script>
-
-<Docs />

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

@@ -0,0 +1,37 @@
+<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';
+
+	let guides: Record<string, string[]> = {
+		'getting-started': [],
+		menu: ['file', 'edit', 'view', 'settings'],
+		toolbar: ['routing', 'poi', 'scissors', 'time', 'merge', 'extract', 'reduce', 'clean'],
+		'map-controls': []
+	};
+</script>
+
+<div class="p-12 flex flex-row gap-24">
+	<div class="hidden md:flex flex-col gap-1 w-40">
+		{#each Object.keys(guides) as guide}
+			<Button
+				variant="link"
+				href={getURLForLanguage(`/[...language]/help/${guide}`, $locale)}
+				class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start"
+			>
+				<DocsLoader path={`${guide}.svx`} titleOnly={true} />
+			</Button>
+			{#each guides[guide] as subGuide}
+				<Button
+					variant="link"
+					href={getURLForLanguage(`/[...language]/help/${guide}/${subGuide}`, $locale)}
+					class="h-6 p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start ml-3"
+				>
+					<DocsLoader path={`${guide}/${subGuide}.svx`} titleOnly={true} />
+				</Button>
+			{/each}
+		{/each}
+	</div>
+	<slot />
+</div>

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

@@ -0,0 +1,4 @@
+<script>
+</script>
+
+<div></div>

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

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
+</script>
+
+<DocsLoader path="{$page.params.guide}.svx" />