diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte index 33c63558e5..763e332760 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte +++ b/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; + } } });