progress

2026-06-17 20:46:31 +00:00 · 2025-06-21 21:07:36 +02:00
parent f0230d4634
commit 1cc07901f6
803 changed files with 7937 additions and 6329 deletions
@@ -1,13 +1,20 @@
 <script lang="ts">
    import { Button } from '$lib/components/ui/button';
    import { getURLForLanguage } from '$lib/utils';
-    import { locale } from '$lib/i18n';
-    import { page } from '$app/stores';
+    import { i18n } from '$lib/i18n.svelte';
+    import { page } from '$app/state';
    import { guides } from '$lib/components/docs/docs';
+    import type { Snippet } from 'svelte';

-    export let data: {
-        guideTitles: Record<string, string>;
-    };
+    let {
+        data,
+        children,
+    }: {
+        data: {
+            guideTitles: Record<string, string>;
+        };
+        children: Snippet;
+    } = $props();
 </script>

 <div class="grow px-12 pt-6 pb-12 flex flex-row gap-24">
@@ -17,8 +24,8 @@
        {#each Object.keys(guides) as guide}
            <Button
                variant="link"
-                href={getURLForLanguage($locale, `/help/${guide}`)}
-                class="min-h-5 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(i18n.lang, `/help/${guide}`)}
+                class="min-h-5 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
                    .params.guide === guide
                    ? 'font-semibold text-foreground'
                    : ''}"
@@ -28,8 +35,8 @@
            {#each guides[guide] as subGuide}
                <Button
                    variant="link"
-                    href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
-                    class="min-h-5 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(i18n.lang, `/help/${guide}/${subGuide}`)}
+                    class="min-h-5 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
                        .params.guide ===
                    guide + '/' + subGuide
                        ? 'font-semibold text-foreground'
@@ -41,6 +48,6 @@
        {/each}
    </div>
    <div class="grow">
-        <slot />
+        {@render children()}
    </div>
 </div>
@@ -1,19 +1,23 @@
 <script lang="ts">
    import { Button } from '$lib/components/ui/button';
    import { getURLForLanguage } from '$lib/utils';
-    import { locale } from '$lib/i18n';
+    import { i18n } from '$lib/i18n.svelte';
    import { guides, guideIcons } from '$lib/components/docs/docs';

-    export let data: {
-        guideTitles: Record<string, string>;
-    };
+    let {
+        data,
+    }: {
+        data: {
+            guideTitles: Record<string, string>;
+        };
+    } = $props();
 </script>

 <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
    {#each Object.keys(guides) as guide}
        <Button
            variant="outline"
-            href={getURLForLanguage($locale, `/help/${guide}`)}
+            href={getURLForLanguage(i18n.lang, `/help/${guide}`)}
            class="min-h-36 h-full pt-6 pb-3 px-0"
        >
            <div class="flex flex-col w-full">
@@ -27,14 +31,15 @@
                    {#each guides[guide] as subGuide}
                        <Button
                            variant="link"
-                            href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
+                            href={getURLForLanguage(i18n.lang, `/help/${guide}/${subGuide}`)}
                            class="min-h-8 h-fit min-w-24 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"
-                            />
+                            {#if typeof guideIcons[subGuide] === 'string'}
+                                {guideIcons[subGuide]}
+                            {:else}
+                                {@const GuideIcon = guideIcons[subGuide]}
+                                <GuideIcon size="16" class="mr-1 shrink-0" />
+                            {/if}
                            {data.guideTitles[`${guide}/${subGuide}`]}
                        </Button>
                    {/each}
@@ -1,19 +1,16 @@
 <script lang="ts">
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
    import { getNextGuide, getPreviousGuide } from '$lib/components/docs/docs';
    import DocsContainer from '$lib/components/docs/DocsContainer.svelte';
    import { Button } from '$lib/components/ui/button';
    import { getURLForLanguage } from '$lib/utils';
-    import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from 'lucide-svelte';
-    import { _, locale } from '$lib/i18n';
+    import { ChevronLeft, ChevronRight, PenLine, CornerDownRight } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';

-    export let data: {
-        guideModule: any;
-        guideTitles: Record<string, string>;
-    };
+    let { data }: { data: { guideModule: any; guideTitles: Record<string, string> } } = $props();

-    $: previousGuide = getPreviousGuide($page.params.guide);
-    $: nextGuide = getNextGuide($page.params.guide);
+    let previousGuide = $derived(getPreviousGuide(page.params.guide));
+    let nextGuide = $derived(getNextGuide(page.params.guide));
 </script>

 <div class="markdown flex flex-col gap-3">
@@ -25,9 +22,9 @@
        <Button
            variant="outline"
            class="mr-auto"
-            href={getURLForLanguage($locale, `/help/${previousGuide}`)}
+            href={getURLForLanguage(i18n.lang, `/help/${previousGuide}`)}
        >
-            <ChevronLeft size="14" class="mr-1 mt-0.5" />
+            <ChevronLeft size="14" class="mt-0.5" />
            {data.guideTitles[previousGuide]}
        </Button>
    {/if}
@@ -35,47 +32,47 @@
        <Button
            variant="outline"
            class="ml-auto"
-            href={getURLForLanguage($locale, `/help/${nextGuide}`)}
+            href={getURLForLanguage(i18n.lang, `/help/${nextGuide}`)}
        >
            {data.guideTitles[nextGuide]}
-            <ChevronRight size="14" class="ml-1 mt-0.5" />
+            <ChevronRight size="14" class="mt-0.5" />
        </Button>
    {/if}
 </div>

 <div class="flex flex-row flex-wrap justify-between items-start mt-10 gap-3">
    <div class="flex flex-col items-start">
-        <p class="text-sm text-muted-foreground">{$_('docs.answer_not_found')}</p>
+        <p class="text-sm text-muted-foreground">{i18n._('docs.answer_not_found')}</p>
        <Button
            variant="link"
            href="https://www.reddit.com/r/gpxstudio/"
            target="_blank"
            class="p-0 h-6 text-link"
        >
-            <CornerDownRight size="16" class="mr-1" />
-            {$_('docs.ask_on_reddit')}
+            <CornerDownRight size="16" />
+            {i18n._('docs.ask_on_reddit')}
        </Button>
    </div>
-    {#if $locale === 'en'}
+    {#if i18n.lang === 'en'}
        <Button
            variant="link"
-            href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{$page
+            href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{page
                .params.guide}.mdx"
            target="_blank"
            class="p-0 h-6 ml-auto text-link"
        >
-            <PenLine size="16" class="mr-1" />
+            <PenLine size="16" />
            Edit this page on GitHub
        </Button>
    {:else}
        <Button
            variant="link"
-            href="https://crowdin.com/project/gpxstudio/{$locale}"
+            href="https://crowdin.com/project/gpxstudio/{i18n.lang}"
            target="_blank"
            class="p-0 h-6 ml-auto text-link"
        >
-            <PenLine size="16" class="mr-1" />
-            {$_('docs.translate')}
+            <PenLine size="16" />
+            {i18n._('docs.translate')}
        </Button>
    {/if}
 </div>