use marquee card for opengraph

src/components/DeckPreview.tsx

···
 import { CardSpread } from "@/components/CardSpread";
 import { ClientDate } from "@/components/ClientDate";
 import { asRkey, type Rkey } from "@/lib/atproto-client";
-import {
-	getDeckNameWords,
-	isNonCreatureLand,
-	textMatchesDeckTitle,
-} from "@/lib/deck-preview-utils";
+import { getPreviewCardIds } from "@/lib/deck-preview-utils";
 import type { Deck } from "@/lib/deck-types";
 import { didDocumentQueryOptions, extractHandle } from "@/lib/did-to-handle";
 import { formatDisplayName } from "@/lib/format-utils";
···
 		: "";
 	const dateString = deck.updatedAt ?? deck.createdAt;
 
-	const commanders = useMemo(
-		() => deck.cards.filter((c) => c.section === "commander"),
-		[deck.cards],
-	);
+	const hasCommanders = deck.cards.some((c) => c.section === "commander");
 	const mainboardCards = useMemo(
 		() => deck.cards.filter((c) => c.section === "mainboard"),
 		[deck.cards],
 	);
-	const hasCommanders = commanders.length > 0;
 
 	// Load card data for mainboard to filter lands (skip for commander decks)
 	const cardQueries = useQueries({
···
 		})),
 	});
 
-	const deckWords = useMemo(() => getDeckNameWords(deck.name), [deck.name]);
+	const isLoadingCards = cardQueries.some((q) => q.isLoading);
 
