using markdown for docs

website/src/lib/components/Footer.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+</script>
+
+<footer class="w-full">
+	<div class="mx-6 py-2 flex flex-row flex-wrap border-t">
+		<div class="flex flex-row" id="contact">
+			<Button variant="link" href="https://github.com/gpxstudio/gpx.studio" target="_blank"
+				>GitHub</Button
+			>
+			<Button variant="link" href="https://facebook.com/gpx.studio" target="_blank">Facebook</Button
+			>
+			<Button variant="link" href="https://twitter.com/gpxstudio" target="_blank">Twitter</Button>
+			<Button variant="link" href="mailto:hello@gpx.studio" target="_blank">Mail</Button>
+		</div>
+	</div>
+</footer>

website/src/lib/components/Logo.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { base } from '$app/paths';
-
 	import { mode } from 'mode-watcher';
 
 	export let iconOnly = false;

website/src/lib/components/MapboxLogo.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import { mode } from 'mode-watcher';
+</script>
+
+<a href="https://mapbox.com" target="_blank">
+	<img
+		src="{base}/mapbox-logo-{$mode === 'dark' ? 'white' : 'black'}.svg"
+		alt="Logo of Mapbox."
+		{...$$restProps}
+	/>
+</a>

website/src/lib/components/Nav.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import Logo from '$lib/components/Logo.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import * as Select from '$lib/components/ui/select';
+	import { languages } from '$lib/languages';
+	import { BookOpenText, Info, Languages, Map } from 'lucide-svelte';
+	import { _, locale } from 'svelte-i18n';
+
+	let selected = {
+		value: '',
+		label: ''
+	};
+
+	$: if ($locale) {
+		selected = {
+			value: $locale,
+			label: languages[$locale]
+		};
+	}
+
+	function getURLForLanguage(lang?: string): string {
+		let currentPath = window.location.pathname;
+		let currentPathArray = currentPath.split('/');
+
+		if (currentPathArray.length > 1 && languages.hasOwnProperty(currentPathArray[1])) {
+			currentPathArray.splice(1, 1);
+		}
+
+		if (lang !== undefined && lang !== 'en') {
+			currentPathArray.splice(1, 0, lang);
+		}
+
+		return currentPathArray.join('/');
+	}
+</script>
+
+<nav class="w-full sticky top-0 bg-background">
+	<div class="mx-6 py-2 flex flex-row items-center border-b">
+		<a href="./">
+			<Logo class="h-6" />
+		</a>
+		<Button variant="link" class="text-base" href="./">
+			<Map size="18" class="mr-1.5" />
+			{$_('menu.app')}
+		</Button>
+		<Button variant="link" class="text-base" href="./about">
+			<Info size="18" class="mr-1.5" />
+			{$_('menu.about')}
+		</Button>
+		<Button variant="link" class="text-base" href="./documentation">
+			<BookOpenText size="18" class="mr-1.5" />
+			{$_('menu.documentation')}
+		</Button>
+		<Select.Root bind:selected onSelectedChange={(s) => goto(getURLForLanguage(s?.value))}>
+			<Select.Trigger class="w-[180px] ml-auto">
+				<Languages size="16" />
+				<Select.Value class="ml-2 mr-auto" />
+			</Select.Trigger>
+			<Select.Content>
+				{#each Object.entries(languages) as [key, value]}
+					<Select.Item value={key}>{value}</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+	</div>
+</nav>

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

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

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { _, locale } from 'svelte-i18n';
+
+	export let path: string;
+
+	let module = undefined;
+
+	const modules = import.meta.glob('/src/lib/docs/**/*.{md,svx}');
+
+	$: if ($locale) {
+		modules[`/src/lib/docs/${$locale}/${path}`]().then((mod) => {
+			module = mod.default;
+		});
+	}
+</script>
+
+{#if module !== undefined}
+	<svelte:component this={module} />
+{/if}

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

@@ -0,0 +1,33 @@
+
+<script>
+    import MapboxLogo from '$lib/components/MapboxLogo.svelte';
+</script>
+
+**gpx.studio** is a *free* and *open-source* online GPX viewer and editor which allows to:
+- visualize multiple traces in different colors and aided by many different maps (cycling, hiking, satellite, etc.)
+- edit traces by adding, inserting, moving or deleting track points
+- reverse traces
+- add or change the timestamps of a trace
+- view, add, edit and remove waypoints
+- reduce the number of track points
+- view and rework the structure of the file
+- automatically add elevation data to traces if missing
+- merge multiple traces, extending time, heart rate, cadence, power and temperature data where needed
+- extract segments from traces and perform any other action while maintaining the segments' structure within files
+- save the result on your computer or to your Google Drive™ to get a shareable link and embedding code
+
+## Mapbox Community 🤝
+
+[Mapbox](https://mapbox.com) is the company providing some of the beautiful maps on this website. They created a program called [Mapbox Community](https://www.mapbox.com/community) to support non-profits, educational institutions, and positive-impact organizations. We are very lucky and grateful to have joined this program and to benefit from a great discount on all API rates.
+
+<MapboxLogo class="h-10" />
+
+## Help keep the website free (and ad-free) 🙏
+
+Each time you add or move a track point, we make a request to our servers to retrieve a route on the road network. We also rely on APIs from Mapbox to load beautiful maps, retrieve elevation data and process geocoding requests (looking for a place in the search bar).
+
+Unfortunately this is very costly so if you like the tool and use it frequently, please consider making even a small donation so that this website can stay free to use and ad-free. Thanks for your support!
+
+## Translating 🗣
+
+The website is translated by volunteers on a collaborative translation platform. You can help complete and improve the translations by joining the [Crowdin project](https://crowdin.com/project/gpxstudio). [Get in touch](#contact) if you would like to start the translation in a new language. Any help is greatly appreciated!

website/src/lib/languages.ts

@@ -1,3 +1,3 @@
-export const languages = {
+export const languages: Record<string, string> = {
     'en': 'English',
 };

website/src/locales/en.json

@@ -52,8 +52,10 @@
         "layers": "Map layers...",
         "distance_markers": "Distance markers",
         "direction_markers": "Direction markers",
+        "app": "App",
         "about": "About",
         "donate": "Donate",
+        "documentation": "Documentation",
         "ctrl": "Ctrl",
         "click": "Click",
         "drag": "Drag",

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

@@ -2,14 +2,55 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import { isLoading, locale, _ } from 'svelte-i18n';
 	import { page } from '$app/stores';
+	import Nav from '$lib/components/Nav.svelte';
+	import Footer from '$lib/components/Footer.svelte';
 
-	if ($page.params.language) {
+	$: if ($page.params.language === '' && $locale !== 'en') {
+		locale.set('en');
+	} else if ($page.params.language && $locale !== $page.params.language) {
 		locale.set($page.params.language);
 	}
+
+	const appRoute = '/[...language]';
 </script>
 
 <ModeWatcher />
 
 {#if !$isLoading}
-	<slot />
+	{#if $page.route.id === appRoute}
+		<slot />
+	{:else}
+		<Nav />
+		<main>
+			<slot />
+		</main>
+		<Footer />
+	{/if}
 {/if}
+
+<style lang="postcss">
+	:global(.markdown) {
+	}
+
+	:global(.markdown h1) {
+		@apply text-3xl;
+		@apply font-bold;
+		@apply mt-4 mb-2;
+	}
+
+	:global(.markdown h2) {
+		@apply text-2xl;
+		@apply font-bold;
+		@apply mt-4 mb-2;
+	}
+
+	:global(.markdown a) {
+		@apply text-blue-500;
+		@apply hover:underline;
+	}
+
+	:global(.markdown ul) {
+		@apply list-disc;
+		@apply pl-4;
+	}
+</style>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { base } from '$app/paths';
+	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
 	import { languages } from '$lib/languages';
 	import { _ } from 'svelte-i18n';
 </script>
@@ -21,3 +22,7 @@
 		{/if}
 	{/each}
 </svelte:head>
+
+<div class="px-10 py-6 markdown">
+	<DocsLoader path="about.svx" />
+</div>

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

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