Weitere Verbesserungen des Starter Projekts für neue Projekte.

api/collections/content.yml

@@ -24,14 +24,18 @@ meta:
           mediaQuery: "(max-width:599px)"
           primaryText: path
           columns:
-              - name
+              - source: path
-              - path
+                twig: "{{locale}}{{path}}"
+              - source: locale
+                type: flag
         # Desktop
         - type: table
           mediaQuery: "(min-width:600px)"
           columns:
-              - name
+              - source: path
-              - path
+                twig: "{{locale}}{{path}}"
+              - source: locale
+                type: flag
 
 imageFilter:
     xs:
@@ -102,6 +106,7 @@ hooks:
 
 # Feldliste der Kollektion
 fields:
+    - !include fields/_locale.yml
     - name: name
       type: string
       meta:

api/collections/general.yml

@@ -34,10 +34,9 @@ meta:
               - lastname
               - companyName
 
-    entryViewFields:
     tabsSection:
         meta:
-                expand: meta
+            expand: media
         tabs:
             - name: general
               meta:
@@ -237,11 +236,15 @@ meta:
                               - name: id
                                 type: string
                                 meta:
+                                    editableWhileCreating: true
                                     label: { de: "Technischer Name / ID", en: "Technical name / ID" }
+                                    helperText:
+                                        de: "Achtung: Eine technische ID ist meist fest im Code der Seite verknüpft und darf, wenn sie einmal gesetzt wurde, nicht verändert werden!"
+                                        en: "Attention: A technical ID is usually permanently linked in the code of the page and, once it has been set, must not be changed!"
                               - name: file
                                 type: file
                                 meta:
-                                        label: { de: "", en: "" }
+                                    label: { de: "Datei", en: "File" }
             - name: copyright
               meta:
                   label: { de: "Copyright", en: "Copyright" }

api/collections/navigation.yml

@@ -204,3 +204,4 @@ indexes:
       key:
           - ident
           - locale
+          - path

src/api.ts

@@ -186,8 +186,11 @@ export const sendEmail = async (type: string = "contactForm", data: any, noToken
     })
 }
 
-export const getContent = async (path: string): Promise<Content> => {
+export const getContent = async (path: string, lang: string): Promise<Content> => {
-    const c = await api<Content[]>("content", { limit: 1, filter: { path } })
+    const c = await api<Content[]>("content", {
+        limit: 1,
+        filter: { path: path.replace("/" + lang, ""), locale: lang },
+    })
     if (c?.data?.length) {
         return c.data[0]
     }

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) => {
+    location.subscribe((location) => {
-        if (l.push) scrollToTop()
+        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, currentLang } from "../../store"
-    import { generalInfo } 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>
+                    {JSON.stringify(b)}
-                    <div>{@html b.text}</div>
                 {/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>
+<!-- <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(' ', '')}" />
-    <meta name="author" content="{$generalInfo?.person?.firstname} {$generalInfo?.person?.lastname}" />
+    {/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}" />
-</svelte:head>
+    {/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>

src/css/theme-2022/components/general.less

@@ -19,39 +19,6 @@ body {
     }
 }
 
-// Body Images
-
-.body-image-left {
-    position: absolute;
-    left: 0;
-    top: 80rem;
-
-    @media (max-width: 900px) {
-        top: 90rem;
-    }
-}
-
-// Lists
-
-ul {
-    list-style-type: none;
-    padding-left: 15px;
-
-    li {
-        line-height: 30px;
-        padding-left: 0;
-        font-weight: 700;
-
-        &:before {
-            content: "\203A";
-            font-weight: 700;
-            position: absolute;
-            top: -1px;
-            left: -12px;
-        }
-    }
-}
-
 // Scroll To Top
 
 .scroll-to-top {
@@ -96,13 +63,3 @@ ul {
         right: -53px;
     }
 }
-
-// Promotion
-
-.promotion-image-wave-top {
-    height: 70px;
-}
-
-.promotion-image-wave-bottom {
-    height: 137px;
-}

src/css/theme-2022/components/language-chooser.less

@@ -0,0 +1,22 @@
+.language-chooser {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    border: 1px solid #ccc;
+
+    .lang {
+        border: 1px solid #ccc;
+        cursor: pointer;
+
+        &:hover {
+            background: #ccc;
+            color: black;
+        }
+
+        &.active {
+            background: #ccc;
+            color: black;
+            font-weight: 700;
+        }
+    }
+}

src/css/theme-2022/main.less

@@ -53,5 +53,6 @@
 @import "components/history";
 @import "components/top-section";
 @import "components/forms";
+@import "components/language-chooser";
 
 @import "components/cc-bar";

src/css/theme-2022/reset.less

@@ -49,6 +49,7 @@ a:not([class]) {
 /* Make images easier to work with */
 img,
 picture {
+    width: 100%;
     max-width: 100%;
     display: block;
 }

src/store.ts

@@ -1,20 +1,25 @@
 import { writable, get } from "svelte/store"
 import { getGeneralInformation, getArticles, getNavigations } from "./api"
 
-const initLoc = {
+// Localtion
+
+const initialLocation = {
     path: (typeof window !== "undefined" && window.location?.pathname) || "/",
     search: (typeof window !== "undefined" && window.location?.search) || "",
     push: false,
     pop: false,
 }
+export const location = writable(initialLocation)
 
-export const location = writable(initLoc)
+// Current Language
 
-const locale = {
+function langFromUrl(): string {
-    key: "de",
+    if (new RegExp(`\/[a-zA-Z]*[-[a-zA-Z]*]{0,1}\/[a-zA-Z0-9-]*$`).test(get(location).path)) {
-    title: "Deutsch",
+        return get(location)?.path.split("/")[1]
     }
-export const currentLocale = writable(locale)
+    return "de"
+}
+export const currentLang = writable<string>(langFromUrl())
 
 // General Information
 
@@ -43,7 +48,7 @@ const getAllNavigations = async (locale: Locale) => {
     const list = await getNavigations(locale)
     navigations.set(list)
 }
-getAllNavigations(locale)
+getAllNavigations({ key: get(currentLang) })
 
 // Cookies - Webmakers Cookie Bar
 

types/global.d.ts

@@ -117,7 +117,7 @@ interface NavigationItem {
 
 interface Locale {
     key: string
-    title: string
+    title?: string
 }
 
 interface GeneralImage {