commit e61c1bea562427efd82489ed9a6b5e62a587d4a3 · finxol.io/blog

+35 -7

app/components/BskyComments.vue

···

       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>

     
···

       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">

     

       0
        
       
     

       0
        
       
     

       65
        
                           <img :src="reply.post.author.avatar" :alt="reply.post.author.displayName" class="size-8 rounded-full" />

     

       66
        
                           <span>

     

       67
        
                           {{ reply.post.author.displayName }}

     
···

       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>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       87
        
                   </div>

     

       88
        
               </div>

     

       89
        
           </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" title="Replies">

     

       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" title="Likes">

     

       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" title="Bookmarks">

     

       45
        
                       <Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />

     

       46
        
                       {{post.post.bookmarkCount}}

     

       47
        
                   </p>

     
···

       61
        
                   </div>

     

       62
        
       

     

       63
        
                   <div v-else v-for="reply in post.replies" class="mt-6">

     

       64
       +
                       <BskyPost :post="reply" :depth="0" />

     

       65
       +
       

     

       66
       +
                       <!-- <a :href="`https://bsky.app/profile/${reply.post.author.handle}`" class="flex items-center gap-2 text-blue-500 hover:underline w-fit">

     

       67
        
                           <img :src="reply.post.author.avatar" :alt="reply.post.author.displayName" class="size-8 rounded-full" />

     

       68
        
                           <span>

     

       69
        
                           {{ reply.post.author.displayName }}

     
···

       71
        
                       </a>

     

       72
        
                       <div class="ml-10">{{ reply.post.record.text }}</div>

     

       73
        
                       <div class="flex items-baseline gap-4 ml-10 mt-2">

     

       74
       +
                           <p class="text-gray-500 text-sm" title="Replies">

     

       75
        
                               <Icon name="ri:reply-line" class="-mb-[2px] mr-1" />

     

       76
        
                               {{reply.post.replyCount}}

     

       77
        
                           </p>

     

       78
       +
                           <p class="text-gray-500 text-sm" title="Likes">

     

       79
        
                               <Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />

     

       80
        
                               <span>

     

       81
        
                                   {{reply.post.likeCount}}

     

       82
        
                               </span>

     

       83
        
                           </p>

     

       84
       +
                           <p class="text-gray-500 text-sm" title="Bookmarks">

     

       85
        
                               <Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />

     

       86
        
                               {{reply.post.bookmarkCount}}

     

       87
        
                           </p>

     

       88
        
                       </div>

     

       89
       +
       

     

       90
       +
                       <div v-for="rep in reply.replies" class="mt-6 ml-10">

     

       91
       +
                           <a :href="`https://bsky.app/profile/${rep.post.author.handle}`" class="flex items-center gap-2 text-blue-500 hover:underline w-fit">

     

       92
       +
                               <img :src="rep.post.author.avatar" :alt="rep.post.author.displayName" class="size-8 rounded-full" />

     

       93
       +
                               <span>

     

       94
       +
                               {{ rep.post.author.displayName }}

     

       95
       +
                               </span>

     

       96
       +
                           </a>

     

       97
       +
                           <div class="ml-10">{{ rep.post.record.text }}</div>

     

       98
       +
                           <div class="flex items-baseline gap-4 ml-10 mt-2">

     

       99
       +
                               <p class="text-gray-500 text-sm" title="Replies">

     

       100
       +
                                   <Icon name="ri:reply-line" class="-mb-[2px] mr-1" />

     

       101
       +
                                   {{rep.post.replyCount}}

     

       102
       +
                               </p>

     

       103
       +
                               <p class="text-gray-500 text-sm" title="Likes">

     

       104
       +
                                   <Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />

     

       105
       +
                                   <span>

     

       106
       +
                                       {{rep.post.likeCount}}

     

       107
       +
                                   </span>

     

       108
       +
                               </p>

     

       109
       +
                               <p class="text-gray-500 text-sm" title="Bookmarks">

     

       110
       +
                                   <Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />

     

       111
       +
                                   {{rep.post.bookmarkCount}}

     

       112
       +
                               </p>

     

       113
       +
                           </div>

     

       114
       +
                       </div> -->

     

       115
        
                   </div>

     

       116
        
               </div>

     

       117
        
           </div>

