fix: better hash normalization for redirects (#620)

* fix: better hash normalization for redirects

* fix/simplify

* actually it looks like we do need this

---------

Co-authored-by: Rich Harris <[email protected]>

Author: benmccann

apps/svelte.dev/src/routes/docs/[...path]/+page.svelte

@@ -5,9 +5,8 @@
 	import { onMount } from 'svelte';
 	import OnThisPage from './OnThisPage.svelte';
 	import Breadcrumbs from './Breadcrumbs.svelte';
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
 	import PageControls from '$lib/components/PageControls.svelte';
+	import { goto } from '$app/navigation';
 
 	let { data } = $props();
 
@@ -21,32 +20,29 @@
 		return `https://github.com/sveltejs/${name}/edit/main/documentation/${link}`;
 	});
 
-	// make hash case-insensitive
-	// hash was lowercase in v4 docs and varying case in v5 docs
-	function get_url_to_redirect_to() {
-		const hash = $page.url.hash.slice(1);
-		if (hash === '') return;
+	onMount(() => {
+		// hash was lowercase in v4 docs and varying case in v5 docs
+		const hash = location.hash.slice(1);
 
-		// if there's an exact match, use that. no need to redirect
+		// if there's no hash, or an exact match, no need to redirect
 		// also semi-handles the case where one appears twice with difference casing
 		// e.g. https://svelte.dev/docs/kit/@sveltejs-kit#redirect vs https://svelte.dev/docs/kit/@sveltejs-kit#Redirect
 		// but browsers make it impossible to really do: https://github.com/sveltejs/svelte.dev/issues/590
-		if (document.querySelector(`[id="${hash}"]`)) {
+		if (hash === '' || content.querySelector(`[id="${hash}"]`)) {
 			return;
 		}
 
-		const heading = document.querySelector(`[id="${hash}" i]`);
-		if (heading) {
-			const url = new URL($page.url);
-			url.hash = heading.id;
-			return url;
-		}
-	}
+		const id = hash.toLowerCase().replaceAll(':', '-');
 
-	onMount(() => {
-		const redirect = get_url_to_redirect_to();
-		if (redirect) {
-			goto(redirect, { replaceState: true });
+		for (const heading of content.querySelectorAll('[id]')) {
+			// e.g. we want to redirect progressive-enhancement-use-enhance to Progressive-enhancement-use:enhance
+			if (heading.id.toLowerCase().replaceAll(':', '-') === id) {
+				goto(`#${heading.id}`, {
+					replaceState: true
+				});
+
+				break;
+			}
 		}
 	});
 </script>