Merge branch 'packages-launch-logos' into packages-launch

Author: Rich-Harris

apps/svelte.dev/package.json

@@ -41,6 +41,7 @@
 		"flexsearch": "^0.7.43",
 		"flru": "^1.0.2",
 		"icons": "workspace:*",
+		"logos": "workspace:*",
 		"port-authority": "^2.0.1",
 		"topojson-client": "^3.1.0",
 		"vitest": "^3.2.4",

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

@@ -2,6 +2,7 @@
 	import type { Package } from '$lib/server/content';
 	import { ago } from '$lib/time';
 	import { format_number } from './utils';
+	import { logos } from 'logos';
 
 	type Props = {
 		pkg: Package;
@@ -50,7 +51,9 @@
 
 		<p class="description">{pkg.description}</p>
 
-		{#if !pkg.svAlias}
+		{#if pkg.svAlias}
+			<img class="logo" alt="{pkg.name} logo" src={logos[pkg.svAlias]} />
+		{:else}
 			<p class="stats">
 				{#if pkg.downloads}
 					<span title="{pkg.downloads} downloads">
@@ -212,6 +215,16 @@
 			}
 		}
 
+		.logo {
+			width: 3rem;
+			height: 3rem;
+
+			:root.dark &[alt='drizzle logo'],
+			:root.dark &[alt='paraglide logo'] {
+				filter: invert(1);
+			}
+		}
+
 		.description {
 			font: var(--sk-font-ui-small);
 			color: var(--sk-fg-3);

packages/logos/index.ts

@@ -0,0 +1,11 @@
+const glob = import.meta.glob('./logos/*', {
+	import: 'default',
+	eager: true
+});
+
+export const logos: Record<string, string> = Object.fromEntries(
+	Object.entries(glob).map(([key, value]) => [
+		key.slice('./logos/'.length).replace(/\.(svg|png|jpg)/, ''),
+		value as string
+	])
+);