Merge pull request #134 from flo-bit/product-hunt

add product hunt card

src/lib/cards/LatestBlueskyPostCard/LatestBlueskyPostCard.svelte

···
 
 <div class="flex h-full flex-col justify-center-safe overflow-y-scroll p-4">
 	{#if feed?.[0]?.post}
-		<div class={[item.cardData.label ? "pt-8" : '']}>
+		<div class={[item.cardData.label ? 'pt-8' : '']}>
 			<BlueskyPost showLogo feedViewPost={feed?.[0].post}></BlueskyPost>
 		</div>
 		<div class="h-4 w-full"></div>

src/lib/cards/LatestBlueskyPostCard/index.ts

···
 		card.h = 4;
 		card.mobileH = 8;
 
-		card.cardData.label = "";
+		card.cardData.label = '';
 	},
 	loadData: async (items, { did }) => {
 		const authorFeed = await getAuthorFeed({ did, filter: 'posts_no_replies', limit: 2 });

src/lib/cards/ProductHuntCard/CreateProductHuntCardModal.svelte

···
+<script lang="ts">
+	import { Alert, Button, Modal, Subheading } from '@foxui/core';
+	import type { CreationModalComponentProps } from '../types';
+
+	let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
+
+	let embedCode = $state('');
+	let errorMessage = $state('');
+
+	function parseEmbedCode(code: string): {
+		imageSrc: string | null;
+		linkHref: string | null;
+	} {
+		const normalized = code.replaceAll('&amp;', '&');
+
+		const srcMatch = normalized.match(/src="(https:\/\/api\.producthunt\.com\/[^"]+)"/);
+		const imageSrc = srcMatch ? srcMatch[1] : null;
+
+		const hrefMatch = normalized.match(/href="(https:\/\/www\.producthunt\.com\/[^"]+)"/);
+		const linkHref = hrefMatch ? hrefMatch[1] : null;
+
+		return { imageSrc, linkHref };
+	}
+
+	function validate(): boolean {
+		errorMessage = '';
+
+		const { imageSrc, linkHref } = parseEmbedCode(embedCode);
+
+		if (!linkHref) {
+			errorMessage = 'Could not find a Product Hunt link in the embed code';
+			return false;
+		}
+
+		if (!imageSrc) {
+			errorMessage = 'Could not find a Product Hunt badge image in the embed code';
+			return false;
+		}
+
+		item.cardData.imageSrc = imageSrc;
+		item.cardData.linkHref = linkHref;
+
+		return true;
+	}
+</script>
+
+<Modal open={true} closeButton={false}>
+	<Subheading>Paste Product Hunt Embed Code</Subheading>
+
+	<textarea
+		bind:value={embedCode}
+		placeholder="<a href=&quot;https://www.producthunt.com/posts/your-product?..."
+		rows={5}
+		class="bg-base-100 dark:bg-base-800 border-base-300 dark:border-base-700 text-base-900 dark:text-base-100 w-full rounded-xl border px-3 py-2 font-mono text-sm"
+	></textarea>
+
+	{#if errorMessage}
+		<Alert type="error" title="Invalid embed code"><span>{errorMessage}</span></Alert>
+	{/if}
+
+	<div class="mt-4 flex justify-end gap-2">
+		<Button onclick={oncancel} variant="ghost">Cancel</Button>
+		<Button
+			onclick={() => {
+				if (validate()) oncreate();
+			}}
+		>
+			Create
+		</Button>
+	</div>
+</Modal>

src/lib/cards/ProductHuntCard/ProductHuntCard.svelte

···
+<script lang="ts">
+	import { getCanEdit } from '$lib/website/context';
+	import type { ContentComponentProps } from '../types';
+
+	let { item }: ContentComponentProps = $props();
+
+	let isEditing = getCanEdit();
+
+	let linkHref = $derived(item.cardData.linkHref || '');
+	let lightImageSrc = $derived(
+		(item.cardData.imageSrc || '').replace(/theme=(light|dark|neutral)/, 'theme=light')
+	);
+	let darkImageSrc = $derived(
+		(item.cardData.imageSrc || '').replace(/theme=(light|dark|neutral)/, 'theme=dark')
+	);
+</script>
+
+<a
+	href={linkHref}
+	target="_blank"
+	rel="noopener noreferrer"
+	class={[
+		'flex h-full w-full items-center justify-center p-4',
+		isEditing() && 'pointer-events-none'
+	]}
+>
+	<img
+		src={lightImageSrc}
+		alt="Product Hunt badge"
+		class="max-h-full max-w-full object-contain dark:hidden"
+	/>
+	<img
+		src={darkImageSrc}
+		alt="Product Hunt badge"
+		class="hidden max-h-full max-w-full object-contain dark:block"
+	/>
+</a>

src/lib/cards/ProductHuntCard/index.ts

···
+import type { CardDefinition } from '../types';
+import CreateProductHuntCardModal from './CreateProductHuntCardModal.svelte';
+import ProductHuntCard from './ProductHuntCard.svelte';
+
+const cardType = 'producthunt';
+
+export const ProductHuntCardDefinition = {
+	type: cardType,
+	contentComponent: ProductHuntCard,
+	creationModalComponent: CreateProductHuntCardModal,
+	createNew: (item) => {
+		item.cardType = cardType;
+		item.cardData = {};
+		item.w = 4;
+		item.h = 2;
+		item.mobileW = 8;
+		item.mobileH = 2;
+	},
+
+	defaultColor: 'transparent',
+
+	allowSetColor: false,
+
+	minH: 1,
+
+	name: 'Product Hunt',
+	keywords: ['producthunt', 'product', 'launch', 'badge'],
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M13.6 12h-3.2V8h3.2a2 2 0 1 1 0 4ZM12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0Zm1.6 14.4h-3.2V18H8V6h5.6a4.4 4.4 0 0 1 0 8.8h0v-.4Z"/></svg>`
+} as CardDefinition & { type: typeof cardType };

src/lib/cards/index.ts

···
 import { GuestbookCardDefinition } from './GuestbookCard';
 import { FriendsCardDefinition } from './FriendsCard';
 import { GitHubContributorsCardDefinition } from './GitHubContributorsCard';
+import { ProductHuntCardDefinition } from './ProductHuntCard';
 // import { Model3DCardDefinition } from './Model3DCard';
 
 export const AllCardDefinitions = [
···
 	AppleMusicCardDefinition,
 	// Model3DCardDefinition
 	FriendsCardDefinition,
-	GitHubContributorsCardDefinition
+	GitHubContributorsCardDefinition,
+	ProductHuntCardDefinition
 ] as const;
 
 export const CardDefinitionsByType = AllCardDefinitions.reduce(