main.min.js

// Off-canvas menu functionality
const offcanvasTriggers = document.querySelectorAll("[data-outside]");
const activeClass = "is-active";
const menuIcon = document.getElementById("menu-icon");
const arrowIcon = document.getElementById("arrow-icon");
const sideMenu = document.getElementById("side-menu");
const mainContent = document.getElementById("main-content");

menuIcon.addEventListener("click", toggleOffcanvas);
arrowIcon.addEventListener("click", toggleOffcanvas);

function toggleOffcanvas() {
  sideMenu.classList.toggle("translate-x-full");
  sideMenu.classList.toggle("translate-x-0");
  menuIcon.classList.toggle("hidden");
  arrowIcon.classList.toggle("hidden");
  mainContent.classList.toggle("-translate-x-64");
}

document.addEventListener("click", function (event) {
  if (
    !sideMenu.contains(event.target) &&
    !menuIcon.contains(event.target) &&
    !arrowIcon.contains(event.target)
  ) {
    if (!sideMenu.classList.contains("translate-x-full")) {
      toggleOffcanvas();
    }
  }
});

sideMenu.addEventListener("click", (event) => {
  event.stopPropagation();
});

window.addEventListener("resize", () => {
  if (!sideMenu.classList.contains("translate-x-full")) {
    mainContent.style.transform = `translateX(${sideMenu.offsetWidth}px)`;
  } else {
    mainContent.style.transform = "translateX(0)";
  }
});

// Close menu when clicking outside
document.addEventListener("DOMContentLoaded", function () {
  const moreButton = document.getElementById("moreButton");
  const moreMenu = document.getElementById("more");

  function openDropdown() {
    moreMenu.classList.remove("hidden");
    setTimeout(() => {
      moreMenu.classList.remove("opacity-0", "scale-95");
      moreMenu.classList.add("opacity-100", "scale-100");
    }, 10);
    moreButton.classList.add("rotate-90");
  }

  function closeDropdown() {
    moreMenu.classList.remove("opacity-100", "scale-100");
    moreMenu.classList.add("opacity-0", "scale-95");
    setTimeout(() => {
      moreMenu.classList.add("hidden");
    }, 200);
    moreButton.classList.remove("rotate-90");
  }

  function toggleDropdown() {
    if (moreMenu.classList.contains("hidden")) {
      openDropdown();
    } else {
      closeDropdown();
    }
  }

  function handleClickOutside(event) {
    if (
      !moreButton.contains(event.target) &&
      !moreMenu.contains(event.target)
    ) {
      closeDropdown();
    }
  }

  moreButton.addEventListener("click", toggleDropdown);
  document.addEventListener("click", handleClickOutside);
});

document.addEventListener("DOMContentLoaded", function () {
  const modalTriggers = document.querySelectorAll("[data-modal]");

  modalTriggers.forEach((trigger) => {
    const modalId = trigger.dataset.modal;
    const modal = document.getElementById(modalId);
    const closeBtn = modal.querySelector(".modal-close");

    function openModal() {
      modal.classList.remove("hidden");
      setTimeout(() => {
        modal.classList.remove("opacity-0", "scale-95");
        modal.classList.add("opacity-100", "scale-100");
      }, 10);
      document.body.style.overflow = "hidden";
    }

    function closeModal() {
      modal.classList.remove("opacity-100", "scale-100");
      modal.classList.add("opacity-0", "scale-95");

      const transitionDuration = 300; // Duration should match CSS transition duration
      setTimeout(() => {
        if (modal.classList.contains("opacity-0")) {
          modal.classList.add("hidden");
        }
      }, transitionDuration);

      document.body.style.overflow = "";
    }

    // Close modal when clicking on close button
    closeBtn.addEventListener("click", closeModal);

    // Close modal when clicking outside of it
    modal.addEventListener("click", function (event) {
      if (event.target === modal) {
        closeModal();
      }
    });

    // Close modal when pressing Esc key
    document.addEventListener("keydown", function (event) {
      if (event.key === "Escape" && !modal.classList.contains("hidden")) {
        closeModal();
      }
    });

    // Open modal when trigger element is clicked
    trigger.addEventListener("click", openModal);
  });
});
window.addEventListener("scroll", function () {
  var button = document.getElementById("back-to-top");
  if (window.scrollY > 300) {
    button.style.display = "block";
  } else {
    button.style.display = "none";
  }
});

