finxol.io
Personal blog
finxol.io
blog
feat: improve appearance
+13
-10
+13
-10
app/components/BskyComments.vue
+13
-10
app/components/BskyComments.vue
···
22
22
}
23
23
24
24
if (data.value.$type === "app.bsky.feed.defs#threadViewPost") {
25
+
console.log(data.value);
25
26
post.value = data.value;
26
27
}
27
28
</script>
28
29
29
30
<template>
30
-
<h3>Join the conversation!</h3>
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
35
32
36
<div v-if="err">
33
37
<div>{{ err }}</div>
···
38
42
<div>No replies yet!</div>
39
43
</div>
40
44
41
-
<div v-else>
42
-
<p>{{post.post.replyCount}} replies</p>
43
-
44
-
<div v-for="reply in post.replies">
45
-
<a :href="`https://bsky.app/profile/${reply.post.author.handle}`" class="text-blue-500 hover:underline">
46
-
{{ reply.post.author.displayName }}
47
-
</a>
48
-
<div>{{ reply.post.record.text }}</div>
49
-
</div>
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>
50
53
</div>
51
54
</div>
52
55
</template>