ooknet/outputs/pkgs/website/src/static/callouts.js

53 lines
1.8 KiB
JavaScript

function processCallouts() {
console.log("Processing callouts");
const content = document.querySelector(".content");
if (content) {
const blockquotes = content.querySelectorAll("blockquote");
blockquotes.forEach((blockquote) => {
const firstParagraph = blockquote.querySelector("p");
if (firstParagraph && firstParagraph.textContent.startsWith("[!")) {
const match = firstParagraph.textContent.match(/\[!(\w+)\]/);
if (match) {
const type = match[1].toLowerCase();
console.log(`Matched callout: ${type}`);
// remove the [!type] from the first paragraph
firstParagraph.textContent = firstParagraph.textContent.replace(
/\[!\w+\]\s*/,
"",
);
// create the callout structure
const callout = document.createElement("div");
callout.className = `callout callout--${type}`;
const title = document.createElement("div");
title.className = "callout__title";
const icon = document.createElement("span");
icon.className = `icon icon--medium icon__${type}`;
const titleText = document.createElement("span");
titleText.textContent = type.charAt(0).toUpperCase() + type.slice(1);
title.appendChild(icon);
title.appendChild(titleText);
callout.appendChild(title);
// move blockquote contents to the callout
callout.appendChild(title);
while (blockquote.firstChild) {
callout.appendChild(blockquote.firstChild);
}
// replace the blockquote with the callout
blockquote.parentNode.replaceChild(callout, blockquote);
}
}
});
}
}
document.addEventListener("DOMContentLoaded", processCallouts);
window.addEventListener("load", processCallouts);