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

try to improve core web vitals

Browse Source
This commit is contained in:
vcoppe
2024-09-24 13:45:03 +02:00
parent 2be5c837cb
commit 9a2541b6f3
7 changed files with 34 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
website/src/lib/components/docs/DocsImage.svelte
View File

@@ -1,11 +1,25 @@
<script lang="ts">
export let src;
export let img: 'getting-started/interface' | 'tools/routing' | 'tools/split';
export let alt: string;
</script>
<div class="flex flex-col items-center py-6 w-full">
<div class="rounded-md overflow-hidden overflow-clip shadow-xl mx-auto">
<enhanced:img {src} {alt} class="w-full max-w-3xl" />
{#if img === 'getting-started/interface'}
<enhanced:img
src="/src/lib/assets/img/docs/getting-started/interface.png"
{alt}
class="w-full max-w-3xl"
/>
{:else if img === 'tools/routing'}
<enhanced:img
src="/src/lib/assets/img/docs/tools/routing.png"
{alt}
class="w-full max-w-3xl"
/>
{:else if img === 'tools/split'}
<enhanced:img src="/src/lib/assets/img/docs/tools/split.png" {alt} class="w-full max-w-3xl" />
{/if}
</div>
<p class="text-center text-sm text-muted-foreground mt-2">{alt}</p>
</div>

3
website/src/lib/docs/en/getting-started.mdx
View File

@@ -3,7 +3,6 @@ title: Getting started
---
<script lang="ts">
import interfaceScreenshot from '$lib/assets/img/docs/getting-started/interface.png?enhanced';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>
@@ -12,7 +11,7 @@ title: Getting started
Welcome to the official guide for **gpx.studio**!
This guide will walk you through all the components and tools of the interface, helping you become a proficient user of the application.
<DocsImage src={interfaceScreenshot} alt="The gpx.studio interface." />
<DocsImage img="getting-started/interface" alt="The gpx.studio interface." />
As shown in the screenshot above, the interface is divided into four main sections organized around the map.
Before we dive into the details of each section, let's have a quick overview of the interface.

3
website/src/lib/docs/en/map-controls.mdx
View File

@@ -10,6 +10,9 @@ title: Map controls
# { title }
The map controls are located on the right side of the interface.
These controls allow you to navigate the map, zoom in and out, and switch between different map styles.
### <Diff size="16" class="inline-block" style="margin-bottom: 2px" /> Map navigation
The controls at the top allow you to zoom in <Plus size="16" class="inline-block" style="margin-bottom: 2px" /> and out <Minus size="16" class="inline-block" style="margin-bottom: 2px" />, and to change the orientation and tilt of the map <Compass size="16" class="inline-block" style="margin-bottom: 2px" />.

3
website/src/lib/docs/en/toolbar/routing.mdx
View File

@@ -6,7 +6,6 @@ title: Route planning and editing
import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import routingScreenshot from '$lib/assets/img/docs/tools/routing.png?enhanced';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>
@@ -62,7 +61,7 @@ This allows the route to be edited at different levels of detail.
Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
<DocsImage src={routingScreenshot} alt="Anchor points allow you to easily edit a route." />
<DocsImage img="tools/routing" alt="Anchor points allow you to easily edit a route." />
## Additional tools

3
website/src/lib/docs/en/toolbar/scissors.mdx
View File

@@ -5,7 +5,6 @@ title: Crop and split
<script>
import { ScissorsIcon } from 'lucide-svelte';
import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
import splitScreenshot from '$lib/assets/img/docs/tools/split.png?enhanced';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>
@@ -30,4 +29,4 @@ Scissors will appear at the cursor position, showing that you can split the trac
You can choose to split the trace into two GPX files, or to keep the split parts in the same file as [tracks or segments](../gpx).
<DocsImage src={splitScreenshot} alt="Hovering over the selected trace turns your cursor into scissors." />
<DocsImage img="tools/split" alt="Hovering over the selected trace turns your cursor into scissors." />

2
website/src/lib/utils.ts
View File

@@ -26,7 +26,7 @@ type FlyAndScaleParams = {
export const flyAndScale = (
node: Element,
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 50 }
): TransitionConfig => {
const style = getComputedStyle(node);
const transform = style.transform === "none" ? "" : style.transform;

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

@@ -22,13 +22,6 @@
import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
import { currentTool, Tool } from '$lib/stores';
import { onDestroy, onMount } from 'svelte';
import routingScreenshot from '$lib/assets/img/home/routing.png?enhanced';
import mapboxOutdoorsMap from '$lib/assets/img/home/mapbox-outdoors.png?enhanced';
import mapboxSatelliteMap from '$lib/assets/img/home/mapbox-satellite.png?enhanced';
import ignMap from '$lib/assets/img/home/ign.png?enhanced';
import cyclosmMap from '$lib/assets/img/home/cyclosm.png?enhanced';
import waymarkedMap from '$lib/assets/img/home/waymarked.png?enhanced';
import mapScreenshot from '$lib/assets/img/home/map.png?enhanced';
export let data: {
fundingModule: any;
@@ -78,7 +71,7 @@
</div>
<div class="relative overflow-hidden">
<enhanced:img
src={routingScreenshot}
src="/src/lib/assets/img/home/routing.png"
alt="Screenshot of the gpx.studio map in 3D."
class="w-full min-w-[1200px] ml-[20%] -translate-x-[20%]"
/>
@@ -137,30 +130,34 @@
class="relative h-60 xs:h-80 aspect-square rounded-2xl shadow-xl overflow-hidden overflow-clip"
>
<enhanced:img
src={mapboxOutdoorsMap}
src="/src/lib/assets/img/home/mapbox-outdoors.png"
alt="Mapbox Outdoors map screenshot."
class="absolute"
style="clip-path: inset(0 50% 50% 0);"
/>
<enhanced:img
src={mapboxSatelliteMap}
src="/src/lib/assets/img/home/mapbox-satellite.png"
alt="Mapbox Satellite map screenshot."
class="absolute"
style="clip-path: inset(0 0 50% 50%);"
/>
<enhanced:img
src={ignMap}
src="/src/lib/assets/img/home/ign.png"
alt="IGN map screenshot."
class="absolute"
style="clip-path: inset(50% 50% 0 0);"
/>
<enhanced:img
src={cyclosmMap}
src="/src/lib/assets/img/home/cyclosm.png"
alt="CyclOSM map screenshot."
class="absolute"
style="clip-path: inset(50% 0 0 50%);"
/>
<enhanced:img src={waymarkedMap} alt="Waymarked Trails map screenshot." class="absolute" />
<enhanced:img
src="/src/lib/assets/img/home/waymarked.png"
alt="Waymarked Trails map screenshot."
class="absolute"
/>
</div>
</div>
</div>
@@ -216,7 +213,7 @@
<div class="px-12 w-full">
<div class="w-full max-w-7xl mx-auto rounded-2xl shadow-xl overflow-hidden overflow-clip">
<enhanced:img
src={mapScreenshot}
src="/src/lib/assets/img/home/map.png"
alt="Screenshot of the gpx.studio map in 3D."
class="min-w-[800px] ml-[15%] -translate-x-[15%]"
/>