Unable to load README ' +
- err.message +
+ '
';
}
}
@@ -993,7 +183,7 @@
Loading README.md…
li.className = "toc-item toc-" + h.tagName.toLowerCase();
const a = document.createElement("a");
a.href = "#" + h.id;
- a.textContent = h.textContent.trim();
+ a.textContent = h.textContent.trim().replace(/#$/, '');
a.addEventListener("click", (e) => {
e.preventDefault();
const target = document.getElementById(h.id);
@@ -1006,26 +196,12 @@
Loading README.md…
});
toc.appendChild(list);
-
- // Add small animated reveal for TOC items
- const tocLinks = Array.from(document.querySelectorAll(".toc-item"));
- tocLinks.forEach((li, i) => {
- li.style.opacity = 0;
- li.style.transform = "translateX(-6px)";
- setTimeout(() => {
- li.style.transition =
- "opacity .36s ease, transform .36s cubic-bezier(.2,.9,.2,1)";
- li.style.opacity = 1;
- li.style.transform = "none";
- }, 120 + i * 40);
- });
}
- // Search: client-side simple search across headings and content
+ // Search: client-side simple search
function initSearch(mdText) {
const input = document.getElementById("search");
const toc = document.getElementById("toc");
- const content = document.getElementById("article");
let searchTimeout;
input.addEventListener("input", () => {
@@ -1034,22 +210,17 @@
Loading README.md…
const q = input.value.trim().toLowerCase();
const items = Array.from(document.querySelectorAll(".toc-item"));
- // Clear previous highlights
document.querySelectorAll("#article mark").forEach((m) => {
m.outerHTML = m.innerHTML;
});
if (!q) {
items.forEach((i) => i.classList.remove("dim"));
- document
- .querySelectorAll("#article mark")
- .forEach((m) => (m.outerHTML = m.innerHTML));
return;
}
- // Highlight matches in article text
const regex = new RegExp(
- "(" + q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + ")",
+ "(" + q.replace(/[.*+?^${}()|[\\]/g, "\\$&") + ")",
"ig"
);
const walker = document.createTreeWalker(
@@ -1060,28 +231,23 @@
Loading README.md…
while (walker.nextNode()) textNodes.push(walker.currentNode);
textNodes.forEach((node) => {
- if (
- !node.parentElement.matches("code, pre, a, .heading-anchor")
- ) {
- const v = node.nodeValue;
- if (v.match(regex)) {
- const span = document.createElement("span");
- span.innerHTML = v.replace(regex, "
$1 ");
- node.parentNode.replaceChild(span, node);
- }
+ if (node.parentElement.matches("code, pre, a, .heading-anchor")) return;
+ const v = node.nodeValue;
+ if (v.match(regex)) {
+ const span = document.createElement("span");
+ span.innerHTML = v.replace(regex, "
$1 ");
+ node.parentNode.replaceChild(span, node);
}
});
- // Dim non-matching TOC items
items.forEach((i) => {
const text = i.textContent.toLowerCase();
if (text.includes(q)) i.classList.remove("dim");
else i.classList.add("dim");
});
- }, 300); // Debounce search for better performance
+ }, 200);
});
- // Allow pressing Enter to focus first match
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
const first = document.querySelector(".toc-item:not(.dim) a");
@@ -1090,11 +256,10 @@
Loading README.md…
});
}
- // Highlight active heading via IntersectionObserver
+ // Highlight active heading
function initActiveObserver() {
const options = {
- root: null,
- rootMargin: "0px 0px -60% 0px",
+ rootMargin: "0px 0px -80% 0px",
threshold: 0,
};
const obs = new IntersectionObserver((entries) => {
@@ -1117,109 +282,12 @@
Loading README.md…
.forEach((h) => obs.observe(h));
}
- // TOC toggle for small screens
- document.getElementById("toc-toggle").addEventListener("click", (e) => {
- const sidebar = document.getElementById("sidebar");
- const showBtn = document.getElementById("show-sidebar-btn");
- const expanded = sidebar.classList.toggle("collapsed");
- e.target.textContent = expanded ? "Show" : "Hide";
- e.target.setAttribute("aria-expanded", String(!expanded));
-
- // Show/hide the arrow button
- if (expanded) {
- showBtn.classList.add("visible");
- } else {
- showBtn.classList.remove("visible");
- }
- });
-
- // Show sidebar button functionality
- document.getElementById("show-sidebar-btn").addEventListener("click", () => {
- const sidebar = document.getElementById("sidebar");
- const showBtn = document.getElementById("show-sidebar-btn");
- const tocToggle = document.getElementById("toc-toggle");
-
- sidebar.classList.remove("collapsed");
- showBtn.classList.remove("visible");
- tocToggle.textContent = "Hide";
- tocToggle.setAttribute("aria-expanded", "true");
- });
-
- // Navbar interactions: focus search and toggle sidebar
- document
- .getElementById("nav-search-btn")
- .addEventListener("click", () => {
- const s = document.getElementById("search");
- if (s) {
- s.focus();
- s.scrollIntoView({ behavior: "smooth", block: "center" });
- }
- });
+ // Sidebar toggle
document.getElementById("hamburger").addEventListener("click", () => {
- const sidebar = document.getElementById("sidebar");
- const showBtn = document.getElementById("show-sidebar-btn");
- const tocToggle = document.getElementById("toc-toggle");
- const expanded = sidebar.classList.toggle("collapsed");
-
- // Update show button visibility
- if (expanded) {
- showBtn.classList.add("visible");
- } else {
- showBtn.classList.remove("visible");
- }
-
- // Update TOC toggle text
- tocToggle.textContent = expanded ? "Show" : "Hide";
- tocToggle.setAttribute("aria-expanded", String(!expanded));
+ document.getElementById("sidebar").classList.toggle("collapsed");
});
- // Auto-collapse sidebar on mobile and handle window resize
- function handleSidebarResponsiveness() {
- const sidebar = document.getElementById("sidebar");
- const showBtn = document.getElementById("show-sidebar-btn");
- const tocToggle = document.getElementById("toc-toggle");
- const isMobile = window.innerWidth <= 900;
-
- if (isMobile) {
- sidebar.classList.add("collapsed");
- showBtn.classList.add("visible");
- tocToggle.textContent = "Show";
- tocToggle.setAttribute("aria-expanded", "false");
- } else {
- sidebar.classList.remove("collapsed");
- showBtn.classList.remove("visible");
- tocToggle.textContent = "Hide";
- tocToggle.setAttribute("aria-expanded", "true");
- }
- }
-
- // Initial check and window resize listener
- handleSidebarResponsiveness();
- window.addEventListener("resize", handleSidebarResponsiveness);
-
- // Close sidebar when clicking outside on mobile
- document.addEventListener("click", (e) => {
- const sidebar = document.getElementById("sidebar");
- const hamburger = document.getElementById("hamburger");
- const showBtn = document.getElementById("show-sidebar-btn");
- const tocToggle = document.getElementById("toc-toggle");
- const isMobile = window.innerWidth <= 900;
-
- if (
- isMobile &&
- !sidebar.contains(e.target) &&
- !hamburger.contains(e.target) &&
- !showBtn.contains(e.target) &&
- !sidebar.classList.contains("collapsed")
- ) {
- sidebar.classList.add("collapsed");
- showBtn.classList.add("visible");
- tocToggle.textContent = "Show";
- tocToggle.setAttribute("aria-expanded", "false");
- }
- });
-
- // keyboard shortcut: press '/' to focus search
+ // keyboard shortcut: '/' to search
document.addEventListener("keydown", (e) => {
if (
e.key === "/" &&
@@ -1231,330 +299,53 @@
Loading README.md…
}
});
- // Track the currently loaded markdown file
- let currentMarkdownFile = "README.md";
-
- // Handle brand/logo click to return to README
- document.querySelectorAll(".brand").forEach((brand) => {
- brand.addEventListener("click", (e) => {
- if (brand.tagName === "A") {
- e.preventDefault();
- loadMarkdownFile("README.md");
- }
- });
- });
-
- // Smooth scroll for nav links
- document.querySelectorAll(".nav-links a").forEach((link) => {
- link.addEventListener("click", (e) => {
- const href = link.getAttribute("href");
-
- // If link has target _blank or points to projects.html, let browser handle it
- if (link.target === '_blank' || href === 'projects.html') {
- return; // Don't intercept new-tab or projects page
- }
-
- // Allow fully qualified external links to work normally
- if (href.startsWith("http://") || href.startsWith("https://")) {
- return; // External link
- }
-
- // Only intercept internal hash navigation (href begins with '#')
- if (!href.startsWith('#')) {
- return; // Not a hash link we manage
- }
-
- e.preventDefault();
-
- // For internal hash links, check if we need to reload README first
- const id = href.slice(1);
-
- // If we're not on README, load it first, then scroll to the section
- if (currentMarkdownFile !== "README.md") {
- loadMarkdownFile("README.md", id);
- return;
- }
-
- // Otherwise, just scroll to the section
- let element = document.getElementById(id);
-
- // If element not found, try to find it by searching through headings
- if (!element) {
- const headings = document.querySelectorAll(
- "#article h1, #article h2, #article h3, #article h4, #article h5, #article h6"
- );
- for (const heading of headings) {
- const headingText = heading.textContent.trim().toLowerCase();
- const cleanId = headingText
- .replace(/[^a-z0-9]+/g, "-")
- .replace(/^-+|-+$/g, "");
- if (cleanId === id || heading.id === id) {
- element = heading;
- heading.id = id; // Ensure the ID is set correctly
- break;
- }
- }
- }
-
- if (element) {
- element.scrollIntoView({ behavior: "smooth", block: "start" });
- setTimeout(() => {
- history.pushState(null, "", "#" + id);
- element.classList.add("highlight-section");
- setTimeout(
- () => element.classList.remove("highlight-section"),
- 1000
- );
- }, 100);
- } else {
- console.warn("Element not found for ID:", id);
- // Fallback: just update the URL
- history.pushState(null, "", "#" + id);
- }
- });
- });
-
- // Function to load any markdown file
- async function loadMarkdownFile(filename, scrollToId = null) {
- try {
- const res = await fetch(filename);
- if (!res.ok) throw new Error(`${filename} not found`);
- const md = await res.text();
-
- // Configure marked and highlight
- marked.setOptions({
- headerIds: true,
- mangle: false,
- highlight: function (code, lang) {
- try {
- return hljs.highlightAuto(code, lang ? [lang] : undefined)
- .value;
- } catch (e) {
- return hljs.highlightAuto(code).value;
- }
- },
- });
-
- const html = marked.parse(md);
- const article = document.getElementById("article");
- article.innerHTML = html;
-
- // Add anchors to headings
- document
- .querySelectorAll(
- "#article h1, #article h2, #article h3, #article h4, #article h5, #article h6"
- )
- .forEach((h) => {
- const id =
- h.id ||
- h.textContent
- .trim()
- .toLowerCase()
- .replace(/[^a-z0-9]+/g, "-");
- h.id = id;
- const a = document.createElement("a");
- a.className = "heading-anchor";
- a.href = "#" + id;
- a.title = "Link to " + h.textContent.trim();
- a.innerHTML = "¶";
- h.appendChild(a);
- });
-
- // Update current file tracker
- currentMarkdownFile = filename;
-
- // Scroll to specific section if requested, otherwise scroll to top
- if (scrollToId) {
- setTimeout(() => {
- const element = document.getElementById(scrollToId);
- if (element) {
- element.scrollIntoView({ behavior: "smooth", block: "start" });
- history.pushState(null, "", "#" + scrollToId);
- element.classList.add("highlight-section");
- setTimeout(() => element.classList.remove("highlight-section"), 1000);
- }
- }, 100);
- } else {
- window.scrollTo({ top: 0, behavior: "smooth" });
- }
-
- buildTOC();
- initSearch(md);
- initActiveObserver();
- hljs.highlightAll();
-
- // Update URL
- if (!scrollToId) {
- history.pushState(null, "", filename === "README.md" ? "./" : `?file=${filename}`);
- }
- } catch (err) {
- document.getElementById("article").innerHTML =
- `
`;
- }
- }
-
- // Enhanced renderReadme function
- async function renderReadme() {
- try {
- const res = await fetch("README.md");
- if (!res.ok) throw new Error("README.md not found");
- const md = await res.text();
-
- // Configure marked and highlight
- marked.setOptions({
- headerIds: true,
- mangle: false,
- highlight: function (code, lang) {
- try {
- return hljs.highlightAuto(code, lang ? [lang] : undefined)
- .value;
- } catch (e) {
- return hljs.highlightAuto(code).value;
- }
- },
- });
-
- const html = marked.parse(md);
- const article = document.getElementById("article");
- article.innerHTML = html;
-
- // Add anchors to headings and small animated anchor links
- document
- .querySelectorAll(
- "#article h1, #article h2, #article h3, #article h4, #article h5, #article h6"
- )
- .forEach((h) => {
- const id =
- h.id ||
- h.textContent
- .trim()
- .toLowerCase()
- .replace(/[^a-z0-9]+/g, "-");
- h.id = id;
- const a = document.createElement("a");
- a.className = "heading-anchor";
- a.href = "#" + id;
- a.title = "Link to " + h.textContent.trim();
- a.innerHTML = "¶";
- h.appendChild(a);
- });
-
- buildTOC();
- initSearch(md);
- initActiveObserver();
- hljs.highlightAll();
- } catch (err) {
- document.getElementById("article").innerHTML =
- '
';
- }
- }
-
- // If visiting index.html with a hash (e.g., index.html#resources), remember it
- const initialHash = window.location.hash ? window.location.hash.slice(1) : null;
-
- // Render README and, if there was an initial hash, scroll to that section after render
- renderReadme().then(() => {
- if (initialHash) {
- // If the article is already rendered, try to find the element and scroll to it
- const el = document.getElementById(initialHash);
- if (el) {
- setTimeout(() => {
- el.scrollIntoView({ behavior: 'smooth', block: 'start' });
- history.replaceState(null, '', '#' + initialHash);
- el.classList.add('highlight-section');
- setTimeout(() => el.classList.remove('highlight-section'), 1000);
- }, 120);
- } else {
- // If element not found, ensure loadMarkdownFile handles it by reloading README and passing id
- loadMarkdownFile('README.md', initialHash);
- }
- }
- });
-
// Theme toggle
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
const savedTheme = localStorage.getItem('theme') || 'dark';
html.setAttribute('data-theme', savedTheme);
- themeToggle.textContent = savedTheme === 'dark' ? '🌙' : '☀️';
+ themeToggle.innerHTML = savedTheme === 'dark' ?
+ '
' :
+ '
';
themeToggle.addEventListener('click', () => {
const current = html.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
- themeToggle.textContent = next === 'dark' ? '🌙' : '☀️';
+ themeToggle.innerHTML = next === 'dark' ?
+ '
' :
+ '
';
+ });
+
+ renderReadme();
+
+ // Smooth scrolling for nav links
+ document.querySelectorAll('.nav-links a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
+ behavior: 'smooth'
+ });
+ });
});
-