finxol.io
1<script setup lang="ts">
2import type { AppBskyFeedDefs } from "@atcute/bluesky";
3import { getBskyReplies } from "~/util/atproto";
4
5const props = defineProps({
6 cid: {
7 type: String,
8 required: true
9 }
10});
11const { cid } = toRefs(props);
12
13const data = ref(await getBskyReplies(cid.value));
14const err = ref("");
15const post = ref<AppBskyFeedDefs.ThreadViewPost>();
16
17if (data.value.$type === "app.bsky.feed.defs#blockedPost") {
18 err.value = "Post is blocked";
19}
20
21if (data.value.$type === "app.bsky.feed.defs#notFoundPost") {
22 err.value = "Post not found";
23}
24
25if (data.value.$type === "app.bsky.feed.defs#threadViewPost") {
26 console.log(data.value);
27 post.value = data.value as AppBskyFeedDefs.ThreadViewPost;
28}
29</script>
30
31<template>
32 <div class="md:w-[80%] mx-auto mt-16">
33 <div class="flex items-baseline flex-col md:flex-row md:gap-4 mb-2 md:mb-0">
34 <h3 class="font-bold text-xl">Join the conversation!</h3>
35 <div v-if="post" class="flex items-center gap-6">
36 <p class="text-gray-500 text-sm" title="Replies">
37 <Icon name="ri:reply-line" class="-mb-[2px] mr-1" />
38 {{post.post.replyCount}}
39 </p>
40 <p class="text-gray-500 text-sm" title="Likes">
41 <Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />
42 {{post.post.likeCount}}
43 </p>
44 <p class="text-gray-500 text-sm" title="Reposts">
45 <Icon name="bx:repost" class="-mb-[2px] mr-1" />
46 {{post.post.repostCount}}
47 </p>
48 <p class="text-gray-500 text-sm" title="Bookmarks">
49 <Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />
50 {{post.post.bookmarkCount}}
51 </p>
52 </div>
53 </div>
54
55 <div v-if="err">
56 <p class="mt-2 text-gray-700 dark:text-gray-500">
57 {{ err }}
58 </p>
59 </div>
60
61 <p v-if="post" class="text-gray-600 dark:text-gray-500 text-md mb-6">
62 <a class="underline" :href="`https://bsky.app/profile/${post.post.author.handle}/post/${cid}`">Reply on Bluesky</a> to take part in the discussion.
63 </p>
64
65
66 <div v-if="post">
67 <div v-if="post.post.replyCount === 0">
68 <div>No replies yet!</div>
69 </div>
70
71 <BskyPost
72 v-else
73 v-for="reply in post.replies?.filter(reply => reply.$type === 'app.bsky.feed.defs#threadViewPost')"
74 :key="reply.post.cid"
75 :post="reply"
76 :depth="0"
77 />
78 </div>
79 </div>
80</template>