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/BlogOverview.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import PostCard from "./PostCard.svelte";
   import Tag from "./Tag.svelte";
+  import Pagination from "./Pagination.svelte";
   import type { PostEntry } from "../lib/cms";
   import { postHref } from "../lib/blog-utils";
 
@@ -32,31 +33,7 @@
     return `${basePath}/tag/${encodeURIComponent(tagSlug)}`;
   }
 
-  function pageHref(page: number): string {
-    if (page <= 1) return tagHref(activeTag);
-    const tagPart = activeTag
-      ? `/tag/${encodeURIComponent(activeTag)}`
-      : "";
-    return `${basePath}${tagPart}/page/${page}`;
-  }
-
-  const showPagination = $derived(totalPages > 1);
-  const hasPrev = $derived(currentPage > 1);
-  const hasNext = $derived(currentPage < totalPages);
-  const prevPage = $derived(currentPage - 1);
-  const nextPage = $derived(currentPage + 1);
   const totalCount = $derived(totalPosts);
-
-  const pageNumbers = $derived.by(() => {
-    const max = 5;
-    let start = Math.max(1, currentPage - Math.floor(max / 2));
-    const end = Math.min(totalPages, start + max - 1);
-    if (end - start + 1 < max) start = Math.max(1, end - max + 1);
-    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
-  });
-
-  const paginationLinkClass =
-    "h-6 w-6 mx-[2px] flex justify-center items-center text-slate-950 no-underline text-xs font-medium border border-gray-600 bg-white shadow-md";
 </script>
 
 <div class="blog-overview">
@@ -82,33 +59,12 @@
     </div>
   {/if}
 
-  {#if showPagination}
-    <div>
-      <div class="inline-flex py-4">
-        <div class="flex">
-          {#if hasPrev}
-            <a href={pageHref(prevPage)} class={paginationLinkClass} aria-label="Vorherige Seite">
-              ←
-            </a>
-          {/if}
-          {#each pageNumbers as num}
-            <a
-              href={pageHref(num)}
-              class="{paginationLinkClass} {num === currentPage ? 'opacity-50' : ''}"
-              aria-current={num === currentPage ? 'page' : undefined}
-            >
-              {num}
-            </a>
-          {/each}
-          {#if hasNext}
-            <a href={pageHref(nextPage)} class={paginationLinkClass} aria-label="Nächste Seite">
-              →
-            </a>
-          {/if}
-        </div>
-      </div>
-    </div>
-  {/if}
+  <Pagination
+    {currentPage}
+    {totalPages}
+    {basePath}
+    activeTag={activeTag}
+  />
 
   <div class="py-2 grid grid-cols-1 gap-4">
     {#each posts as post}
@@ -121,31 +77,12 @@
   </div>
 
   <div class="flex flex-wrap items-center gap-2">
-    {#if showPagination}
-      <div class="inline-flex py-4">
-        <div class="flex">
-          {#if hasPrev}
-            <a href={pageHref(prevPage)} class={paginationLinkClass} aria-label="Vorherige Seite">
-              ←
-            </a>
-          {/if}
-          {#each pageNumbers as num}
-            <a
-              href={pageHref(num)}
-              class="{paginationLinkClass} {num === currentPage ? 'opacity-50' : ''}"
-              aria-current={num === currentPage ? 'page' : undefined}
-            >
-              {num}
-            </a>
-          {/each}
-          {#if hasNext}
-            <a href={pageHref(nextPage)} class={paginationLinkClass} aria-label="Nächste Seite">
-              →
-            </a>
-          {/if}
-        </div>
-      </div>
-    {/if}
+    <Pagination
+      {currentPage}
+      {totalPages}
+      {basePath}
+      activeTag={activeTag}
+    />
     <div class="grow"></div>
     <div class="bg-white rounded-md font-thin">
       <div class="inline-flex text-xs p-2">