Meta Angaben für Content-Seiten hinzugefügt.

api/collections/content.yml

@@ -37,6 +37,25 @@ meta:
               - source: locale
                 type: flag
 
+    tablist:
+        meta:
+            expand: general
+        tabs:
+            - name: general
+              meta:
+                  label: { de: "Allgemein", en: "General" }
+              subFields:
+                  - source: locale
+                  - source: tags
+                  - source: path
+                  - source: priority
+            - name: meta
+              meta:
+                  label: { de: "Meta", en: "Meta" }
+                  source: meta
+              subFields:
+                  - source: meta
+
 imageFilter:
     xs:
         - fit: true
@@ -110,6 +129,7 @@ fields:
     - name: tags
       type: string[]
       meta:
+          hideInRoot: true
           helperText:
               de: "Seiten können miteinander verknüpft werden. Entsprechende Seiten in einer anderen Sprache, die mit den selben zugewiesenen Schlagworten gekennzeichnet sind, können bei Umschaltung der Seitensprache gefunden werden. Wählen Sie einen existierenden Eintrag aus der Liste oder geben Sie ein neues Schlagwort ein und bestätigen mit Enter."
               en: "Pages can be linked together. Corresponding pages in another language, marked with the same assigned keywords, can be found by switching the page language. Select an existing entry from the list or enter a new keyword and confirm with Enter."
@@ -121,7 +141,7 @@ fields:
           choices:
               endpoint: "tags"
               mapping:
-                  id: "id"
+                  id: "name"
                   name: "name"
               params:
                   sort: "name"
@@ -129,6 +149,7 @@ fields:
       type: string
       index: [single, unique]
       meta:
+          hideInRoot: true
           label: { de: "Pfad", en: "Path" }
           helperText:
               de: "Der Pfad muss eindeutig sein und ohne ein Slash (/) beginnen und enden."
@@ -136,6 +157,7 @@ fields:
     - name: priority
       type: number
       meta:
+          hideInRoot: true
           defaultValue: [0]
           label: { de: "Priorität", en: "Priority" }
           helperText:
@@ -148,3 +170,47 @@ fields:
     #       collapse: { titleFieldName: "article.content.title" }
     #   subFields:
     #       - !include fields/_article.yml
+
+    - name: meta
+      type: object
+      meta:
+          hideInRoot: true
+      subFields:
+          - name: metaTitle
+            type: string
+            meta:
+                label: { de: "Titel der Webseite", en: "Page Title" }
+          - name: metaDescription
+            type: string
+            meta:
+                label: { de: "Beschreibung der Webseite", en: "Page Description" }
+          - name: metaTagRobots
+            type: string[]
+            meta:
+                widget: chipArray
+                label:
+                    de: Robots
+                    en: Robots
+                defaultValue: []
+                autocomplete: true
+                choices:
+                    - { id: "noindex", name: "noindex" }
+                    - { id: "index", name: "index" }
+                    - { id: "follow", name: "follow" }
+                    - { id: "nofollow", name: "nofollow" }
+                    - { id: "noimageindex", name: "noimageindex" }
+                    - { id: "none", name: "none" }
+                    - { id: "noarchive", name: "noarchive" }
+                    - { id: "nocache", name: "nocache" }
+                    - { id: "nosnippet", name: "nosnippet" }
+                    - { id: "nnavailable_after", name: "nnavailable_after" }
+                helperText:
+                    de: "<strong>Noindex</strong>: Weist eine Suchmaschine an, eine Seite nicht zu indizieren.<br/><strong>index</strong>: Weist eine Suchmaschine an, eine Seite zu indizieren. Beachten Sie, dass Sie dieses Meta-Tag nicht hinzufügen müssen; es ist die Voreinstellung.<br/><strong>follow</strong>: Auch wenn die Seite nicht indexiert ist, sollte der Crawler allen Links auf einer Seite folgen und Eigenkapital an die verlinkten Seiten weitergeben.<br/><strong>nofollow</strong>: Weist einen Crawler an, keinen Links auf einer Seite zu folgen oder Link-Equity weiterzugeben.<br/><strong>noimageindex</strong>: Weist einen Crawler an, keine Bilder auf einer Seite zu indizieren.<br/><strong>none</strong>: Entspricht der gleichzeitigen Verwendung der noindex- und nofollow-Tags.<br/><strong>noarchive</strong>: Suchmaschinen sollten keinen zwischengespeicherten Link zu dieser Seite auf einem SERP anzeigen.<br/><strong>nocache</strong>: Wie noarchive, aber nur von Internet Explorer und Firefox verwendet.<br/><strong>nosnippet</strong>: Weist eine Suchmaschine an, kein Snippet dieser Seite (d. h. Meta-Beschreibung) dieser Seite auf einem SERP anzuzeigen.<br/><strong>nnavailable_after</strong>: Suchmaschinen sollen diese Seite nach einem bestimmten Datum nicht mehr indexieren.<br/>"
+                    en: "<strong>Noindex</strong>: Tells a search engine not to index a page.<br/><strong>index</strong>: Tells a search engine to index a page. Note that you don’t need to add this meta tag; it’s the default.<br/><strong>follow</strong>: Even if the page isn’t indexed, the crawler should follow all the links on a page and pass equity to the linked pages.<br/><strong>nofollow</strong>: Tells a crawler not to follow any links on a page or pass along any link equity.<br/><strong>noimageindex</strong>: Tells a crawler not to index any images on a page.<br/><strong>none</strong>: Equivalent to using both the noindex and nofollow tags simultaneously.<br/><strong>noarchive</strong>: Search engines should not show a cached link to this page on a SERP.<br/><strong>nocache</strong>: Same as noarchive, but only used by Internet Explorer and Firefox.<br/><strong>nosnippet</strong>: Tells a search engine not to show a snippet of this page (i.e. meta description) of this page on a SERP.<br/><strong>nnavailable_after</strong>: Search engines should no longer index this page after a particular date.<br/>"
+          - name: metaKeywords
+            type: string
+            meta:
+                label: { de: "SEO / Schlüsselwörter", en: "SEO / Keywords" }
+                helperText:
+                    de: "Beispiel: Stichwort1, Stichwort2, Stichwort3"
+                    en: "Example: keyword1, keyword2, keyword3"

