prerender mdx components

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

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { _ } from 'svelte-i18n';
+
+	export let module;
+</script>
+
+<div class="markdown flex flex-col gap-3">
+	<svelte:component this={module} />
+</div>
+
+<style lang="postcss">
+	:global(.markdown) {
+		@apply text-muted-foreground;
+	}
+
+	:global(.markdown h1) {
+		@apply text-foreground;
+		@apply text-3xl;
+		@apply font-semibold;
+		@apply mb-3 pt-6;
+	}
+
+	:global(.markdown h2) {
+		@apply text-foreground;
+		@apply text-2xl;
+		@apply font-semibold;
+		@apply pt-3;
+	}
+
+	:global(.markdown h3) {
+		@apply text-foreground;
+		@apply text-lg;
+		@apply font-semibold;
+		@apply pt-1.5;
+	}
+
+	:global(.markdown p > button, .markdown li > button) {
+		@apply border;
+		@apply rounded-md;
+		@apply px-1;
+	}
+
+	:global(.markdown > a) {
+		@apply text-blue-500;
+		@apply hover:underline;
+	}
+
+	:global(.markdown p > a) {
+		@apply text-blue-500;
+		@apply hover:underline;
+	}
+
+	:global(.markdown li > a) {
+		@apply text-blue-500;
+		@apply hover:underline;
+	}
+
+	:global(.markdown kbd) {
+		@apply p-1;
+		@apply rounded-md;
+		@apply border;
+	}
+
+	:global(.markdown ul) {
+		@apply list-disc;
+		@apply pl-4;
+	}
+
+	:global(.markdown ol) {
+		@apply list-decimal;
+		@apply pl-4;
+	}
+
+	:global(.markdown li) {
+		@apply mt-1;
+		@apply first:mt-0;
+	}
+
+	:global(.markdown hr) {
+		@apply my-5;
+	}
+</style>

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

