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);

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

@@ -0,0 +1,30 @@
+function initToggleMenu() {
+  const menuToggle = document.querySelector(".menu-toggle");
+  const notebook = document.querySelector(".notebook");
+
+  menuToggle.addEventListener("click", function (e) {
+    e.preventDefault();
+    notebook.classList.toggle("notebook--menu-toggled");
+  });
+}
+
+document.addEventListener("DOMContentLoaded", initToggleMenu);
+
+document.addEventListener("DOMContentLoaded", function () {
+  const toggles = document.querySelectorAll('[data-toggle="collapse"]');
+
+  toggles.forEach((toggle) => {
+    toggle.addEventListener("click", function (e) {
+      e.preventDefault();
+      const target = document.querySelector(this.getAttribute("data-target"));
+      if (target) {
+        target.classList.toggle("show");
+        this.classList.toggle("collapsed");
+        this.setAttribute(
+          "aria-expanded",
+          this.classList.contains("collapsed") ? "false" : "true",
+        );
+      }
+    });
+  });
+});

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

@@ -0,0 +1,41 @@
+let checkbox = document.querySelector("input[name=theme-switch]");
+
+function setTheme(isDark) {
+  if (isDark) {
+    document.documentElement.classList.add("dark-theme");
+    document.documentElement.classList.remove("light-theme");
+    checkbox.checked = true;
+  } else {
+    document.documentElement.classList.remove("dark-theme");
+    document.documentElement.classList.add("light-theme");
+    checkbox.checked = false;
+  }
+  // save the theme preference to local storage
+  localStorage.setItem("darkTheme", isDark);
+}
+
+// check for saved theme preference
+let savedTheme = localStorage.getItem("darkTheme");
+
+if (savedTheme !== null) {
+  // use the saved theme if it exists
+  setTheme(savedTheme === "true");
+} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+  // if no saved preference, check system preference
+  setTheme(true);
+} else {
+  setTheme(false);
+}
+
+// switch theme if checkbox is toggled
+checkbox.addEventListener("change", (event) => {
+  console.log("button clicked");
+  setTheme(event.target.checked);
+});
+
+// listen for system color-scheme changes
+window
+  .matchMedia("(prefers-color-scheme: dark)")
+  .addEventListener("change", (e) => {
+    setTheme(e.matches);
+  });