api/collections/fields/_locale.yml

@@ -1,6 +1,7 @@
 name: locale
 type: string
 meta:
+    hideInRoot: true
     widget: select
     label: { de: "Sprache", en: "Language" }
     helperText:

src/components/App.svelte

@@ -2,11 +2,10 @@
     import { _ } from "svelte-i18n"
     import { Router, Route } from "svelte-routing"
     import { scrollToTop } from "svelte-scrollto"
-    import { generalInfo, location, currentLang } from "../store"
+    import { location } from "../store"
 
     import Home from "./routes/Home.svelte"
     import Content from "./routes/Content.svelte"
-    import ArticleDetails from "./routes/ArticleDetails.svelte"
 
     import Header from "./widgets/Header.svelte"
     import Footer from "./widgets/Footer.svelte"
@@ -32,33 +31,6 @@
     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 />
 
 <Router url="{url}">

src/components/routes/Content.svelte

@@ -80,61 +80,84 @@
 </script>
 
 <svelte:head>
-    <title>{content?.name ? content?.name + " - " : ""}{$generalInfo?.meta?.metaTitle}</title>
+    <title
+        >{content?.name ? content?.name + " - " : ""}{content?.meta?.metaTitle
+            ? content?.meta?.metaTitle
+            : $generalInfo?.meta?.metaTitle}</title
+    >
+    <meta
+        name="description"
+        content="{content?.meta?.metaDescription
+            ? content?.meta?.metaDescription
+            : $generalInfo?.meta?.metaDescription}"
+    />
+    <meta
+        name="keywords"
+        content="{content?.meta?.metaKeywords
+            ? content?.meta?.metaKeywords.replaceAll(' ', '')
+            : $generalInfo?.meta?.metaKeywords.replaceAll(' ', '')}"
+    />
+    <meta
+        name="robots"
+        content="{content?.meta?.metaTagRobots ? content?.meta?.metaTagRobots : $generalInfo?.meta?.metaTagRobots}"
+    />
+    {#if $generalInfo?.person?.firstname || $generalInfo?.person?.lastname}
+        <meta
+            name="author"
+            content="{$generalInfo?.person?.firstname ? $generalInfo?.person?.firstname : ''} {$generalInfo?.person
+                ?.lastname
+                ? $generalInfo?.person?.lastname
+                : ''}"
+        />
+    {/if}
 </svelte:head>
 
