fix: spa shouldn't use popover script directly

Jacky Zhao

2023-11-19 296c1cf83f587706d23ffc2f14962628d0534953

fix: spa shouldn't use popover script directly

 quartz/components/scripts/popover.inline.ts

@@ -1,20 +1,5 @@
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, destination: string | URL) {
  const rebase = (el: Element, attr: string, newBase: string | URL) => {
    const rebased = new URL(el.getAttribute(attr)!, newBase)
    el.setAttribute(attr, rebased.pathname + rebased.hash)
  }

  el.querySelectorAll('[href^="./"], [href^="../"]').forEach((item) =>
    rebase(item, "href", destination),
  )
  el.querySelectorAll('[src^="./"], [src^="../"]').forEach((item) =>
    rebase(item, "src", destination),
  )
}
import { normalizeRelativeURLs } from "../../util/path"

const p = new DOMParser()
async function mouseEnterHandler(

 quartz/components/scripts/spa.inline.ts

@@ -1,10 +1,8 @@
import micromorph from "micromorph"
import { FullSlug, RelativeURL, getFullSlug } from "../../util/path"
import { normalizeRelativeURLs } from "./popover.inline"
import { FullSlug, RelativeURL, getFullSlug, normalizeRelativeURLs } from "../../util/path"

// adapted from `micromorph`
// https://github.com/natemoo-re/micromorph

const NODE_TYPE_ELEMENT = 1
let announcer = document.createElement("route-announcer")
const isElement = (target: EventTarget | null): target is Element =>

 quartz/util/path.ts

@@ -84,6 +84,22 @@
  return res
}

// from micromorph/src/utils.ts
// https://github.com/natemoo-re/micromorph/blob/main/src/utils.ts#L5
export function normalizeRelativeURLs(el: Element | Document, destination: string | URL) {
  const rebase = (el: Element, attr: string, newBase: string | URL) => {
    const rebased = new URL(el.getAttribute(attr)!, newBase)
    el.setAttribute(attr, rebased.pathname + rebased.hash)
  }

  el.querySelectorAll('[href^="./"], [href^="../"]').forEach((item) =>
    rebase(item, "href", destination),
  )
  el.querySelectorAll('[src^="./"], [src^="../"]').forEach((item) =>
    rebase(item, "src", destination),
  )
}

// resolve /a/b/c to ../..
export function pathToRoot(slug: FullSlug): RelativeURL {
  let rootPath = slug