category descriptions

Author: benmccann

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

@@ -38,7 +38,7 @@ const SV_ADD_CMD: Record<string, { alias: string; options?: string }> = {
 
 const FEATURED: {
 	title: string;
-	alternative?: string;
+	description?: string;
 	packages: string[];
 	weights?: Record<string, number>;
 }[] = [
@@ -202,7 +202,7 @@ const FEATURED: {
 	// },
 	{
 		title: 'Router',
-		alternative: 'SvelteKit',
+		description: 'SvelteKit is recommended, but here are some alternatives.',
 		packages: [
 			'@sveltejs/kit',
 			'svelte-routing',
@@ -214,7 +214,7 @@ const FEATURED: {
 	},
 	{
 		title: 'Data fetching',
-		alternative: 'SvelteKit remote functions',
+		description: 'SvelteKit remote functions are recommended, but here are some alternatives.',
 		packages: [
 			'@urql/svelte',
 			'trpc-sveltekit',
@@ -226,7 +226,7 @@ const FEATURED: {
 	},
 	{
 		title: 'Forms',
-		alternative: 'SvelteKit forms',
+		description: 'SvelteKit forms are recommended, but here are some alternatives.',
 		packages: ['sveltekit-superforms', '@tanstack/svelte-form', 'formsnap', 'felte']
 	}
 ];

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

@@ -21,10 +21,10 @@ const arrToPackages = (arr: string[]) => {
 };
 
 // Netflix style page. Send pre-done cards with categories
-const addons: { title: string; href?: string; alternative?: string; packages: Package[] }[] = [
+const addons: { title: string; href?: string; description?: string; packages: Package[] }[] = [
 	{
 		title: 'Svelte CLI add-ons',
-		href: '/docs/cli',
+		description: 'sv, the Svelte CLI, lets you instantly add functionality to a new or existing project.',
 		packages: arrToPackages(PACKAGES_META.SV_ADD.packages).map((pkg) => {
 			pkg.name = pkg.svCmdAlias ?? pkg.name;
 			pkg.homepage = `/docs/cli/${pkg.svCmdAlias}`;
@@ -34,12 +34,12 @@ const addons: { title: string; href?: string; alternative?: string; packages: Pa
 	}
 ];
 
-const homepage: { title: string; href?: string; alternative?: string; packages: Package[] }[] = [];
+const homepage: { title: string; href?: string; description?: string; packages: Package[] }[] = [];
 
-for (const { packages, title, alternative } of PACKAGES_META.FEATURED) {
+for (const { packages, title, description } of PACKAGES_META.FEATURED) {
 	homepage.push({
 		title,
-		alternative,
+		description,
 		packages: arrToPackages(packages)
 	});
 }

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

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

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

@@ -6,11 +6,10 @@
 	interface Props {
 		title: string;
 		packages: Package[];
-		alternative?: string;
-		href?: string;
+		description?: string;
 	}
 
-	let { title, alternative, href, packages }: Props = $props();
+	let { title, description, packages }: Props = $props();
 
 	let content: HTMLElement;
 	let scroller: HTMLElement;
@@ -41,12 +40,6 @@
 	<header>
 		<h2>
 			{title}
-			{#if href}
-				(<a {href}>docs</a>)
-			{/if}
-			{#if alternative}
-				(if not using {alternative})
-			{/if}
 		</h2>
 
 		{#if !at_start || !at_end}
@@ -59,6 +52,9 @@
 			</div>
 		{/if}
 	</header>
+	{#if description}
+		<h3>{description}</h3>
+	{/if}
 
 	<div class="wrapper">
 		<!-- we duplicate the DOM for the sake of the gradient effect -
@@ -140,6 +136,11 @@
 		}
 	}
 
+	h3 {
+		font: var(--sk-font-ui-medium);
+		font-size: 1.5rem;
+	}
+
 	.wrapper {
 		position: relative;
 	}