mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-31 23:53:25 +00:00
prerender mdx components
This commit is contained in:
vcoppe
82
website/src/lib/components/docs/DocsContainer.svelte
Normal file
82
website/src/lib/components/docs/DocsContainer.svelte
Normal file
@@ -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>
|
||||||
@@ -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>
|
|
||||||
@@ -1,272 +1,269 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
|
import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
|
||||||
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
|
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
|
||||||
import FileList from '$lib/components/file-list/FileList.svelte';
|
import FileList from '$lib/components/file-list/FileList.svelte';
|
||||||
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
|
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
|
||||||
import Map from '$lib/components/Map.svelte';
|
import Map from '$lib/components/Map.svelte';
|
||||||
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
|
import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
|
||||||
import OpenIn from '$lib/components/embedding/OpenIn.svelte';
|
import OpenIn from '$lib/components/embedding/OpenIn.svelte';
|
||||||
import {
|
import {
|
||||||
gpxStatistics,
|
gpxStatistics,
|
||||||
slicedGPXStatistics,
|
slicedGPXStatistics,
|
||||||
embedding,
|
embedding,
|
||||||
loadFile,
|
loadFile,
|
||||||
map,
|
map,
|
||||||
updateGPXData
|
updateGPXData
|
||||||
} from '$lib/stores';
|
} from '$lib/stores';
|
||||||
import { onDestroy, onMount } from 'svelte';
|
import { onDestroy, onMount } from 'svelte';
|
||||||
import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
|
import { fileObservers, settings, GPXStatisticsTree } from '$lib/db';
|
||||||
import { readable } from 'svelte/store';
|
import { readable } from 'svelte/store';
|
||||||
import type { GPXFile } from 'gpx';
|
import type { GPXFile } from 'gpx';
|
||||||
import { selection } from '$lib/components/file-list/Selection';
|
import { selection } from '$lib/components/file-list/Selection';
|
||||||
import { ListFileItem } from '$lib/components/file-list/FileList';
|
import { ListFileItem } from '$lib/components/file-list/FileList';
|
||||||
import {
|
import {
|
||||||
allowedEmbeddingBasemaps,
|
allowedEmbeddingBasemaps,
|
||||||
getFilesFromEmbeddingOptions,
|
getFilesFromEmbeddingOptions,
|
||||||
type EmbeddingOptions
|
type EmbeddingOptions
|
||||||
} from './Embedding';
|
} from './Embedding';
|
||||||
import { mode, setMode } from 'mode-watcher';
|
import { mode, setMode } from 'mode-watcher';
|
||||||
|
import { browser } from '$app/environment';
|
||||||
|
|
||||||
$embedding = true;
|
$embedding = true;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
currentBasemap,
|
currentBasemap,
|
||||||
distanceUnits,
|
distanceUnits,
|
||||||
velocityUnits,
|
velocityUnits,
|
||||||
temperatureUnits,
|
temperatureUnits,
|
||||||
fileOrder,
|
fileOrder,
|
||||||
distanceMarkers,
|
distanceMarkers,
|
||||||
directionMarkers
|
directionMarkers
|
||||||
} = settings;
|
} = settings;
|
||||||
|
|
||||||
export let useHash = true;
|
export let useHash = true;
|
||||||
export let options: EmbeddingOptions;
|
export let options: EmbeddingOptions;
|
||||||
export let hash: string;
|
export let hash: string;
|
||||||
|
|
||||||
let prevSettings = {
|
let prevSettings = {
|
||||||
distanceMarkers: false,
|
distanceMarkers: false,
|
||||||
directionMarkers: false,
|
directionMarkers: false,
|
||||||
distanceUnits: 'metric',
|
distanceUnits: 'metric',
|
||||||
velocityUnits: 'speed',
|
velocityUnits: 'speed',
|
||||||
temperatureUnits: 'celsius',
|
temperatureUnits: 'celsius',
|
||||||
theme: 'system'
|
theme: 'system'
|
||||||
};
|
};
|
||||||
|
|
||||||
function applyOptions() {
|
function applyOptions() {
|
||||||
fileObservers.update(($fileObservers) => {
|
fileObservers.update(($fileObservers) => {
|
||||||
$fileObservers.clear();
|
$fileObservers.clear();
|
||||||
return $fileObservers;
|
return $fileObservers;
|
||||||
});
|
});
|
||||||
|
|
||||||
let downloads: Promise<GPXFile | null>[] = [];
|
let downloads: Promise<GPXFile | null>[] = [];
|
||||||
getFilesFromEmbeddingOptions(options).forEach((url) => {
|
getFilesFromEmbeddingOptions(options).forEach((url) => {
|
||||||
downloads.push(
|
downloads.push(
|
||||||
fetch(url)
|
fetch(url)
|
||||||
.then((response) => response.blob())
|
.then((response) => response.blob())
|
||||||
.then((blob) => new File([blob], url.split('/').pop() ?? url))
|
.then((blob) => new File([blob], url.split('/').pop() ?? url))
|
||||||
.then(loadFile)
|
.then(loadFile)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
Promise.all(downloads).then((files) => {
|
Promise.all(downloads).then((files) => {
|
||||||
let ids: string[] = [];
|
let ids: string[] = [];
|
||||||
let bounds = {
|
let bounds = {
|
||||||
southWest: {
|
southWest: {
|
||||||
lat: 90,
|
lat: 90,
|
||||||
lon: 180
|
lon: 180
|
||||||
},
|
},
|
||||||
northEast: {
|
northEast: {
|
||||||
lat: -90,
|
lat: -90,
|
||||||
lon: -180
|
lon: -180
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
fileObservers.update(($fileObservers) => {
|
fileObservers.update(($fileObservers) => {
|
||||||
files.forEach((file, index) => {
|
files.forEach((file, index) => {
|
||||||
if (file === null) {
|
if (file === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let id = `gpx-${index}-embed`;
|
let id = `gpx-${index}-embed`;
|
||||||
file._data.id = id;
|
file._data.id = id;
|
||||||
let statistics = new GPXStatisticsTree(file);
|
let statistics = new GPXStatisticsTree(file);
|
||||||
|
|
||||||
$fileObservers.set(
|
$fileObservers.set(
|
||||||
id,
|
id,
|
||||||
readable({
|
readable({
|
||||||
file,
|
file,
|
||||||
statistics
|
statistics
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
ids.push(id);
|
ids.push(id);
|
||||||
let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
|
let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
|
||||||
.bounds;
|
|
||||||
|
|
||||||
bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
|
bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
|
||||||
bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
|
bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
|
||||||
bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
|
bounds.northEast.lat = Math.max(bounds.northEast.lat, fileBounds.northEast.lat);
|
||||||
bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
|
bounds.northEast.lon = Math.max(bounds.northEast.lon, fileBounds.northEast.lon);
|
||||||
});
|
});
|
||||||
|
|
||||||
return $fileObservers;
|
return $fileObservers;
|
||||||
});
|
});
|
||||||
|
|
||||||
$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
|
$fileOrder = [...$fileOrder.filter((id) => !id.includes('embed')), ...ids];
|
||||||
|
|
||||||
selection.update(($selection) => {
|
selection.update(($selection) => {
|
||||||
$selection.clear();
|
$selection.clear();
|
||||||
ids.forEach((id) => {
|
ids.forEach((id) => {
|
||||||
$selection.toggle(new ListFileItem(id));
|
$selection.toggle(new ListFileItem(id));
|
||||||
});
|
});
|
||||||
return $selection;
|
return $selection;
|
||||||
});
|
});
|
||||||
|
|
||||||
if (hash.length === 0) {
|
if (hash.length === 0) {
|
||||||
map.subscribe(($map) => {
|
map.subscribe(($map) => {
|
||||||
if ($map) {
|
if ($map) {
|
||||||
$map.fitBounds(
|
$map.fitBounds(
|
||||||
[
|
[
|
||||||
bounds.southWest.lon,
|
bounds.southWest.lon,
|
||||||
bounds.southWest.lat,
|
bounds.southWest.lat,
|
||||||
bounds.northEast.lon,
|
bounds.northEast.lon,
|
||||||
bounds.northEast.lat
|
bounds.northEast.lat
|
||||||
],
|
],
|
||||||
{
|
{
|
||||||
padding: 80,
|
padding: 80,
|
||||||
linear: true,
|
linear: true,
|
||||||
easing: () => 1
|
easing: () => 1
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (
|
if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
|
||||||
options.basemap !== $currentBasemap &&
|
$currentBasemap = options.basemap;
|
||||||
allowedEmbeddingBasemaps.includes(options.basemap)
|
}
|
||||||
) {
|
|
||||||
$currentBasemap = options.basemap;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (options.distanceMarkers !== $distanceMarkers) {
|
if (options.distanceMarkers !== $distanceMarkers) {
|
||||||
$distanceMarkers = options.distanceMarkers;
|
$distanceMarkers = options.distanceMarkers;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.directionMarkers !== $directionMarkers) {
|
if (options.directionMarkers !== $directionMarkers) {
|
||||||
$directionMarkers = options.directionMarkers;
|
$directionMarkers = options.directionMarkers;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.distanceUnits !== $distanceUnits) {
|
if (options.distanceUnits !== $distanceUnits) {
|
||||||
$distanceUnits = options.distanceUnits;
|
$distanceUnits = options.distanceUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.velocityUnits !== $velocityUnits) {
|
if (options.velocityUnits !== $velocityUnits) {
|
||||||
$velocityUnits = options.velocityUnits;
|
$velocityUnits = options.velocityUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.temperatureUnits !== $temperatureUnits) {
|
if (options.temperatureUnits !== $temperatureUnits) {
|
||||||
$temperatureUnits = options.temperatureUnits;
|
$temperatureUnits = options.temperatureUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.theme !== $mode) {
|
if (options.theme !== $mode) {
|
||||||
setMode(options.theme);
|
setMode(options.theme);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
prevSettings.distanceMarkers = $distanceMarkers;
|
prevSettings.distanceMarkers = $distanceMarkers;
|
||||||
prevSettings.directionMarkers = $directionMarkers;
|
prevSettings.directionMarkers = $directionMarkers;
|
||||||
prevSettings.distanceUnits = $distanceUnits;
|
prevSettings.distanceUnits = $distanceUnits;
|
||||||
prevSettings.velocityUnits = $velocityUnits;
|
prevSettings.velocityUnits = $velocityUnits;
|
||||||
prevSettings.temperatureUnits = $temperatureUnits;
|
prevSettings.temperatureUnits = $temperatureUnits;
|
||||||
prevSettings.theme = $mode ?? 'system';
|
prevSettings.theme = $mode ?? 'system';
|
||||||
});
|
});
|
||||||
|
|
||||||
$: if (options) {
|
$: if (browser && options) {
|
||||||
applyOptions();
|
applyOptions();
|
||||||
}
|
}
|
||||||
|
|
||||||
$: if ($fileOrder) {
|
$: if ($fileOrder) {
|
||||||
updateGPXData();
|
updateGPXData();
|
||||||
}
|
}
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
if ($distanceMarkers !== prevSettings.distanceMarkers) {
|
if ($distanceMarkers !== prevSettings.distanceMarkers) {
|
||||||
$distanceMarkers = prevSettings.distanceMarkers;
|
$distanceMarkers = prevSettings.distanceMarkers;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($directionMarkers !== prevSettings.directionMarkers) {
|
if ($directionMarkers !== prevSettings.directionMarkers) {
|
||||||
$directionMarkers = prevSettings.directionMarkers;
|
$directionMarkers = prevSettings.directionMarkers;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($distanceUnits !== prevSettings.distanceUnits) {
|
if ($distanceUnits !== prevSettings.distanceUnits) {
|
||||||
$distanceUnits = prevSettings.distanceUnits;
|
$distanceUnits = prevSettings.distanceUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($velocityUnits !== prevSettings.velocityUnits) {
|
if ($velocityUnits !== prevSettings.velocityUnits) {
|
||||||
$velocityUnits = prevSettings.velocityUnits;
|
$velocityUnits = prevSettings.velocityUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($temperatureUnits !== prevSettings.temperatureUnits) {
|
if ($temperatureUnits !== prevSettings.temperatureUnits) {
|
||||||
$temperatureUnits = prevSettings.temperatureUnits;
|
$temperatureUnits = prevSettings.temperatureUnits;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ($mode !== prevSettings.theme) {
|
if ($mode !== prevSettings.theme) {
|
||||||
setMode(prevSettings.theme);
|
setMode(prevSettings.theme);
|
||||||
}
|
}
|
||||||
|
|
||||||
$selection.clear();
|
$selection.clear();
|
||||||
$fileObservers.clear();
|
$fileObservers.clear();
|
||||||
$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
|
$fileOrder = $fileOrder.filter((id) => !id.includes('embed'));
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="absolute flex flex-col h-full w-full border rounded-xl overflow-clip">
|
<div class="absolute flex flex-col h-full w-full border rounded-xl overflow-clip">
|
||||||
<div class="grow relative">
|
<div class="grow relative">
|
||||||
<Map
|
<Map
|
||||||
class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
|
class="h-full {$fileObservers.size > 1 ? 'horizontal' : ''}"
|
||||||
accessToken={options.token}
|
accessToken={options.token}
|
||||||
geocoder={false}
|
geocoder={false}
|
||||||
geolocate={false}
|
geolocate={false}
|
||||||
hash={useHash}
|
hash={useHash}
|
||||||
/>
|
/>
|
||||||
<OpenIn bind:files={options.files} bind:ids={options.ids} />
|
<OpenIn bind:files={options.files} bind:ids={options.ids} />
|
||||||
<LayerControl />
|
<LayerControl />
|
||||||
<GPXLayers />
|
<GPXLayers />
|
||||||
{#if $fileObservers.size > 1}
|
{#if $fileObservers.size > 1}
|
||||||
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
|
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
|
||||||
<FileList orientation="horizontal" />
|
<FileList orientation="horizontal" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
|
class="{options.elevation.show ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
|
||||||
style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
|
style={options.elevation.show ? `height: ${options.elevation.height}px` : ''}
|
||||||
>
|
>
|
||||||
<GPXStatistics
|
<GPXStatistics
|
||||||
{gpxStatistics}
|
{gpxStatistics}
|
||||||
{slicedGPXStatistics}
|
{slicedGPXStatistics}
|
||||||
panelSize={options.elevation.height}
|
panelSize={options.elevation.height}
|
||||||
orientation={options.elevation.show ? 'vertical' : 'horizontal'}
|
orientation={options.elevation.show ? 'vertical' : 'horizontal'}
|
||||||
/>
|
/>
|
||||||
{#if options.elevation.show}
|
{#if options.elevation.show}
|
||||||
<ElevationProfile
|
<ElevationProfile
|
||||||
{gpxStatistics}
|
{gpxStatistics}
|
||||||
{slicedGPXStatistics}
|
{slicedGPXStatistics}
|
||||||
additionalDatasets={[
|
additionalDatasets={[
|
||||||
options.elevation.speed ? 'speed' : null,
|
options.elevation.speed ? 'speed' : null,
|
||||||
options.elevation.hr ? 'hr' : null,
|
options.elevation.hr ? 'hr' : null,
|
||||||
options.elevation.cad ? 'cad' : null,
|
options.elevation.cad ? 'cad' : null,
|
||||||
options.elevation.temp ? 'temp' : null,
|
options.elevation.temp ? 'temp' : null,
|
||||||
options.elevation.power ? 'power' : null
|
options.elevation.power ? 'power' : null
|
||||||
].filter((dataset) => dataset !== null)}
|
].filter((dataset) => dataset !== null)}
|
||||||
elevationFill={options.elevation.fill}
|
elevationFill={options.elevation.fill}
|
||||||
panelSize={options.elevation.height}
|
panelSize={options.elevation.height}
|
||||||
showControls={options.elevation.controls}
|
showControls={options.elevation.controls}
|
||||||
class="py-2"
|
class="py-2"
|
||||||
/>
|
/>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button } from '$lib/components/ui/button';
|
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 Logo from '$lib/components/Logo.svelte';
|
||||||
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
|
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
|
||||||
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
|
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
import {
|
import {
|
||||||
BookOpenText,
|
BookOpenText,
|
||||||
Heart,
|
Heart,
|
||||||
LineChart,
|
ChartArea,
|
||||||
Map,
|
Map,
|
||||||
PencilRuler,
|
PencilRuler,
|
||||||
PenLine,
|
PenLine,
|
||||||
@@ -30,6 +30,12 @@
|
|||||||
import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
|
import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
|
||||||
import mapScreenshot from '$lib/assets/img/home/map.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 gpxStatistics = writable(exampleGPXFile.getStatistics());
|
||||||
let slicedGPXStatistics = writable(undefined);
|
let slicedGPXStatistics = writable(undefined);
|
||||||
let additionalDatasets = writable(['speed', 'atemp']);
|
let additionalDatasets = writable(['speed', 'atemp']);
|
||||||
@@ -161,7 +167,7 @@
|
|||||||
<div class="px-8 md:px-12">
|
<div class="px-8 md:px-12">
|
||||||
<div class="markdown text-center px-4 md:px-12">
|
<div class="markdown text-center px-4 md:px-12">
|
||||||
<h1>
|
<h1>
|
||||||
<LineChart size="24" class="mr-1 inline-block align-baseline" />
|
<ChartArea size="24" class="mr-1 inline-block align-baseline" />
|
||||||
{$_('homepage.data_visualization')}
|
{$_('homepage.data_visualization')}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-muted-foreground mb-6">{$_('homepage.data_visualization_description')}</p>
|
<p class="text-muted-foreground mb-6">{$_('homepage.data_visualization_description')}</p>
|
||||||
@@ -222,7 +228,7 @@
|
|||||||
<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"
|
||||||
>
|
>
|
||||||
<DocsLoader path="home/funding.mdx" />
|
<DocsContainer module={data.fundingComponent} />
|
||||||
<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>
|
||||||
@@ -231,7 +237,7 @@
|
|||||||
<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"
|
||||||
>
|
>
|
||||||
<DocsLoader path="home/translation.mdx" />
|
<DocsContainer module={data.translationComponent} />
|
||||||
<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>
|
||||||
@@ -250,7 +256,7 @@
|
|||||||
<Logo company="mapbox" class="w-60" />
|
<Logo company="mapbox" class="w-60" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<DocsLoader path="home/mapbox.mdx" />
|
<DocsContainer module={data.mapboxComponent} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
19
website/src/routes/[[language]]/+page.ts
Normal file
19
website/src/routes/[[language]]/+page.ts
Normal file
@@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1,43 +1,44 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button } from '$lib/components/ui/button';
|
import { Button } from '$lib/components/ui/button';
|
||||||
import { getURLForLanguage } from '$lib/utils';
|
import { getURLForLanguage } from '$lib/utils';
|
||||||
import { locale } from 'svelte-i18n';
|
import { locale } from 'svelte-i18n';
|
||||||
import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
|
import { page } from '$app/stores';
|
||||||
import { page } from '$app/stores';
|
import { guides } from '$lib/components/docs/docs';
|
||||||
import { guides } from '$lib/components/docs/docs';
|
|
||||||
|
export let data: {
|
||||||
|
guideTitles: Record<string, string>;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="grow px-12 pt-6 pb-12 flex flex-row gap-24">
|
<div class="grow px-12 pt-6 pb-12 flex flex-row gap-24">
|
||||||
<div
|
<div class="hidden md:flex flex-col gap-2 w-40 sticky mt-[27px] top-[108px] self-start shrink-0">
|
||||||
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
|
||||||
{#each Object.keys(guides) as guide}
|
variant="link"
|
||||||
<Button
|
href={getURLForLanguage($locale, `/help/${guide}`)}
|
||||||
variant="link"
|
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
|
||||||
href={getURLForLanguage($locale, `/help/${guide}`)}
|
.params.guide === 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
|
? 'font-semibold text-foreground'
|
||||||
.params.guide === guide
|
: ''}"
|
||||||
? 'font-semibold text-foreground'
|
>
|
||||||
: ''}"
|
{data.guideTitles[guide]}
|
||||||
>
|
</Button>
|
||||||
<DocsLoader path={`${guide}.mdx`} titleOnly={true} />
|
{#each guides[guide] as subGuide}
|
||||||
</Button>
|
<Button
|
||||||
{#each guides[guide] as subGuide}
|
variant="link"
|
||||||
<Button
|
href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
|
||||||
variant="link"
|
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
|
||||||
href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
|
.params.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 ml-3 {$page
|
guide + '/' + subGuide
|
||||||
.params.guide ===
|
? 'font-semibold text-foreground'
|
||||||
guide + '/' + subGuide
|
: ''}"
|
||||||
? 'font-semibold text-foreground'
|
>
|
||||||
: ''}"
|
{data.guideTitles[`${guide}/${subGuide}`]}
|
||||||
>
|
</Button>
|
||||||
<DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
|
{/each}
|
||||||
</Button>
|
{/each}
|
||||||
{/each}
|
</div>
|
||||||
{/each}
|
<div class="grow">
|
||||||
</div>
|
<slot />
|
||||||
<div class="grow">
|
</div>
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
32
website/src/routes/[[language]]/help/+layout.ts
Normal file
32
website/src/routes/[[language]]/help/+layout.ts
Normal file
@@ -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
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -1,9 +1,12 @@
|
|||||||
<script>
|
<script lang="ts">
|
||||||
import { Button } from '$lib/components/ui/button';
|
import { Button } from '$lib/components/ui/button';
|
||||||
import { getURLForLanguage } from '$lib/utils';
|
import { getURLForLanguage } from '$lib/utils';
|
||||||
import { locale } from 'svelte-i18n';
|
import { locale } from 'svelte-i18n';
|
||||||
import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
|
|
||||||
import { guides, guideIcons } from '$lib/components/docs/docs';
|
import { guides, guideIcons } from '$lib/components/docs/docs';
|
||||||
|
|
||||||
|
export let data: {
|
||||||
|
guideTitles: Record<string, string>;
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||||
@@ -18,7 +21,7 @@
|
|||||||
{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">
|
||||||
<DocsLoader path={`${guide}.mdx`} titleOnly={true} />
|
{data.guideTitles[guide]}
|
||||||
</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}
|
||||||
@@ -28,7 +31,7 @@
|
|||||||
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" />
|
||||||
<DocsLoader path={`${guide}/${subGuide}.mdx`} titleOnly={true} />
|
{data.guideTitles[`${guide}/${subGuide}`]}
|
||||||
</Button>
|
</Button>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,36 +1,42 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { getNextGuide, getPreviousGuide } from '$lib/components/docs/docs';
|
import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
|
||||||
import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
|
|
||||||
import { Button } from '$lib/components/ui/button';
|
import { Button } from '$lib/components/ui/button';
|
||||||
import { getURLForLanguage } from '$lib/utils';
|
import { getURLForLanguage } from '$lib/utils';
|
||||||
import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from 'lucide-svelte';
|
import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from 'lucide-svelte';
|
||||||
import { _, locale } from 'svelte-i18n';
|
import { _, locale } from 'svelte-i18n';
|
||||||
|
|
||||||
$: previousGuide = getPreviousGuide($page.params.guide);
|
export let data: {
|
||||||
$: nextGuide = getNextGuide($page.params.guide);
|
component: any;
|
||||||
|
previousGuide: string | undefined;
|
||||||
|
previousGuideTitle: string | undefined;
|
||||||
|
nextGuide: string | undefined;
|
||||||
|
nextGuideTitle: string | undefined;
|
||||||
|
};
|
||||||
</script>
|
</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">
|
<div class="flex flex-row flex-wrap gap-3 pt-6">
|
||||||
{#if previousGuide}
|
{#if data.previousGuide}
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
class="mr-auto"
|
class="mr-auto"
|
||||||
href={getURLForLanguage(undefined, `/help/${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" />
|
||||||
<DocsLoader path="{previousGuide}.mdx" titleOnly={true} />
|
{data.previousGuideTitle}
|
||||||
</Button>
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
{#if nextGuide}
|
{#if data.nextGuide}
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
class="ml-auto"
|
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" />
|
<ChevronRight size="14" class="ml-1 mt-0.5" />
|
||||||
</Button>
|
</Button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
30
website/src/routes/[[language]]/help/[...guide]/+page.ts
Normal file
30
website/src/routes/[[language]]/help/[...guide]/+page.ts
Normal file
@@ -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,
|
||||||
|
};
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user