diff --git a/css/style.css b/css/style.css index 1784a63..75a691b 100644 --- a/css/style.css +++ b/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 { diff --git a/eleventy.config.js b/eleventy.config.js index b21fa8e..6f1975a 100644 --- a/eleventy.config.js +++ b/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); diff --git a/package.json b/package.json index 425d60c..d010c17 100644 --- a/package.json +++ b/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" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fc839f4..6a51ffb 100644 --- a/pnpm-lock.yaml +++ b/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