From 8281fdc4e2171f2b1465dc5f36b9d5929d18bef2 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 20 Jun 2025 11:56:39 -0400
Subject: [PATCH] add paragraph spacing

---
 src/lib/markdown/renderers/Paragraph.svelte | 11 +++++++++++
 src/routes/blog/[slug]/+page.svelte         |  9 ++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/markdown/renderers/Paragraph.svelte

diff --git a/src/lib/markdown/renderers/Paragraph.svelte b/src/lib/markdown/renderers/Paragraph.svelte
new file mode 100644
index 0000000..f97c020
--- /dev/null
+++ b/src/lib/markdown/renderers/Paragraph.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children?: Snippet;
+	}
+
+	const { children }: Props = $props();
+</script>
+
+<p class="my-3">{@render children?.()}</p>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index ba34e67..d59e1eb 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -6,6 +6,7 @@
 	import SvelteMarkdown from '@humanspeak/svelte-markdown';
 	import dayjs from 'dayjs';
 	import type { PageProps } from './$types';
+	import Paragraph from '$lib/markdown/renderers/Paragraph.svelte';
 
 	let { data }: PageProps = $props();
 
@@ -21,7 +22,13 @@
 	<div class="w-full max-w-5xl px-4">
 		<SvelteMarkdown
 			source={data.post.body}
-			renderers={{ link: Link, code: Code, blockquote: BlockQuote, heading: Heading }}
+			renderers={{
+				link: Link,
+				code: Code,
+				blockquote: BlockQuote,
+				heading: Heading,
+				paragraph: Paragraph
+			}}
 		/>
 	</div>
 </div>