add npmx likes

src/lib/cards/index.ts

···
 import { GitHubContributorsCardDefinition } from './social/GitHubContributorsCard';
 import { ProductHuntCardDefinition } from './social/ProductHuntCard';
 import { KickstarterCardDefinition } from './social/KickstarterCard';
+import { NpmxLikesCardDefinition } from './social/NpmxLikesCard';
 // import { Model3DCardDefinition } from './visual/Model3DCard';
 
 export const AllCardDefinitions = [
···
 	FriendsCardDefinition,
 	GitHubContributorsCardDefinition,
 	ProductHuntCardDefinition,
-	KickstarterCardDefinition
+	KickstarterCardDefinition,
+	NpmxLikesCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(

src/lib/cards/social/NpmxLikesCard/NpmxLikesCard.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
+	import { CardDefinitionsByType } from '../..';
+	import { RelativeTime } from '@foxui/time';
+
+	interface NpmxLike {
+		uri: string;
+		value: {
+			subjectRef: string;
+			createdAt: string;
+		};
+	}
+
+	let { item }: { item: Item } = $props();
+
+	const data = getAdditionalUserData();
+	// svelte-ignore state_referenced_locally
+	let feed = $state(data[item.cardType] as NpmxLike[] | undefined);
+
+	let did = getDidContext();
+	let handle = getHandleContext();
+
+	onMount(async () => {
+		if (feed) return;
+
+		feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
+			did,
+			handle
+		})) as NpmxLike[] | undefined;
+
+		data[item.cardType] = feed;
+	});
+
+	function getPackageName(like: NpmxLike): string {
+		return like.value.subjectRef.split('/package/')[1] ?? like.value.subjectRef;
+	}
+</script>
+
+{#snippet likeItem(like: NpmxLike)}
+	<div class="flex w-full items-center gap-3">
+		<div
+			class="text-accent-500 accent:text-accent-950 flex size-8 shrink-0 items-center justify-center"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="1.5"
+				stroke="currentColor"
+				class="size-5"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
+				/>
+			</svg>
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="inline-flex w-full max-w-full items-baseline justify-between gap-2">
+				<div
+					class="text-accent-500 accent:text-accent-950 min-w-0 flex-1 shrink truncate text-sm font-semibold"
+				>
+					{getPackageName(like)}
+				</div>
+				{#if like.value.createdAt}
+					<div class="text-base-500 dark:text-base-400 accent:text-white/60 shrink-0 text-xs">
+						<RelativeTime date={new Date(like.value.createdAt)} locale="en-US" /> ago
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/snippet}
+
+<div class="z-10 flex h-full w-full flex-col gap-3 overflow-y-scroll p-4">
+	{#if feed && feed.length > 0}
+		{#each feed as like (like.uri)}
+			<a
+				href="https://npmx.dev/package/{getPackageName(like)}"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="w-full"
+			>
+				{@render likeItem(like)}
+			</a>
+		{/each}
+	{:else if feed}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			No liked packages found.
+		</div>
+	{:else}
+		<div
+			class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
+		>
+			Loading likes...
+		</div>
+	{/if}
+</div>

src/lib/cards/social/NpmxLikesCard/index.ts

···
+import type { CardDefinition } from '../../types';
+import { listRecords } from '$lib/atproto';
+import NpmxLikesCard from './NpmxLikesCard.svelte';
+
+export const NpmxLikesCardDefinition = {
+	type: 'npmxLikes',
+	contentComponent: NpmxLikesCard,
+	createNew: (card) => {
+		card.w = 4;
+		card.mobileW = 8;
+		card.h = 3;
+		card.mobileH = 6;
+	},
+	loadData: async (items, { did }) => {
+		const data = await listRecords({
+			did,
+			collection: 'dev.npmx.feed.like',
+			limit: 99
+		});
+
+		return data;
+	},
+	minW: 4,
+	canHaveLabel: true,
+
+	keywords: ['npm', 'package', 'npmx', 'likes'],
+	name: 'npmx Likes',
+
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>`
+} as CardDefinition & { type: 'npmxLikes' };

src/lib/cards/visual/FluidTextCard/FluidTextCard.svelte

···
 		? 'bg-base-50 dark:bg-base-900'
 		: 'bg-black'}"
 >
-	<canvas bind:this={shadowCanvas} class="absolute inset-0.5 h-[calc(100%-4px)] w-[calc(100%-4px)] rounded-[inherit]"></canvas>
-	<canvas bind:this={fluidCanvas} class="absolute inset-0.5 h-[calc(100%-4px)] w-[calc(100%-4px)]"></canvas>
+	<canvas
+		bind:this={shadowCanvas}
+		class="absolute inset-0.5 h-[calc(100%-4px)] w-[calc(100%-4px)] rounded-[inherit]"
+	></canvas>
+	<canvas bind:this={fluidCanvas} class="absolute inset-0.5 h-[calc(100%-4px)] w-[calc(100%-4px)]"
+	></canvas>
 	<canvas bind:this={maskCanvas} class="absolute h-full w-full"></canvas>
 </div>