-<div class="container">
-    <div class="row">
-        <div class="col-md-12">
-            {#if loading}
-                <!-- Loader -->
-            {:else if content}
-                <!-- 
-                {#each content.blocks || [] as b}
-                    {JSON.stringify(b)}
-                {/each}
-                -->
-                <ArticlesList path="{path}" />
-            {:else}
-                <div class="page-404">
-                    <div>
-                        <Image
-                            collectionName="general"
-                            entryId="{$generalInfo.id}"
-                            file="{$generalInfo?.media?.brand}"
-                            alt="{$generalInfo?.meta?.metaTitle}"
-                            cssClass="brand"
-                        />
-                    </div>
-
-                    <h1>{$_("pageNotFound")}</h1>
-
-                    <p class="mb-md">
-                        {#if connectedContentNotFound}
-                            <div>
-                                {@html $_("connectedContentNotFound", {
-                                    values: {
-                                        url: currentDomain + "/" + path,
-                                        lang: $_($currentLang) + ` (${$currentLang})`,
-                                    },
-                                })}
-                            </div>
-                        {:else}
-                            <strong>
-                                <a href="{currentDomain + '/' + path}">{currentDomain + "/" + path}</a>
-                            </strong>
-                        {/if}
-                    </p>
-                    <p>
-                        {@html $_("pageNotFoundInformation", {
-                            values: {
-                                url: currentDomain,
-                                backUrl: currentDomain + "/" + path,
-                            },
-                        })}
-                    </p>
-                </div>
-            {/if}
+{#if loading}
+    <!-- Loader -->
+{:else if content}
+    <!-- 
+    {#each content.blocks || [] as b}
+        {JSON.stringify(b)}
+    {/each}
+    -->
+    <ArticlesList path="{path}" tags="{content?.tags}" />
+{:else}
+    <div class="page-404">
+        <div>
+            <Image
+                collectionName="general"
+                entryId="{$generalInfo.id}"
+                file="{$generalInfo?.media?.brand}"
+                alt="{$generalInfo?.meta?.metaTitle}"
+                cssClass="brand"
+            />
         </div>
+
+        <h1>{$_("pageNotFound")}</h1>
+
+        <p class="mb-md">
+            {#if connectedContentNotFound}
+                <div>
+                    {@html $_("connectedContentNotFound", {
+                        values: {
+                            url: currentDomain + "/" + path,
+                            lang: $_($currentLang) + ` (${$currentLang})`,
+                        },
+                    })}
+                </div>
+            {:else}
+                <strong>
+                    <a href="{currentDomain + '/' + path}">{currentDomain + "/" + path}</a>
+                </strong>
+            {/if}
+        </p>
+        <p>
+            {@html $_("pageNotFoundInformation", {
+                values: {
+                    url: currentDomain,
+                    backUrl: currentDomain + "/" + path,
+                },
+            })}
+        </p>
     </div>
-</div>
+{/if}

src/components/routes/Home.svelte

@@ -1,41 +1,51 @@
 <script lang="ts">
     import * as animateScroll from "svelte-scrollto"
 
-    import GoogleMaps from "../widgets/GoogleMaps.svelte"
+    import { generalInfo } from "../../store"
+
+    // import ContactForm from "../widgets/ContactForm.svelte"
+    // import GoogleMaps from "../widgets/GoogleMaps.svelte"
     import ScrollTo from "../widgets/ScrollTo.svelte"
-    import ContactForm from "../widgets/ContactForm.svelte"
     import GeneralMediaImage from "../widgets/GeneralMediaImage.svelte"
     import ArticlesList from "../widgets/ArticlesList.svelte"
 
     let expandedForm: string = "recipe"
 </script>
 
-<section class="contact">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-12">
-                <ArticlesList tag="home" />
-            </div>
-        </div>
-        <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'}" />
-            </div>
-            <div class="col-md-6">
-                <ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" />
-            </div>
-        </div>
-    </div>
-</section>
+<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 && $generalInfo?.meta?.metaTagRobots.length}
+        <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>
-    <GoogleMaps />
-</section>
+<ArticlesList tags="{['home']}" />
+
+<GeneralMediaImage id="test1" />
+
+<!-- <ContactForm type="recipe" collapsed="{expandedForm !== 'recipe'}" /> -->
+<!-- <ContactForm type="contact" collapsed="{expandedForm !== 'contact'}" /> -->
+<!-- <GoogleMaps /> -->
 
 <ScrollTo
     on:scrollTo="{(e) => {

src/components/widgets/ArticlesList.svelte

@@ -4,7 +4,7 @@
 
     import Article from "../widgets/Article.svelte"
 
-    export let tag: string = null
+    export let tags: string[] = null
     export let path: string = null
 
     let articleEntries: CollectionEntry[] = []
@@ -14,8 +14,8 @@
             "article.general.locale": $currentLang,
         }
 
-        if (tag) {
-            filter["article.general.tags"] = { $in: [tag] }
+        if (tags && tags?.length) {
+            filter["article.general.tags"] = { $in: tags }
         }
 
         if (path) {

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

@@ -1,7 +1,8 @@
 article,
 .article {
     overflow-wrap: anywhere;
-    // border: 1px dashed @on-background;
+    border: 1px dashed @on-background;
+    padding: 2px;
 
     & ~ article,
     & ~ .article {

src/css/theme-2022/main.less

@@ -6,7 +6,7 @@
 @primary: #ff0000;
 @on-primary: #fff;
 
-@secondary: #1e7c9e;
+@secondary: #4e5d64;
 @on-secondary: #ffffff;
 
 @surface: #fff;

types/global.d.ts

@@ -28,6 +28,9 @@ interface Content {
     path: string
     name: string
     blocks?: ContentBlock[]
+    meta: {
+        [key: string]: any
+    }
 }
 
 interface GeneralInfo {