From 1f6cbcbb71d998b58f6cb4a500cd9d7596fcba78 Mon Sep 17 00:00:00 2001 From: neerajadhav Date: Mon, 7 Jul 2025 19:19:44 +0530 Subject: [PATCH] style: fix code formatting with Prettier - Format popover.inline.ts and util.ts according to project style guidelines - Ensure consistent code style across navigation enhancement files --- quartz/components/scripts/popover.inline.ts | 28 ++++---- quartz/components/scripts/util.ts | 76 ++++++++++++--------- 2 files changed, 57 insertions(+), 47 deletions(-) diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index f41faa0f8..2efd22138 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -39,32 +39,32 @@ async function mouseEnterHandler( if (popoverInner) { const hashWithoutPound = targetHash.slice(1) const targetAnchor = `popover-internal-${hashWithoutPound}` - + // Try to find the element by ID first let heading = popoverInner.querySelector(`#${targetAnchor}`) as HTMLElement | null - + // If not found by ID, try to find by text content (fallback for headings) if (!heading) { - const headings = popoverInner.querySelectorAll('h1, h2, h3, h4, h5, h6') + const headings = popoverInner.querySelectorAll("h1, h2, h3, h4, h5, h6") for (const h of headings) { const headingElement = h as HTMLElement - const headingText = headingElement.textContent?.trim().toLowerCase() || '' - const targetText = hashWithoutPound.toLowerCase().replace(/-/g, ' ') - + const headingText = headingElement.textContent?.trim().toLowerCase() || "" + const targetText = hashWithoutPound.toLowerCase().replace(/-/g, " ") + // More strict matching: avoid matching very short headings unless they're exact matches const isExactMatch = headingText === targetText - const isSubstringMatch = headingText.length >= 3 && ( - headingText.includes(targetText) || - (targetText.length >= 3 && targetText.includes(headingText)) - ) - + const isSubstringMatch = + headingText.length >= 3 && + (headingText.includes(targetText) || + (targetText.length >= 3 && targetText.includes(headingText))) + if (isExactMatch || isSubstringMatch) { heading = headingElement break } } } - + if (heading) { // Use utility function to scroll with buffer and highlight scrollInContainerToElement(popoverInner, heading, 20, true, "instant") @@ -168,8 +168,8 @@ document.addEventListener("nav", () => { 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 as any).addCleanup === "function") { + ;(window as any).addCleanup(() => { link.removeEventListener("mouseenter", mouseEnterHandler) link.removeEventListener("mouseleave", clearActivePopoverAndHighlights) }) diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts index d9aba422b..11598cea0 100644 --- a/quartz/components/scripts/util.ts +++ b/quartz/components/scripts/util.ts @@ -15,12 +15,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 as any).addCleanup === "function") { + ;(window as any).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 as any).addCleanup === "function") { + ;(window as any).addCleanup(() => document.removeEventListener("keydown", esc)) } } @@ -52,9 +52,9 @@ export async function fetchCanonical(url: URL): Promise { // Keep track of active highlights to clean them up let activeHighlights: Set<{ - element: HTMLElement, - originalBackground: string, - originalTransition: string, + element: HTMLElement + originalBackground: string + originalTransition: string timeoutId: number }> = new Set() @@ -69,16 +69,18 @@ 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 = '' + if ( + element.style.backgroundColor.includes("var(--highlight") || + element.style.backgroundColor.includes("#ffeb3b") + ) { + element.style.backgroundColor = "" + element.style.transition = "" } }) } @@ -89,7 +91,11 @@ export function clearAllHighlights() { * @param duration - How long to show the highlight in milliseconds (default: 2000) * @param color - The highlight color (default: uses CSS variable --highlight) */ -export function highlightElement(el: HTMLElement, duration: number = 2000, color: string = 'var(--highlight, #ffeb3b40)') { +export function highlightElement( + el: HTMLElement, + duration: number = 2000, + color: string = "var(--highlight, #ffeb3b40)", +) { // Clear any existing highlight on this element activeHighlights.forEach((highlight) => { if (highlight.element === el) { @@ -97,15 +103,15 @@ export function highlightElement(el: HTMLElement, duration: number = 2000, color activeHighlights.delete(highlight) } }) - + // Store original styles const originalBackground = el.style.backgroundColor const originalTransition = el.style.transition - + // Apply highlight styles - el.style.transition = 'background-color 0.3s ease' + el.style.transition = "background-color 0.3s ease" el.style.backgroundColor = color - + // Set up cleanup const timeoutId = window.setTimeout(() => { el.style.backgroundColor = originalBackground @@ -120,13 +126,13 @@ export function highlightElement(el: HTMLElement, duration: number = 2000, color }) }, 300) }, duration) - + // Track this highlight activeHighlights.add({ element: el, originalBackground, originalTransition, - timeoutId + timeoutId, }) } @@ -136,22 +142,26 @@ export function highlightElement(el: HTMLElement, duration: number = 2000, color * @param buffer - Additional buffer space in pixels (default: 20) * @param highlight - Whether to highlight the element after scrolling (default: true) */ -export function scrollToElementWithBuffer(el: HTMLElement, buffer: number = 20, highlight: boolean = true) { +export function scrollToElementWithBuffer( + el: HTMLElement, + buffer: number = 20, + highlight: boolean = true, +) { // Get the height of the header to calculate buffer - const header = document.querySelector('.page-header') as HTMLElement + const header = document.querySelector(".page-header") as HTMLElement const headerHeight = header ? header.offsetHeight : 0 const totalOffset = headerHeight + buffer - + // Calculate the target position const elementTop = el.offsetTop const targetPosition = elementTop - totalOffset - + // Scroll to the calculated position window.scrollTo({ top: Math.max(0, targetPosition), - behavior: 'smooth' + behavior: "smooth", }) - + // Add highlight effect if requested if (highlight) { highlightElement(el) @@ -167,20 +177,20 @@ export function scrollToElementWithBuffer(el: HTMLElement, buffer: number = 20, * @param behavior - Scroll behavior (default: 'instant') */ export function scrollInContainerToElement( - container: HTMLElement, - target: HTMLElement, - buffer: number = 20, + container: HTMLElement, + target: HTMLElement, + buffer: number = 20, highlight: boolean = true, - behavior: ScrollBehavior = 'instant' + 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 + container.scroll({ + top: Math.max(0, targetPosition), + behavior, }) - + // Add highlight effect if requested if (highlight) { // Small delay to ensure scroll completes before highlighting