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

2022-06-15 08:26:06 +02:00
parent ee7ed0db1f
commit 25a39dfac0
9 changed files with 192 additions and 116 deletions
--- a/src/components/App.svelte
+++ b/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}">
--- a/src/components/routes/Content.svelte
+++ b/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}
--- a/src/components/routes/Home.svelte
+++ b/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) => {
--- a/src/components/widgets/ArticlesList.svelte
+++ b/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) {
--- a/src/css/theme-2022/components/article.less
+++ b/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 {
--- a/src/css/theme-2022/main.less
+++ b/src/css/theme-2022/main.less
@@ -6,7 +6,7 @@
@primary: #ff0000;
@on-primary: #fff;

-@secondary: #1e7c9e;
+@secondary: #4e5d64;
@on-secondary: #ffffff;

@surface: #fff;