user guide structure draft

website/src/lib/components/Footer.svelte

@@ -44,10 +44,10 @@
 					<Button
 						variant="link"
 						class="h-6 px-0 text-muted-foreground"
-						href={getURLForLanguage('/[...language]/documentation', $locale)}
+						href={getURLForLanguage('/[...language]/help', $locale)}
 					>
 						<BookOpenText size="16" class="mr-1" />
-						{$_('homepage.documentation')}
+						{$_('menu.help')}
 					</Button>
 				</div>
 				<div class="flex flex-col items-start gap-1" id="contact">

website/src/lib/components/Menu.svelte

@@ -417,7 +417,7 @@
 		<div class="h-fit flex flex-row items-center ml-1 gap-1">
 			<Button
 				variant="ghost"
-				href={getURLForLanguage('/[...language]/documentation', $locale)}
+				href={getURLForLanguage('/[...language]/help', $locale)}
 				target="_blank"
 				class="cursor-default h-fit rounded-sm px-3 py-0.5"
 			>

website/src/lib/components/Nav.svelte

@@ -9,9 +9,9 @@
 
 <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={getURLForLanguage('/[...language]', $locale)} class="shrink-0">
+		<a href={getURLForLanguage('/[...language]', $locale)} class="shrink-0 translate-y-0.5">
 			<Logo class="h-8 sm:hidden" iconOnly={true} />
-			<Logo class="h-7 hidden sm:block" />
+			<Logo class="h-8 hidden sm:block" />
 		</a>
 		<Button
 			variant="link"
@@ -32,10 +32,10 @@
 		<Button
 			variant="link"
 			class="text-base px-0"
-			href={getURLForLanguage('/[...language]/documentation', $locale)}
+			href={getURLForLanguage('/[...language]/help', $locale)}
 		>
 			<BookOpenText size="18" class="mr-1.5" />
-			{$_('homepage.documentation')}
+			{$_('menu.help')}
 		</Button>
 		<ModeSwitch class="ml-auto" />
 	</div>

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

@@ -1,11 +0,0 @@
-<script>
-	import Test, { metadata } from '$lib/docs/en/introduction/test.md';
-
-	const toc = {
-		introduction: ['test']
-	};
-</script>
-
-{metadata.title}
-
-<Test />

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

@@ -2,22 +2,33 @@
 	import { _, locale } from 'svelte-i18n';
 
 	export let path: string;
+	export let titleOnly: boolean = false;
 
 	let module = undefined;
+	let metadata: Record<string, any> = {};
 
 	const modules = import.meta.glob('/src/lib/docs/**/*.{md,svx}');
 
-	$: if ($locale) {
-		modules[`/src/lib/docs/${$locale}/${path}`]().then((mod) => {
+	function loadModule(path: string) {
+		modules[path]().then((mod) => {
 			module = mod.default;
+			metadata = mod.metadata;
 		});
 	}
+
+	$: if ($locale) {
+		loadModule(`/src/lib/docs/${$locale}/${path}`);
+	}
 </script>
 
 {#if module !== undefined}
-	<div class="markdown space-y-3">
-		<svelte:component this={module} />
-	</div>
+	{#if titleOnly}
+		{metadata.title}
+	{:else}
+		<div class="markdown space-y-3">
+			<svelte:component this={module} />
+		</div>
+	{/if}
 {/if}
 
 <style lang="postcss">

website/src/lib/docs/en/getting-started.svx

@@ -0,0 +1,11 @@
+---
+title: Getting started
+---
+
+# { title }
+
+Welcome message.
+
+- screenshot of the interface
+
+explain main components of the interface and link to the corresponding sections

website/src/lib/docs/en/introduction/test.md

@@ -1,5 +0,0 @@
----
-title: Test
----
-
-test

website/src/lib/docs/en/map-controls.svx

@@ -0,0 +1,5 @@
+---
+title: Map controls
+---
+
+# { title }

website/src/lib/docs/en/menu.svx

@@ -0,0 +1,6 @@
+---
+title: Menu
+---
+
+# { title }
+

website/src/lib/docs/en/menu/edit.svx

@@ -0,0 +1,5 @@
+---
+title: Edit
+---
+
+# { title }

website/src/lib/docs/en/menu/file.svx

@@ -0,0 +1,5 @@
+---
+title: File
+---
+
+# { title }

website/src/lib/docs/en/menu/settings.svx

@@ -0,0 +1,5 @@
+---
+title: Settings
+---
+
+# { title }

website/src/lib/docs/en/menu/view.svx

@@ -0,0 +1,5 @@
+---
+title: View
+---
+
+# { title }

website/src/lib/docs/en/toolbar.svx

@@ -0,0 +1,6 @@
+---
+title: Toolbar
+---
+
+# { title }
+

website/src/lib/docs/en/toolbar/clean.svx

@@ -0,0 +1,5 @@
+---
+title: Clean
+---
+
+# { title }

website/src/lib/docs/en/toolbar/extract.svx

@@ -0,0 +1,5 @@
+---
+title: Extract
+---
+
+# { title }

website/src/lib/docs/en/toolbar/merge.svx

@@ -0,0 +1,5 @@
+---
+title: Merge
+---
+
+# { title }

website/src/lib/docs/en/toolbar/poi.svx

@@ -0,0 +1,5 @@
+---
+title: Points of interest
+---
+
+# { title }

website/src/lib/docs/en/toolbar/reduce.svx

@@ -0,0 +1,5 @@
+---
+title: Reduce
+---
+
+# { title }

website/src/lib/docs/en/toolbar/routing.svx

@@ -0,0 +1,5 @@
+---
+title: Route planning and editing
+---
+
+# { title }

website/src/lib/docs/en/toolbar/scissors.svx

@@ -0,0 +1,5 @@
+---
+title: Scissors
+---
+
+# { title }

website/src/lib/docs/en/toolbar/time.svx

@@ -0,0 +1,5 @@
+---
+title: Time
+---
+
+# { title }

website/src/lib/sitemap.ts

@@ -3,7 +3,7 @@ import { glob } from 'glob';
 import { languages } from '$lib/languages';
 
 function generateSitemap() {
-    const pages = glob.sync('*.html', { cwd: 'build' });
+    const pages = glob.sync('**/*.html', { cwd: 'build' });
 
     let sitemap = '<?xml version="1.0" encoding="UTF-8"?>\n';
     sitemap += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">\n';
@@ -11,7 +11,8 @@ function generateSitemap() {
     pages.forEach((page) => {
         const url = page.replace('.html', '').replace('index', '');
 
-        if (languages[url]) {
+        const rootDir = url.split('/')[0];
+        if (languages[url] || languages[rootDir]) {
             // Skip localized pages
             return;
         }

website/src/locales/en.json

@@ -2,7 +2,7 @@
     "metadata": {
         "home_title": "home",
         "app_title": "the online GPX file editor",
-        "documentation_title": "documentation",
+        "help_title": "help",
         "description": "View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
     },
     "menu": {
@@ -349,7 +349,6 @@
         "website": "Website",
         "home": "Home",
         "app": "App",
-        "documentation": "Documentation",
         "contact": "Contact",
         "x": "X",
         "facebook": "Facebook",

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" />