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,6 +102,7 @@ async function _navigate(url: URL, isBack: boolean = false) {
   html.body.appendChild(announcer)
 
   // morph body
+  startViewTransition(() => {
     micromorph(document.body, html.body)
 
     // scroll into place and add history
@@ -127,6 +128,8 @@ async function _navigate(url: URL, isBack: boolean = false) {
     }
 
     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;