Skip to content
34 changes: 34 additions & 0 deletions apps/svelte.dev/src/routes/docs/[...path]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@
import { Text } from '@sveltejs/site-kit/components';
import { legacy_details } from '@sveltejs/site-kit/actions';
import { setupDocsHovers } from '@sveltejs/site-kit/docs';
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();
Expand All @@ -17,6 +20,37 @@
const link = 'docs/' + data.document.file.split('/').slice(2).join('/');
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.replace(/^#/i, '');
if (!hash) return;
const elements = document.querySelectorAll('*[id]');
// if there's an exact match, use that. no need to redirect
// also 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
for (const el of elements) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are we iterating? just use a case-insensitive selector

const heading = document.querySelector(`[id="${id}" i]`);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated to use that, but we still need to iterate. e.g. we have https://svelte.dev/docs/kit/@sveltejs-kit#redirect and https://svelte.dev/docs/kit/@sveltejs-kit#Redirect

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could do this!

document.querySelector(`[id="${id}"]`) ?? document.querySelector(`[id="${id}" i]`);

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

well it turns out that this issue isn't fixable. we need to change one of these ids so that they don't collide: #590

if (el.id === hash) {
return;
}
}
for (const el of elements) {
if (el.id.toLocaleLowerCase() === hash.toLocaleLowerCase()) {
const url = $page.url;
url.hash = el.id;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is it necessary to mutate it? wouldn't you be able to construct the new url and return it without touching the store?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, mostly I wanted to know if I should even be able to. It doesn't seem like I should. I filed a feature request for that: sveltejs/kit#12870. And have updated this to make a copy

return url;
}
}
}
onMount(() => {
const redirect = get_url_to_redirect_to();
if (redirect) {
goto(redirect, { replaceState: true });
}
});
</script>

<svelte:head>
Expand Down
Loading