From 1d172dabac5ca76399621e613010a5d763e4b0a5 Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Tue, 24 Mar 2026 23:48:10 -0400
Subject: [PATCH] format markdown images

---
 src/lib/components/markdown/Image.svelte | 9 +++++++++
 src/lib/layout/Blog.svelte               | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/markdown/Image.svelte

diff --git a/src/lib/components/markdown/Image.svelte b/src/lib/components/markdown/Image.svelte
new file mode 100644
index 0000000..a2e641a
--- /dev/null
+++ b/src/lib/components/markdown/Image.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	type Props = Omit<SvelteHTMLElements['img'], 'class'>;
+
+	const { ...restProps }: Props = $props();
+</script>
+
+<img {...restProps} class="mx-auto rounded-lg object-cover" />
diff --git a/src/lib/layout/Blog.svelte b/src/lib/layout/Blog.svelte
index 80a5847..e57f552 100644
--- a/src/lib/layout/Blog.svelte
+++ b/src/lib/layout/Blog.svelte
@@ -7,12 +7,13 @@
 	import h3 from '$lib/components/markdown/Heading3.svelte';
 	import h4 from '$lib/components/markdown/Heading4.svelte';
 	import h5 from '$lib/components/markdown/Heading5.svelte';
+	import img from '$lib/components/markdown/Image.svelte';
 	import p from '$lib/components/markdown/Paragraph.svelte';
 	import pre from '$lib/components/markdown/Pre.svelte';
 	import ol from '$lib/components/markdown/OrderedListItem.svelte';
 	import ul from '$lib/components/markdown/UnorderedList.svelte';
 
-	export { a, blockquote, code, h1, h2, h3, h4, h5, p, pre, ol, ul };
+	export { a, blockquote, code, h1, h2, h3, h4, h5, img, p, pre, ol, ul };
 </script>
 
 <slot />