From ac37b5dd768e4b4141f402854d65644c9abc79ce Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Fri, 20 Jun 2025 15:54:20 -0400
Subject: [PATCH] add list support

---
 src/lib/markdown/renderers/List.svelte        | 22 ++++++++++++++
 .../markdown/renderers/OrderedListItem.svelte | 27 +++++++++++++++++
 .../renderers/UnorderedListItem.svelte        | 30 +++++++++++++++++++
 src/routes/blog/[slug]/+page.svelte           |  8 ++++-
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/markdown/renderers/List.svelte
 create mode 100644 src/lib/markdown/renderers/OrderedListItem.svelte
 create mode 100644 src/lib/markdown/renderers/UnorderedListItem.svelte

diff --git a/src/lib/markdown/renderers/List.svelte b/src/lib/markdown/renderers/List.svelte
new file mode 100644
index 0000000..7553e38
--- /dev/null
+++ b/src/lib/markdown/renderers/List.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children?: Snippet;
+		ordered?: boolean;
+		loose?: boolean;
+		start?: number;
+	}
+
+	const { children, ordered }: Props = $props();
+</script>
+
+{#if ordered}
+	<ol class="my-2">
+		{@render children?.()}
+	</ol>
+{:else}
+	<ul class="my-2">
+		{@render children?.()}
+	</ul>
+{/if}
diff --git a/src/lib/markdown/renderers/OrderedListItem.svelte b/src/lib/markdown/renderers/OrderedListItem.svelte
new file mode 100644
index 0000000..61dfb70
--- /dev/null
+++ b/src/lib/markdown/renderers/OrderedListItem.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children?: Snippet;
+		task?: boolean;
+		checked?: boolean;
+		listItemIndex: number;
+	}
+
+	const { children, task, checked: initial = false, listItemIndex, ...rest }: Props = $props();
+
+	let checked = $derived(initial);
+</script>
+
+<li class="ml-2">
+	{listItemIndex + 1}. {#if task}
+		<input
+			type="checkbox"
+			class="mr-2"
+			class:hidden={!task}
+			{checked}
+			onclick={() => {
+				checked = !checked;
+			}}
+		/>{/if}{@render children?.()}
+</li>
diff --git a/src/lib/markdown/renderers/UnorderedListItem.svelte b/src/lib/markdown/renderers/UnorderedListItem.svelte
new file mode 100644
index 0000000..381ab60
--- /dev/null
+++ b/src/lib/markdown/renderers/UnorderedListItem.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		children?: Snippet;
+		task?: boolean;
+		checked?: boolean;
+		listItemIndex?: number;
+	}
+
+	const { children, task, checked: initial = false }: Props = $props();
+
+	let checked = $derived(initial);
+</script>
+
+<li class="ml-2">
+	{#if task}
+		<input
+			type="checkbox"
+			class="mr-2"
+			class:hidden={!task}
+			{checked}
+			onclick={() => {
+				checked = !checked;
+			}}
+		/>
+	{:else}
+		🞄
+	{/if}{@render children?.()}
+</li>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index d59e1eb..eb8cdaa 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -3,10 +3,13 @@
 	import Code from '$lib/markdown/renderers/Code.svelte';
 	import Heading from '$lib/markdown/renderers/Heading.svelte';
 	import Link from '$lib/markdown/renderers/Link.svelte';
+	import List from '$lib/markdown/renderers/List.svelte';
+	import OrderedListItem from '$lib/markdown/renderers/OrderedListItem.svelte';
+	import Paragraph from '$lib/markdown/renderers/Paragraph.svelte';
+	import UnorderedListItem from '$lib/markdown/renderers/UnorderedListItem.svelte';
 	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();
 
@@ -24,6 +27,9 @@
 			source={data.post.body}
 			renderers={{
 				link: Link,
+				list: List,
+				orderedlistitem: OrderedListItem,
+				unorderedlistitem: UnorderedListItem,
 				code: Code,
 				blockquote: BlockQuote,
 				heading: Heading,