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/components/ContentRows.svelte

@@ -10,7 +10,7 @@
   import LinkListBlock from "./blocks/LinkListBlock.svelte";
   import PostOverviewBlock from "./blocks/PostOverviewBlock.svelte";
   import SearchableTextBlock from "./blocks/SearchableTextBlock.svelte";
-  import { isBlockLayoutBreakout } from "../lib/block-layout";
+  import { isBlockLayoutBreakout, getSpaceBottomClass } from "../lib/block-layout";
   import type { BlockLayout } from "../lib/block-layout";
   import type {
     RowContentLayout,
@@ -28,7 +28,11 @@
     SearchableTextBlockData,
   } from "../lib/block-types";
 
-  let { layout, class: className = "" }: { layout: RowContentLayout; class?: string } = $props();
+  let {
+    layout,
+    class: className = "",
+    searchableTextHelpTooltip,
+  }: { layout: RowContentLayout; class?: string; searchableTextHelpTooltip?: string } = $props();
 
   function isResolvedBlock(item: unknown): item is ResolvedBlock {
     return typeof item === "object" && item !== null;
@@ -110,7 +114,10 @@
               {:else if blockType(item) === "post_overview"}
                 <PostOverviewBlock block={item as PostOverviewBlockData} />
               {:else if blockType(item) === "searchable_text"}
-                <SearchableTextBlock block={item as SearchableTextBlockData} />
+                <SearchableTextBlock
+                  block={item as SearchableTextBlockData}
+                  helpTooltip={searchableTextHelpTooltip}
+                />
               {:else}
                 <div class="col-span-12 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
                   Unbekannter Block: <code>{blockType(item)}</code>
@@ -119,12 +126,12 @@
             {/snippet}
             {#if isBlockLayoutBreakout((item as { layout?: BlockLayout }).layout)}
               <div class="col-span-12">
-                <div class="w-screen relative left-1/2 -translate-x-1/2 max-w-none bg-linear-to-b from-green-50 to-green-100 border-y border-green-100">
+                <div class="component-breakout--{blockType(item)} {getSpaceBottomClass((item as { layout?: BlockLayout }).layout)} w-screen relative left-1/2 -translate-x-1/2 max-w-none [background:var(--color-container-breakout)]">
                   <div class="container-custom py-4">
                     {@render blockContent()}
                   </div>
                 </div>
-              </div>
+              </div>      
             {:else}
               {@render blockContent()}
             {/if}