Skip to content

fix: better hash normalization for redirects #620

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 25, 2024
Merged

fix: better hash normalization for redirects #620

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ce13f93
fix: better hash normalization for redirects
benmccann Oct 24, 2024
7da4f02
fix/simplify
Rich-Harris Oct 25, 2024
6004e83
actually it looks like we do need this
Rich-Harris Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 16 additions & 20 deletions apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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>
Expand Down
Loading