feat: added checkbox formatting

css/style.css

@@ -180,6 +180,35 @@ a {
   background: none;
 }
 
+/* Task lists (checkboxes) */
+.post-content ul.contains-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.post-content .task-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.post-content .task-list-item-checkbox {
+  margin-top: 0.35rem;
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--secondary-color);
+}
+
+.post-content .task-list-item > label {
+  flex: 1;
+}
+
+/* Nested task lists */
+.post-content .task-list-item ul.contains-task-list {
+  margin-top: 0.25rem;
+}
+
 /* Lists in post content */
 .post-content ul,
 .post-content ol {

eleventy.config.js

@@ -2,6 +2,7 @@ const markdownIt = require("markdown-it");
 const markdownItContainer = require("markdown-it-container");
 const markdownItFootnote = require("markdown-it-footnote");
 const markdownItMermaid = require('markdown-it-mermaid').default
+const markdownItTaskLists = require('markdown-it-task-lists');
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const fs = require("fs");
 const crypto = require("crypto");
@@ -123,6 +124,7 @@ md.use(markdownItContainer, 'details', {
 md.use(markdownItFootnote);
 md.use(markdownItHashtag);
 md.use(markdownItMermaid);
+md.use(markdownItTaskLists, { enabled: true, label: true, labelAfter: true });
 
 module.exports = (eleventyConfig) => {
   eleventyConfig.addPlugin(syntaxHighlight);

package.json

@@ -18,6 +18,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-container": "^4.0.0",
     "markdown-it-footnote": "^4.0.0",
-    "markdown-it-mermaid": "^0.2.5"
+    "markdown-it-mermaid": "^0.2.5",
+    "markdown-it-task-lists": "^2.1.1"
   }
 }

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       markdown-it-mermaid:
         specifier: ^0.2.5
         version: 0.2.5
+      markdown-it-task-lists:
+        specifier: ^2.1.1
+        version: 2.1.1
 
 packages:
 
@@ -403,6 +406,9 @@ packages:
   markdown-it-mermaid@0.2.5:
     resolution: {integrity: sha512-ZUTFRX+cXEtWmn/9LMlpVklPJiDrHPWyHE/wamC2wm0Ojh1qOcuKWfWW3BqP83+7w6C59rS7M3OrGTs/u9mQTA==}
 
+  markdown-it-task-lists@2.1.1:
+    resolution: {integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==}
+
   markdown-it@14.1.0:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
@@ -1003,6 +1009,8 @@ snapshots:
     dependencies:
       mermaid: 7.1.2
 
+  markdown-it-task-lists@2.1.1: {}
+
   markdown-it@14.1.0:
     dependencies:
       argparse: 2.0.1