steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

preload all guide titles

Browse Source
This commit is contained in:
vcoppe
2024-09-23 15:21:01 +02:00
parent c02d96e90f
commit bcc29480c7
7 changed files with 48 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/hooks.server.js
View File

@@ -48,7 +48,7 @@ export async function handle({ event, resolve }) {
const stringsHTML = page === 'app' ? stringsToHTML(strings) : ''; const stringsHTML = page === 'app' ? stringsToHTML(strings) : '';
const response = await resolve(event, { const response = await resolve(event, {
transformPageChunk: ({ html }) => html.replace('<html>', htmlTag).replace('<head>', headTag).replace('<body data-sveltekit-preload-data="hover">', `<body data-sveltekit-preload-data="hover"><div class="hidden">${stringsHTML}</div>`) transformPageChunk: ({ html }) => html.replace('<html>', htmlTag).replace('<head>', headTag).replace('</body>', `<div class="fixed -z-10 text-transparent">${stringsHTML}</div></body>`)
}); });
return response; return response;

8
website/src/routes/[[language]]/help/+layout.ts → website/src/routes/[[language]]/help/+layout.server.ts
View File

@@ -14,15 +14,15 @@ function getModule(language: string | undefined, guide: string) {
export async function load({ params }) { export async function load({ params }) {
const { language } = params; const { language } = params;
const guideModules: Record<string, any> = {}; const guideTitles: Record<string, string> = {};
for (let guide of Object.keys(guides)) { for (let guide of Object.keys(guides)) {
guideModules[guide] = getModule(language, guide); guideTitles[guide] = (await getModule(language, guide)).metadata.title;
for (let subguide of guides[guide]) { for (let subguide of guides[guide]) {
guideModules[`${guide}/${subguide}`] = getModule(language, `${guide}/${subguide}`); guideTitles[`${guide}/${subguide}`] = (await getModule(language, `${guide}/${subguide}`)).metadata.title;
} }
} }
return { return {
guideModules guideTitles
}; };
} }

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

@@ -6,7 +6,7 @@
import { guides } from '$lib/components/docs/docs'; import { guides } from '$lib/components/docs/docs';
export let data: { export let data: {
guideModules: Record<string, any>; guideTitles: Record<string, string>;
}; };
</script> </script>
@@ -21,9 +21,7 @@
? 'font-semibold text-foreground' ? 'font-semibold text-foreground'
: ''}" : ''}"
> >
{#await data.guideModules[guide] then guideModule} {data.guideTitles[guide]}
{guideModule.metadata.title}
{/await}
</Button> </Button>
{#each guides[guide] as subGuide} {#each guides[guide] as subGuide}
<Button <Button
@@ -35,9 +33,7 @@
? 'font-semibold text-foreground' ? 'font-semibold text-foreground'
: ''}" : ''}"
> >
{#await data.guideModules[`${guide}/${subGuide}`] then guideModule} {data.guideTitles[`${guide}/${subGuide}`]}
{guideModule.metadata.title}
{/await}
</Button> </Button>
{/each} {/each}
{/each} {/each}

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

@@ -5,7 +5,7 @@
import { guides, guideIcons } from '$lib/components/docs/docs'; import { guides, guideIcons } from '$lib/components/docs/docs';
export let data: { export let data: {
guideModules: Record<string, any>; guideTitles: Record<string, string>;
}; };
</script> </script>
@@ -21,9 +21,7 @@
{guideIcons[guide]} {guideIcons[guide]}
</div> </div>
<div class="min-h-8 text-2xl text-center my-3 w-full whitespace-normal px-6"> <div class="min-h-8 text-2xl text-center my-3 w-full whitespace-normal px-6">
{#await data.guideModules[guide] then guideModule} {data.guideTitles[guide]}
{guideModule.metadata.title}
{/await}
</div> </div>
<div class="flex flex-row justify-center flex-wrap gap-x-6 px-6"> <div class="flex flex-row justify-center flex-wrap gap-x-6 px-6">
{#each guides[guide] as subGuide} {#each guides[guide] as subGuide}
@@ -33,9 +31,7 @@
class="min-h-8 h-fit min-w-24 px-0 py-1 text-muted-foreground text-base text-center whitespace-normal" class="min-h-8 h-fit min-w-24 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" /> <svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" />
{#await data.guideModules[`${guide}/${subGuide}`] then guideModule} {data.guideTitles[`${guide}/${subGuide}`]}
{guideModule.metadata.title}
{/await}
</Button> </Button>
{/each} {/each}
</div> </div>

29
website/src/routes/[[language]]/help/[...guide]/+page.server.ts Normal file
View File

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

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

@@ -9,9 +9,9 @@
export let data: { export let data: {
guideModule: any; guideModule: any;
previousGuide: string | undefined; previousGuide: string | undefined;
previousGuideModule: any; previousGuideTitle: string | undefined;
nextGuide: string | undefined; nextGuide: string | undefined;
nextGuideModule: any; nextGuideTitle: string | undefined;
}; };
</script> </script>
@@ -27,9 +27,7 @@
href={getURLForLanguage($locale, `/help/${data.previousGuide}`)} href={getURLForLanguage($locale, `/help/${data.previousGuide}`)}
> >
<ChevronLeft size="14" class="mr-1 mt-0.5" /> <ChevronLeft size="14" class="mr-1 mt-0.5" />
{#await data.previousGuideModule then guideModule} {data.previousGuideTitle}
{guideModule.metadata.title}
{/await}
</Button> </Button>
{/if} {/if}
{#if data.nextGuide} {#if data.nextGuide}
@@ -38,9 +36,7 @@
class="ml-auto" class="ml-auto"
href={getURLForLanguage($locale, `/help/${data.nextGuide}`)} href={getURLForLanguage($locale, `/help/${data.nextGuide}`)}
> >
{#await data.nextGuideModule then guideModule} {data.nextGuideTitle}
{guideModule.metadata.title}
{/await}
<ChevronRight size="14" class="ml-1 mt-0.5" /> <ChevronRight size="14" class="ml-1 mt-0.5" />
</Button> </Button>
{/if} {/if}

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

@@ -1,5 +1,3 @@
import { getNextGuide, getPreviousGuide } from "$lib/components/docs/docs";
function getModule(language: string | undefined, guide: string) { function getModule(language: string | undefined, guide: string) {
language = language ?? 'en'; language = language ?? 'en';
let subguide = undefined; let subguide = undefined;
@@ -11,17 +9,13 @@ function getModule(language: string | undefined, guide: string) {
: import(`./../../../../lib/docs/${language}/${guide}.mdx`); : import(`./../../../../lib/docs/${language}/${guide}.mdx`);
} }
export async function load({ params }) { export async function load({ data, params }) {
const { guide, language } = params; const { guide, language } = params;
const previousGuide = getPreviousGuide(guide); const guideModule = await getModule(language, guide);
const nextGuide = getNextGuide(guide);
return { return {
guideModule: await getModule(language, guide), guideModule,
previousGuide, ...data,
previousGuideModule: previousGuide ? getModule(language, previousGuide) : undefined,
nextGuide,
nextGuideModule: nextGuide ? getModule(language, nextGuide) : undefined,
}; };
} }