fix: links in annotation pdfs

Author: Spelkington

content/public/content/notes/ai-beat-us.mdx

@@ -1,6 +1,6 @@
 ---
 title: AI has already won — what's left for us, now?
-date: 2026-02-15
+date: 1970-0im-15
 tags:
   - engineering/ai
   - engineering

quartz.config.ts

@@ -178,7 +178,10 @@ const config: QuartzConfig = {
       }),
       Plugin.GitHubFlavoredMarkdown(),
       Plugin.TableOfContents(),
-      Plugin.CrawlLinks({ markdownLinkResolution: "absolute" }),
+      Plugin.CrawlLinks({ 
+        markdownLinkResolution: "absolute",
+        openLinksInNewTab: true,
+      }),
       Plugin.Description(),
       Plugin.Latex({ renderEngine: "katex" }),
     ],

quartz/components/AnnotationViewer.tsx

@@ -145,16 +145,6 @@ export default (() => {
                     data-start={textPosition?.start}
                     data-end={textPosition?.end}
                   >
-                    <div class="annotation-quote">
-                      {textQuote?.prefix && (
-                        <span class="annotation-prefix">{textQuote.prefix}...</span>
-                      )}
-                      <span class="annotation-highlight">{textQuote?.exact}</span>
-                      {textQuote?.suffix && (
-                        <span class="annotation-suffix">...{textQuote.suffix}</span>
-                      )}
-                    </div>
-
                     {annotation.text && (
                       <div class="annotation-comment">
                         <div dangerouslySetInnerHTML={{ __html: annotation.text }} />

quartz/components/scripts/annotationViewer/adapters/scrollSync.ts

@@ -60,12 +60,7 @@ function findTextScrollPosition(startOffset: number, endOffset: number): number
 }
 
 /**
- * Tracks which panel is currently being scrolled by the user
- */
-type ScrollSource = "pdf" | "sidebar" | "programmatic" | null
-
-/**
- * Set up bidirectional scroll synchronization between PDF and annotations
+ * Set up click-based navigation between PDF and annotations
  */
 export function setupScrollSync(viewer: Element): void {
   const pdfContainer = viewer.querySelector(".annotation-pdf-container") as HTMLElement
@@ -100,166 +95,8 @@ export function setupScrollSync(viewer: Element): void {
     }
   })
 
-  // State management for scroll synchronization
-  let scrollSource: ScrollSource = null
-  let programmaticScrollTarget: HTMLElement | null = null
-  let debounceTimeout: NodeJS.Timeout | null = null
-  let resetSourceTimeout: NodeJS.Timeout | null = null
-
-  /**
-   * Set the scroll source and schedule reset
-   */
-  function setScrollSource(source: ScrollSource, duration: number = 600): void {
-    scrollSource = source
-    
-    if (resetSourceTimeout) clearTimeout(resetSourceTimeout)
-    
-    if (source !== null) {
-      resetSourceTimeout = setTimeout(() => {
-        scrollSource = null
-        programmaticScrollTarget = null
-      }, duration)
-    }
-  }
-
-  /**
-   * Detect if a scroll event is user-initiated on a specific element
-   */
-  function isUserScroll(element: HTMLElement): boolean {
-    // If we're in programmatic mode and this is the target, it's not user scroll
-    if (scrollSource === "programmatic" && programmaticScrollTarget === element) {
-      return false
-    }
-    
-    // If scroll source is already set to the other panel, this is programmatic
-    if (scrollSource === "pdf" && element === sidebar) return false
-    if (scrollSource === "sidebar" && element === pdfContainer) return false
-    
-    // Otherwise, it's a user scroll
-    return true
-  }
-
-  // Track user interaction to detect scroll intent
-  let pdfUserInteracting = false
-  let sidebarUserInteracting = false
-
-  pdfContainer.addEventListener("mouseenter", () => { pdfUserInteracting = true })
-  pdfContainer.addEventListener("mouseleave", () => { pdfUserInteracting = false })
-  sidebar.addEventListener("mouseenter", () => { sidebarUserInteracting = true })
-  sidebar.addEventListener("mouseleave", () => { sidebarUserInteracting = false })
-
-  // Debounced scroll handlers
-  const onPdfScroll = () => {
-    if (!isUserScroll(pdfContainer)) return
-
-    // Set source if this is user-initiated
-    if (pdfUserInteracting && scrollSource !== "pdf") {
-      setScrollSource("pdf")
-    }
-
-    // Clear existing timeout
-    if (debounceTimeout) clearTimeout(debounceTimeout)
-
-    // Debounce to wait for scroll to settle
-    debounceTimeout = setTimeout(() => {
-      if (scrollSource !== "pdf") return
-
-      const scrollTop = pdfContainer.scrollTop
-      const scrollCenter = scrollTop + pdfContainer.clientHeight / 2
-
-      let closestAnnotation = null
-      let minDistance = Infinity
-
-      annotationItems.forEach((ann) => {
-        const pdfY = parseFloat(ann.getAttribute("data-pdf-y") || "0")
-        if (pdfY > 0) {
-          const distance = Math.abs(pdfY - scrollCenter)
-          if (distance < minDistance) {
-            minDistance = distance
-            closestAnnotation = ann
-          }
-        }
-      })
-
-      if (closestAnnotation) {
-        syncToAnnotation(closestAnnotation)
-      }
-    }, 150)
-  }
-
-  // When annotations scroll, find closest annotation and center its highlight in PDF
-  const onAnnotationScroll = () => {
-    if (!isUserScroll(sidebar)) return
-
-    // Set source if this is user-initiated
-    if (sidebarUserInteracting && scrollSource !== "sidebar") {
-      setScrollSource("sidebar")
-    }
-
-    // Clear existing timeout
-    if (debounceTimeout) clearTimeout(debounceTimeout)
-
-    // Debounce to wait for scroll to settle
-    debounceTimeout = setTimeout(() => {
-      if (scrollSource !== "sidebar") return
-
-      const scrollTop = sidebar.scrollTop
-      const scrollCenter = scrollTop + sidebar.clientHeight / 2
-
-      let closestAnnotation: HTMLElement | null = null
-      let minDistance = Infinity
-
-      annotationItems.forEach((ann) => {
-        const annotationTop = ann.offsetTop
-        const annotationCenter = annotationTop + ann.clientHeight / 2
-        const distance = Math.abs(annotationCenter - scrollCenter)
-
-        if (distance < minDistance) {
-          minDistance = distance
-          closestAnnotation = ann
-        }
-      })
-
-      if (closestAnnotation) {
-        syncToPDF(closestAnnotation)
-      }
-    }, 150)
-  }
-
   /**
-   * Sync sidebar to match PDF scroll position
-   */
-  function syncToAnnotation(activeAnnotation: HTMLElement): void {
-    updateActiveAnnotation(activeAnnotation)
-
-    // Scroll annotation into center view
-    setScrollSource("programmatic", 600)
-    programmaticScrollTarget = sidebar
-
-    const annotationTop = activeAnnotation.offsetTop
-    const targetScroll =
-      annotationTop - sidebar.clientHeight / 2 + activeAnnotation.clientHeight / 2
-    sidebar.scrollTo({ top: targetScroll, behavior: "smooth" })
-  }
-
-  /**
-   * Sync PDF to match sidebar scroll position
-   */
-  function syncToPDF(activeAnnotation: HTMLElement): void {
-    updateActiveAnnotation(activeAnnotation)
-
-    const pdfY = parseFloat(activeAnnotation.getAttribute("data-pdf-y") || "0")
-    if (pdfY > 0) {
-      setScrollSource("programmatic", 600)
-      programmaticScrollTarget = pdfContainer
-
-      const targetScroll = pdfY - pdfContainer.clientHeight / 2
-      pdfContainer.scrollTo({ top: targetScroll, behavior: "smooth" })
-    }
-  }
-
-  /**
-   * Update which annotation is marked as active and render highlights
+   * Update which annotation is marked as active and highlight accordingly
    */
   function updateActiveAnnotation(activeAnnotation: HTMLElement): void {
     // Mark as active
@@ -271,34 +108,56 @@ export function setupScrollSync(viewer: Element): void {
       }
     })
 
-    // Render highlight for active annotation
+    // Update active highlights
     const annotationId = activeAnnotation.getAttribute("data-annotation-id")
-    const annotationData = window.annotationsData?.find((a) => a.id === annotationId)
-    if (annotationData) {
-      window.renderHighlights(annotationData)
+    if (annotationId && window.setActiveHighlight) {
+      window.setActiveHighlight(annotationId)
     }
   }
 
-  pdfContainer.addEventListener("scroll", onPdfScroll)
-  sidebar.addEventListener("scroll", onAnnotationScroll)
-
   // Click annotation to scroll to its position in PDF
   annotationItems.forEach((annotation) => {
     annotation.addEventListener("click", () => {
       const pdfY = parseFloat(annotation.getAttribute("data-pdf-y") || "0")
       if (pdfY > 0) {
-        setScrollSource("programmatic", 600)
-        programmaticScrollTarget = pdfContainer
-
-        const scrollTarget = pdfY - pdfContainer.clientHeight / 2
+        // Scroll to top of highlight with small offset for better visibility
+        const scrollTarget = pdfY - 16
         pdfContainer.scrollTo({ top: scrollTarget, behavior: "smooth" })
 
         updateActiveAnnotation(annotation)
       }
     })
   })
 
-  // Initial update
-  setScrollSource("pdf", 100)
-  setTimeout(() => onPdfScroll(), 50)
+  // Click highlight to scroll to its annotation in sidebar
+  // Use event delegation on the PDF container since highlights are created dynamically
+  pdfContainer.addEventListener("click", (event) => {
+    const target = event.target as HTMLElement
+    if (target.classList.contains("pdf-text-highlight")) {
+      const annotationId = target.getAttribute("data-annotation-id")
+      const annotation = annotationItems.find(
+        (ann) => ann.getAttribute("data-annotation-id") === annotationId,
+      )
+      
+      if (annotation) {
+        const annotationTop = annotation.offsetTop
+        // Scroll to top of annotation with small offset for better visibility
+        const targetScroll = annotationTop - 16
+        sidebar.scrollTo({ top: targetScroll, behavior: "smooth" })
+
+        updateActiveAnnotation(annotation)
+      }
+    }
+  })
+
+  // Render all highlights initially (after text layers are ready)
+  // Use setTimeout to ensure functions are exposed on window
+  setTimeout(() => {
+    if (window.renderAllHighlights) {
+      console.log("[ScrollSync] Rendering all highlights")
+      window.renderAllHighlights()
+    } else {
+      console.warn("[ScrollSync] window.renderAllHighlights not available")
+    }
+  }, 100)
 }

