From be8ca9c0eecd11200d2bf6362ebc032b60a4e037 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 10 Jul 2024 19:19:12 +0200
Subject: [PATCH] docs welcome page

---
 website/src/lib/components/docs/docs.ts       |  9 +++++
 .../routes/[...language]/help/+layout.svelte  |  6 +---
 .../routes/[...language]/help/+page.svelte    | 35 ++++++++++++++++++-
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/website/src/lib/components/docs/docs.ts b/website/src/lib/components/docs/docs.ts
index cffc49a6..74e87a4e 100644
--- a/website/src/lib/components/docs/docs.ts
+++ b/website/src/lib/components/docs/docs.ts
@@ -7,6 +7,15 @@ export const guides: Record<string, string[]> = {
     'gpx': [],
 };
 
+export const guideIcons: Record<string, string> = {
+    "getting-started": "🚀",
+    "menu": "📂 ⚙️",
+    "files-and-stats": "🗂 📈",
+    "toolbar": "🧰",
+    "map-controls": "🗺",
+    "gpx": "💾",
+};
+
 export function getPreviousGuide(currentGuide: string): string | undefined {
     let subguides = currentGuide.split('/');
 
diff --git a/website/src/routes/[...language]/help/+layout.svelte b/website/src/routes/[...language]/help/+layout.svelte
index d07028a4..05bb58f6 100644
--- a/website/src/routes/[...language]/help/+layout.svelte
+++ b/website/src/routes/[...language]/help/+layout.svelte
@@ -8,11 +8,7 @@
 </script>
 
 <div class="p-12 flex flex-row gap-24">
-	<div
-		class="{$page.params.guide
-			? 'hidden md:flex'
-			: 'flex'} flex-col gap-1 w-40 sticky top-[105px] self-start"
-	>
+	<div class="hidden md:flex flex-col gap-1 w-40 sticky top-[105px] self-start">
 		{#each Object.keys(guides) as guide}
 			<Button
 				variant="link"
diff --git a/website/src/routes/[...language]/help/+page.svelte b/website/src/routes/[...language]/help/+page.svelte
index fa124b2e..66b04dd2 100644
--- a/website/src/routes/[...language]/help/+page.svelte
+++ b/website/src/routes/[...language]/help/+page.svelte
@@ -1,4 +1,37 @@
 <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></div>
+<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"
+						>
+							<DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
+						</Button>
+					{/each}
+				</div>
+			</div>
+		</Button>
+	{/each}
+</div>