+52

app/components/BskyPost.vue

···

       1
       +
       <script setup lang="ts">

     

       2
       +
       import type { AppBskyFeedDefs } from "@atcute/bluesky";

     

       3
       +
       import { extractPostId } from "~/util/atproto";

     

       4
       +
       

     

       5
       +
       const props = defineProps<{

     

       6
       +
           post: AppBskyFeedDefs.ThreadViewPost;

     

       7
       +
           depth: number;

     

       8
       +
       }>();

     

       9
       +
       const { post, depth } = toRefs(props);

     

       10
       +
       

     

       11
       +
       const MAX_DEPTH = 2; // Max number of replies to a reply

     

       12
       +
       </script>

     

       13
       +
       

     

       14
       +
       <template>

     

       15
       +
       <div v-if="post && depth <= MAX_DEPTH" :class="['mt-6', depth > 0 ? 'ml-10' : '']">

     

       16
       +
           <a :href="`https://bsky.app/profile/${post.post.author.handle}`" class="flex items-center gap-2 text-blue-500 hover:underline w-fit">

     

       17
       +
               <img :src="post.post.author.avatar" :alt="post.post.author.displayName" class="size-8 rounded-full" />

     

       18
       +
               <span>

     

       19
       +
               {{ post.post.author.displayName }}

     

       20
       +
               </span>

     

       21
       +
           </a>

     

       22
       +
           <div class="ml-10">{{ post.post.record.text }}</div>

     

       23
       +
           <div class="flex items-baseline gap-4 ml-10 mt-2">

     

       24
       +
               <p class="text-gray-500 text-sm" title="Replies">

     

       25
       +
                   <Icon name="ri:reply-line" class="-mb-[2px] mr-1" />

     

       26
       +
                   {{post.post.replyCount}}

     

       27
       +
               </p>

     

       28
       +
               <p class="text-gray-500 text-sm" title="Likes">

     

       29
       +
                   <Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />

     

       30
       +
                   <span>

     

       31
       +
                       {{post.post.likeCount}}

     

       32
       +
                   </span>

     

       33
       +
               </p>

     

       34
       +
               <p class="text-gray-500 text-sm" title="Bookmarks">

     

       35
       +
                   <Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />

     

       36
       +
                   {{post.post.bookmarkCount}}

     

       37
       +
               </p>

     

       38
       +
           </div>

     

       39
       +
       

     

       40
       +
           <div v-if="post.replies">

     

       41
       +
               <div v-if="depth === MAX_DEPTH">

     

       42
       +
                   <a :href="`https://bsky.app/profile/${post.post.author.handle}/post/${extractPostId(post.post.uri)}`" class="text-gray-500 text-sm flex items-center gap-2 mt-4 ml-10">

     

       43
       +
                       View more replies on Bluesky

     

       44
       +
                       <Icon name='ri:arrow-drop-right-line' />

     

       45
       +
                   </a>

     

       46
       +
               </div>

     

       47
       +
               <div v-for="reply in post.replies">

     

       48
       +
                   <BskyPost v-if="reply.$type === 'app.bsky.feed.defs#threadViewPost'" :post="reply" :depth="depth + 1" />

     

       49
       +
               </div>

     

       50
       +
           </div>

     

       51
       +
       </div>

     

       52
       +
       </template>

app/util/atproto.ts

···

       36
        
       

     

       37
        
           return { $type: "app.bsky.feed.defs#notFoundPost" };

     

       38
        
       }

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

···

       36
        
       

     

       37
        
           return { $type: "app.bsky.feed.defs#notFoundPost" };

     

       38
        
       }

     

       39
       +
       

     

       40
       +
       export function extractPostId(uri: ResourceUri) {

     

       41
       +
           if (uri.includes("app.bsky.feed.post")) {

     

       42
       +
               const parts = uri.split("/");

     

       43
       +
               return parts.at(-1);

     

       44
       +
           }

     

       45
       +
           return "";

     

       46
       +
       }