better display of add-ons

Author: benmccann

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

@@ -36,7 +36,12 @@ const SV_ADD_CMD: Record<string, { alias: string; options?: string }> = {
 	'@sveltejs/adapter-netlify': { alias: 'sveltekit-adapter', options: 'adapter:netlify' }
 };
 
-const FEATURED: { title: string; alternative?: string; packages: string[]; weights?: Record<string, number> }[] = [
+const FEATURED: {
+	title: string;
+	alternative?: string;
+	packages: string[];
+	weights?: Record<string, number>;
+}[] = [
 	{
 		title: 'Component libraries',
 		packages: [

apps/svelte.dev/src/lib/server/generated/registry/lucia.json

@@ -1,6 +1,6 @@
 {
 	"name": "lucia",
-	"description": "Simple and flexible authentication library.",
+	"description": "A guide for implementing authentication in JavaScript with examples for SvelteKit.",
 	"repo_url": "https://github.com/pilcrowOnPaper/lucia",
 	"authors": ["pilcrowonpaper"],
 	"homepage": "https://github.com/pilcrowOnPaper/lucia#readme",

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

@@ -21,14 +21,21 @@ const arrToPackages = (arr: string[]) => {
 };
 
 // Netflix style page. Send pre-done cards with categories
-const homepage: { title: string; href?: string; alternative?: string; packages: Package[] }[] = [
+const addons: { title: string; href?: string; alternative?: string; packages: Package[] }[] = [
 	{
 		title: 'Svelte CLI add-ons',
 		href: '/docs/cli',
-		packages: arrToPackages(PACKAGES_META.SV_ADD.packages)
+		packages: arrToPackages(PACKAGES_META.SV_ADD.packages).map((pkg) => {
+			pkg.name = pkg.svCmdAlias ?? pkg.name;
+			pkg.homepage = `/docs/cli/${pkg.svCmdAlias}`;
+			delete pkg.repo_url;
+			return pkg;
+		})
 	}
 ];
 
+const homepage: { title: string; href?: string; alternative?: string; packages: Package[] }[] = [];
+
 for (const { packages, title, alternative } of PACKAGES_META.FEATURED) {
 	homepage.push({
 		title,
@@ -40,6 +47,7 @@ for (const { packages, title, alternative } of PACKAGES_META.FEATURED) {
 export async function load() {
 	return {
 		packages: registry,
+		addons,
 		homepage
 	};
 }

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

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

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

@@ -45,18 +45,6 @@
 
 	<p class="description">{pkg.description}</p>
 
-	{#if pkg.svCmdAlias}
-		<span class="sv-cmd">
-			npx sv add {pkg.svCmdAlias}{pkg.svCmdOptions ? `=${pkg.svCmdOptions}` : ''}
-			<a
-				href={`/docs/cli/${pkg.svCmdAlias}`}
-				target="_blank"
-				rel="noreferrer"
-				aria-label="View Svelte CLI docs"
-				data-icon="external-link"
-			></a>
-		</span>
-	{/if}
 	<p class="stats">
 		{#if pkg.downloads}
 			<span title="{pkg.downloads} downloads">
@@ -75,14 +63,16 @@
 		<span style="flex: 1 1 auto"></span>
 
 		<span style="display: flex; gap: 0.75rem">
-			<a
-				href="https://npmjs.org/package/{pkg.name}"
-				target="_blank"
-				rel="noreferrer"
-				data-icon="npm"
-				aria-label="View on npm"
-				onclick={(e) => e.stopPropagation()}
-			></a>
+			{#if !pkg.svCmdAlias}
+				<a
+					href="https://npmjs.org/package/{pkg.name}"
+					target="_blank"
+					rel="noreferrer"
+					data-icon="npm"
+					aria-label="View on npm"
+					onclick={(e) => e.stopPropagation()}
+				></a>
+			{/if}
 
 			{#if pkg.repo_url}
 				<a