Move markdown to molecules

src/components/atoms/Markdown.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import { marked } from "marked";
-
-  type Props = {
-    markdown: string;
-  };
-
-  const { markdown }: Props = $props();
-
-  const markdownHtml = marked(markdown);
-</script>
-
-{@html markdownHtml}

src/components/molecules/Markdown.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
-  import type { Snippet } from "svelte";
+  import { marked } from "marked";
 
   type Props = {
-    children: Snippet;
+    markdown: string;
   };
 
-  const { children }: Props = $props();
+  const { markdown }: Props = $props();
+
+  const markdownHtml = marked(markdown);
 </script>
 
-<div class="paragraph">
+<div class="markdown">
-  {@render children()}
+  {@html markdownHtml}
 </div>
 
 <style lang="scss">
   @layer component {
-    .paragraph {
+    .markdown {
       font-family: var(--font-readable);
       hyphens: auto;
       text-align: justify;

src/components/organisms/BlogPostContent.svelte

@@ -2,8 +2,7 @@
   import type { BlogPostContentEntry } from "$lib/cms/blog";
   import "$lib/vars.scss";
   import Box from "../atoms/Box.svelte";
-  import Markdown from "../atoms/Markdown.svelte";
+  import Markdown from "../molecules/Markdown.svelte";
-  import Paragraph from "../atoms/Paragraph.svelte";
   import Image from "../molecules/Image.svelte";
 
   type Props = {
@@ -17,15 +16,11 @@
   {#if content.__component === "content.text-markdown"}
     {#if content.type === "paragraph"}
       <Box>
-        <Paragraph>
+        <Markdown markdown={content.value} />
-          <Markdown markdown={content.value} />
-        </Paragraph>
       </Box>
     {:else if content.type === "infobox"}
       <Box color="cyan" title="Info">
-        <Paragraph>
+        <Markdown markdown={content.value} />
-          <Markdown markdown={content.value} />
-        </Paragraph>
       </Box>
     {/if}
   {:else if content.__component === "content.image"}