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

non-blocking docs load

Browse Source
This commit is contained in:
vcoppe
2024-09-20 14:22:55 +02:00
parent a48da3fcf0
commit f77793b7fe
7 changed files with 54 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,9 +31,9 @@
import mapScreenshot from '$lib/assets/img/home/map.png?enhanced'; import mapScreenshot from '$lib/assets/img/home/map.png?enhanced';
export let data: { export let data: {
fundingComponent: any; fundingModule: any;
translationComponent: any; translationModule: any;
mapboxComponent: any; mapboxModule: any;
}; };
let gpxStatistics = writable(exampleGPXFile.getStatistics()); let gpxStatistics = writable(exampleGPXFile.getStatistics());
@@ -228,7 +228,9 @@
<div <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" class="grow max-w-xl flex flex-col items-center gap-6 p-8 border rounded-2xl shadow-xl -rotate-1 lg:rotate-1"
> >
<DocsContainer module={data.fundingComponent} /> {#await data.fundingModule then fundingModule}
<DocsContainer module={fundingModule.default} />
{/await}
<Button href="https://ko-fi.com/gpxstudio" target="_blank" class="text-base"> <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))" /> <Heart size="16" class="mr-1" fill="rgb(var(--support))" color="rgb(var(--support))" />
<span>{$_('homepage.support_button')}</span> <span>{$_('homepage.support_button')}</span>
@@ -237,7 +239,9 @@
<div <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" 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"
> >
<DocsContainer module={data.translationComponent} /> {#await data.translationModule then translationModule}
<DocsContainer module={translationModule.default} />
{/await}
<Button href="https://crowdin.com/project/gpxstudio" target="_blank" class="text-base"> <Button href="https://crowdin.com/project/gpxstudio" target="_blank" class="text-base">
<PenLine size="16" class="mr-1" /> <PenLine size="16" class="mr-1" />
<span>{$_('homepage.contribute')}</span> <span>{$_('homepage.contribute')}</span>
@@ -256,7 +260,9 @@
<Logo company="mapbox" class="w-60" /> <Logo company="mapbox" class="w-60" />
</a> </a>
</div> </div>
<DocsContainer module={data.mapboxComponent} /> {#await data.mapboxModule then mapboxModule}
<DocsContainer module={mapboxModule.default} />
{/await}
</div> </div>
</div> </div>
</div> </div>

15
website/src/routes/[[language]]/+page.ts
View File

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

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: {
guideTitles: Record<string, string>; guideModules: Record<string, any>;
}; };
</script> </script>
@@ -21,7 +21,9 @@
? 'font-semibold text-foreground' ? 'font-semibold text-foreground'
: ''}" : ''}"
> >
{data.guideTitles[guide]} {#await data.guideModules[guide] then guideModule}
{guideModule.metadata.title}
{/await}
</Button> </Button>
{#each guides[guide] as subGuide} {#each guides[guide] as subGuide}
<Button <Button
@@ -33,7 +35,9 @@
? 'font-semibold text-foreground' ? 'font-semibold text-foreground'
: ''}" : ''}"
> >
{data.guideTitles[`${guide}/${subGuide}`]} {#await data.guideModules[`${guide}/${subGuide}`] then guideModule}
{guideModule.metadata.title}
{/await}
</Button> </Button>
{/each} {/each}
{/each} {/each}

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

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

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: {
guideTitles: Record<string, string>; guideModules: Record<string, any>;
}; };
</script> </script>
@@ -21,7 +21,9 @@
{guideIcons[guide]} {guideIcons[guide]}
</div> </div>
<div class="text-2xl text-center my-3 w-full whitespace-normal px-6"> <div class="text-2xl text-center my-3 w-full whitespace-normal px-6">
{data.guideTitles[guide]} {#await data.guideModules[guide] then guideModule}
{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}
@@ -31,7 +33,9 @@
class="h-fit px-0 py-1 text-muted-foreground text-base text-center whitespace-normal" 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" /> <svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" />
{data.guideTitles[`${guide}/${subGuide}`]} {#await data.guideModules[`${guide}/${subGuide}`] then guideModule}
{guideModule.metadata.title}
{/await}
</Button> </Button>
{/each} {/each}
</div> </div>

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

@@ -7,16 +7,16 @@
import { _, locale } from 'svelte-i18n'; import { _, locale } from 'svelte-i18n';
export let data: { export let data: {
component: any; guideModule: any;
previousGuide: string | undefined; previousGuide: string | undefined;
previousGuideTitle: string | undefined; previousGuideModule: any;
nextGuide: string | undefined; nextGuide: string | undefined;
nextGuideTitle: string | undefined; nextGuideModule: any;
}; };
</script> </script>
<div class="markdown flex flex-col gap-3"> <div class="markdown flex flex-col gap-3">
<DocsContainer module={data.component} /> <DocsContainer module={data.guideModule.default} />
</div> </div>
<div class="flex flex-row flex-wrap gap-3 pt-6"> <div class="flex flex-row flex-wrap gap-3 pt-6">
@@ -27,7 +27,9 @@
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" />
{data.previousGuideTitle} {#await data.previousGuideModule then guideModule}
{guideModule.metadata.title}
{/await}
</Button> </Button>
{/if} {/if}
{#if data.nextGuide} {#if data.nextGuide}
@@ -36,7 +38,9 @@
class="ml-auto" class="ml-auto"
href={getURLForLanguage($locale, `/help/${data.nextGuide}`)} href={getURLForLanguage($locale, `/help/${data.nextGuide}`)}
> >
{data.nextGuideTitle} {#await data.nextGuideModule then guideModule}
{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}

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

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