commit 794efccab5064c9cb549ddcbcfa88cef0f0572e2 · finxol.io/blog

+53 -18

app/components/BskyComments.vue

···

       28
       28
        
       </script>

     

       29
       29
        
       

     

       30
       30
        
       <template>

     

       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
       31
       +
           <div class="md:w-[80%] mx-auto mt-16">

     

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

     

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

     

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

     

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

     

       36
       36
       +
                       {{post.post.replyCount}}

     

       37
       37
       +
                   </p>

     

       38
       38
       +
                   <p class="text-gray-500 text-sm">

     

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

     

       40
       40
       +
                       <span>

     

       41
       41
       +
                           {{post.post.likeCount}}

     

       42
       42
       +
                       </span>

     

       43
       43
       +
                   </p>

     

       44
       44
       +
                   <p class="text-gray-500 text-sm">

     

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

     

       46
       46
       +
                       {{post.post.bookmarkCount}}

     

       47
       47
       +
                   </p>

     

       48
       48
       +
               </div>

     

       35
       49
        
       

     

       36
       36
       -
           <div v-if="err">

     

       37
       37
       -
               <div>{{ err }}</div>

     

       38
       38
       -
           </div>

     

       50
       50
       +
               <p class="text-gray-600 text-md mb-6">

     

       51
       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
       52
       +
               </p>

     

       39
       53
        
       

     

       40
       40
       -
           <div v-if="post">

     

       41
       41
       -
               <div v-if="post.post.replyCount === 0">

     

       42
       42
       -
                   <div>No replies yet!</div>

     

       54
       54
       +
               <div v-if="err">

     

       55
       55
       +
                   <div>{{ err }}</div>

     

       43
       56
        
               </div>

     

       44
       57
        
       

     

       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>

     

       58
       58
       +
               <div v-if="post">

     

       59
       59
       +
                   <div v-if="post.post.replyCount === 0">

     

       60
       60
       +
                       <div>No replies yet!</div>

     

       61
       61
       +
                   </div>

     

       62
       62
       +
       

     

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

     

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

     

       66
       66
       +
                           <span>

     

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

     

       68
       68
       +
                           </span>

     

       69
       69
       +
                       </a>

     

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

     

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

     

       72
       72
       +
                           <p class="text-gray-500 text-sm">

     

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

     

       74
       74
       +
                               {{reply.post.replyCount}}

     

       75
       75
       +
                           </p>

     

       76
       76
       +
                           <p class="text-gray-500 text-sm">

     

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

     

       78
       78
       +
                               <span>

     

       79
       79
       +
                                   {{reply.post.likeCount}}

     

       80
       80
       +
                               </span>

     

       81
       81
       +
                           </p>

     

       82
       82
       +
                           <p class="text-gray-500 text-sm">

     

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

     

       84
       84
       +
                               {{reply.post.bookmarkCount}}

     

       85
       85
       +
                           </p>

     

       86
       86
       +
                       </div>

     

       87
       87
       +
                   </div>

     

       53
       88
        
               </div>

     

       54
       89
        
           </div>

     

       55
       90
        
       </template>

+1 -1

app/components/ShareActions.vue

···

       70
       70
        
       

     

       71
       71
        
       <template>

     

       72
       72
        
         <aside

     

       73
       73
       -
             class="print:hidden flex flex-row justify-center items-center gap-4 mt-24 md:w-[80%] mx-auto"

     

       73
       73
       +
             class="print:hidden flex flex-row justify-center items-center gap-4 mt-16 md:w-[80%] mx-auto"

     

       74
       74
        
         >

     

       75
       75
        
             <div class="h-1 bg-stone-200 dark:bg-stone-700 grow" />

     

       76
       76
        
             <div class="whitespace-nowrap px-4 flex flex-row items-center gap-4">