feat: move routes to slugs

web/src/routes/tools/[slug]/+page.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import EmptyState from "$lib/components/EmptyState.svelte";
+	import SchemaToolView from "$lib/components/SchemaToolView.svelte";
+	import { t } from "$lib/i18n/t";
+	import { getPageBySlug, getTool } from "$lib/registry";
+	import { SlidersHorizontal as ToolIcon } from "@lucide/svelte";
+
+	interface Props {
+		data: { slug: string };
+	}
+	let { data }: Props = $props();
+
+	const page = $derived(getPageBySlug(data.slug));
+	const tool = $derived(page ? getTool(page.steps[0].id) : undefined);
+</script>
+
+<svelte:head>
+	<title>easy-png-tools / {page?.title ?? t("toolPage.fallbackTitle")}</title>
+	<meta name="robots" content="noindex, nofollow" />
+</svelte:head>
+
+{#if !page || !tool}
+	<div class="notfound">
+		<EmptyState
+			title={t("errors.notFound")}
+			description={t("errors.pageUnknown", { slug: data.slug })}
+			icon={ToolIcon}
+		/>
+	</div>
+{:else}
+	<SchemaToolView {page} {tool} />
+{/if}
+
+<style>
+	.notfound {
+		max-width: var(--size-content-max-wide);
+		margin: 0 auto;
+		padding: var(--space-page-top)
+			clamp(var(--space-xxl), 4vw, var(--space-page-bottom))
+			var(--space-page-bottom);
+	}
+</style>

web/src/routes/tools/[slug]/+page.ts

@@ -0,0 +1,11 @@
+import { PAGES } from "$lib/registry";
+
+export const prerender = true;
+
+export function entries() {
+	return PAGES.map((page) => ({ slug: page.slug }));
+}
+
+export function load({ params }: { params: { slug: string } }) {
+	return { slug: params.slug };
+}