From ecd78b19c1d6d6f70261ce3bc6370ab6d797bcc5 Mon Sep 17 00:00:00 2001
From: Anton Bulakh <him@necauq.ua>
Date: Tue, 24 Dec 2024 02:03:09 +0200
Subject: [PATCH] fix(aliases): Teach SPA and popovers to handle HTML redirects

This makes aliases work great, because even with the resolution fix
from my previous commit they had no popovers and clicking on alias
links caused a full reload.
---
 quartz/components/scripts/popover.inline.ts |  3 ++-
 quartz/components/scripts/spa.inline.ts     |  3 ++-
 quartz/components/scripts/util.ts           | 13 +++++++++++++
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index 49f43820537e6..b01af0e851757 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -1,5 +1,6 @@
 import { computePosition, flip, inline, shift } from "@floating-ui/dom"
 import { normalizeRelativeURLs } from "../../util/path"
+import { fetchCanonical } from "./util"
 
 const p = new DOMParser()
 async function mouseEnterHandler(
@@ -37,7 +38,7 @@ async function mouseEnterHandler(
   targetUrl.hash = ""
   targetUrl.search = ""
 
-  const response = await fetch(`${targetUrl}`).catch((err) => {
+  const response = await fetchCanonical(targetUrl).catch((err) => {
     console.error(err)
   })
 
diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index 1790bcabccebd..b96078eee1bb3 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -1,5 +1,6 @@
 import micromorph from "micromorph"
 import { FullSlug, RelativeURL, getFullSlug, normalizeRelativeURLs } from "../../util/path"
+import { fetchCanonical } from "./util"
 
 // adapted from `micromorph`
 // https://github.com/natemoo-re/micromorph
@@ -45,7 +46,7 @@ window.addCleanup = (fn) => cleanupFns.add(fn)
 let p: DOMParser
 async function navigate(url: URL, isBack: boolean = false) {
   p = p || new DOMParser()
-  const contents = await fetch(`${url}`)
+  const contents = await fetchCanonical(url)
     .then((res) => {
       const contentType = res.headers.get("content-type")
       if (contentType?.startsWith("text/html")) {
diff --git a/quartz/components/scripts/util.ts b/quartz/components/scripts/util.ts
index d0a16c6514d1f..dce173f8db8ea 100644
--- a/quartz/components/scripts/util.ts
+++ b/quartz/components/scripts/util.ts
@@ -24,3 +24,16 @@ export function removeAllChildren(node: HTMLElement) {
     node.removeChild(node.firstChild)
   }
 }
+
+const canonicalRegex = /<link rel="canonical" href="([^"]*)"/
+
+export async function fetchCanonical(url: URL): Promise<Response> {
+  return fetch(`${url}`).then(async (res) => {
+    if (!res.headers.get("content-type")?.startsWith("text/html")) {
+      return res
+    }
+    const text = await res.clone().text()
+    const [_, redirect] = text.match(canonicalRegex) ?? []
+    return redirect ? fetch(redirect) : res
+  })
+}