website: initial ooknet website commit

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

@@ -0,0 +1,53 @@
+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);