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

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';
export let data: {
fundingComponent: any;
translationComponent: any;
mapboxComponent: any;
fundingModule: any;
translationModule: any;
mapboxModule: any;
};
let gpxStatistics = writable(exampleGPXFile.getStatistics());
@@ -228,7 +228,9 @@
<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"
>
<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">
<Heart size="16" class="mr-1" fill="rgb(var(--support))" color="rgb(var(--support))" />
<span>{$_('homepage.support_button')}</span>
@@ -237,7 +239,9 @@
<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"
>
<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">
<PenLine size="16" class="mr-1" />
<span>{$_('homepage.contribute')}</span>
@@ -256,7 +260,9 @@
<Logo company="mapbox" class="w-60" />
</a>
</div>
<DocsContainer module={data.mapboxComponent} />
{#await data.mapboxModule then mapboxModule}
<DocsContainer module={mapboxModule.default} />
{/await}
</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';
return await import(`./../../lib/docs/${language}/home/${guide}.mdx`);
return 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,
fundingModule: getModule(language, 'funding'),
translationModule: getModule(language, 'translation'),
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';
export let data: {
guideTitles: Record<string, string>;
guideModules: Record<string, any>;
};
</script>
@@ -21,7 +21,9 @@
? 'font-semibold text-foreground'
: ''}"
>
{data.guideTitles[guide]}
{#await data.guideModules[guide] then guideModule}
{guideModule.metadata.title}
{/await}
</Button>
{#each guides[guide] as subGuide}
<Button
@@ -33,7 +35,9 @@
? 'font-semibold text-foreground'
: ''}"
>
{data.guideTitles[`${guide}/${subGuide}`]}
{#await data.guideModules[`${guide}/${subGuide}`] then guideModule}
{guideModule.metadata.title}
{/await}
</Button>
{/each}
{/each}

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

@@ -1,32 +1,28 @@
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';
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`);
? import(`./../../../lib/docs/${language}/${guide}/${subguide}.mdx`)
: import(`./../../../lib/docs/${language}/${guide}.mdx`);
}
export async function load({ params }) {
const { language } = params;
const guideTitles: Record<string, string> = {};
const guideModules: Record<string, any> = {};
for (let guide of Object.keys(guides)) {
{
const module = await getModule(language, guide);
guideTitles[guide] = module.metadata.title;
}
guideModules[guide] = getModule(language, guide);
for (let subguide of guides[guide]) {
const module = await getModule(language, `${guide}/${subguide}`);
guideTitles[`${guide}/${subguide}`] = module.metadata.title;
guideModules[`${guide}/${subguide}`] = getModule(language, `${guide}/${subguide}`);
}
}
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';
export let data: {
guideTitles: Record<string, string>;
guideModules: Record<string, any>;
};
</script>
@@ -21,7 +21,9 @@
{guideIcons[guide]}
</div>
<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 class="flex flex-row justify-center flex-wrap gap-x-6 px-6">
{#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"
>
<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>
{/each}
</div>

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

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

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

@@ -1,14 +1,14 @@
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';
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`);
? import(`./../../../../lib/docs/${language}/${guide}/${subguide}.mdx`)
: import(`./../../../../lib/docs/${language}/${guide}.mdx`);
}
export async function load({ params }) {
@@ -17,14 +17,11 @@ export async function load({ 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,
guideModule: await getModule(language, guide),
previousGuide,
previousGuideTitle: previousModule?.metadata.title,
previousGuideModule: previousGuide ? getModule(language, previousGuide) : undefined,
nextGuide,
nextGuideTitle: nextModule?.metadata.title,
nextGuideModule: nextGuide ? getModule(language, nextGuide) : undefined,
};
}