Weitere Verbesserungen des Starter Projekts für neue Projekte.

src/components/widgets/GeneralMediaImage.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { generalInfo } from "../../store"
+
+    export let id: string = null
+    export let cssClass: string = ""
+</script>
+
+{#if id}
+    {#each $generalInfo?.media?.mediaFiles || [] as mediaFile}
+        {#if mediaFile.id === id && mediaFile.file}
+            {#if mediaFile.file.src.includes(";base64,")}
+                <img
+                    src="{mediaFile.file.src}"
+                    alt="{mediaFile.alternateText ? mediaFile.alternateText + ' - ' : ''}"
+                    class="{cssClass}"
+                />
+            {/if}
+        {/if}
+    {/each}
+{/if}

src/components/widgets/LanguageChooser.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { navigations, location, currentLang } from "../../store"
+
+    $: languages = []
+
+    $: if ($navigations?.length) {
+        $navigations.forEach((nav) => {
+            if (!languages.includes(nav.locale)) {
+                languages.push(nav.locale)
+            }
+        })
+        languages = languages
+    }
+
+    $: console.log($location)
+</script>
+
+<div class="language-chooser">
+    {#each languages as language}
+        <div
+            class="lang"
+            class:active="{$currentLang === language}"
+            on:click="{() => {
+                $currentLang = language
+            }}"
+        >
+            {language}
+        </div>
+    {/each}
+</div>

src/components/widgets/Navigation.svelte

@@ -2,11 +2,12 @@
     import * as animateScroll from "svelte-scrollto"
     import Icon from "mdi-svelte"
     import { mdiMenu } from "@mdi/js"
-    // import { generalInfo } from "../../store"
 
     import { links } from "svelte-routing"
     import { navigations } from "../../store"
 
+    import LanguageChooser from "./LanguageChooser.svelte"
+
     export let ident = "main"
 
     let navigation: Navigation
@@ -21,6 +22,8 @@
     }
 </script>
 
+<LanguageChooser />
+
 {#if navigation}
     <nav class="{ident}" use:links>
         {#each navigation?.items || [] as item}
@@ -36,7 +39,7 @@
                     {item.settings.title}
                 </a>
             {:else}
-                <a href="{item.settings.page}">
+                <a href="/{navigation.locale}{item.settings.page}">
                     {item.settings.title}
                 </a>
             {/if}
@@ -67,7 +70,7 @@
                     </div>
                 {:else}
                     <div class="nav-item">
-                        <a href="{item.settings.page}" on:click="{() => (showMobileNav = false)}">
+                        <a href="/{navigation.locale}{item.settings.page}" on:click="{() => (showMobileNav = false)}">
                             {item.settings.title}
                         </a>
                     </div>

src/components/widgets/ScrollTo.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte"
 
+    import GeneralMediaImage from "./GeneralMediaImage.svelte"
+
     const dispatch = createEventDispatcher()
 </script>
 
@@ -14,7 +16,7 @@
                 })
             }}"
         >
-            <!-- <img src="img/icon/contact.svg" alt="" /> -->
+            <GeneralMediaImage id="contact" />
         </a>
     </div>
     <div class="circle-contact">
@@ -26,12 +28,12 @@
                 })
             }}"
         >
-            <!-- <img src="img/icon/recipe.svg" alt="" /> -->
+            <GeneralMediaImage id="recipe" />
         </a>
     </div>
     <div class="circle-top">
         <a href="/#">
-            <!-- <img src="img/icon/chevron-up.svg" alt="" /> -->
+            <GeneralMediaImage id="up" />
         </a>
     </div>
 </div>