finxol.io
Personal blog
finxol.io
blog
feat: add icons and bsky stats
+54
-19
+53
-18
app/components/BskyComments.vue
+53
-18
app/components/BskyComments.vue
···
28
28
</script>
29
29
30
30
<template>
31
-
<div class="flex items-baseline gap-4 mb-4">
32
-
<h3 class="font-bold text-xl">Join the conversation!</h3>
33
-
<p class="text-gray-500 text-sm">{{post.post.replyCount}} replies</p>
34
-
</div>
31
+
<div class="md:w-[80%] mx-auto mt-16">
32
+
<div class="flex items-baseline gap-4">
33
+
<h3 class="font-bold text-xl">Join the conversation!</h3>
34
+
<p class="text-gray-500 text-sm">
35
+
<Icon name="ri:reply-line" class="-mb-[2px] mr-1" />
36
+
{{post.post.replyCount}}
37
+
</p>
38
+
<p class="text-gray-500 text-sm">
39
+
<Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />
40
+
<span>
41
+
{{post.post.likeCount}}
42
+
</span>
43
+
</p>
44
+
<p class="text-gray-500 text-sm">
45
+
<Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />
46
+
{{post.post.bookmarkCount}}
47
+
</p>
48
+
</div>
35
49
36
-
<div v-if="err">
37
-
<div>{{ err }}</div>
38
-
</div>
50
+
<p class="text-gray-600 text-md mb-6">
51
+
<a class="underline" :href="`https://bsky.app/profile/${post.post.author.handle}/post/${cid}`">Reply on Bluesky</a> to take part in the discussion.
52
+
</p>
39
53
40
-
<div v-if="post">
41
-
<div v-if="post.post.replyCount === 0">
42
-
<div>No replies yet!</div>
54
+
<div v-if="err">
55
+
<div>{{ err }}</div>
43
56
</div>
44
57
45
-
<div v-else v-for="reply in post.replies" class="mt-4">
46
-
<a :href="`https://bsky.app/profile/${reply.post.author.handle}`" class="flex items-center gap-2 text-blue-500 hover:underline w-fit">
47
-
<img :src="reply.post.author.avatar" :alt="reply.post.author.displayName" class="size-8 rounded-full" />
48
-
<span>
49
-
{{ reply.post.author.displayName }}
50
-
</span>
51
-
</a>
52
-
<div class="ml-10">{{ reply.post.record.text }}</div>
58
+
<div v-if="post">
59
+
<div v-if="post.post.replyCount === 0">
60
+
<div>No replies yet!</div>
61
+
</div>
62
+
63
+
<div v-else v-for="reply in post.replies" class="mt-6">
64
+
<a :href="`https://bsky.app/profile/${reply.post.author.handle}`" class="flex items-center gap-2 text-blue-500 hover:underline w-fit">
65
+
<img :src="reply.post.author.avatar" :alt="reply.post.author.displayName" class="size-8 rounded-full" />
66
+
<span>
67
+
{{ reply.post.author.displayName }}
68
+
</span>
69
+
</a>
70
+
<div class="ml-10">{{ reply.post.record.text }}</div>
71
+
<div class="flex items-baseline gap-4 ml-10 mt-2">
72
+
<p class="text-gray-500 text-sm">
73
+
<Icon name="ri:reply-line" class="-mb-[2px] mr-1" />
74
+
{{reply.post.replyCount}}
75
+
</p>
76
+
<p class="text-gray-500 text-sm">
77
+
<Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />
78
+
<span>
79
+
{{reply.post.likeCount}}
80
+
</span>
81
+
</p>
82
+
<p class="text-gray-500 text-sm">
83
+
<Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />
84
+
{{reply.post.bookmarkCount}}
85
+
</p>
86
+
</div>
87
+
</div>
53
88
</div>
54
89
</div>
55
90
</template>