From a6236d97cf847a88dc2f72450372d440561032ac Mon Sep 17 00:00:00 2001
From: Matt Dunn <55315824+TheRealMattDunn@users.noreply.github.com>
Date: Sun, 20 Aug 2023 02:15:14 +0000
Subject: [PATCH] Adding to Showcase page (#367)
---
quartz/components/scripts/spa.inline.ts | 33 ++++++++++++++++++++++-----------
1 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index c28da28..8475a16 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -1,5 +1,5 @@
import micromorph from "micromorph"
-import { CanonicalSlug, RelativeURL, getCanonicalSlug } from "../../util/path"
+import { FullSlug, RelativeURL, getFullSlug } from "../../util/path"
// adapted from `micromorph`
// https://github.com/natemoo-re/micromorph
@@ -17,7 +17,7 @@
}
return true
}
- } catch (e) { }
+ } catch (e) {}
return false
}
@@ -31,7 +31,7 @@
return { url: new URL(href), scroll: "routerNoscroll" in a.dataset ? false : undefined }
}
-function notifyNav(url: CanonicalSlug) {
+function notifyNav(url: FullSlug) {
const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } })
document.dispatchEvent(event)
}
@@ -46,10 +46,6 @@
})
if (!contents) return
- if (!isBack) {
- history.pushState({}, "", url)
- window.scrollTo({ top: 0 })
- }
const html = p.parseFromString(contents, "text/html")
let title = html.querySelector("title")?.textContent
@@ -65,15 +61,29 @@
announcer.dataset.persist = ""
html.body.appendChild(announcer)
+ // morph body
micromorph(document.body, html.body)
+ // scroll into place and add history
+ if (!isBack) {
+ if (url.hash) {
+ const el = document.getElementById(url.hash.substring(1))
+ el?.scrollIntoView()
+ } else {
+ window.scrollTo({ top: 0 })
+ }
+ }
+
// now, patch head
const elementsToRemove = document.head.querySelectorAll(":not([spa-preserve])")
elementsToRemove.forEach((el) => el.remove())
const elementsToAdd = html.head.querySelectorAll(":not([spa-preserve])")
elementsToAdd.forEach((el) => document.head.appendChild(el))
- notifyNav(getCanonicalSlug(window))
+ // delay setting the url until now
+ // at this point everything is loaded so changing the url should resolve to the correct addresses
+ history.pushState({}, "", url)
+ notifyNav(getFullSlug(window))
delete announcer.dataset.persist
}
@@ -92,8 +102,9 @@
}
})
- window.addEventListener("popstate", () => {
- if (window.location.hash) return
+ window.addEventListener("popstate", (event) => {
+ const { url } = getOpts(event) ?? {}
+ if (window.location.hash && window.location.pathname === url?.pathname) return
try {
navigate(new URL(window.location.toString()), true)
} catch (e) {
@@ -120,7 +131,7 @@
}
createRouter()
-notifyNav(getCanonicalSlug(window))
+notifyNav(getFullSlug(window))
if (!customElements.get("route-announcer")) {
const attrs = {
--
Gitblit v1.10.0