add sv cmd display

Author: jycouet

apps/svelte.dev/src/lib/server/content.ts

@@ -208,6 +208,8 @@ export interface Package {
 	official?: boolean;
 
 	typescript: boolean;
+
+	svCmd?: string;
 }
 
 /**

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

@@ -1,24 +1,32 @@
-import { PACKAGES_META } from './packages-meta';
+import { PACKAGES_META } from '$lib/packages-meta';
 import { registry, type Package } from '$lib/server/content';
 
 export const prerender = false;
 
+const arrToPackages = (arr: string[]) => {
+	return arr
+		.map((name) => {
+			const pkg = registry.find((pkg) => pkg.name === name) ?? null;
+			if (pkg)
+				pkg.svCmd = PACKAGES_META.SV_ADD_CMD[pkg.name as keyof typeof PACKAGES_META.SV_ADD_CMD];
+
+			return pkg;
+		})
+		.filter((v) => Boolean(v)) as Package[];
+};
+
 // Netflix style page. Send pre-done cards with categories
 const homepage_data: { title: string; packages: Package[] }[] = [
 	{
 		title: 'sv add',
-		packages: PACKAGES_META.SV_ADD.packages
-			.map((name) => registry.find((pkg) => pkg.name === name) ?? null)
-			.filter((v) => Boolean(v)) as Package[]
+		packages: arrToPackages(PACKAGES_META.SV_ADD.packages)
 	}
 ];
 
 for (const { packages, title } of PACKAGES_META.FEATURED) {
 	homepage_data.push({
 		title,
-		packages: packages
-			.map((name) => registry.find((pkg) => pkg.name === name) ?? null)
-			.filter((v) => Boolean(v)) as Package[]
+		packages: arrToPackages(packages)
 	});
 }
 

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

@@ -30,6 +30,12 @@
 
 	<p class="description">{pkg.description}</p>
 
+	{#if pkg.svCmd}
+		<div class="sv-cmd">
+			<span data-icon="svelte"></span>
+			<span>{pkg.svCmd}</span>
+		</div>
+	{/if}
 	<p class="stats">
 		{#if pkg.downloads}
 			<span title="{pkg.downloads} downloads">
@@ -199,5 +205,13 @@
 			text-overflow: ellipsis;
 			max-height: 2lh;
 		}
+
+		.sv-cmd {
+			font: var(--sk-font-ui-small);
+			color: var(--sk-fg-3);
+			background: var(--sk-bg-3);
+			padding: 0.5rem;
+			display: inline-block;
+		}
 	}
 </style>