generic-callout.js

export function render() {
    var quoteElem = document
      .evaluate(
        "//blockquote[contains(., '[!')]",
        document,
        null,
        XPathResult.UNORDERED_NODE_ITERATOR_TYPE,
        null,
      )
      .iterateNext();

    while (quoteElem) {
      var match = /^\s*\[\!([^\]]*)] ?(.*)$/gm.exec(quoteElem.textContent);
      var calloutType = match && match[1];
      var calloutTitle = match && match[2];
      var calloutContentText = document
        .evaluate(
          "./p/following-sibling::p",
          quoteElem,
          null,
          XPathResult.ANY_TYPE,
          null,
        )
        .iterateNext();

      var calloutInnerTitle = document.createElement("div");
      calloutInnerTitle.setAttribute("class", "callout-title-inner");
      calloutInnerTitle.appendChild(
        document.createTextNode(
          calloutTitle || calloutType[0].toUpperCase() + calloutType.substring(1),
        ),
      );

      var svg = document.createElement("svg");
      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
      svg.setAttribute("stroke", "currentColor");
      svg.setAttribute("stroke-linecap", "round");
      svg.setAttribute("stroke-linejoin", "round");
      svg.setAttribute("class", "w-5 h-5");

      switch (calloutType) {
        case "quote":
          svg.setAttribute("fill", "none");
          svg.setAttribute("stroke-width", "2");
          svg.setAttributeNS(null, "viewBox", "0 0 24 24");
          var path = document.createElement("path");
          path.setAttribute(
            "d",
            "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z",
          );
          svg.appendChild(path);
          var path = document.createElement("path");
          path.setAttribute(
            "d",
            "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z",
          );
          svg.appendChild(path);
          break;
        default:
          calloutType = "default";
          svg.setAttribute("fill", "currentColor");
          svg.setAttribute("stroke-width", ".1");
          svg.setAttributeNS(null, "viewBox", "0 0 6.4 6.4");
          var path = document.createElement("path");
          path.setAttribute(
            "d",
            "M.6 2.6a.3.3 0 0 1 0-.6H3a.3.3 0 0 0 0-.6.3.3 0 0 0-.224.1.3.3 0 0 1-.447-.4A.9.9 0 1 1 3 2.6Zm4.6-.8a.9.9 0 0 0-.671.3.3.3 0 0 0 .447.4.3.3 0 0 1 .224-.1.3.3 0 0 1 0 .6H.8a.3.3 0 0 0 0 .6h4.4a.9.9 0 0 0 0-1.8M3.8 4H1a.3.3 0 0 0 0 .6h2.8a.3.3 0 0 1 0 .6.3.3 0 0 1-.224-.1.3.3 0 0 0-.447.4A.9.9 0 1 0 3.8 4",
          );
          svg.appendChild(path);
          break;
      }

      var calloutIcon = document.createElement("div");
      calloutIcon.setAttribute("class", "callout-icon");
      calloutIcon.appendChild(svg);

      var calloutTitle = document.createElement("div");
      calloutTitle.setAttribute("class", "callout-title");
      calloutTitle.appendChild(calloutIcon);
      calloutTitle.appendChild(calloutInnerTitle);

      var path = document.createElement("path");
      path.setAttribute(
        "d",
        "M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z",
      );

      var calloutContent = document.createElement("div");
      calloutContent.setAttribute("class", "callout-content");
      calloutContent.appendChild(calloutContentText);

      var calloutElem = document.createElement("div");
      calloutElem.setAttribute("data-callout-metadata", "");
      calloutElem.setAttribute("data-callout-fold", "");
      calloutElem.setAttribute("data-callout", calloutType);
      calloutElem.setAttribute("class", "callout bg-opacity-10");
      calloutElem.setAttribute("role", "note");
      calloutElem.appendChild(path);
      calloutElem.appendChild(calloutTitle);
      calloutElem.appendChild(calloutContent);

      quoteElem.replaceWith(calloutElem);
      calloutElem.outerHTML += ""; // required to render svg ¯\_(ツ)_/¯

      quoteElem = document
        .evaluate(
          "//blockquote[contains(., '[!')]",
          document,
          null,
          XPathResult.UNORDERED_NODE_ITERATOR_TYPE,
          null,
        )
        .iterateNext();
    }
}