add faq section

website/src/lib/components/docs/DocsLoader.svelte

@@ -64,7 +64,7 @@
         @apply pt-1.5;
     }
 
-	:global(.markdown p > button) {
+    :global(.markdown p > button, .markdown li > button) {
         @apply border;
         @apply rounded-md;
         @apply px-1;

website/src/lib/components/docs/docs.ts

@@ -9,6 +9,7 @@ export const guides: Record<string, string[]> = {
     'map-controls': [],
     'gpx': [],
     'integration': [],
+    'faq': [],
 };
 
 export const guideIcons: Record<string, string | ComponentType<Icon>> = {
@@ -31,6 +32,7 @@ export const guideIcons: Record<string, string | ComponentType<Icon>> = {
     "map-controls": "🗺",
     "gpx": "💾",
     "integration": "{ 👩‍💻 }",
+    "faq": "🔮",
 };
 
 export function getPreviousGuide(currentGuide: string): string | undefined {

website/src/lib/docs/en/faq.mdx

@@ -0,0 +1,39 @@
+---
+title: FAQ
+---
+
+<script>
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+</script>
+
+# { title }
+
+### Do I need to donate to use the website?
+
+No, you don't need to donate to use the website or unlock any features.
+The website is free to use and always will be (as long as it is financially sustainable).
+However, donations are appreciated and help keep the website running.
+
+### Why is this route chosen over that one? *Or* how can I add something to the map?
+
+**gpx.studio** uses data from <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a>, which is a crowd-sourced map of the world.
+This means you can contribute to the map by adding or editing data on OpenStreetMap.
+
+If you have never used OpenStreetMap before, you can:
+1. Go to the location where you want to add or edit data on the <a href="https://www.openstreetmap.org/" target="_blank">map</a>.
+2. Use the <button>Query features</button> tool on the right to inspect the existing data.
+3. Right-click on the location and select <button>Add a note here</button>.
+4. Explain what is incorrect or missing in the note and click <button>Add note</button> to submit it.
+
+Someone more experienced with OpenStreetMap will then review your note and take the necessary action.
+
+<DocsNote>
+
+More information on how to contribute to OpenStreetMap can be found <a href="https://wiki.openstreetmap.org/wiki/How_to_contribute" target="_blank">here</a>.
+
+</DocsNote>
+
+### Why is the elevation profile for my GPX file empty?
+
+If the elevation profile for your GPX file is empty, it means that the GPX file does not contain elevation data.
+You can add elevation data to your GPX file by using <a href="https://www.gpsvisualizer.com/elevation" target="_blank">GPS Visualizer</a>.

website/src/routes/+layout.svelte

@@ -19,15 +19,14 @@
         if ($page.url.searchParams.has('embed')) {
             // convert old embedding options to new format and redirect to new embed page
             let folders = $page.url.pathname.split('/');
-			let locale = folders.indexOf('l') >= 0 ? folders[folders.indexOf('l') + 1] ?? 'en' : 'en';
+            let locale =
+                folders.indexOf('l') >= 0 ? folders[folders.indexOf('l') + 1] ?? 'en' : 'en';
             window.location.href = `${getURLForLanguage(locale, '/embed')}?options=${encodeURIComponent(JSON.stringify(convertOldEmbeddingOptions($page.url.searchParams)))}`;
         }
     });
 
-	$: if ($page.params.language) {
-		if ($page.params.language === '' && $locale !== 'en') {
-			locale.set('en');
-		} else if ($page.params.language) {
+    $: if ($page.route.id.includes('[[language]]')) {
+        if ($page.params.language) {
             let lang = $page.params.language.replace('/', '');
             if ($locale !== lang) {
                 if (languages.hasOwnProperty(lang)) {
@@ -36,6 +35,8 @@
                     goto(`${base}/404`);
                 }
             }
+        } else if ($locale !== 'en') {
+            locale.set('en');
         }
     }
 

website/src/routes/[[language]]/help/+layout.svelte

@@ -7,8 +7,10 @@
     import { guides } from '$lib/components/docs/docs';
 </script>
 
-<div class="px-12 pt-6 pb-12 flex flex-row gap-24">
-	<div class="hidden md:flex flex-col gap-2 w-40 sticky top-[108px] self-start shrink-0">
+<div class="grow px-12 pt-6 pb-12 flex flex-row gap-24">
+    <div
+        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
                 variant="link"