From 563ab4aaaf8e680968a67e02c3659736fbec0cf7 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Tue, 06 Aug 2024 01:49:20 +0000
Subject: [PATCH] docs: update node version in hosting docs

---
 quartz/components/scripts/popover.inline.ts |  103 ++++++++++++++++++++++++++++++---------------------
 1 files changed, 60 insertions(+), 43 deletions(-)

diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index 666371b..49f4382 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -1,34 +1,19 @@
 import { computePosition, flip, inline, shift } from "@floating-ui/dom"
-
-// from micromorph/src/utils.ts
-// https://github.com/natemoo-re/micromorph/blob/main/src/utils.ts#L5
-export function normalizeRelativeURLs(
-  el: Element | Document,
-  base: string | URL
-) {
-  const update = (el: Element, attr: string, base: string | URL) => {
-    el.setAttribute(attr, new URL(el.getAttribute(attr)!, base).pathname)
-  }
-
-  el.querySelectorAll('[href^="./"], [href^="../"]').forEach((item) =>
-    update(item, 'href', base)
-  )
-
-  el.querySelectorAll('[src^="./"], [src^="../"]').forEach((item) =>
-    update(item, 'src', base)
-  )
-}
+import { normalizeRelativeURLs } from "../../util/path"
 
 const p = new DOMParser()
-async function mouseEnterHandler(this: HTMLLinkElement, { clientX, clientY }: { clientX: number, clientY: number }) {
+async function mouseEnterHandler(
+  this: HTMLAnchorElement,
+  { clientX, clientY }: { clientX: number; clientY: number },
+) {
   const link = this
+  if (link.dataset.noPopover === "true") {
+    return
+  }
+
   async function setPosition(popoverElement: HTMLElement) {
     const { x, y } = await computePosition(link, popoverElement, {
-      middleware: [
-        inline({ x: clientX, y: clientY }),
-        shift(),
-        flip()
-      ]
+      middleware: [inline({ x: clientX, y: clientY }), shift(), flip()],
     })
     Object.assign(popoverElement.style, {
       left: `${x}px`,
@@ -36,8 +21,11 @@
     })
   }
 
+  const hasAlreadyBeenFetched = () =>
+    [...link.children].some((child) => child.classList.contains("popover"))
+
   // dont refetch if there's already a popover
-  if ([...link.children].some(child => child.classList.contains("popover"))) {
+  if (hasAlreadyBeenFetched()) {
     return setPosition(link.lastChild as HTMLElement)
   }
 
@@ -45,30 +33,59 @@
   thisUrl.hash = ""
   thisUrl.search = ""
   const targetUrl = new URL(link.href)
-  const hash = targetUrl.hash
+  const hash = decodeURIComponent(targetUrl.hash)
   targetUrl.hash = ""
   targetUrl.search = ""
-  // prevent hover of the same page
-  if (thisUrl.toString() === targetUrl.toString()) return
 
-  const contents = await fetch(`${targetUrl}`)
-    .then((res) => res.text())
-    .catch((err) => {
-      console.error(err)
-    })
+  const response = await fetch(`${targetUrl}`).catch((err) => {
+    console.error(err)
+  })
 
-  if (!contents) return
-  const html = p.parseFromString(contents, "text/html")
-  normalizeRelativeURLs(html, targetUrl)
-  const elts = [...html.getElementsByClassName("popover-hint")]
-  if (elts.length === 0) return
+  // bailout if another popover exists
+  if (hasAlreadyBeenFetched()) {
+    return
+  }
+
+  if (!response) return
+  const [contentType] = response.headers.get("Content-Type")!.split(";")
+  const [contentTypeCategory, typeInfo] = contentType.split("/")
 
   const popoverElement = document.createElement("div")
   popoverElement.classList.add("popover")
   const popoverInner = document.createElement("div")
   popoverInner.classList.add("popover-inner")
   popoverElement.appendChild(popoverInner)
-  elts.forEach(elt => popoverInner.appendChild(elt))
+
+  popoverInner.dataset.contentType = contentType ?? undefined
+
+  switch (contentTypeCategory) {
+    case "image":
+      const img = document.createElement("img")
+      img.src = targetUrl.toString()
+      img.alt = targetUrl.pathname
+
+      popoverInner.appendChild(img)
+      break
+    case "application":
+      switch (typeInfo) {
+        case "pdf":
+          const pdf = document.createElement("iframe")
+          pdf.src = targetUrl.toString()
+          popoverInner.appendChild(pdf)
+          break
+        default:
+          break
+      }
+      break
+    default:
+      const contents = await response.text()
+      const html = p.parseFromString(contents, "text/html")
+      normalizeRelativeURLs(html, targetUrl)
+      const elts = [...html.getElementsByClassName("popover-hint")]
+      if (elts.length === 0) return
+
+      elts.forEach((elt) => popoverInner.appendChild(elt))
+  }
 
   setPosition(popoverElement)
   link.appendChild(popoverElement)
@@ -77,15 +94,15 @@
     const heading = popoverInner.querySelector(hash) as HTMLElement | null
     if (heading) {
       // leave ~12px of buffer when scrolling to a heading
-      popoverInner.scroll({ top: heading.offsetTop - 12, behavior: 'instant' })
+      popoverInner.scroll({ top: heading.offsetTop - 12, behavior: "instant" })
     }
   }
 }
 
 document.addEventListener("nav", () => {
-  const links = [...document.getElementsByClassName("internal")] as HTMLLinkElement[]
+  const links = [...document.getElementsByClassName("internal")] as HTMLAnchorElement[]
   for (const link of links) {
-    link.removeEventListener("mouseenter", mouseEnterHandler)
     link.addEventListener("mouseenter", mouseEnterHandler)
+    window.addCleanup(() => link.removeEventListener("mouseenter", mouseEnterHandler))
   }
 })

--
Gitblit v1.10.0