function convertMarkdown(inputId, outputId, pointersListId = "") { const markdownInputElement = document.getElementById(inputId); if (!markdownInputElement) return; const markdownInput = markdownInputElement.value; const htmlOutput = marked.parse(markdownInput); const htmlOutputElement = document.getElementById(outputId); if (!htmlOutputElement) return; htmlOutputElement.innerHTML = htmlOutput; // Add IDs to headers if they don't have one const headers = htmlOutputElement.querySelectorAll("h1, h2"); headers.forEach((header, index) => { if (!header.id) { header.id = `header-${index}`; } }); // Generate content pointers if pointersListId is provided if (pointersListId) { const pointersList = document.getElementById(pointersListId); if (!pointersList) return; pointersList.innerHTML = ""; headers.forEach((header) => { const li = document.createElement("li"); const a = document.createElement("a"); a.href = `#${header.id}`; a.textContent = header.textContent; li.appendChild(a); pointersList.appendChild(li); }); // Add event listener to scroll to the section pointersList.querySelectorAll("a").forEach((anchor) => { anchor.addEventListener("click", (event) => { event.preventDefault(); const targetId = anchor.getAttribute("href").substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth" }); } }); }); } } function initializeMarkdownConverter(inputId, outputId, pointersListId) { // Convert markdown immediately on page load convertMarkdown(inputId, outputId, pointersListId); // Add event listener to input for real-time conversion const inputElement = document.getElementById(inputId); if (inputElement) { inputElement.addEventListener("input", () => { convertMarkdown(inputId, outputId, pointersListId); }); } } function addNavEventListeners() { const navItems = document.querySelectorAll("mynav ul li"); navItems.forEach((item) => { const nestedList = item.querySelector("ul"); if (nestedList) { // Add a visual cue for items with children const arrow = document.createElement("span"); arrow.textContent = "▶"; // You can use any symbol or icon here arrow.classList.add("arrow"); item.insertBefore(arrow, item.firstChild); // Add click event listener to toggle the nested list item.addEventListener("click", (event) => { event.stopPropagation(); // Prevent event from bubbling up item.classList.toggle("open"); arrow.textContent = item.classList.contains("open") ? "▼" : "▶"; // Change the arrow direction }); } }); } // function settypes() { // const navInputs = document.querySelectorAll("search-inpu"); // navInputs.forEach((input) => { // input.setAttribute("type", "text"); // }); // } // Call the initialization function when the DOM is loaded document.addEventListener("DOMContentLoaded", () => { createThemeIcons(); initializeMarkdownConverter("markdown-input", "markdown-output", "content-pointers"); initializeMarkdownConverter("markdown-nav", "mynav"); addNavEventListeners(); //settypes(); }); function setTheme(theme) { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("theme", theme); console.log(`Theme set to: ${theme}`); } function getSystemTheme() { return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.querySelectorAll(".theme-icon").forEach((icon) => { icon.addEventListener("click", () => { const theme = icon.getAttribute("data-theme-switcher"); setTheme(theme); }); }); // Check for saved theme preference or use system theme const savedTheme = localStorage.getItem("theme"); if (savedTheme) { setTheme(savedTheme); } else { setTheme(getSystemTheme()); } // Listen for system theme changes window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => { setTheme(e.matches ? "dark" : "light"); }); function createThemeIcons() { const themeIconsHTML = `
`; const placeholder = document.getElementById("theme-switcher-icons"); if (placeholder) { placeholder.innerHTML = themeIconsHTML; } // Add event listeners for theme switching document.querySelectorAll(".theme-icon").forEach((icon) => { icon.addEventListener("click", () => { const theme = icon.getAttribute("data-theme-switcher"); setTheme(theme); }); }); }