try to improve core web vitals

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

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.

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" />.

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

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." />