Update environment configuration, enhance component functionality, and improve project structure. Added Umami analytics configuration to .env.example and updated astro.config.mjs to use the new site URL. Introduced pagination component in BlogOverview.svelte, refactored image handling in ImageGalleryBlock.svelte, and improved SearchableTextBlock.svelte with tooltip support. Updated package.json with new scripts for Firebase deployment and added new dependencies for Storybook and Firebase. Enhanced styling and layout across various components for better user experience.

src/layouts/Layout.astro

@@ -5,6 +5,7 @@ import Header from "../components/Header.svelte";
 import HeaderOverlay from "../components/HeaderOverlay.svelte";
 import Footer from "../components/Footer.svelte";
 import TopBanner from "../components/TopBanner.svelte";
+import Breadcrumbs from "../lib/ui/Breadcrumbs.svelte";
 import {
   getNavigationByKey,
   NavigationKeys,
@@ -19,6 +20,7 @@ import { resolveImageUrls, ensureTransformedImage } from "../lib/rusty-image";
 import {
   DEFAULT_SOCIAL_IMAGE_URL,
   ROW_RESOLVE,
+  SITE_NAME,
   SOCIAL_IMAGE_TRANSFORM,
 } from "../lib/constants";
 import { marked } from "marked";
@@ -45,6 +47,8 @@ interface Props {
   showBannerInLayout?: boolean;
   /** Optional: absoluter oder relativer URL für og:image / twitter:image (z. B. Post-Bild). */
   image?: string | null;
+  /** Optional: Breadcrumb-Items. Letzter Eintrag ohne href = aktuelle Seite. */
+  breadcrumbItems?: { href?: string; label: string }[];
 }
 
 const {
@@ -55,6 +59,7 @@ const {
   topFullwidthBanner,
   showBannerInLayout = false,
   image: imageProp = null,
+  breadcrumbItems = undefined,
 } = Astro.props;
 
 // Header: Navigation laden und Links bauen
@@ -240,7 +245,9 @@ const siteFromEnv = (import.meta.env.SITE || "").replace(/\/$/, "");
 const isLocalhost =
   Astro.url.origin.startsWith("http://localhost") ||
   Astro.url.origin.startsWith("http://127.0.0.1");
-const baseUrl = isLocalhost ? Astro.url.origin : (siteFromEnv || Astro.url.origin);
+const baseUrl = isLocalhost
+  ? Astro.url.origin
+  : siteFromEnv || Astro.url.origin;
 const pathname = Astro.url.pathname || "/";
 const canonical = `${baseUrl}${pathname}`;
 
@@ -269,6 +276,8 @@ if (needsTransform) {
   socialImageResolved = `${baseUrl}${urlToTransform.startsWith("/") ? "" : "/"}${urlToTransform}`;
 }
 const socialImage = socialImageResolved ?? "";
+const siteName =
+  (import.meta.env.PUBLIC_SITE_NAME as string | undefined) || SITE_NAME;
 
 // Top-Banner nur laden, wenn die Seite einen Banner anzeigen soll (showBannerInLayout + topFullwidthBanner)
 let topBanner: FullwidthBannerEntry | null = null;
@@ -357,6 +366,22 @@ const titleSubheadlineHtml =
       )
     }
     {socialImage && <meta property="og:image" content={socialImage} />}
+    {
+      socialImage && (
+        <>
+          <meta
+            property="og:image:width"
+            content={String(SOCIAL_IMAGE_TRANSFORM.width)}
+          />
+          <meta
+            property="og:image:height"
+            content={String(SOCIAL_IMAGE_TRANSFORM.height)}
+          />
+        </>
+      )
+    }
+    <meta property="og:locale" content="de_DE" />
+    <meta property="og:site_name" content={siteName} />
     <!-- Twitter -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:url" content={canonical} />
@@ -367,7 +392,25 @@ const titleSubheadlineHtml =
       )
     }
     {socialImage && <meta name="twitter:image" content={socialImage} />}
+    <!-- JSON-LD WebSite -->
+    <script type="application/ld+json" set:html={JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "WebSite",
+      "name": siteName,
+      "url": baseUrl,
+      "inLanguage": "de-DE",
+    })}></script>
     <link href="/pagefind/pagefind-ui.css" rel="stylesheet" />
+    {
+      import.meta.env.PUBLIC_UMAMI_SCRIPT_URL &&
+        import.meta.env.PUBLIC_UMAMI_WEBSITE_ID && (
+          <script
+            defer
+            src={import.meta.env.PUBLIC_UMAMI_SCRIPT_URL}
+            data-website-id={import.meta.env.PUBLIC_UMAMI_WEBSITE_ID}
+          />
+        )
+    }
   </head>
   <body class="flex min-h-screen flex-col text-zinc-900">
     <Header
@@ -390,11 +433,18 @@ const titleSubheadlineHtml =
     }
     <main class="flex-1 min-h-[60em]">
       <div class="container-custom pb-12">
+        {breadcrumbItems && breadcrumbItems.length > 0 && (
+          <Breadcrumbs items={breadcrumbItems} client:load />
+        )}
         {
           showTitleInContent && (titleHeadlineHtml || titleSubheadlineHtml) && (
             <div class="mb-6 pt-10 pageTitle">
-              {titleHeadlineHtml && <h1 set:html={titleHeadlineHtml} />}
-              {titleSubheadlineHtml && <h2 set:html={titleSubheadlineHtml} />}
+              {titleHeadlineHtml && (
+                <h1 class="pageTitle" set:html={titleHeadlineHtml} />
+              )}
+              {titleSubheadlineHtml && (
+                <h2 class="pageTitle" set:html={titleSubheadlineHtml} />
+              )}
             </div>
           )
         }
@@ -402,6 +452,6 @@ const titleSubheadlineHtml =
       </div>
     </main>
     <Footer footer={footerData} />
-    <script src="/pagefind/pagefind-ui.js" is:inline />
+    <script src="/pagefind/pagefind-ui.js" is:inline></script>
   </body>
 </html>