your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import type { ContentComponentProps } from '../../types';
3
4 let { item, isEditing }: ContentComponentProps = $props();
5
6 let isVideo = $derived(item.cardData.widgetType === 'video');
7 let projectUrl = $derived(
8 (item.cardData.src || '').replace(/\/widget\/(card|video)\.html.*$/, '')
9 );
10</script>
11
12<iframe
13 src={item.cardData.src}
14 title="Kickstarter widget"
15 frameborder="0"
16 scrolling="no"
17 class={['absolute inset-0 h-full w-full', (!isVideo || isEditing) && 'pointer-events-none']}
18></iframe>
19
20{#if !isVideo && !isEditing}
21 <a href={projectUrl} target="_blank" rel="noopener noreferrer">
22 <div class="absolute inset-0 z-50"></div>
23 <span class="sr-only">Open Kickstarter project</span>
24 </a>
25{/if}