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

@@ -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)
       })

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<Response> {
 
 // 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