From 5871d63431a5cd96ff84203750c07a783a567b1c Mon Sep 17 00:00:00 2001
From: Mishig <dmishig@gmail.com>
Date: Fri, 3 Jul 2026 23:04:30 +0200
Subject: [PATCH] fix(kit): keep shorthand doc URLs in the address bar on
 client-side nav

After #792, clicking a shorthand doc link (/docs/lib/page) canonicalized
the address bar to the full /docs/lib/version/lang/page URL. Restore the
old svelteKitCustomClient behavior: SvelteKit still resolves the expanded
path internally (partial loading), but once the navigation completes the
history entry is rewritten back to the shorthand the user clicked. The
anchor's href is also restored right after SvelteKit reads it, and
modified clicks (cmd/ctrl/middle) are left untouched so new tabs open the
shorthand URL.

Caveat: back/forward onto a shorthand history entry falls back to a full
page load (the server serves the same page there).

Verified with a browser test on the built accelerate docs: shorthand
click SPA-navigates AND the address bar shows /docs/accelerate/quicktour.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 kit/src/routes/+layout.svelte | 49 +++++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/kit/src/routes/+layout.svelte b/kit/src/routes/+layout.svelte
index 1d2bf193..171d0955 100644
--- a/kit/src/routes/+layout.svelte
+++ b/kit/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 
 <script lang="ts">
 	import { onMount } from "svelte";
+	import { afterNavigate } from "$app/navigation";
 	import { base } from "$app/paths";
 	import { getHfDocFullPath } from "$lib/hfDocPaths.js";
 	import type { RawChapter } from "./endpoints/toc/+server";
@@ -9,23 +10,55 @@
 	export let data;
 	$: toc = (data.toc ?? []) as RawChapter[];
 
+	/**
+	 * Shorthand hf doc links (e.g. /docs/lib/page) should partial-load like
+	 * internal routes while keeping the shorthand URL in the address bar —
+	 * the behavior of the old `svelteKitCustomClient` fork.
+	 * SvelteKit treats URLs that don't start with the app's base path as
+	 * external before it consults the `reroute` hook (src/hooks.js), so:
+	 *  1. on click, momentarily expand the anchor's pathname to the full path
+	 *     so SvelteKit's own click handler resolves it as an internal route,
+	 *  2. after the navigation completes, restore the shorthand URL in the
+	 *     history entry.
+	 * Caveat: going back/forward onto a shorthand history entry falls back to
+	 * a full page load (the server serves the same page at shorthand URLs).
+	 */
+	let pendingShorthand: { href: string; fullPath: string } | null = null;
+
 	onMount(() => {
-		// Expand shorthand hf doc links (e.g. /docs/lib/page) to the full path
-		// before SvelteKit's own click handler reads the anchor, so they are
-		// treated as internal routes (partial loading instead of a full reload).
-		// Complements the `reroute` hook (src/hooks.js), which is not consulted
-		// for URLs that don't start with the app's base path.
 		const canonicalizeDocLinks = (event: MouseEvent) => {
+			// same conditions as SvelteKit's click handler: plain left-clicks only,
+			// so that e.g. cmd/ctrl-click opens the shorthand URL in a new tab
+			if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+				return;
+			}
 			const anchor = (event.target as Element | null)?.closest("a");
-			if (!anchor || anchor.origin !== location.origin) return;
-			const fullPath = getHfDocFullPath(anchor.pathname);
-			if (fullPath && fullPath !== anchor.pathname) {
+			if (!anchor || anchor.origin !== location.origin || anchor.target) return;
+			const shorthandPathname = anchor.pathname;
+			const fullPath = getHfDocFullPath(shorthandPathname);
+			if (fullPath && fullPath !== shorthandPathname) {
+				pendingShorthand = { href: anchor.href, fullPath };
 				anchor.pathname = fullPath;
+				// restore the DOM link once SvelteKit's handler has read it
+				setTimeout(() => {
+					anchor.pathname = shorthandPathname;
+				});
 			}
 		};
 		document.addEventListener("click", canonicalizeDocLinks, { capture: true });
 		return () => document.removeEventListener("click", canonicalizeDocLinks, { capture: true });
 	});
+
+	afterNavigate((navigation) => {
+		if (
+			pendingShorthand &&
+			navigation.type === "link" &&
+			navigation.to?.url.pathname === pendingShorthand.fullPath
+		) {
+			history.replaceState(history.state, "", pendingShorthand.href);
+		}
+		pendingShorthand = null;
+	});
 </script>
 
 {#if !import.meta.env.DEV}