From 20edd1b562f118fa3a56fa72107a8b205d560f28 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Tue, 9 Jul 2024 22:19:33 +0200
Subject: [PATCH] Move markdown to molecules

---
 src/components/atoms/Markdown.svelte               | 13 -------------
 .../Paragraph.svelte => molecules/Markdown.svelte} | 14 ++++++++------
 src/components/organisms/BlogPostContent.svelte    | 11 +++--------
 3 files changed, 11 insertions(+), 27 deletions(-)
 delete mode 100644 src/components/atoms/Markdown.svelte
 rename src/components/{atoms/Paragraph.svelte => molecules/Markdown.svelte} (55%)

diff --git a/src/components/atoms/Markdown.svelte b/src/components/atoms/Markdown.svelte
deleted file mode 100644
index a4674fb..0000000
--- a/src/components/atoms/Markdown.svelte
+++ /dev/null
@@ -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}
diff --git a/src/components/atoms/Paragraph.svelte b/src/components/molecules/Markdown.svelte
similarity index 55%
rename from src/components/atoms/Paragraph.svelte
rename to src/components/molecules/Markdown.svelte
index db768a1..1172a27 100644
--- a/src/components/atoms/Paragraph.svelte
+++ b/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">
-  {@render children()}
+<div class="markdown">
+  {@html markdownHtml}
 </div>
 
 <style lang="scss">
   @layer component {
-    .paragraph {
+    .markdown {
       font-family: var(--font-readable);
       hyphens: auto;
       text-align: justify;
diff --git a/src/components/organisms/BlogPostContent.svelte b/src/components/organisms/BlogPostContent.svelte
index 62aaf43..87dce50 100644
--- a/src/components/organisms/BlogPostContent.svelte
+++ b/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 Paragraph from "../atoms/Paragraph.svelte";
+  import Markdown from "../molecules/Markdown.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} />
-        </Paragraph>
+        <Markdown markdown={content.value} />
       </Box>
     {:else if content.type === "infobox"}
       <Box color="cyan" title="Info">
-        <Paragraph>
-          <Markdown markdown={content.value} />
-        </Paragraph>
+        <Markdown markdown={content.value} />
       </Box>
     {/if}
   {:else if content.__component === "content.image"}