feat(markdoc): We have GFM support at home

markdoc.config.mjs

@@ -14,6 +14,10 @@ export default defineMarkdocConfig({
 			attributes: nodes.link.attributes,
 			render: component("./src/components/ExternalLink.astro"),
 		},
+		list: {
+			attributes: nodes.list.attributes,
+			render: component("./src/components/content/List.astro"),
+		},
 	},
 	tags: {
 		blockquote: {

src/components/content/List.astro

@@ -0,0 +1,23 @@
+---
+let content = await Astro.slots.render("default");
+
+const isTaskList = content.match(/\[ ]|\[x\]/g);
+const classList = isTaskList ? "task-list" : "";
+
+// We have GFM support at home
+if (isTaskList && isTaskList.length > 0) {
+	content = content.replaceAll(
+		/<li>\[ ?\]/gm,
+		"<li class='task-list-item'><input type='checkbox' inert />",
+	);
+	content = content.replaceAll(
+		"<li>[x]",
+		"<li class='task-list-item'><input type='checkbox' checked inert />",
+	);
+	content = content.replaceAll("<li>", "<li class='list-inside'>");
+}
+---
+
+<ul class={classList}>
+	<Fragment set:html={content} />
+</ul>

src/content/wiki/computers/zed-wishlist/zed-wishlist.mdoc

@@ -18,8 +18,8 @@ I've recently been using the [Zed code editor](https://zed.dev/) and really enjo
 - [ ] Rainbow brackets
 - [ ] Indentation guides
     - [ ] Indentation guides in the explorer panel, too (especially, actually)
-- [ ] Client-side filtering for LSP completions
-- [ ] Image viewer
+- [ ] Client-side filtering for LSP completions
+- [ ] Image viewer
 
 ## Annoyances
 

tailwind.config.ts

@@ -412,6 +412,21 @@ export default {
 					display: "block",
 				},
 
+				"article>ul, article>ol": {
+					margin: "0",
+					padding: "0",
+					paddingLeft: "1.5em",
+				},
+
+				"li>ul, li>ol": {
+					padding: "0",
+					paddingLeft: "1.5em",
+				},
+
+				".task-list-item": {
+					listStyleType: "none",
+				},
+
 				".header-anchor": {
 					color: "inherit",
 					paddingLeft: "1.5ch",