fix(callouts): render nested callouts properly

previously, nested callouts were not rendered properly becuase regex
could not detect the correct closing tag for a callout that had another
callout nested inside of it.

.eleventy.js

@@ -4,6 +4,7 @@ const fs = require('fs');
 const matter = require('gray-matter');
 const faviconPlugin = require('eleventy-favicon');
 const tocPlugin = require('eleventy-plugin-toc');
+const {parse} = require("node-html-parser")
 
 const {headerToId, namedHeadingsFilter} = require("./src/helpers/utils") 
 
@@ -172,12 +173,19 @@ module.exports = function(eleventyConfig) {
 
 
     eleventyConfig.addTransform('callout-block', function(str) {
-        return str && str.replace(/<blockquote>((.|\n)*?)<\/blockquote>/g, function(match, content) {
+        const parsed = parse(str);
+
+        const transformCalloutBlocks = (blockquotes = parsed.querySelectorAll("blockquote")) => {
+            for (const blockquote of blockquotes) {
+                transformCalloutBlocks(blockquote.querySelectorAll("blockquote"))
+    
+                let content = blockquote.innerHTML;
+
                 let titleDiv = "";
                 let calloutType = "";
-            const calloutMeta = /\[!(\w*)\](\s?.*)/g;
+                const calloutMeta = /\[!(\w*)\](\s?.*)/;
                 if (!content.match(calloutMeta)) {
-                return match;
+                    continue;
                 }
     
                 content = content.replace(calloutMeta, function(metaInfoMatch, callout, title) {
@@ -188,11 +196,21 @@ module.exports = function(eleventyConfig) {
                     return "";
                 });
     
-            return `<div class="callout-${calloutType?.toLowerCase()} admonition admonition-example admonition-plugin">
-                ${titleDiv}
-                ${content}
-            </div>`;
-        });
+                blockquote.tagName = "div";
+                blockquote.classList.add(
+                    `callout-${calloutType.toLowerCase()}`,
+                    "admonition",
+                    "admonition-example",
+                    "admonition-plugin",
+                );
+                blockquote.setAttribute("data-callout", calloutType.toLowerCase());
+                blockquote.innerHTML = `${titleDiv}\n${content}`;
+            }
+        }
+
+        transformCalloutBlocks();
+        
+        return str && parsed.innerHTML;
     });
 
     eleventyConfig.addPassthroughCopy("src/site/img");

package.json

@@ -18,6 +18,7 @@
     "devDependencies": {
         "@11ty/eleventy": "^1.0.2",
         "cross-env": "^7.0.3",
+        "node-html-parser": "^6.1.4",
         "npm-run-all": "^4.1.5",
         "sass": "^1.49.9"
     },