Add original site compatibility back in

sites/svelte.dev/src/lib/search/Search.svelte

@@ -3,8 +3,6 @@
 	import { searching, query } from './stores.js';
 
 	export let q = '';
-
-	$: console.log($searching);
 </script>
 
 <form class="search-container" action="/search">

sites/svelte.dev/src/lib/server/docs/index.js

@@ -290,6 +290,7 @@ export async function read_file(file) {
 export function slugify(title) {
 	return title
 		.toLowerCase()
+		.replace(/'/g, '')
 		.replace(/</g, '')
 		.replace(/>/g, '')
 		.replace(/[^a-z0-9-$]/g, '-')
@@ -336,6 +337,8 @@ function parse({ file, body, code, codespan }) {
 
 			const normalized = slugify(title);
 
+			console.log({ title });
+
 			headings[level - 1] = normalized;
 			headings.length = level;
 

sites/svelte.dev/src/routes/docs/+layout.svelte

@@ -1,14 +1,13 @@
 <script>
 	import { page } from '$app/stores';
 	import Contents from './Contents.svelte';
-	import '@sveltejs/site-kit/styles/code.css';
 
 	/** @type {import('./$types').LayoutServerData}*/
 	export let data;
 </script>
 
 <div class="container">
-	<div class="page content">
+	<div class="page content ">
 		<h1>{data.sections.find((val) => val.path === $page.url.pathname)?.title}</h1>
 		<slot />
 	</div>
@@ -80,10 +79,10 @@
 		height: 0;
 	}
 
-	.content :global(.anchor) {
+	.content :global(a.permalink) {
 		position: absolute;
 		display: block;
-		background: url(../icons/link.svg) 0 50% no-repeat;
+		background: url(/icons/link.svg) 0 50% no-repeat;
 		background-size: 1em 1em;
 		width: 1.4em;
 		height: 1em;
@@ -94,11 +93,11 @@
 		user-select: none;
 	}
 
-	.content :global(h2) :global(.anchor) {
-		bottom: 4rem;
+	.content :global(h2) :global(.permalink) {
+		bottom: 2rem;
 	}
 
-	.content :global(h3) :global(.anchor) {
+	.content :global(h3) :global(.permalink) {
 		bottom: 1rem;
 	}
 
@@ -114,11 +113,7 @@
 		}
 
 		.content :global(.anchor:focus),
-		.content :global(h2):hover :global(.anchor),
-		.content :global(h3):hover :global(.anchor),
-		.content :global(h4):hover :global(.anchor),
-		.content :global(h5):hover :global(.anchor),
-		.content :global(h6):hover :global(.anchor) {
+		.content :global(:where(h2, h3, h4, h5, h6):hover .permalink) {
 			opacity: 1;
 		}
 	}

sites/svelte.dev/src/routes/docs/+page.js

@@ -1,7 +0,0 @@
-import { base } from '$app/paths';
-import { redirect } from '@sveltejs/kit';
-
-/** @type {import('./$types').PageLoad} */
-export async function load() {
-	throw redirect(307, `${base}/docs/introduction`);
-}

sites/svelte.dev/src/routes/docs/+page.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
+	import { redirect } from '@sveltejs/kit';
+	import { goto } from '$app/navigation';
+
+	/** @type {import('./$types').PageData} */
+	export let data;
+
+	function getURlToRedirectTo() {
+		const section = data.sections.find((val) =>
+			$page.url.hash.replace('#', '').startsWith(val.path.split('/').at(-1))
+		);
+
+		if (!section) goto('/docs/introduction');
+
+		// Remove the section name from hash, then redirect to that
+		const hash = $page.url.hash.replace(`#${section.path.split('/').at(-1)}-`, '');
+
+		goto(`${section.path}#${hash}`);
+	}
+
+	onMount(() => {
+		getURlToRedirectTo();
+	});
+</script>

sites/svelte.dev/static/icons/link.svg

@@ -1 +1,19 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#333"><path d="m9 7h-3a2 2 0 0 0 0 10h3"/><path d="m15 7h3a2 2 0 0 1 0 10h-3"/><path d="m7 12h10"/></g></svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<style>
+		path {
+			stroke: #333;
+			fill: none;
+		}
+
+		@media (prefers-color-scheme: dark) {
+			path {
+				stroke: #ccc;
+			}
+		}
+	</style>
+
+	<path d="M9,7L6,7A2 2 0 0 0 6,17L9,17"/>
+	<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
+	<path d="M7,12L17,12"/>
+</svg>