show some categories as alternatives to sveltekit functionality

Author: benmccann

apps/svelte.dev/src/lib/packages-meta.ts

@@ -36,7 +36,7 @@ const SV_ADD_CMD: Record<string, { alias: string; options?: string }> = {
 	'@sveltejs/adapter-netlify': { alias: 'sveltekit-adapter', options: 'adapter:netlify' }
 };
 
-const FEATURED: { title: string; packages: string[]; weights?: Record<string, number> }[] = [
+const FEATURED: { title: string; alternative?: string; packages: string[]; weights?: Record<string, number> }[] = [
 	{
 		title: 'Component libraries',
 		packages: [
@@ -94,17 +94,6 @@ const FEATURED: { title: string; packages: string[]; weights?: Record<string, nu
 			'phosphor-svelte'
 		]
 	},
-	{
-		title: 'Router',
-		packages: [
-			'@sveltejs/kit',
-			'svelte-routing',
-			'@roxi/routify',
-			'svelte5-router',
-			'svelte-pathfinder',
-			'universal-router'
-		]
-	},
 	{
 		title: 'Data visualization',
 		packages: [
@@ -168,17 +157,6 @@ const FEATURED: { title: string; packages: string[]; weights?: Record<string, nu
 			'svelte-easy-crop'
 		]
 	},
-	{
-		title: 'Data fetching',
-		packages: [
-			'@urql/svelte',
-			'trpc-sveltekit',
-			'sswr',
-			'@tanstack/svelte-query',
-			'@orpc/svelte-query',
-			'houdini'
-		]
-	},
 	{
 		title: 'SEO',
 		packages: ['svelte-meta-tags', '@sveltejs/amp', 'svelte-seo', 'super-sitemap', 'svead']
@@ -217,8 +195,33 @@ const FEATURED: { title: string; packages: string[]; weights?: Record<string, nu
 	// 		'vitest'
 	// 	]
 	// },
+	{
+		title: 'Router',
+		alternative: 'SvelteKit',
+		packages: [
+			'@sveltejs/kit',
+			'svelte-routing',
+			'@roxi/routify',
+			'svelte5-router',
+			'svelte-pathfinder',
+			'universal-router'
+		]
+	},
+	{
+		title: 'Data fetching',
+		alternative: 'SvelteKit remote functions',
+		packages: [
+			'@urql/svelte',
+			'trpc-sveltekit',
+			'sswr',
+			'@tanstack/svelte-query',
+			'@orpc/svelte-query',
+			'houdini'
+		]
+	},
 	{
 		title: 'Forms',
+		alternative: 'SvelteKit forms',
 		packages: ['sveltekit-superforms', '@tanstack/svelte-form', 'formsnap', 'felte']
 	}
 ];

apps/svelte.dev/src/routes/packages/+page.server.ts

@@ -21,17 +21,18 @@ const arrToPackages = (arr: string[]) => {
 };
 
 // Netflix style page. Send pre-done cards with categories
-const homepage: { title: string; href?: string; packages: Package[] }[] = [
+const homepage: { title: string; href?: string; alternative?: string; packages: Package[] }[] = [
 	{
 		title: 'Svelte CLI add-ons',
 		href: '/docs/cli',
 		packages: arrToPackages(PACKAGES_META.SV_ADD.packages)
 	}
 ];
 
-for (const { packages, title } of PACKAGES_META.FEATURED) {
+for (const { packages, title, alternative } of PACKAGES_META.FEATURED) {
 	homepage.push({
 		title,
+		alternative,
 		packages: arrToPackages(packages)
 	});
 }

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

@@ -22,8 +22,8 @@
 
 <div class="page content">
 	<div in:fly={{ y: 20 }}>
-		{#each data.homepage as { title, href, packages }}
-			<Category {title} {href} {packages} />
+		{#each data.homepage as { title, alternative, href, packages }}
+			<Category {title} {alternative} {href} {packages} />
 		{/each}
 	</div>
 </div>

apps/svelte.dev/src/routes/packages/Category.svelte

@@ -8,7 +8,7 @@
 		packages: Package[];
 	}
 
-	let { title, href, packages }: Props = $props();
+	let { title, alternative, href, packages }: Props = $props();
 
 	let content: HTMLElement;
 	let scroller: HTMLElement;
@@ -42,6 +42,9 @@
 			{#if href}
 				(<a {href}>docs</a>)
 			{/if}
+			{#if alternative}
+				(if not using {alternative})
+			{/if}
 		</h2>
 
 		{#if !at_start || !at_end}