prerender mdx components

2025-09-05 18:02:55 +00:00 · 2024-09-20 13:22:05 +02:00
parent 484aeedbb1
commit 9d13e9bcdc
10 changed files with 469 additions and 405 deletions
--- a/website/src/routes/[[language]]/help/+layout.svelte
+++ b/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>
--- a/website/src/routes/[[language]]/help/+layout.ts
+++ b/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
+    };
+}
--- a/website/src/routes/[[language]]/help/+page.svelte
+++ b/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>
--- a/website/src/routes/[[language]]/help/[...guide]/+page.svelte
+++ b/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}
--- a/website/src/routes/[[language]]/help/[...guide]/+page.ts
+++ b/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,
+    };
+}