commit 76176c3153a53230ebfc700534fda7317ebed3cd · finxol.io/blog

+13 -10
app/components/BskyComments.vue
···

       22
       22
        
       }

     

       23
       23
        
       

     

       24
       24
        
       if (data.value.$type === "app.bsky.feed.defs#threadViewPost") {

     

       25
       25
       +
           console.log(data.value);

     

       25
       26
        
           post.value = data.value;

     

       26
       27
        
       }

     

       27
       28
        
       </script>

     

       28
       29
        
       

     

       29
       30
        
       <template>

     

       30
       30
       -
           <h3>Join the conversation!</h3>

     

       31
       31
       +
           <div class="flex items-baseline gap-4 mb-4">

     

       32
       32
       +
               <h3 class="font-bold text-xl">Join the conversation!</h3>

     

       33
       33
       +
               <p class="text-gray-500 text-sm">{{post.post.replyCount}} replies</p>

     

       34
       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
       41
       -
               <div v-else>

     

       42
       42
       -
                   <p>{{post.post.replyCount}} replies</p>

     

       43
       43
       -
       

     

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

     

       45
       45
       -
                       <a :href="`https://bsky.app/profile/${reply.post.author.handle}`" class="text-blue-500 hover:underline">

     

       46
       46
       -
                           {{ reply.post.author.displayName }}

     

       47
       47
       -
                       </a>

     

       48
       48
       -
                       <div>{{ reply.post.record.text }}</div>

     

       49
       49
       -
                   </div>

     

       45
       45
       +
               <div v-else v-for="reply in post.replies" class="mt-4">

     

       46
       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
       47
       +
                       <img :src="reply.post.author.avatar" :alt="reply.post.author.displayName" class="size-8 rounded-full" />

     

       48
       48
       +
                       <span>

     

       49
       49
       +
                       {{ reply.post.author.displayName }}

     

       50
       50
       +
                       </span>

     

       51
       51
       +
                   </a>

     

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

     

       50
       53
        
               </div>

     

       51
       54
        
           </div>

     

       52
       55
        
       </template>