@@ -1,112 +0,0 @@
-<script lang="ts">
-    import { browser } from '$app/environment';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    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/**/*.mdx');
-
-    function loadModule(path: string) {
-        modules[path]?.().then((mod) => {
-            module = mod.default;
-            metadata = mod.metadata;
-        });
-    }
-
-    $: if ($locale) {
-        if (modules.hasOwnProperty(`/src/lib/docs/${$locale}/${path}`)) {
-            loadModule(`/src/lib/docs/${$locale}/${path}`);
-        } else if (browser) {
-            goto(`${base}/404`);
-        }
-    }
-</script>
-
-{#if module !== undefined}
-    {#if titleOnly}
-        {metadata.title}
-    {:else}
-        <div class="markdown flex flex-col gap-3">
-            <svelte:component this={module} />
-        </div>
-    {/if}
-{/if}
-
-<style lang="postcss">
-    :global(.markdown) {
-        @apply text-muted-foreground;
-    }
-
-    :global(.markdown h1) {
-        @apply text-foreground;
-        @apply text-3xl;
-        @apply font-semibold;
-        @apply mb-3 pt-6;
-    }
-
-    :global(.markdown h2) {
-        @apply text-foreground;
-        @apply text-2xl;
-        @apply font-semibold;
-        @apply pt-3;
-    }
-
-    :global(.markdown h3) {
-        @apply text-foreground;
-        @apply text-lg;
-        @apply font-semibold;
-        @apply pt-1.5;
-    }
-
-    :global(.markdown p > button, .markdown li > button) {
-        @apply border;
-        @apply rounded-md;
-        @apply px-1;
-    }
-
-    :global(.markdown > a) {
-        @apply text-blue-500;
-        @apply hover:underline;
-    }
-
-    :global(.markdown p > a) {
-        @apply text-blue-500;
-        @apply hover:underline;
-    }
-
-    :global(.markdown li > a) {
-        @apply text-blue-500;
-        @apply hover:underline;
-    }
-
-    :global(.markdown kbd) {
-        @apply p-1;
-        @apply rounded-md;
-        @apply border;
-    }
-
-    :global(.markdown ul) {
-        @apply list-disc;
-        @apply pl-4;
-    }
-
-    :global(.markdown ol) {
-        @apply list-decimal;
-        @apply pl-4;
-    }
-
-    :global(.markdown li) {
-        @apply mt-1;
-        @apply first:mt-0;
-    }
-
-    :global(.markdown hr) {
-        @apply my-5;
-    }
-</style>

website/src/lib/components/embedding/Embedding.svelte

@@ -1,272 +1,269 @@
 <script lang="ts">
-    import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
-    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
-    import FileList from '$lib/components/file-list/FileList.svelte';
-    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
-    import Map from '$lib/components/Map.svelte';
-    import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
-    import OpenIn from '$lib/components/embedding/OpenIn.svelte';
-    import {
-        gpxStatistics,
-        slicedGPXStatistics,
-        embedding,
-        loadFile,
-        map,
-        updateGPXData
-    } from '$lib/stores';
-    import { onDestroy, onMount } from 'svelte';
-    import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
-    import { readable } from 'svelte/store';
-    import type { GPXFile } from 'gpx';
-    import { selection } from '$lib/components/file-list/Selection';
-    import { ListFileItem } from '$lib/components/file-list/FileList';
-    import {
-        allowedEmbeddingBasemaps,
-        getFilesFromEmbeddingOptions,
-        type EmbeddingOptions
-    } from './Embedding';
-    import { mode, setMode } from 'mode-watcher';
+	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
+	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
+	import FileList from '$lib/components/file-list/FileList.svelte';
+	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
+	import Map from '$lib/components/Map.svelte';
+	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
+	import OpenIn from '$lib/components/embedding/OpenIn.svelte';
+	import {
+		gpxStatistics,
+		slicedGPXStatistics,
+		embedding,
+		loadFile,
+		map,
+		updateGPXData
+	} from '$lib/stores';
+	import { onDestroy, onMount } from 'svelte';
+	import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
+	import { readable } from 'svelte/store';
+	import type { GPXFile } from 'gpx';
+	import { selection } from '$lib/components/file-list/Selection';
+	import { ListFileItem } from '$lib/components/file-list/FileList';
+	import {
+		allowedEmbeddingBasemaps,
+		getFilesFromEmbeddingOptions,
+		type EmbeddingOptions
+	} from './Embedding';
+	import { mode, setMode } from 'mode-watcher';
+	import { browser } from '$app/environment';
 
-    $embedding = true;
+	$embedding = true;
 
-    const {
-        currentBasemap,
-        distanceUnits,
-        velocityUnits,
-        temperatureUnits,
-        fileOrder,
-        distanceMarkers,
-        directionMarkers
-    } = settings;
+	const {
+		currentBasemap,
+		distanceUnits,
+		velocityUnits,
+		temperatureUnits,
+		fileOrder,
+		distanceMarkers,
+		directionMarkers
+	} = settings;
 
-    export let useHash = true;
-    export let options: EmbeddingOptions;
-    export let hash: string;
+	export let useHash = true;
+	export let options: EmbeddingOptions;
+	export let hash: string;
 
-    let prevSettings = {
-        distanceMarkers: false,
-        directionMarkers: false,
-        distanceUnits: 'metric',
-        velocityUnits: 'speed',
-        temperatureUnits: 'celsius',
-        theme: 'system'
-    };
+	let prevSettings = {
+		distanceMarkers: false,
+		directionMarkers: false,
+		distanceUnits: 'metric',
+		velocityUnits: 'speed',
+		temperatureUnits: 'celsius',
+		theme: 'system'
+	};
 
-    function applyOptions() {
-        fileObservers.update(($fileObservers) => {
-            $fileObservers.clear();
-            return $fileObservers;
-        });
+	function applyOptions() {
+		fileObservers.update(($fileObservers) => {
+			$fileObservers.clear();
+			return $fileObservers;
+		});
 
-        let downloads: Promise<GPXFile | null>[] = [];
-        getFilesFromEmbeddingOptions(options).forEach((url) => {
-            downloads.push(
-                fetch(url)
-                    .then((response) => response.blob())
-                    .then((blob) => new File([blob], url.split('/').pop() ?? url))
-                    .then(loadFile)
-            );
-        });
+		let downloads: Promise<GPXFile | null>[] = [];
+		getFilesFromEmbeddingOptions(options).forEach((url) => {
+			downloads.push(
+				fetch(url)
+					.then((response) => response.blob())
+					.then((blob) => new File([blob], url.split('/').pop() ?? url))
+					.then(loadFile)
+			);
+		});
 
-        Promise.all(downloads).then((files) => {
-            let ids: string[] = [];
-            let bounds = {
-                southWest: {
-                    lat: 90,
-                    lon: 180
-                },
-                northEast: {
-                    lat: -90,
-                    lon: -180
-                }
-            };
+		Promise.all(downloads).then((files) => {
+			let ids: string[] = [];
+			let bounds = {
+				southWest: {
+					lat: 90,
+					lon: 180
+				},
+				northEast: {
+					lat: -90,
+					lon: -180
+				}
+			};
 
-            fileObservers.update(($fileObservers) => {
-                files.forEach((file, index) => {
-                    if (file === null) {
-                        return;
-                    }
+			fileObservers.update(($fileObservers) => {
+				files.forEach((file, index) => {
+					if (file === null) {
+						return;
+					}
 
-                    let id = `gpx-${index}-embed`;
-                    file._data.id = id;
-                    let statistics = new GPXStatisticsTree(file);
+					let id = `gpx-${index}-embed`;
+					file._data.id = id;
+					let statistics = new GPXStatisticsTree(file);
 
-                    $fileObservers.set(
-                        id,
-                        readable({
-                            file,
-                            statistics
-                        })
-                    );
+					$fileObservers.set(
+						id,
+						readable({
+							file,
+							statistics
+						})
+					);
 
-                    ids.push(id);
-                    let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
-                        .bounds;
+					ids.push(id);
+					let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
 
-                    bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
-                    bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
-                    bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
-                    bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
-                });
+					bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
+					bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
+					bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
+					bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
+				});
 
-                return $fileObservers;
-            });
+				return $fileObservers;
+			});
 
-            $fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
+			$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
 
-            selection.update(($selection) => {
-                $selection.clear();
-                ids.forEach((id) => {
-                    $selection.toggle(new ListFileItem(id));
-                });
-                return $selection;
-            });
+			selection.update(($selection) => {
+				$selection.clear();
+				ids.forEach((id) => {
+					$selection.toggle(new ListFileItem(id));
+				});
+				return $selection;
+			});
 
-            if (hash.length === 0) {
-                map.subscribe(($map) => {
-                    if ($map) {
-                        $map.fitBounds(
-                            [
-                                bounds.southWest.lon,
-                                bounds.southWest.lat,
-                                bounds.northEast.lon,
-                                bounds.northEast.lat
-                            ],
-                            {
-                                padding: 80,
-                                linear: true,
-                                easing: () => 1
-                            }
-                        );
-                    }
-                });
-            }
-        });
+			if (hash.length === 0) {
+				map.subscribe(($map) => {
+					if ($map) {
+						$map.fitBounds(
+							[
+								bounds.southWest.lon,
+								bounds.southWest.lat,
+								bounds.northEast.lon,
+								bounds.northEast.lat
+							],
+							{
+								padding: 80,
+								linear: true,
+								easing: () => 1
+							}
+						);
+					}
+				});
+			}
+		});
 
-        if (
-            options.basemap !== $currentBasemap &&
-            allowedEmbeddingBasemaps.includes(options.basemap)
-        ) {
-            $currentBasemap = options.basemap;
-        }
+		if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
+			$currentBasemap = options.basemap;
+		}
 
-        if (options.distanceMarkers !== $distanceMarkers) {
-            $distanceMarkers = options.distanceMarkers;
-        }
+		if (options.distanceMarkers !== $distanceMarkers) {
+			$distanceMarkers = options.distanceMarkers;
+		}
 
-        if (options.directionMarkers !== $directionMarkers) {
-            $directionMarkers = options.directionMarkers;
-        }
+		if (options.directionMarkers !== $directionMarkers) {
+			$directionMarkers = options.directionMarkers;
+		}
 
-        if (options.distanceUnits !== $distanceUnits) {
-            $distanceUnits = options.distanceUnits;
-        }
+		if (options.distanceUnits !== $distanceUnits) {
+			$distanceUnits = options.distanceUnits;
+		}
 
-        if (options.velocityUnits !== $velocityUnits) {
-            $velocityUnits = options.velocityUnits;
-        }
+		if (options.velocityUnits !== $velocityUnits) {
+			$velocityUnits = options.velocityUnits;
+		}
 
-        if (options.temperatureUnits !== $temperatureUnits) {
-            $temperatureUnits = options.temperatureUnits;
-        }
+		if (options.temperatureUnits !== $temperatureUnits) {
+			$temperatureUnits = options.temperatureUnits;
+		}
 
-        if (options.theme !== $mode) {
-            setMode(options.theme);
-        }
-    }
+		if (options.theme !== $mode) {
+			setMode(options.theme);
+		}
+	}
 
-    onMount(() => {
-        prevSettings.distanceMarkers = $distanceMarkers;
-        prevSettings.directionMarkers = $directionMarkers;
-        prevSettings.distanceUnits = $distanceUnits;
-        prevSettings.velocityUnits = $velocityUnits;
-        prevSettings.temperatureUnits = $temperatureUnits;
-        prevSettings.theme = $mode ?? 'system';
-    });
+	onMount(() => {
+		prevSettings.distanceMarkers = $distanceMarkers;
+		prevSettings.directionMarkers = $directionMarkers;
+		prevSettings.distanceUnits = $distanceUnits;
+		prevSettings.velocityUnits = $velocityUnits;
+		prevSettings.temperatureUnits = $temperatureUnits;
+		prevSettings.theme = $mode ?? 'system';
+	});
 
-    $: if (options) {
-        applyOptions();
-    }
+	$: if (browser && options) {
+		applyOptions();
+	}
 
-    $: if ($fileOrder) {
-        updateGPXData();
-    }
+	$: if ($fileOrder) {
+		updateGPXData();
+	}
 
-    onDestroy(() => {
-        if ($distanceMarkers !== prevSettings.distanceMarkers) {
-            $distanceMarkers = prevSettings.distanceMarkers;
-        }
+	onDestroy(() => {
+		if ($distanceMarkers !== prevSettings.distanceMarkers) {
+			$distanceMarkers = prevSettings.distanceMarkers;
+		}
 
-        if ($directionMarkers !== prevSettings.directionMarkers) {
-            $directionMarkers = prevSettings.directionMarkers;
-        }
+		if ($directionMarkers !== prevSettings.directionMarkers) {
+			$directionMarkers = prevSettings.directionMarkers;
+		}
 
-        if ($distanceUnits !== prevSettings.distanceUnits) {
-            $distanceUnits = prevSettings.distanceUnits;
-        }
+		if ($distanceUnits !== prevSettings.distanceUnits) {
+			$distanceUnits = prevSettings.distanceUnits;
+		}
 
-        if ($velocityUnits !== prevSettings.velocityUnits) {
-            $velocityUnits = prevSettings.velocityUnits;
-        }
+		if ($velocityUnits !== prevSettings.velocityUnits) {
+			$velocityUnits = prevSettings.velocityUnits;
+		}
 
-        if ($temperatureUnits !== prevSettings.temperatureUnits) {
-            $temperatureUnits = prevSettings.temperatureUnits;
-        }
+		if ($temperatureUnits !== prevSettings.temperatureUnits) {
+			$temperatureUnits = prevSettings.temperatureUnits;
+		}
 
-        if ($mode !== prevSettings.theme) {
-            setMode(prevSettings.theme);
-        }
+		if ($mode !== prevSettings.theme) {
+			setMode(prevSettings.theme);
+		}
 
-        $selection.clear();
-        $fileObservers.clear();
-        $fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
-    });
+		$selection.clear();
+		$fileObservers.clear();
+		$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
+	});
 </script>
 
 <div class="absolute flex flex-col h-full w-full border rounded-xl overflow-clip">
-    <div class="grow relative">
-        <Map
-            class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
-            accessToken={options.token}
-            geocoder={false}
-            geolocate={false}
-            hash={useHash}
-        />
-        <OpenIn bind:files={options.files} bind:ids={options.ids} />
-        <LayerControl />
-        <GPXLayers />
-        {#if $fileObservers.size > 1}
-            <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
-                <FileList orientation="horizontal" />
-            </div>
-        {/if}
-    </div>
-    <div
-        class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
-        style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
-    >
-        <GPXStatistics
-            {gpxStatistics}
-            {slicedGPXStatistics}
-            panelSize={options.elevation.height}
-            orientation={options.elevation.show ? 'vertical' : 'horizontal'}
-        />
-        {#if options.elevation.show}
-            <ElevationProfile
-                {gpxStatistics}
-                {slicedGPXStatistics}
-                additionalDatasets={[
-                    options.elevation.speed ? 'speed' : null,
-                    options.elevation.hr ? 'hr' : null,
-                    options.elevation.cad ? 'cad' : null,
-                    options.elevation.temp ? 'temp' : null,
-                    options.elevation.power ? 'power' : null
-                ].filter((dataset) => dataset !== null)}
-                elevationFill={options.elevation.fill}
-                panelSize={options.elevation.height}
-                showControls={options.elevation.controls}
-                class="py-2"
-            />
-        {/if}
-    </div>
+	<div class="grow relative">
+		<Map
+			class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
+			accessToken={options.token}
+			geocoder={false}
+			geolocate={false}
+			hash={useHash}
+		/>
+		<OpenIn bind:files={options.files} bind:ids={options.ids} />
+		<LayerControl />
+		<GPXLayers />
+		{#if $fileObservers.size > 1}
+			<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
+				<FileList orientation="horizontal" />
+			</div>
+		{/if}
+	</div>
+	<div
+		class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+		style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
+	>
+		<GPXStatistics
+			{gpxStatistics}
+			{slicedGPXStatistics}
+			panelSize={options.elevation.height}
+			orientation={options.elevation.show ? 'vertical' : 'horizontal'}
+		/>
+		{#if options.elevation.show}
+			<ElevationProfile
+				{gpxStatistics}
+				{slicedGPXStatistics}
+				additionalDatasets={[
+					options.elevation.speed ? 'speed' : null,
+					options.elevation.hr ? 'hr' : null,
+					options.elevation.cad ? 'cad' : null,
+					options.elevation.temp ? 'temp' : null,
+					options.elevation.power ? 'power' : null
+				].filter((dataset) => dataset !== null)}
+				elevationFill={options.elevation.fill}
+				panelSize={options.elevation.height}
+				showControls={options.elevation.controls}
+				class="py-2"
+			/>
+		{/if}
+	</div>
 </div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
-	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
+	import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
 	import Logo from '$lib/components/Logo.svelte';
 	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
 	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
@@ -8,7 +8,7 @@
 	import {
 		BookOpenText,
 		Heart,
-		LineChart,
+		ChartArea,
 		Map,
 		PencilRuler,
 		PenLine,
@@ -30,6 +30,12 @@
 	import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
 	import mapScreenshot from '$lib/assets/img/home/map.png?enhanced';
 
+	export let data: {
+		fundingComponent: any;
+		translationComponent: any;
+		mapboxComponent: any;
+	};
+
 	let gpxStatistics = writable(exampleGPXFile.getStatistics());
 	let slicedGPXStatistics = writable(undefined);
 	let additionalDatasets = writable(['speed', 'atemp']);
@@ -161,7 +167,7 @@
 	<div class="px-8 md:px-12">
 		<div class="markdown text-center px-4 md:px-12">
 			<h1>
-				<LineChart size="24" class="mr-1 inline-block align-baseline" />
+				<ChartArea size="24" class="mr-1 inline-block align-baseline" />
 				{$_('homepage.data_visualization')}
 			</h1>
 			<p class="text-muted-foreground mb-6">{$_('homepage.data_visualization_description')}</p>
@@ -222,7 +228,7 @@
 		<div
 			class="grow max-w-xl flex flex-col items-center gap-6 p-8 border rounded-2xl shadow-xl -rotate-1 lg:rotate-1"
 		>
-			<DocsLoader path="home/funding.mdx" />
+			<DocsContainer module={data.fundingComponent} />
 			<Button href="https://ko-fi.com/gpxstudio" target="_blank" class="text-base">
 				<Heart size="16" class="mr-1" fill="rgb(var(--support))" color="rgb(var(--support))" />
 				<span>{$_('homepage.support_button')}</span>
@@ -231,7 +237,7 @@
 		<div
 			class="grow max-w-lg mx-6 h-fit bg-background flex flex-col items-center gap-6 p-8 border rounded-2xl shadow-xl rotate-1 lg:-rotate-1"
 		>
-			<DocsLoader path="home/translation.mdx" />
+			<DocsContainer module={data.translationComponent} />
 			<Button href="https://crowdin.com/project/gpxstudio" target="_blank" class="text-base">
 				<PenLine size="16" class="mr-1" />
 				<span>{$_('homepage.contribute')}</span>
@@ -250,7 +256,7 @@
 					<Logo company="mapbox" class="w-60" />
 				</a>
 			</div>
-			<DocsLoader path="home/mapbox.mdx" />
+			<DocsContainer module={data.mapboxComponent} />
 		</div>
 	</div>
 </div>

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

@@ -0,0 +1,19 @@
+async function getModule(language: string | undefined, guide: string) {
+    language = language ?? 'en';
+    return await import(`./../../lib/docs/${language}/home/${guide}.mdx`);
+}
+
+export async function load({ params }) {
+    const { language } = params;
+
+
+    const fundingModule = await getModule(language, 'funding');
+    const translationModule = await getModule(language, 'translation');
+    const mapboxModule = await getModule(language, 'mapbox');
+
+    return {
+        fundingComponent: fundingModule.default,
+        translationComponent: translationModule.default,
+        mapboxComponent: mapboxModule.default,
+    };
+}

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

@@ -1,43 +1,44 @@
 <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';
-    import { page } from '$app/stores';
-    import { guides } from '$lib/components/docs/docs';
+	import { Button } from '$lib/components/ui/button';
+	import { getURLForLanguage } from '$lib/utils';
+	import { locale } from 'svelte-i18n';
+	import { page } from '$app/stores';
+	import { guides } from '$lib/components/docs/docs';
+
+	export let data: {
+		guideTitles: Record<string, string>;
+	};
 </script>
 
 <div class="grow px-12 pt-6 pb-12 flex flex-row gap-24">
-    <div
-        class="hidden md:flex flex-col gap-2 w-40 sticky mt-[27px] top-[108px] self-start shrink-0"
-    >
-        {#each Object.keys(guides) as guide}
-            <Button
-                variant="link"
-                href={getURLForLanguage($locale, `/help/${guide}`)}
-                class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
-                    .params.guide === guide
-                    ? 'font-semibold text-foreground'
-                    : ''}"
-            >
-                <DocsLoader path={`${guide}.mdx`} titleOnly={true} />
-            </Button>
-            {#each guides[guide] as subGuide}
-                <Button
-                    variant="link"
-                    href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
-                    class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
-                        .params.guide ===
-                    guide + '/' + subGuide
-                        ? 'font-semibold text-foreground'
-                        : ''}"
-                >
-                    <DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
-                </Button>
-            {/each}
-        {/each}
-    </div>
-    <div class="grow">
-        <slot />
-    </div>
+	<div class="hidden md:flex flex-col gap-2 w-40 sticky mt-[27px] top-[108px] self-start shrink-0">
+		{#each Object.keys(guides) as guide}
+			<Button
+				variant="link"
+				href={getURLForLanguage($locale, `/help/${guide}`)}
+				class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
+					.params.guide === guide
+					? 'font-semibold text-foreground'
+					: ''}"
+			>
+				{data.guideTitles[guide]}
+			</Button>
+			{#each guides[guide] as subGuide}
+				<Button
+					variant="link"
+					href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
+					class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
+						.params.guide ===
+					guide + '/' + subGuide
+						? 'font-semibold text-foreground'
+						: ''}"
+				>
+					{data.guideTitles[`${guide}/${subGuide}`]}
+				</Button>
+			{/each}
+		{/each}
+	</div>
+	<div class="grow">
+		<slot />
+	</div>
 </div>

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

@@ -0,0 +1,32 @@
+import { guides } from '$lib/components/docs/docs.js';
+
+async function getModule(language: string | undefined, guide: string) {
+    language = language ?? 'en';
+    let subguide = guide.includes('/') ? guide.split('/').pop() : undefined;
+    if (subguide) {
+        guide = guide.replace(`/${subguide}`, '');
+    }
+    return subguide
+        ? await import(`./../../../lib/docs/${language}/${guide}/${subguide}.mdx`)
+        : await import(`./../../../lib/docs/${language}/${guide}.mdx`);
+}
+
+export async function load({ params }) {
+    const { language } = params;
+
+    const guideTitles: Record<string, string> = {};
+    for (let guide of Object.keys(guides)) {
+        {
+            const module = await getModule(language, guide);
+            guideTitles[guide] = module.metadata.title;
+        }
+        for (let subguide of guides[guide]) {
+            const module = await getModule(language, `${guide}/${subguide}`);
+            guideTitles[`${guide}/${subguide}`] = module.metadata.title;
+        }
+    }
+
+    return {
+        guideTitles
+    };
+}

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

@@ -1,9 +1,12 @@
-<script>
+<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';
 	import { guides, guideIcons } from '$lib/components/docs/docs';
+
+	export let data: {
+		guideTitles: Record<string, string>;
+	};
 </script>
 
 <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
@@ -18,7 +21,7 @@
 					{guideIcons[guide]}
 				</div>
 				<div class="text-2xl text-center my-3 w-full whitespace-normal px-6">
-					<DocsLoader path={`${guide}.mdx`} titleOnly={true} />
+					{data.guideTitles[guide]}
 				</div>
 				<div class="flex flex-row justify-center flex-wrap gap-x-6 px-6">
 					{#each guides[guide] as subGuide}
@@ -28,7 +31,7 @@
 							class="h-fit px-0 py-1 text-muted-foreground   text-base text-center whitespace-normal"
 						>
 							<svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" />
-							<DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
+							{data.guideTitles[`${guide}/${subGuide}`]}
 						</Button>
 					{/each}
 				</div>

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

@@ -1,36 +1,42 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { getNextGuide, getPreviousGuide } from '$lib/components/docs/docs';
-	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
+	import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import { getURLForLanguage } from '$lib/utils';
 	import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from 'lucide-svelte';
 	import { _, locale } from 'svelte-i18n';
 
-	$: previousGuide = getPreviousGuide($page.params.guide);
-	$: nextGuide = getNextGuide($page.params.guide);
+	export let data: {
+		component: any;
+		previousGuide: string | undefined;
+		previousGuideTitle: string | undefined;
+		nextGuide: string | undefined;
+		nextGuideTitle: string | undefined;
+	};
 </script>
 
-<DocsLoader path="{$page.params.guide}.mdx" />
+<div class="markdown flex flex-col gap-3">
+	<DocsContainer module={data.component} />
+</div>
 
 <div class="flex flex-row flex-wrap gap-3 pt-6">
-	{#if previousGuide}
+	{#if data.previousGuide}
 		<Button
 			variant="outline"
 			class="mr-auto"
-			href={getURLForLanguage(undefined, `/help/${previousGuide}`)}
+			href={getURLForLanguage($locale, `/help/${data.previousGuide}`)}
 		>
 			<ChevronLeft size="14" class="mr-1 mt-0.5" />
-			<DocsLoader path="{previousGuide}.mdx" titleOnly={true} />
+			{data.previousGuideTitle}
 		</Button>
 	{/if}
-	{#if nextGuide}
+	{#if data.nextGuide}
 		<Button
 			variant="outline"
 			class="ml-auto"
-			href={getURLForLanguage(undefined, `/help/${nextGuide}`)}
+			href={getURLForLanguage($locale, `/help/${data.nextGuide}`)}
 		>
-			<DocsLoader path="{nextGuide}.mdx" titleOnly={true} />
+			{data.nextGuideTitle}
 			<ChevronRight size="14" class="ml-1 mt-0.5" />
 		</Button>
 	{/if}

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

@@ -0,0 +1,30 @@
+import { getNextGuide, getPreviousGuide } from "$lib/components/docs/docs";
+
+async function getModule(language: string | undefined, guide: string) {
+    language = language ?? 'en';
+    let subguide = guide.includes('/') ? guide.split('/').pop() : undefined;
+    if (subguide) {
+        guide = guide.replace(`/${subguide}`, '');
+    }
+    return subguide
+        ? await import(`./../../../../lib/docs/${language}/${guide}/${subguide}.mdx`)
+        : await import(`./../../../../lib/docs/${language}/${guide}.mdx`);
+}
+
+export async function load({ params }) {
+    const { guide, language } = params;
+
+    const previousGuide = getPreviousGuide(guide);
+    const nextGuide = getNextGuide(guide);
+
+    const module = await getModule(language, guide);
+    const previousModule = previousGuide ? await getModule(language, previousGuide) : undefined;
+    const nextModule = nextGuide ? await getModule(language, nextGuide) : undefined;
+    return {
+        component: module.default,
+        previousGuide,
+        previousGuideTitle: previousModule?.metadata.title,
+        nextGuide,
+        nextGuideTitle: nextModule?.metadata.title,
+    };
+}