chore: redirect logic-blocks page (sveltejs#629)

* chore: redirect logic-blocks page * refactor into reusable component * tweak * simplify * simplify --------- Co-authored-by: Rich Harris <[email protected]>
0x8b · Oct 25, 2024 · 5877aed · 5877aed
1 parent 7b942ae
commit 5877aed
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/apps/svelte.dev/src/hooks.server.js b/apps/svelte.dev/src/hooks.server.js
@@ -8,11 +8,10 @@ const mappings = new Map([
 	['/docs/custom-elements-api', '/docs/svelte/custom-elements'],
 	['/docs/element-directives', '/docs/svelte/basic-markup'], // no good mapping for this one
 	['/docs/introduction', '/docs/svelte/overview'],
-	['/docs/logic-blocks', '/docs/svelte/basic-markup'], // no good mapping for this one
 	['/docs/server-side-component-api', '/docs/svelte/legacy-component-api'],
 	['/docs/special-elements', '/docs/svelte/svelte-window'], // no good mapping for this one
 	['/docs/special-tags', '/docs/svelte/basic-markup'],
-	// can't map this, as this is now a redirect to the overview page: ['/docs/svelte', '/docs/svelte/svelte'],
+	// ['/docs/svelte', '/docs/svelte/svelte'], - can't map this. /docs/svelte is now a redirect to the overview page
 	['/docs/svelte-action', '/docs/svelte/svelte-action'],
 	['/docs/svelte-animate', '/docs/svelte/svelte-animate'],
 	['/docs/svelte-compiler', '/docs/svelte/svelte-compiler'],

diff --git a/apps/svelte.dev/src/routes/docs/RemovedPage.svelte b/apps/svelte.dev/src/routes/docs/RemovedPage.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Text } from '@sveltejs/site-kit/components';
+
+	interface Props {
+		docs: Map<string, string[]>;
+	}
+
+	const { docs }: Props = $props();
+
+	$effect(() => {
+		const hash = location.hash.slice(1);
+		if (hash === '') return;
+
+		const new_docs = docs.get(hash);
+		if (new_docs) {
+			goto(new_docs[1], { replaceState: true });
+		}
+	});
+</script>
+
+<svelte:head>
+	<meta name="robots" content="noindex" />
+</svelte:head>
+
+<div class="page">
+	<header>
+		<h1>This page no longer exists</h1>
+	</header>
+
+	<Text>
+		<p>You may be looking for one of the following:</p>
+
+		<ul>
+			{#each docs.values() as [title, href]}
+				<li>
+					<span style="font-weight:bold">{title}</span> is now
+					<a {href}>here</a>
+				</li>
+			{/each}
+		</ul>
+	</Text>
+</div>
+
+<style>
+	.page {
+		padding: var(--sk-page-padding-top) var(--sk-page-padding-side) var(--sk-page-padding-bottom);
+		max-width: var(--sk-page-content-width);
+		box-sizing: content-box;
+		margin: auto;
+	}
+</style>
diff --git a/apps/svelte.dev/src/routes/docs/logic-blocks/+page.svelte b/apps/svelte.dev/src/routes/docs/logic-blocks/+page.svelte
@@ -0,0 +1,12 @@
+<script>
+	import RemovedPage from '../RemovedPage.svelte';
+
+	const docs = new Map([
+		['if', ['{#if ...}', '/docs/svelte/if']],
+		['each', ['{#each ...}', '/docs/svelte/each']],
+		['await', ['{#key ...}', '/docs/svelte/await']],
+		['key', ['{#await ...}', '/docs/svelte/key']]
+	]);
+</script>
+
+<RemovedPage {docs} />