/*<![CDATA[*/
const toTop = (() => {
  let button = document.getElementById("toTop");
  window.onscroll = () => {
    button.classList[
      document.documentElement.scrollTop > 200 ? "add" : "remove"
    ]("is-visible");
  };
  button.onclick = () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  };
})(); /*]]>*/
document.addEventListener("DOMContentLoaded", function () {
  const openModalBtn = document.getElementById("openShareModal");
  const closeModalBtn = document.getElementById("closeShareModal");
  const modal = document.getElementById("shareModal");
  const modalContent = modal.querySelector(".hs-overlay-open\\:opacity-100");
  const pageLinkInput = document.getElementById("pageLink");
  const copyLinkBtn = document.getElementById("copyLinkBtn");
  const copySuccessMessage = document.getElementById("copySuccessMessage");

  function openModal() {
    modal.classList.remove("hidden", "opacity-0", "pointer-events-none");
    modal.classList.add("opacity-100", "pointer-events-auto");
    setTimeout(() => {
      modalContent.classList.remove("translate-y-4", "opacity-0");
      modalContent.classList.add("translate-y-0", "opacity-100");
    }, 10);
    pageLinkInput.value = window.location.href;
  }

  function closeModal() {
    modalContent.classList.remove("translate-y-0", "opacity-100");
    modalContent.classList.add("translate-y-4", "opacity-0");
    setTimeout(() => {
      modal.classList.remove("opacity-100", "pointer-events-auto");
      modal.classList.add("opacity-0", "pointer-events-none", "hidden");
    }, 200);
  }

  function copyLink() {
    pageLinkInput.select();
    document.execCommand("copy");
    showCopySuccessMessage();
  }

  function showCopySuccessMessage() {
    copySuccessMessage.classList.remove("hidden", "opacity-0");
    copySuccessMessage.classList.add("opacity-100");

    setTimeout(() => {
      copySuccessMessage.classList.remove("opacity-100");
      copySuccessMessage.classList.add("opacity-0");
      setTimeout(() => {
        copySuccessMessage.classList.add("hidden");
      }, 300);
    }, 2000);
  }

  openModalBtn.addEventListener("click", openModal);
  closeModalBtn.addEventListener("click", closeModal);
  copyLinkBtn.addEventListener("click", copyLink);

  modal.addEventListener("click", function (event) {
    if (event.target === modal) {
      closeModal();
    }
  });

  document.addEventListener("keydown", function (event) {
    if (event.key === "Escape" && modal.classList.contains("opacity-100")) {
      closeModal();
    }
  });
});
//////////////////////////
document.addEventListener("DOMContentLoaded", function () {
  const articleContent = document.querySelector(".article-body");
  const tocList = document.querySelector(".toc-list");

  if (!articleContent || !tocList) return;

  const headings = articleContent.querySelectorAll("h2, h3, h4, h5, h6");

  headings.forEach((heading, index) => {
    const id = heading.id || `heading-${index}`;
    heading.id = id;

    const li = document.createElement("li");
    li.className = "toc-list-item";
    const a = document.createElement("a");
    a.href = `#${id}`;
    a.textContent = heading.textContent;
    a.className = `toc-link node-name--${heading.tagName}`;

    li.appendChild(a);
    tocList.appendChild(li);
  });

  // Intersection Observer for active link highlighting
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const id = entry.target.id;
          document.querySelectorAll(".toc-link").forEach((link) => {
            link.classList.remove("is-active-link");
            link.parentElement.classList.remove("is-active-li");
            if (link.getAttribute("href") === `#${id}`) {
              link.classList.add("is-active-link");
              link.parentElement.classList.add("is-active-li");
            }
          });
        }
      });
    },
    { threshold: 0.5 }
  );

  headings.forEach((heading) => observer.observe(heading));
});

async function initHighlight() {
  const loadScript = () =>
    new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src =
        "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js";
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });

  try {
    await loadScript();
    hljs.highlightAll();
  } catch (error) {
    console.error(error);
  }
}

function addCopyButtons(codeBlock) {
  if (!navigator || !navigator.clipboard) return;

  const clipboard = navigator.clipboard;
  const $button = document.createElement("button");
  $button.className = "hljs-copy";

  $button.addEventListener("click", function () {
    clipboard.writeText(codeBlock.textContent).then(function () {
      $button.blur();
      $button.classList.add("is-copied");
      $button.disabled = true;

      setTimeout(function () {
        $button.disabled = false;
        $button.classList.remove("is-copied");
      }, 2000);
    });
  });

  const pre = codeBlock.parentNode;
  pre.insertBefore($button, pre.firstChild);
}

function initCodeBlocks() {
  const codeBlocks = document.querySelectorAll("pre > code");
  if (codeBlocks.length === 0) return;

  initHighlight();

  codeBlocks.forEach(function (codeBlock) {
    addCopyButtons(codeBlock);
  });
}

initCodeBlocks();