From ce13f937f7492eed28bd1ffdde837ab912cd08c3 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 24 Oct 2024 10:13:06 -0700 Subject: [PATCH 1/3] fix: better hash normalization for redirects --- .../src/routes/docs/[...path]/+page.svelte | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte index 33c63558e5..7d7870f8f3 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte @@ -35,11 +35,15 @@ return; } - const heading = document.querySelector(`[id="${hash}" i]`); - if (heading) { - const url = new URL($page.url); - url.hash = heading.id; - return url; + const headings = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]'); + const id = hash.toLowerCase(); + for (const heading of headings) { + // e.g. we want to redirect progressive-enhancement-use-enhance to Progressive-enhancement-use:enhance + if (heading.id.toLowerCase().replaceAll(':', '-') === id) { + const url = new URL($page.url); + url.hash = heading.id; + return url; + } } } From 7da4f02c92887c74aca14c16e48a5244690a262a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 24 Oct 2024 21:21:52 -0400 Subject: [PATCH 2/3] fix/simplify --- .../src/routes/docs/[...path]/+page.svelte | 32 ++++++------------- 1 file changed, 10 insertions(+), 22 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte index 7d7870f8f3..901e7fa6f3 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte @@ -5,8 +5,6 @@ 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'; let { data } = $props(); @@ -21,37 +19,27 @@ 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 headings = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]'); - const id = hash.toLowerCase(); - for (const heading of headings) { + const id = hash.toLowerCase().replaceAll(':', '-'); + + 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) { - const url = new URL($page.url); - url.hash = heading.id; - return url; + location.hash = heading.id; + break; } } - } - - onMount(() => { - const redirect = get_url_to_redirect_to(); - if (redirect) { - goto(redirect, { replaceState: true }); - } }); From 6004e837b8c9ae1b676aa301e0f5f9cb198dc8de Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 24 Oct 2024 21:29:09 -0400 Subject: [PATCH 3/3] actually it looks like we do need this --- apps/svelte.dev/src/routes/docs/[...path]/+page.svelte | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte index 901e7fa6f3..763e332760 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/+page.svelte @@ -6,6 +6,7 @@ import OnThisPage from './OnThisPage.svelte'; import Breadcrumbs from './Breadcrumbs.svelte'; import PageControls from '$lib/components/PageControls.svelte'; + import { goto } from '$app/navigation'; let { data } = $props(); @@ -36,7 +37,10 @@ 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) { - location.hash = heading.id; + goto(`#${heading.id}`, { + replaceState: true + }); + break; } }