feat: implement view transition functionality

quartz/components/scripts/spa.inline.ts

@@ -1,6 +1,6 @@
 import micromorph from "micromorph"
 import { FullSlug, RelativeURL, getFullSlug, normalizeRelativeURLs } from "../../util/path"
-import { fetchCanonical } from "./util"
+import { fetchCanonical, startViewTransition } from "./util"
 
 // adapted from `micromorph`
 // https://github.com/natemoo-re/micromorph
@@ -102,31 +102,34 @@ async function _navigate(url: URL, isBack: boolean = false) {
   html.body.appendChild(announcer)
 
   // morph body
-  micromorph(document.body, html.body)
+  startViewTransition(() => {
+    micromorph(document.body, html.body)
 
-  // scroll into place and add history
+    // scroll into place and add history
-  if (!isBack) {
+    if (!isBack) {
-    if (url.hash) {
+      if (url.hash) {
-      const el = document.getElementById(decodeURIComponent(url.hash.substring(1)))
+        const el = document.getElementById(decodeURIComponent(url.hash.substring(1)))
-      el?.scrollIntoView()
+        el?.scrollIntoView()
-    } else {
+      } else {
-      window.scrollTo({ top: 0 })
+        window.scrollTo({ top: 0 })
+      }
     }
-  }
 
-  // now, patch head, re-executing scripts
+    // now, patch head, re-executing scripts
-  const elementsToRemove = document.head.querySelectorAll(":not([spa-preserve])")
+    const elementsToRemove = document.head.querySelectorAll(":not([spa-preserve])")
-  elementsToRemove.forEach((el) => el.remove())
+    elementsToRemove.forEach((el) => el.remove())
-  const elementsToAdd = html.head.querySelectorAll(":not([spa-preserve])")
+    const elementsToAdd = html.head.querySelectorAll(":not([spa-preserve])")
-  elementsToAdd.forEach((el) => document.head.appendChild(el))
+    elementsToAdd.forEach((el) => document.head.appendChild(el))
 
-  // delay setting the url until now
+    // delay setting the url until now
-  // at this point everything is loaded so changing the url should resolve to the correct addresses
+    // at this point everything is loaded so changing the url should resolve to the correct addresses
-  if (!isBack) {
+    if (!isBack) {
-    history.pushState({}, "", url)
+      history.pushState({}, "", url)
-  }
+    }
+
+    notifyNav(getFullSlug(window))
+  })
 
-  notifyNav(getFullSlug(window))
   delete announcer.dataset.persist
 }
 

quartz/components/scripts/util.ts

@@ -44,3 +44,12 @@ export async function fetchCanonical(url: URL): Promise<Response> {
   const [_, redirect] = text.match(canonicalRegex) ?? []
   return redirect ? fetch(`${new URL(redirect, url)}`) : res
 }
+
+/**
+ * Wraps a DOM update in a View Transition if supported by the browser.
+ * Falls back to immediate execution if the API is unavailable.
+ * @param callback - The function containing DOM updates to animate
+ */
+export function startViewTransition(callback: () => void): void {
+  document.startViewTransition?.(() => callback()) ?? callback()
+}

quartz/styles/base.scss

@@ -4,6 +4,10 @@
 @use "./syntax.scss";
 @use "./callouts.scss";
 
+::view-transition {
+  pointer-events: none;
+}
+
 html {
   scroll-behavior: smooth;
   text-size-adjust: none;