diff --git a/src/components/atoms/Box.svelte b/src/components/atoms/Box.svelte
index 70813a3..7a5c93c 100644
--- a/src/components/atoms/Box.svelte
+++ b/src/components/atoms/Box.svelte
@@ -4,6 +4,7 @@
type Props = {
color?: string;
title?: string;
+ titleElement?: Snippet;
margin?: "slim" | "medium" | "wide";
children: Snippet;
};
@@ -11,6 +12,7 @@
const {
color = "primary",
title,
+ titleElement,
margin = "medium",
children,
}: Props = $props();
@@ -18,14 +20,16 @@
- {#if title}
+ {#if title || titleElement}
-
{title}
+
+ {#if title}{title}{:else if titleElement}{@render titleElement()}{/if}
+
@@ -101,6 +105,7 @@
text-shadow: 0 0 20px var(--box-color);
z-index: 99;
white-space: nowrap;
+ display: inline;
}
.border-left {
diff --git a/src/components/atoms/Button.svelte b/src/components/atoms/Button.svelte
new file mode 100644
index 0000000..55bc145
--- /dev/null
+++ b/src/components/atoms/Button.svelte
@@ -0,0 +1,62 @@
+
+
+
+
+
diff --git a/src/components/molecules/Infobox.svelte b/src/components/molecules/Infobox.svelte
new file mode 100644
index 0000000..8de0d93
--- /dev/null
+++ b/src/components/molecules/Infobox.svelte
@@ -0,0 +1,128 @@
+
+
+{#if expanded}
+
+ {#snippet titleElement()}
+
+ {/snippet}
+ {title}
+ {@render children()}
+
+{:else}
+
+{/if}
+
+
diff --git a/src/components/organisms/BlogPostContent.svelte b/src/components/organisms/BlogPostContent.svelte
index 87dce50..d8ac604 100644
--- a/src/components/organisms/BlogPostContent.svelte
+++ b/src/components/organisms/BlogPostContent.svelte
@@ -4,6 +4,7 @@
import Box from "../atoms/Box.svelte";
import Markdown from "../molecules/Markdown.svelte";
import Image from "../molecules/Image.svelte";
+ import Infobox from "../molecules/Infobox.svelte";
type Props = {
content: BlogPostContentEntry;
@@ -19,9 +20,9 @@
{:else if content.type === "infobox"}
-
+
-
+
{/if}
{:else if content.__component === "content.image"}
{@const imageData = content.value.data.attributes}