-	const isLoadingCards = cardQueries.some((q) => q.isLoading);
+	// Build a lookup map from card queries
+	const cardDataMap = useMemo(() => {
+		const map = new Map<
+			string,
+			{ name?: string; type_line?: string; oracle_text?: string }
+		>();
+		mainboardCards.forEach((c, i) => {
+			const data = cardQueries[i]?.data;
+			if (data) map.set(c.scryfallId, data);
+		});
+		return map;
+	}, [mainboardCards, cardQueries]);
 
 	const previewCardIds = useMemo(() => {
-		if (hasCommanders) {
-			return commanders.slice(0, 3).map((c) => c.scryfallId);
-		}
-
 		// While loading, show top 3 by quantity as placeholders
-		if (isLoadingCards) {
-			return mainboardCards
+		if (isLoadingCards && !hasCommanders) {
+			return [...mainboardCards]
 				.sort((a, b) => b.quantity - a.quantity)
 				.slice(0, 3)
 				.map((c) => c.scryfallId);
 		}
 
-		// Filter lands, sort by quantity (tiebreak by name matching deck title), take top 3
-		const withData = mainboardCards
-			.map((deckCard, i) => ({
-				deckCard,
-				card: cardQueries[i]?.data,
-			}))
-			.filter(({ card }) => card && !isNonCreatureLand(card.type_line));
-
-		return withData
-			.sort((a, b) => {
-				const qtyDiff = b.deckCard.quantity - a.deckCard.quantity;
-				if (qtyDiff !== 0) return qtyDiff;
-				// Tiebreak 1: prefer cards whose name matches deck title
-				const aNameMatch = textMatchesDeckTitle(a.card?.name, deckWords);
-				const bNameMatch = textMatchesDeckTitle(b.card?.name, deckWords);
-				if (aNameMatch && !bNameMatch) return -1;
-				if (bNameMatch && !aNameMatch) return 1;
-				// Tiebreak 2: prefer cards whose type line matches deck title
-				const aTypeMatch = textMatchesDeckTitle(a.card?.type_line, deckWords);
-				const bTypeMatch = textMatchesDeckTitle(b.card?.type_line, deckWords);
-				if (aTypeMatch && !bTypeMatch) return -1;
-				if (bTypeMatch && !aTypeMatch) return 1;
-				// Tiebreak 3: prefer cards whose oracle text matches deck title
-				const aTextMatch = textMatchesDeckTitle(a.card?.oracle_text, deckWords);
-				const bTextMatch = textMatchesDeckTitle(b.card?.oracle_text, deckWords);
-				if (aTextMatch && !bTextMatch) return -1;
-				if (bTextMatch && !aTextMatch) return 1;
-				return 0;
-			})
-			.slice(0, 3)
-			.map(({ deckCard }) => deckCard.scryfallId);
+		return getPreviewCardIds(deck.name, deck.cards, (id) =>
+			cardDataMap.get(id),
+		);
 	}, [
+		deck.name,
+		deck.cards,
+		cardDataMap,
+		isLoadingCards,
 		hasCommanders,
-		commanders,
 		mainboardCards,
-		cardQueries,
-		deckWords,
-		isLoadingCards,
 	]);
 
 	return (

src/lib/deck-preview-utils.ts

···
+import type { DeckCard } from "./deck-types";
+import type { Card } from "./scryfall-types";
+
 /**
  * Irregular plurals relevant to MTG typal deck names.
  * These can't be derived algorithmically.
···
 	const lower = typeLine.toLowerCase();
 	return lower.includes("land") && !lower.includes("creature");
 }
+
+type CardPreviewData = Partial<
+	Pick<Card, "name" | "type_line" | "oracle_text">
+>;
+
+/**
+ * Select the best cards to show in a deck preview.
+ *
+ * For commander decks: returns commanders (up to 3).
+ * For other decks: returns mainboard cards sorted by quantity, with tiebreakers
+ * preferring cards whose name/type/text match the deck title. Filters out lands.
+ *
+ * @param deckName - The deck's name (used for title matching)
+ * @param deckCards - Array of deck cards with scryfallId, quantity, section
+ * @param getCard - Function to look up card data by ID (returns undefined if not found)
+ * @param count - Number of cards to return (default 3)
+ */
+export function getPreviewCardIds(
+	deckName: string,
+	deckCards: DeckCard[],
+	getCard: (id: string) => CardPreviewData | undefined,
+	count = 3,
+): string[] {
+	const commanders = deckCards.filter((c) => c.section === "commander");
+	if (commanders.length > 0) {
+		return commanders.slice(0, count).map((c) => c.scryfallId);
+	}
+
+	const mainboardCards = deckCards.filter((c) => c.section === "mainboard");
+	const deckWords = getDeckNameWords(deckName);
+
+	const withData = mainboardCards
+		.map((deckCard) => ({
+			deckCard,
+			card: getCard(deckCard.scryfallId),
+		}))
+		.filter(({ card }) => card && !isNonCreatureLand(card.type_line));
+
+	return withData
+		.sort((a, b) => {
+			const qtyDiff = b.deckCard.quantity - a.deckCard.quantity;
+			if (qtyDiff !== 0) return qtyDiff;
+			// Tiebreak 1: prefer cards whose name matches deck title
+			const aNameMatch = textMatchesDeckTitle(a.card?.name, deckWords);
+			const bNameMatch = textMatchesDeckTitle(b.card?.name, deckWords);
+			if (aNameMatch && !bNameMatch) return -1;
+			if (bNameMatch && !aNameMatch) return 1;
+			// Tiebreak 2: prefer cards whose type line matches deck title
+			const aTypeMatch = textMatchesDeckTitle(a.card?.type_line, deckWords);
+			const bTypeMatch = textMatchesDeckTitle(b.card?.type_line, deckWords);
+			if (aTypeMatch && !bTypeMatch) return -1;
+			if (bTypeMatch && !aTypeMatch) return 1;
+			// Tiebreak 3: prefer cards whose oracle text matches deck title
+			const aTextMatch = textMatchesDeckTitle(a.card?.oracle_text, deckWords);
+			const bTextMatch = textMatchesDeckTitle(b.card?.oracle_text, deckWords);
+			if (aTextMatch && !bTextMatch) return -1;
+			if (bTextMatch && !aTextMatch) return 1;
+			return 0;
+		})
+		.slice(0, count)
+		.map(({ deckCard }) => deckCard.scryfallId);
+}

src/routes/profile/$did/deck/$rkey/index.tsx

···
 import { prefetchCards } from "@/lib/card-prefetch";
 import { DECK_LIST_NSID } from "@/lib/constellation-client";
 import { prefetchSocialStats } from "@/lib/constellation-queries";
+import { getPreviewCardIds } from "@/lib/deck-preview-utils";
 import { getDeckQueryOptions, useUpdateDeckMutation } from "@/lib/deck-queries";
 import type { Deck, GroupBy, Section, SortBy } from "@/lib/deck-types";
 import {
···
 			socialPromise,
 		]);
 
-		return deck;
+		// Compute featured card for OG image using same logic as deck preview
+		const previewCardIds = getPreviewCardIds(deck.name, deck.cards, (id) => {
+			const queryKey = ["cards", "byId", id];
+			return context.queryClient.getQueryData(queryKey) as
+				| { name?: string; type_line?: string; oracle_text?: string }
+				| undefined;
+		});
+		const featuredCardId = previewCardIds[0] ?? deck.cards[0]?.scryfallId;
+
+		return { deck, featuredCardId };
 	},
-	head: ({ loaderData: deck }) => {
-		if (!deck) {
+	head: ({ loaderData }) => {
+		if (!loaderData) {
 			return { meta: [{ title: "Deck Not Found | DeckBelcher" }] };
 		}
+
+		const { deck, featuredCardId } = loaderData;
 
 		const format = formatDisplayName(deck.format);
 		const title = format
···
 			? `${primerText.slice(0, 150)}${primerText.length > 150 ? "..." : ""}`
 			: `${cardCount} card${cardCount === 1 ? "" : "s"}`;
 
-		// Use first commander's image, or first card if no commanders
-		const commanders = deck.cards.filter((c) => c.section === "commander");
-		const featuredCard = commanders[0] ?? deck.cards[0];
-		const cardImageUrl = featuredCard
-			? getImageUri(featuredCard.scryfallId, "large")
+		const cardImageUrl = featuredCardId
+			? getImageUri(featuredCardId as ScryfallId, "large")
 			: undefined;
 
 		return {