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

@@ -26,6 +26,7 @@
 		type EmbeddingOptions
 	} from './Embedding';
 	import { mode, setMode } from 'mode-watcher';
+	import { browser } from '$app/environment';
 
 	$embedding = true;
 
@@ -100,8 +101,7 @@
 					);
 
 					ids.push(id);
-                    let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
-                        .bounds;
+					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);
@@ -143,10 +143,7 @@
 			}
 		});
 
-        if (
-            options.basemap !== $currentBasemap &&
-            allowedEmbeddingBasemaps.includes(options.basemap)
-        ) {
+		if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
 			$currentBasemap = options.basemap;
 		}
 
@@ -184,7 +181,7 @@
 		prevSettings.theme = $mode ?? 'system';
 	});
 
-    $: if (options) {
+	$: if (browser && options) {
 		applyOptions();
 	}
 

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

@@ -2,15 +2,16 @@
 	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';
+
+	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"
-    >
+	<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"
@@ -20,7 +21,7 @@
 					? 'font-semibold text-foreground'
 					: ''}"
 			>
-                <DocsLoader path={`${guide}.mdx`} titleOnly={true} />
+				{data.guideTitles[guide]}
 			</Button>
 			{#each guides[guide] as subGuide}
 				<Button
@@ -32,7 +33,7 @@
 						? 'font-semibold text-foreground'
 						: ''}"
 				>
-                    <DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
+					{data.guideTitles[`${guide}/${subGuide}`]}
 				</Button>
 			{/each}
 		{/each}

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,
+    };
+}