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,27 +173,44 @@ 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);
-            let titleDiv = "";
+
-            let calloutType = "";
+        const transformCalloutBlocks = (blockquotes = parsed.querySelectorAll("blockquote")) => {
-            const calloutMeta = /\[!(\w*)\](\s?.*)/g;
+            for (const blockquote of blockquotes) {
-            if (!content.match(calloutMeta)) {
+                transformCalloutBlocks(blockquote.querySelectorAll("blockquote"))
-                return match;
+    
+                let content = blockquote.innerHTML;
+
+                let titleDiv = "";
+                let calloutType = "";
+                const calloutMeta = /\[!(\w*)\](\s?.*)/;
+                if (!content.match(calloutMeta)) {
+                    continue;
+                }
+    
+                content = content.replace(calloutMeta, function(metaInfoMatch, callout, title) {
+                    calloutType = callout;
+                    titleDiv = title.replace("<br>", "") ?
+                        `<div class="admonition-title">${title}</div>` :
+                        `<div class="admonition-title">${callout.charAt(0).toUpperCase()}${callout.substring(1).toLowerCase()}</div>`;
+                    return "";
+                });
+    
+                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}`;
             }
+        }
 
-            content = content.replace(calloutMeta, function(metaInfoMatch, callout, title) {
+        transformCalloutBlocks();
-                calloutType = callout;
-                titleDiv = title.replace("<br>", "") ?
-                    `<div class="admonition-title">${title}</div>` :
-                    `<div class="admonition-title">${callout.charAt(0).toUpperCase()}${callout.substring(1).toLowerCase()}</div>`;
-                return "";
-            });
         
-            return `<div class="callout-${calloutType?.toLowerCase()} admonition admonition-example admonition-plugin">
+        return str && parsed.innerHTML;
-                ${titleDiv}
-                ${content}
-            </div>`;
-        });
     });
 
     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"
     },