fix display bug for admontion to callout conversion (#150)

admonition accepts parameters on the first 4 lines.
These lines are displayed in teh resulting html and the collapsing
does not work.

.eleventy.js

@@ -90,30 +90,55 @@ module.exports = function (eleventyConfig) {
         }
         if (token.info.startsWith("ad-")) {
           const code = token.content.trim();
-          if (code && code.toLowerCase().startsWith("title:")) {
+          const parts = code.split("\n")
-            const title = code.substring(6, code.indexOf("\n"));
+          let titleLine;
-            const titleDiv = title
+          let collapse;
-              ? `<div class="callout-title"><div class="callout-title-inner">${title}</div></div>`
+          let collapsible = false
+          let collapsed = true
+          let icon;
+          let color;
+          let nbLinesToSkip = 0
+          for (let i = 0; i<4; i++) {
+            if (parts[i] && parts[i].trim()) {
+              let line = parts[i] && parts[i].trim().toLowerCase()
+              if (line.startsWith("title:")) {
+                titleLine = line.substring(6);
+                nbLinesToSkip ++;
+              } else if (line.startsWith("icon:")) {
+                icon = line.substring(5);
+                nbLinesToSkip ++;
+              } else if (line.startsWith("collapse:")) {
+                collapsible = true
+                collapse = line.substring(9);
+                if (collapse && collapse.trim().toLowerCase() == 'open') {
+                  collapsed = false
+                }
+                nbLinesToSkip ++;
+              } else if (line.startsWith("color:")) {
+                color = line.substring(6);
+                nbLinesToSkip ++;
+              }
+            }
+          }
+          const foldDiv = collapsible ? `<div class="callout-fold">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-chevron-down">
+              <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+          </div>` : "";
+          const titleDiv = titleLine
+              ? `<div class="callout-title"><div class="callout-title-inner">${titleLine}</div>${foldDiv}</div>`
               : "";
-
+          let collapseClasses = titleLine && collapsible ? 'is-collapsible' : ''
-            return `<div class="callout" data-callout="${
+          if (collapsible && collapsed) {
-              token.info
+            collapseClasses += " is-collapsed"
-            }">${titleDiv}\n<div class="callout-content">${md.render(
-              code.slice(code.indexOf("\n"))
-            )}</div></div>`;
           }
 
-          const title = `<div class="callout-title"><div class="callout-title-inner">${token.info
+          let res = `<div data-callout-metadata class="callout ${collapseClasses}" data-callout="${
-            .charAt(3)
+            token.info.substring(3)
-            .toUpperCase()}${token.info
+          }">${titleDiv}\n<div class="callout-content">${md.render(
-            .substring(4)
+            parts.slice(nbLinesToSkip).join("\n")
-            .toLowerCase()}</div></div>`;
-
-          return `<div class="callout" data-callout="${
-            token.info
-          }">${title}\n<div class="callout-content">${md.render(
-            code
           )}</div></div>`;
+          return res
         }
 
         // Other languages