@san-siva/blogkit-md 0.2.8 → 0.3.1

package/dist/index.js

@@ -51,6 +51,7 @@ var parseMarkdown = (content) => {
 import {
   BlogSection,
   Callout,
+  CheckList,
   CodeBlock,
   Mermaid,
   Table
@@ -216,7 +217,8 @@ function renderNode({
   key,
   nextNode,
   inList = false,
-  inCallout = false
+  inCallout = false,
+  counters
 }) {
   var _a;
   switch (node.type) {
@@ -231,10 +233,11 @@ function renderNode({
     }
     case "code": {
       if (node.lang === "mermaid") {
+        const mermaidId = counters.mermaid++;
         return /* @__PURE__ */ jsx2(
           Mermaid,
           {
-            id: `mermaid-${key}`,
+            id: `mermaid-${mermaidId}`,
             code: node.value,
             hasMarginUp: true,
             hasMarginDown: true
@@ -318,17 +321,30 @@ function renderNode({
           node: child,
           key: index,
           nextNode: strippedChildren[index + 1],
-          inCallout: true
+          inCallout: true,
+          counters
         })
       ) }, key);
     }
     case "list": {
+      const isTaskList = node.children.every((item) => item.checked !== null && item.checked !== void 0);
+      if (isTaskList) {
+        const items = node.children.map((item, index) => ({
+          id: String(index),
+          isChecked: item.checked === true,
+          children: item.children.map(
+            (child, childIndex) => renderNode({ node: child, key: childIndex, inList: true, counters })
+          )
+        }));
+        return /* @__PURE__ */ jsx2(CheckList, { items, hasMarginUp: true, hasMarginDown: true }, key);
+      }
       const Tag = node.ordered ? "ol" : "ul";
       return /* @__PURE__ */ jsx2(Tag, { className: styles2["margin-bottom--2"], children: node.children.map((item, index) => /* @__PURE__ */ jsx2("li", { children: item.children.map(
         (child, index2) => renderNode({
           node: child,
           key: index2,
-          inList: true
+          inList: true,
+          counters
         })
       ) }, index)) }, key);
     }
@@ -337,24 +353,25 @@ function renderNode({
     }
   }
 }
-function renderNodes(nodes) {
+function renderNodes(nodes, counters) {
   return nodes.map(
-    (node, index) => renderNode({ node, key: index, nextNode: nodes[index + 1] })
+    (node, index) => renderNode({ node, key: index, nextNode: nodes[index + 1], counters })
   );
 }
-function renderSection(section, key = -1) {
+function renderSection(section, counters, key = -1) {
   var _a;
   return /* @__PURE__ */ jsxs(BlogSection, { title: (_a = section == null ? void 0 : section.title) != null ? _a : "", children: [
-    renderNodes(section.nodes),
+    renderNodes(section.nodes, counters),
     section.subsections.map(
-      (subsection, index) => renderSection(subsection, index)
+      (subsection, index) => renderSection(subsection, counters, index)
     )
   ] }, key);
 }
 var renderMarkdownAst = (ast) => {
+  const counters = { mermaid: 0 };
   const grouped = groupSections(ast.children);
   return {
-    sections: grouped.map((section, index) => renderSection(section, index))
+    sections: grouped.map((section, index) => renderSection(section, counters, index))
   };
 };
 var MarkdownSections = ({

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit-md",
-	"version": "0.2.8",
+	"version": "0.3.1",
 	"description": "Converts markdown files into JSX blog posts for Blogkit",
 	"main": "./dist/index.js",
 	"exports": {
@@ -21,8 +21,8 @@
 		"fix": "eslint . --config eslint.config.ts --fix"
 	},
 	"dependencies": {
-		"@san-siva/blogkit": "^1.1.22",
-		"@san-siva/stylekit": "^1.0.11",
+		"@san-siva/blogkit": "^1.1.24",
+		"@san-siva/stylekit": "^1.0.12",
 		"next": "^16.0.10",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
@@ -39,7 +39,6 @@
 		"@types/eslint": "^9.6.1",
 		"@types/eslint__js": "^9.14.0",
 		"@types/mdast": "^4.0.4",
-		"tsup": "^8.0.0",
 		"@types/node": "^22",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",
@@ -57,6 +56,7 @@
 		"eslint-plugin-unicorn": "^62.0.0",
 		"jiti": "^2.0.0",
 		"prettier": "^3.0.0",
+		"tsup": "^8.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0",
 		"vitest": "^4.1.0"

package/src/utils/renderMarkdown.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import {
 	BlogSection,
 	Callout,
+	CheckList,
+	type CheckListItem,
 	CodeBlock,
 	Mermaid,
 	Table,
@@ -15,18 +17,22 @@ import { renderPhrasingContent } from './renderPhrasingContent';
 
 import styles from '@san-siva/stylekit/styles/index.module.scss';
 
+type Counters = { mermaid: number };
+
 function renderNode({
 	node,
 	key,
 	nextNode,
 	inList = false,
 	inCallout = false,
+	counters,
 }: {
 	node: RootContent;
 	key: number;
 	nextNode?: RootContent;
 	inList?: boolean;
 	inCallout?: boolean;
+	counters: Counters;
 }): React.ReactNode {
 	switch (node.type) {
 		case 'paragraph': {
@@ -51,10 +57,11 @@ function renderNode({
 		}
 		case 'code': {
 			if (node.lang === 'mermaid') {
+				const mermaidId = counters.mermaid++;
 				return (
 					<Mermaid
 						key={key}
-						id={`mermaid-${key}`}
+						id={`mermaid-${mermaidId}`}
 						code={node.value}
 						hasMarginUp
 						hasMarginDown
@@ -148,12 +155,24 @@ function renderNode({
 							key: index,
 							nextNode: strippedChildren[index + 1],
 							inCallout: true,
+							counters,
 						})
 					)}
 				</Callout>
 			);
 		}
 		case 'list': {
+			const isTaskList = node.children.every(item => item.checked !== null && item.checked !== undefined);
+			if (isTaskList) {
+				const items: CheckListItem[] = node.children.map((item, index) => ({
+					id: String(index),
+					isChecked: item.checked === true,
+					children: item.children.map((child, childIndex) =>
+						renderNode({ node: child as RootContent, key: childIndex, inList: true, counters })
+					),
+				}));
+				return <CheckList key={key} items={items} hasMarginUp hasMarginDown />;
+			}
 			const Tag = node.ordered ? 'ol' : 'ul';
 			return (
 				<Tag key={key} className={styles['margin-bottom--2']}>
@@ -164,6 +183,7 @@ function renderNode({
 									node: child as RootContent,
 									key: index,
 									inList: true,
+									counters,
 								})
 							)}
 						</li>
@@ -177,18 +197,18 @@ function renderNode({
 	}
 }
 
-function renderNodes(nodes: RootContent[]): React.ReactNode[] {
+function renderNodes(nodes: RootContent[], counters: Counters): React.ReactNode[] {
 	return nodes.map((node, index) =>
-		renderNode({ node, key: index, nextNode: nodes[index + 1] })
+		renderNode({ node, key: index, nextNode: nodes[index + 1], counters })
 	);
 }
 
-function renderSection(section: Section, key = -1): React.ReactNode {
+function renderSection(section: Section, counters: Counters, key = -1): React.ReactNode {
 	return (
 		<BlogSection key={key} title={section?.title ?? ''}>
-			{renderNodes(section.nodes)}
+			{renderNodes(section.nodes, counters)}
 			{section.subsections.map((subsection, index) =>
-				renderSection(subsection, index)
+				renderSection(subsection, counters, index)
 			)}
 		</BlogSection>
 	);
@@ -199,9 +219,10 @@ export type RenderedMarkdown = {
 };
 
 export const renderMarkdownAst = (ast: Root): RenderedMarkdown => {
+	const counters: Counters = { mermaid: 0 };
 	const grouped = groupSections(ast.children);
 	return {
-		sections: grouped.map((section, index) => renderSection(section, index)),
+		sections: grouped.map((section, index) => renderSection(section, counters, index)),
 	};
 };