chore: add redirects from old URLs (#72)

- hash-based onMount for Svelte 3 docs
- inside handle hook for paths from Svelte 4 docs

closes #56

Author: dummdidumm

apps/svelte.dev/src/hooks.server.js

@@ -1,5 +1,37 @@
+import { redirect } from '@sveltejs/kit';
+
+const mappings = new Map([
+	['/docs/getting-started', '/docs/svelte/getting-started'],
+	['/docs/svelte-components', '/docs/svelte/component-fundamentals'],
+	['/docs/basic-markup', '/docs/svelte/basic-markup'],
+	['/docs/logic-blocks', '/docs/svelte/control-flow'],
+	['/docs/special-tags', '/docs/svelte/basic-markup'], // TODO: find a new home for some of these?
+	['/docs/element-directives', '/docs/svelte/basic-markup'],
+	['/docs/component-directives', '/docs/svelte/component-fundamentals'],
+	['/docs/special-elements', '/docs/svelte/special-elements'],
+	['/docs/svelte-action', '/docs/svelte/svelte-action'],
+	['/docs/svelte-motion', '/docs/svelte/svelte-motion'],
+	['/docs/svelte-store', '/docs/svelte/svelte-store'],
+	['/docs/svelte-transition', '/docs/svelte/svelte-transition'],
+	['/docs/svelte-animate', '/docs/svelte/svelte-animate'],
+	['/docs/svelte-easing', '/docs/svelte/svelte-easing'],
+	['/docs/faq', '/docs/svelte/faq'],
+	['/docs/accessibility-warnings', '/docs/svelte/accessibility-warnings'], // TODO: this doesn't exist yet
+	['/docs/typescript', '/docs/svelte/typescript'],
+	['/docs/custom-elements-api', '/docs/svelte/custom-elements'],
+	['/docs/typescript', '/docs/svelte/typescript']
+]);
+
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
+	// Best effort to redirect from Svelte 4 docs to new docs
+	if (event.url.pathname.startsWith('/docs')) {
+		const destination = mappings.get(event.url.pathname);
+		if (destination) {
+			redirect(307, destination); // TODO make 301 once we're sure
+		}
+	}
+
 	const response = await resolve(event, {
 		preload: ({ type }) => type === 'js' || type === 'css' || type === 'font'
 	});

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

@@ -1,3 +1,61 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+
+	// The old Svelte 3 docs used one giant docs page for everything, with hashes marking sections.
+	// This mapping does a best effort to redirect to the new docs.
+	const mappings = [
+		['before-we-begin', 'overview'],
+		['getting-started', 'getting-started'],
+		['component-format', 'component-fundamentals'],
+		['template-syntax-if', 'control-flow'],
+		['template-syntax-each', 'control-flow'],
+		['template-syntax-await', 'control-flow'],
+		['template-syntax-key', 'control-flow'],
+		['template-syntax-element-directives', 'basic-markup'],
+		['template-syntax-element-directives-bind', 'bindings'],
+		['template-syntax-element-directives-class', 'styles-and-classes'],
+		['template-syntax-element-directives-style', 'styles-and-classes'],
+		['template-syntax-element-directives-use-action', 'actions'],
+		['template-syntax-element-directives-transition-fn', 'transitions-and-animations'],
+		['template-syntax-element-directives-in-fn-out-fn', 'transitions-and-animations'],
+		['template-syntax-element-directives-animate-fn', 'transitions-and-animations'],
+		['template-syntax-component-directives', 'component fundamentals'],
+		['template-syntax-svelte', 'special-elements'],
+		['template-syntax', 'basic-markup'],
+		['run-time-svelte-store', 'svelte-store'],
+		['run-time-svelte-motion', 'svelte-motion'],
+		['run-time-svelte-transition', 'svelte-transition'],
+		['run-time-svelte-animate', 'svelte-animate'],
+		['run-time-svelte-easing', 'svelte-easing'],
+		['run-time-client-side-component-api', 'imperative-component-api'],
+		['run-time-custom-element-api', 'custom-elements'],
+		['run-time-server-side-component-api', 'imperative-component-api'],
+		['run-time-svelte', 'svelte'],
+		['run-time', 'svelte'],
+		['compile-time', 'svelte-compiler'],
+		['accessibility-warnings', 'TODO']
+	];
+
+	function get_url_to_redirect_to() {
+		const hash = $page.url.hash.replace(/^#/i, '');
+
+		if (!hash) return;
+
+		for (const [old_id, new_id] of mappings) {
+			if (hash.startsWith(old_id)) return `/docs/svelte/${new_id}`;
+		}
+	}
+
+	onMount(() => {
+		const redirect = get_url_to_redirect_to();
+		if (redirect) {
+			goto(redirect, { replaceState: true });
+		}
+	});
+</script>
+
 <div class="page">
 	<div>
 		<h2>Svelte</h2>