quartz/components/scripts/annotationViewer/core/highlighting.ts

@@ -1,12 +1,12 @@
 import { Annotation } from "./types"
 
 /**
- * Render highlights for an annotation's quoted text using TextLayer positioning
+ * Render highlights for a single annotation
  */
-export function renderHighlights(annotation: Annotation): void {
-  // Clear existing highlights
-  document.querySelectorAll(".pdf-text-highlight").forEach((el) => el.remove())
-
+function renderAnnotationHighlights(
+  annotation: Annotation,
+  isActive: boolean = false,
+): void {
   if (!annotation.target || annotation.target.length === 0) return
 
   // Find TextPositionSelector
@@ -74,7 +74,8 @@ export function renderHighlights(annotation: Annotation): void {
 
     // Position highlight relative to the text layer (which shares parent with highlight layer)
     const highlight = document.createElement("div")
-    highlight.className = "pdf-text-highlight"
+    highlight.className = isActive ? "pdf-text-highlight active" : "pdf-text-highlight"
+    highlight.setAttribute("data-annotation-id", annotation.id)
     highlight.style.position = "absolute"
     // Use offsetLeft/offsetTop for position (relative to offsetParent)
     highlight.style.left = `${span.offsetLeft}px`
@@ -85,3 +86,44 @@ export function renderHighlights(annotation: Annotation): void {
     highlightLayer.appendChild(highlight)
   }
 }
+
+/**
+ * Render highlights for all annotations at once
+ */
+export function renderAllHighlights(activeAnnotationId?: string): void {
+  // Clear existing highlights
+  document.querySelectorAll(".pdf-text-highlight").forEach((el) => el.remove())
+
+  const annotations = window.annotationsData
+  if (!annotations) return
+
+  // Render each annotation's highlights
+  annotations.forEach((annotation) => {
+    const isActive = annotation.id === activeAnnotationId
+    renderAnnotationHighlights(annotation, isActive)
+  })
+}
+
+/**
+ * Toggle which highlights are marked as active
+ */
+export function setActiveHighlight(annotationId: string): void {
+  const highlights = document.querySelectorAll(".pdf-text-highlight")
+  
+  highlights.forEach((highlight) => {
+    const highlightAnnotationId = highlight.getAttribute("data-annotation-id")
+    if (highlightAnnotationId === annotationId) {
+      highlight.classList.add("active")
+    } else {
+      highlight.classList.remove("active")
+    }
+  })
+}
+
+/**
+ * Legacy function for backward compatibility
+ * @deprecated Use renderAllHighlights() and setActiveHighlight() instead
+ */
+export function renderHighlights(annotation: Annotation): void {
+  renderAllHighlights(annotation.id)
+}

quartz/components/scripts/annotationViewer/core/types.ts

@@ -52,6 +52,8 @@ declare global {
     pdfScale: number
     annotationsData: Annotation[]
     renderHighlights: (annotation: Annotation) => void
+    renderAllHighlights: (activeAnnotationId?: string) => void
+    setActiveHighlight: (annotationId: string) => void
   }
 }
 

quartz/components/scripts/annotationViewer/main.inline.ts

@@ -1,6 +1,6 @@
 import { loadPDFLib, loadAnnotationsData } from "./ui/loader"
 import { initPDFViewer } from "./adapters/lifecycle"
-import { renderHighlights } from "./core/highlighting"
+import { renderHighlights, renderAllHighlights, setActiveHighlight } from "./core/highlighting"
 
 // Wrap in IIFE and handle multiple initialization scenarios
 ;(async () => {
@@ -38,8 +38,10 @@ import { renderHighlights } from "./core/highlighting"
     await initAnnotationViewer()
   }
 
-  // Expose renderHighlights globally for interactive use
+  // Expose highlighting functions globally for interactive use
   window.renderHighlights = renderHighlights
+  window.renderAllHighlights = renderAllHighlights
+  window.setActiveHighlight = setActiveHighlight
 })()
 
 export default ""