flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { Alert, Button, Subheading } from '@foxui/core';
3 import Modal from '$lib/components/modal/Modal.svelte';
4 import type { CreationModalComponentProps } from '../../types';
5
6 let { item = $bindable(), oncreate, oncancel }: CreationModalComponentProps = $props();
7
8 let embedCode = $state('');
9 let errorMessage = $state('');
10
11 function parseEmbedCode(code: string): {
12 imageSrc: string | null;
13 linkHref: string | null;
14 } {
15 const normalized = code.replaceAll('&', '&');
16
17 const srcMatch = normalized.match(/src="(https:\/\/api\.producthunt\.com\/[^"]+)"/);
18 const imageSrc = srcMatch ? srcMatch[1] : null;
19
20 const hrefMatch = normalized.match(/href="(https:\/\/www\.producthunt\.com\/[^"]+)"/);
21 const linkHref = hrefMatch ? hrefMatch[1] : null;
22
23 return { imageSrc, linkHref };
24 }
25
26 function validate(): boolean {
27 errorMessage = '';
28
29 const { imageSrc, linkHref } = parseEmbedCode(embedCode);
30
31 if (!linkHref) {
32 errorMessage = 'Could not find a Product Hunt link in the embed code';
33 return false;
34 }
35
36 if (!imageSrc) {
37 errorMessage = 'Could not find a Product Hunt badge image in the embed code';
38 return false;
39 }
40
41 item.cardData.imageSrc = imageSrc;
42 item.cardData.linkHref = linkHref;
43
44 return true;
45 }
46</script>
47
48<Modal open={true} closeButton={false}>
49 <Subheading>Paste Product Hunt Embed Code</Subheading>
50
51 <textarea
52 bind:value={embedCode}
53 placeholder="<a href="https://www.producthunt.com/posts/your-product?..."
54 rows={5}
55 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"
56 ></textarea>
57
58 {#if errorMessage}
59 <Alert type="error" title="Invalid embed code"><span>{errorMessage}</span></Alert>
60 {/if}
61
62 <div class="mt-4 flex justify-end gap-2">
63 <Button onclick={oncancel} variant="ghost">Cancel</Button>
64 <Button
65 onclick={() => {
66 if (validate()) oncreate();
67 }}
68 >
69 Create
70 </Button>
71 </div>
72</Modal>