flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import type { Item } from '$lib/types';
3 import { onMount } from 'svelte';
4 import { BlueskyPost } from '../../components/bluesky-post';
5 import { getAdditionalUserData } from '$lib/website/context';
6 import { getPosts, resolveHandle } from '$lib/atproto/methods';
7 import type { PostView } from '@atcute/bluesky/types/app/feed/defs';
8 import type { Handle } from '@atcute/lexicons';
9 import { isDid } from '@atcute/lexicons/syntax';
10 import { resolveUri } from './utils';
11
12 let { item }: { item: Item } = $props();
13
14 const data = getAdditionalUserData();
15 let uri = $derived(item.cardData.uri as string);
16
17 // svelte-ignore state_referenced_locally
18 let post = $state((data['blueskyPost'] as Record<string, PostView>)?.[uri]);
19
20 onMount(async () => {
21 if (!post && uri) {
22 // Resolve handle to DID if needed
23 const resolvedUri = await resolveUri(uri);
24
25 const posts = await getPosts({ uris: [resolvedUri] });
26 if (posts && posts.length > 0) {
27 post = posts[0];
28 // Store in data for future use (keyed by resolved URI)
29 if (!data['blueskyPost']) {
30 data['blueskyPost'] = {};
31 }
32 (data['blueskyPost'] as Record<string, PostView>)[resolvedUri] = post;
33 // Also store under original URI for lookup
34 (data['blueskyPost'] as Record<string, PostView>)[uri] = post;
35 }
36 }
37 });
38</script>
39
40<div class="flex h-full flex-col justify-center-safe overflow-y-scroll p-4">
41 {#if post}
42 <BlueskyPost showLogo feedViewPost={post}></BlueskyPost>
43 <div class="h-4 w-full"></div>
44 {:else}
45 <p class="text-base-600 dark:text-base-400 text-center">A bluesky post will appear here</p>
46 {/if}
47</div>