Support setting metadata on callouts and images

.eleventy.js

@@ -99,25 +99,25 @@ module.exports = function (eleventyConfig) {
           let icon;
           let color;
           let nbLinesToSkip = 0
-          for (let i = 0; i<4; i++) {
+          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 ++;
+                nbLinesToSkip++;
               } else if (line.startsWith("icon:")) {
                 icon = line.substring(5);
-                nbLinesToSkip ++;
+                nbLinesToSkip++;
               } else if (line.startsWith("collapse:")) {
                 collapsible = true
                 collapse = line.substring(9);
                 if (collapse && collapse.trim().toLowerCase() == 'open') {
                   collapsed = false
                 }
-                nbLinesToSkip ++;
+                nbLinesToSkip++;
               } else if (line.startsWith("color:")) {
                 color = line.substring(6);
-                nbLinesToSkip ++;
+                nbLinesToSkip++;
               }
             }
           }
@@ -127,18 +127,17 @@ module.exports = function (eleventyConfig) {
           </svg>
           </div>` : "";
           const titleDiv = titleLine
-              ? `<div class="callout-title"><div class="callout-title-inner">${titleLine}</div>${foldDiv}</div>`
-              : "";
+            ? `<div class="callout-title"><div class="callout-title-inner">${titleLine}</div>${foldDiv}</div>`
+            : "";
           let collapseClasses = titleLine && collapsible ? 'is-collapsible' : ''
           if (collapsible && collapsed) {
             collapseClasses += " is-collapsed"
           }
 
-          let res = `<div data-callout-metadata class="callout ${collapseClasses}" data-callout="${
-            token.info.substring(3)
-          }">${titleDiv}\n<div class="callout-content">${md.render(
-            parts.slice(nbLinesToSkip).join("\n")
-          )}</div></div>`;
+          let res = `<div data-callout-metadata class="callout ${collapseClasses}" data-callout="${token.info.substring(3)
+            }">${titleDiv}\n<div class="callout-content">${md.render(
+              parts.slice(nbLinesToSkip).join("\n")
+            )}</div></div>`;
           return res
         }
 
@@ -153,7 +152,21 @@ module.exports = function (eleventyConfig) {
         };
       md.renderer.rules.image = (tokens, idx, options, env, self) => {
         const imageName = tokens[idx].content;
-        const [fileName, width] = imageName.split("|");
+        //"image.png|metadata?|width"
+        const [fileName, ...widthAndMetaData] = imageName.split("|");
+        const lastValue = widthAndMetaData[widthAndMetaData.length - 1];
+        const lastValueIsNumber = !isNaN(lastValue);
+        const width = lastValueIsNumber ? lastValue : null;
+
+        let metaData = "";
+        if (widthAndMetaData.length > 1) {
+          metaData = widthAndMetaData.slice(0, widthAndMetaData.length - 1).join(" ");
+        }
+
+        if (!lastValueIsNumber) {
+          metaData += ` ${lastValue}`;
+        }
+
         if (width) {
           const widthIndex = tokens[idx].attrIndex("width");
           const widthAttr = `${width}px`;
@@ -246,7 +259,7 @@ module.exports = function (eleventyConfig) {
           deadLink = true;
         }
 
-        if(deadLink){
+        if (deadLink) {
           return `<a class="internal-link is-unresolved" href="/404">${title}</a>`;
         }
         return `<a class="internal-link" data-note-icon="${noteIcon}" href="${permalink}${headerLinkPath}">${title}</a>`;
@@ -302,28 +315,30 @@ module.exports = function (eleventyConfig) {
 
         let titleDiv = "";
         let calloutType = "";
+        let calloutMetaData = "";
         let isCollapsable;
         let isCollapsed;
-        const calloutMeta = /\[!([\w-]*)\](\+|\-){0,1}(\s?.*)/;
+        const calloutMeta = /\[!([\w-]*)\|?(\s?.*)\](\+|\-){0,1}(\s?.*)/;
         if (!content.match(calloutMeta)) {
           continue;
         }
 
         content = content.replace(
           calloutMeta,
-          function (metaInfoMatch, callout, collapse, title) {
+          function (metaInfoMatch, callout, metaData, collapse, title) {
             isCollapsable = Boolean(collapse);
             isCollapsed = collapse === "-";
             const titleText = title.replace(/(<\/{0,1}\w+>)/, "")
               ? title
               : `${callout.charAt(0).toUpperCase()}${callout
-                  .substring(1)
-                  .toLowerCase()}`;
+                .substring(1)
+                .toLowerCase()}`;
             const fold = isCollapsable
               ? `<div class="callout-fold"><i icon-name="chevron-down"></i></div>`
               : ``;
 
             calloutType = callout;
+            calloutMetaData = metaData;
             titleDiv = `<div class="callout-title"><div class="callout-title-inner">${titleText}</div>${fold}</div>`;
             return "";
           }
@@ -334,6 +349,7 @@ module.exports = function (eleventyConfig) {
         blockquote.classList.add(isCollapsable ? "is-collapsible" : "");
         blockquote.classList.add(isCollapsed ? "is-collapsed" : "");
         blockquote.setAttribute("data-callout", calloutType.toLowerCase());
+        calloutMetaData && blockquote.setAttribute("data-callout-metadata", calloutMetaData);
         blockquote.innerHTML = `${titleDiv}\n<div class="callout-content">${content}</div>`;
       }
     };
@@ -344,8 +360,8 @@ module.exports = function (eleventyConfig) {
   });
 
   function fillPictureSourceSets(src, cls, alt, meta, width, imageTag) {
-      imageTag.tagName = "picture";
-      let html = `<source
+    imageTag.tagName = "picture";
+    let html = `<source
       media="(max-width:480px)"
       srcset="${meta.webp[0].url}"
       type="image/webp"
@@ -355,28 +371,28 @@ module.exports = function (eleventyConfig) {
       srcset="${meta.jpeg[0].url}"
       />
       `
-      if (meta.webp && meta.webp[1] && meta.webp[1].url) {
-        html += `<source
+    if (meta.webp && meta.webp[1] && meta.webp[1].url) {
+      html += `<source
         media="(max-width:1920px)"
         srcset="${meta.webp[1].url}"
         type="image/webp"
         />`
-      }
-      if (meta.jpeg && meta.jpeg[1] && meta.jpeg[1].url) {
-        html += `<source
+    }
+    if (meta.jpeg && meta.jpeg[1] && meta.jpeg[1].url) {
+      html += `<source
         media="(max-width:1920px)"
         srcset="${meta.jpeg[1].url}"
         />`
-      }
-      html += `<img
+    }
+    html += `<img
       class="${cls.toString()}"
       src="${src}"
       alt="${alt}"
       width="${width}"
       />`;
-      imageTag.innerHTML = html;
-    }
-    
+    imageTag.innerHTML = html;
+  }
+
 
   eleventyConfig.addTransform("picture", function (str) {
     const parsed = parse(str);
@@ -458,7 +474,7 @@ module.exports = function (eleventyConfig) {
     ul: true,
     tags: ["h1", "h2", "h3", "h4", "h5", "h6"],
   });
- 
+
 
   eleventyConfig.addFilter("dateToZulu", function (date) {
     if (!date) return "";
@@ -477,7 +493,7 @@ module.exports = function (eleventyConfig) {
     return variable;
   });
 
- eleventyConfig.addPlugin(pluginRss, {
+  eleventyConfig.addPlugin(pluginRss, {
     posthtmlRenderOptions: {
       closingSingleTag: "slash",
       singleTags: ["link"],