Enhance project structure and functionality by adding new components and integrations. Updated .gitignore to exclude history and transformed images. Integrated Svelte, sitemap, and icon support in astro.config.mjs. Added multiple new components including BlogOverview, ContentRows, Footer, Header, and various block components for improved content management. Updated package.json with new dependencies and modified scripts for build and development processes.

2026-02-22 12:14:43 +01:00
parent 054b5719e5
commit bb6ec20d45
52 changed files with 12536 additions and 179 deletions
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { getBlockLayoutClasses } from "../../lib/block-layout";
+  import type { ImageBlockData } from "../../lib/block-types";
+
+  let { block }: { block: ImageBlockData } = $props();
+
+  const layoutClasses = $derived(getBlockLayoutClasses(block.layout));
+  const imageSource = $derived(block.image ?? block.img);
+  const imageUrl = $derived(
+    block.resolvedImageSrc ??
+      (typeof imageSource === "string"
+        ? imageSource.startsWith("http")
+          ? imageSource
+          : null
+        : imageSource && typeof imageSource === "object"
+          ? "src" in imageSource && typeof imageSource.src === "string"
+            ? imageSource.src
+            : imageSource.file?.url ?? null
+          : null),
+  );
+  const title = $derived(
+    typeof imageSource === "object" && imageSource
+      ? ("description" in imageSource && imageSource.description
+          ? imageSource.description
+          : "title" in imageSource
+            ? (imageSource as { title?: string }).title
+            : undefined)
+      : undefined,
+  );
+</script>
+
+<div class={layoutClasses} data-block-type="image" data-block-slug={block._slug}>
+  {#if imageUrl}
+    <figure class="max-w-[400px]">
+      <img
+        src={imageUrl}
+        alt={block.caption ?? title ?? ""}
+        class="w-full rounded-sm"
+        loading="lazy"
+      />
+      {#if block.caption}
+        <figcaption class="mt-1 text-sm text-zinc-600">{block.caption}</figcaption>
+      {/if}
+    </figure>
+  {:else}
+    <p class="text-sm text-zinc-500">Bild nicht verfügbar.</p>
+  {/if}
+</div>