Weitere Verbesserungen des Starter Projekts für neue Projekte.

src/components/App.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Router, Route } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
-    import { location } from "../store"
+    import { generalInfo, location } from "../store"
 
     import Home from "./routes/Home.svelte"
     import Content from "./routes/Content.svelte"
@@ -10,6 +10,7 @@
     import Footer from "./widgets/Footer.svelte"
 
     export let url = ""
+
     if (url) {
         // ssr
         let l = url.split("?")
@@ -22,13 +23,40 @@
     }
 
     // scroll to top on new site
-    location.subscribe((l) => {
-        if (l.push) scrollToTop()
+    location.subscribe((location) => {
+        if (location.push) scrollToTop()
     })
 
     if (typeof window !== "undefined") console.log("App initialized")
 </script>
 
+<svelte:head>
+    {#if $generalInfo?.meta?.metaTitle}
+        <title>{$generalInfo?.meta?.metaTitle}</title>
+    {/if}
+    {#if $generalInfo?.meta?.metaDescription}
+        <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
+    {/if}
+    {#if $generalInfo?.meta?.metaKeywords}
+        <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
+    {/if}
+    {#if $generalInfo?.person?.firstname || $generalInfo?.person?.lastname}
+        <meta
+            name="author"
+            content="{$generalInfo?.person?.firstname ? $generalInfo?.person?.firstname : ''} {$generalInfo?.person
+                ?.lastname
+                ? $generalInfo?.person?.lastname
+                : ''}"
+        />
+    {/if}
+    {#if $generalInfo?.meta?.metaTagRobots}
+        <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
+    {/if}
+    {#if $generalInfo?.media?.favicon}
+        <link rel="shortcut icon" type="image/x-icon" href="{$generalInfo?.media?.favicon.src}" />
+    {/if}
+</svelte:head>
+
 <Header />
 
 <div>

src/components/routes/Content.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { getContent } from "../../api"
-    // import { apiBaseURL } from "../../config"
-    import { generalInfo } from "../../store"
+    import { generalInfo, currentLang } from "../../store"
 
     export let path: string
 
@@ -10,7 +9,7 @@
 
     function load() {
         loading = true
-        getContent(path)
+        getContent(path, $currentLang)
             .then((c) => {
                 content = c
             })
@@ -24,10 +23,6 @@
 
 <svelte:head>
     <title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
-    <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
-    <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
-    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
-    <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
 </svelte:head>
 
 <div class="container">
@@ -37,12 +32,8 @@
                 <!-- Loader -->
             {:else if content}
                 {#each content.blocks || [] as b}
-                    <h2>{b.title}</h2>
-                    <div>{@html b.text}</div>
+                    {JSON.stringify(b)}
                 {/each}
-            {:else}
-                <h1>Seite nicht gefunden</h1>
-                <div>Pfad: {path}</div>
             {/if}
         </div>
     </div>

src/components/routes/Home.svelte

@@ -6,20 +6,45 @@
     import GoogleMaps from "../widgets/GoogleMaps.svelte"
     import ScrollTo from "../widgets/ScrollTo.svelte"
     import ContactForm from "../widgets/ContactForm.svelte"
+    import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
 
     let expandedForm: string = "recipe"
 </script>
 
-<svelte:head>
-    <title>{$generalInfo?.meta?.metaTitle}</title>
-    <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
-    <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
-    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
-    <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
-</svelte:head>
+<!-- <svelte:head>
+    {#if $generalInfo?.meta?.metaTitle}
+        <title>{$generalInfo?.meta?.metaTitle}</title>
+    {/if}
+    {#if $generalInfo?.meta?.metaDescription}
+        <meta name="description" content="{$generalInfo?.meta?.metaDescription}" />
+    {/if}
+    {#if $generalInfo?.meta?.metaKeywords}
+        <meta name="keywords" content="{$generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}" />
+    {/if}
+    {#if $generalInfo?.person?.firstname || $generalInfo?.person?.lastname}
+        <meta
+            name="author"
+            content="{$generalInfo?.person?.firstname ? $generalInfo?.person?.firstname : ''} {$generalInfo?.person
+                ?.lastname
+                ? $generalInfo?.person?.lastname
+                : ''}"
+        />
+    {/if}
+    {#if $generalInfo?.meta?.metaTagRobots}
+        <meta name="robots" content="{$generalInfo?.meta?.metaTagRobots}" />
+    {/if}
+    {#if $generalInfo?.media?.favicon}
+        <link rel="shortcut icon" type="image/x-icon" href="{$generalInfo?.media?.favicon.src}" />
+    {/if}
+</svelte:head> -->
 
 <section class="contact">
     <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <GeneralMediaImage id="test1" />
+            </div>
+        </div>
         <div class="row nospace">
             <div class="col-md-6">
                 <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" />

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>