From 9a2541b6f3a95feb95bdf83ffefb67a3fbd4a14f Mon Sep 17 00:00:00 2001 From: vcoppe Date: Tue, 24 Sep 2024 13:45:03 +0200 Subject: [PATCH] try to improve core web vitals --- .../src/lib/components/docs/DocsImage.svelte | 18 +++++++++++-- website/src/lib/docs/en/getting-started.mdx | 3 +-- website/src/lib/docs/en/map-controls.mdx | 3 +++ website/src/lib/docs/en/toolbar/routing.mdx | 3 +-- website/src/lib/docs/en/toolbar/scissors.mdx | 3 +-- website/src/lib/utils.ts | 2 +- website/src/routes/[[language]]/+page.svelte | 25 ++++++++----------- 7 files changed, 34 insertions(+), 23 deletions(-) diff --git a/website/src/lib/components/docs/DocsImage.svelte b/website/src/lib/components/docs/DocsImage.svelte index 3ac2ab4..0aa31f9 100644 --- a/website/src/lib/components/docs/DocsImage.svelte +++ b/website/src/lib/components/docs/DocsImage.svelte @@ -1,11 +1,25 @@
- + {#if img === 'getting-started/interface'} + + {:else if img === 'tools/routing'} + + {:else if img === 'tools/split'} + + {/if}

{alt}

diff --git a/website/src/lib/docs/en/getting-started.mdx b/website/src/lib/docs/en/getting-started.mdx index 0b30577..f15fda0 100644 --- a/website/src/lib/docs/en/getting-started.mdx +++ b/website/src/lib/docs/en/getting-started.mdx @@ -3,7 +3,6 @@ title: Getting started --- @@ -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. - + 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. diff --git a/website/src/lib/docs/en/map-controls.mdx b/website/src/lib/docs/en/map-controls.mdx index 4e359d0..6c6cf9d 100644 --- a/website/src/lib/docs/en/map-controls.mdx +++ b/website/src/lib/docs/en/map-controls.mdx @@ -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. + ### Map navigation The controls at the top allow you to zoom in and out , and to change the orientation and tilt of the map . diff --git a/website/src/lib/docs/en/toolbar/routing.mdx b/website/src/lib/docs/en/toolbar/routing.mdx index 113b84b..92563ce 100644 --- a/website/src/lib/docs/en/toolbar/routing.mdx +++ b/website/src/lib/docs/en/toolbar/routing.mdx @@ -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'; @@ -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 from the context menu. - + ## Additional tools diff --git a/website/src/lib/docs/en/toolbar/scissors.mdx b/website/src/lib/docs/en/toolbar/scissors.mdx index 73f6bd3..28e8f9b 100644 --- a/website/src/lib/docs/en/toolbar/scissors.mdx +++ b/website/src/lib/docs/en/toolbar/scissors.mdx @@ -5,7 +5,6 @@ title: Crop and split @@ -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). - + diff --git a/website/src/lib/utils.ts b/website/src/lib/utils.ts index 3f53474..386cc55 100644 --- a/website/src/lib/utils.ts +++ b/website/src/lib/utils.ts @@ -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; diff --git a/website/src/routes/[[language]]/+page.svelte b/website/src/routes/[[language]]/+page.svelte index 7f8ff37..c356c24 100644 --- a/website/src/routes/[[language]]/+page.svelte +++ b/website/src/routes/[[language]]/+page.svelte @@ -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 @@
@@ -137,30 +130,34 @@ class="relative h-60 xs:h-80 aspect-square rounded-2xl shadow-xl overflow-hidden overflow-clip" > - +
@@ -216,7 +213,7 @@