From 4d303635458554eef43a2bceb8cc839201f3638d Mon Sep 17 00:00:00 2001 From: neerajadhav Date: Tue, 8 Jul 2025 17:33:31 +0530 Subject: [PATCH 1/5] refactor: remove unnecessary type assertions for window.addCleanup --- quartz/components/scripts/util.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index 11598cea0..974a5d727 100644 --- a/quartz/components/scripts/util.ts +++ b/quartz/components/scripts/util.ts @@ -14,13 +14,12 @@ export function registerEscapeHandler(outsideContainer: HTMLElement | null, cb: } outsideContainer?.addEventListener("click", click) - // Use type assertion to avoid TypeScript error when checking individual files - if (typeof (window as any).addCleanup === "function") { - ;(window as any).addCleanup(() => outsideContainer?.removeEventListener("click", click)) + if (typeof window.addCleanup === "function") { + window.addCleanup(() => outsideContainer?.removeEventListener("click", click)) } document.addEventListener("keydown", esc) - if (typeof (window as any).addCleanup === "function") { - ;(window as any).addCleanup(() => document.removeEventListener("keydown", esc)) + if (typeof window.addCleanup === "function") { + window.addCleanup(() => document.removeEventListener("keydown", esc)) } } From b3ab6fdd5935d0221a8bd868674d32f99a02f19f Mon Sep 17 00:00:00 2001 From: neerajadhav Date: Tue, 8 Jul 2025 17:36:18 +0530 Subject: [PATCH 2/5] fix: remove unnecessary type assertions for window.addCleanup in popover --- quartz/components/scripts/popover.inline.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index 2efd22138..91b02d015 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -167,9 +167,8 @@ document.addEventListener("nav", () => { for (const link of links) { link.addEventListener("mouseenter", mouseEnterHandler) link.addEventListener("mouseleave", clearActivePopoverAndHighlights) - // Use type assertion to avoid TypeScript error when checking individual files - if (typeof (window as any).addCleanup === "function") { - ;(window as any).addCleanup(() => { + if (typeof window.addCleanup === "function") { + window.addCleanup(() => { link.removeEventListener("mouseenter", mouseEnterHandler) link.removeEventListener("mouseleave", clearActivePopoverAndHighlights) }) From 30677df3d3dfc2a949fa30c223cfcb05139416a6 Mon Sep 17 00:00:00 2001 From: neerajadhav Date: Tue, 8 Jul 2025 18:00:35 +0530 Subject: [PATCH 3/5] refactor: simplify highlightElement cleanup logic --- quartz/components/scripts/util.ts | 41 +++++++++++++------------------ 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index 974a5d727..24ce989d6 100644 --- a/quartz/components/scripts/util.ts +++ b/quartz/components/scripts/util.ts @@ -96,12 +96,11 @@ export function highlightElement( color: string = "var(--highlight, #ffeb3b40)", ) { // Clear any existing highlight on this element - activeHighlights.forEach((highlight) => { - if (highlight.element === el) { - clearTimeout(highlight.timeoutId) - activeHighlights.delete(highlight) - } - }) + const existingHighlight = Array.from(activeHighlights).find(h => h.element === el) + if (existingHighlight) { + clearTimeout(existingHighlight.timeoutId) + activeHighlights.delete(existingHighlight) + } // Store original styles const originalBackground = el.style.backgroundColor @@ -112,27 +111,21 @@ export function highlightElement( el.style.backgroundColor = color // Set up cleanup - const timeoutId = window.setTimeout(() => { - el.style.backgroundColor = originalBackground - // Remove transition after background fades back - setTimeout(() => { - el.style.transition = originalTransition - // Remove from active highlights - activeHighlights.forEach((highlight) => { - if (highlight.element === el) { - activeHighlights.delete(highlight) - } - }) - }, 300) - }, duration) - - // Track this highlight - activeHighlights.add({ + const highlight = { element: el, originalBackground, originalTransition, - timeoutId, - }) + timeoutId: 0, + } + + highlight.timeoutId = window.setTimeout(() => { + el.style.backgroundColor = originalBackground + el.style.transition = originalTransition + activeHighlights.delete(highlight) + }, duration) + + // Track this highlight + activeHighlights.add(highlight) } /** From d6219339ef5ae71388ff6c70892f898d2e956b67 Mon Sep 17 00:00:00 2001 From: neerajadhav Date: Tue, 8 Jul 2025 18:16:12 +0530 Subject: [PATCH 4/5] refactor: remove backup highlight cleanup from clearAllHighlights --- quartz/components/scripts/util.ts | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index 24ce989d6..4d4c80001 100644 --- a/quartz/components/scripts/util.ts +++ b/quartz/components/scripts/util.ts @@ -68,20 +68,6 @@ export function clearAllHighlights() { element.style.transition = originalTransition }) activeHighlights.clear() - - // Also clear any highlights that might not be tracked (backup cleanup) - // This catches highlights in popovers or other edge cases - const allHighlightedElements = document.querySelectorAll('[style*="background-color"]') - allHighlightedElements.forEach((el) => { - const element = el as HTMLElement - if ( - element.style.backgroundColor.includes("var(--highlight") || - element.style.backgroundColor.includes("#ffeb3b") - ) { - element.style.backgroundColor = "" - element.style.transition = "" - } - }) } /** From 4db33faff7d6977f27ff00910c6ccba554f51dd4 Mon Sep 17 00:00:00 2001 From: neerajadhav Date: Tue, 8 Jul 2025 18:21:14 +0530 Subject: [PATCH 5/5] refactor: remove requestAnimationFrame and highlight delay from scrollInContainerToElement --- quartz/components/scripts/popover.inline.ts | 2 +- quartz/components/scripts/util.ts | 25 +++++++++------------ 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index 91b02d015..7f1a6aeb0 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -130,7 +130,7 @@ async function mouseEnterHandler( const targetID = `popover-internal-${el.id}` el.id = targetID }) - const elts = Array.from(html.getElementsByClassName("popover-hint")) + const elts = [...html.getElementsByClassName("popover-hint")] if (elts.length === 0) return elts.forEach((elt) => popoverInner.appendChild(elt)) diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index 4d4c80001..66fe60c4e 100644 --- a/quartz/components/scripts/util.ts +++ b/quartz/components/scripts/util.ts @@ -161,20 +161,15 @@ export function scrollInContainerToElement( highlight: boolean = true, behavior: ScrollBehavior = "instant", ) { - // Use requestAnimationFrame to ensure content is rendered before scrolling - requestAnimationFrame(() => { - const targetPosition = target.offsetTop - buffer - container.scroll({ - top: Math.max(0, targetPosition), - behavior, - }) - - // Add highlight effect if requested - if (highlight) { - // Small delay to ensure scroll completes before highlighting - setTimeout(() => { - highlightElement(target) - }, 50) - } + // Scroll immediately, since content should already be rendered in a static site + const targetPosition = target.offsetTop - buffer + container.scroll({ + top: Math.max(0, targetPosition), + behavior, }) + + // Add highlight effect if requested + if (highlight) { + highlightElement(target) + } }