···

       
28
       
 
       
</script>

     

       
29
       
 
       


     

       
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>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
35
       
 
       


     

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

     

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

     

       
38
       
-
       
    </div>

     

       
39
       
 
       


     

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

     

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

     

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

     

       
43
       
 
       
        </div>

     

       
44
       
 
       


     

       
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>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
53
       
 
       
        </div>

     

       
54
       
 
       
    </div>

     

       
55
       
 
       
</template>

     

···

       
28
       
 
       
</script>

     

       
29
       
 
       


     

       
30
       
 
       
<template>

     

       
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>

     

       
49
       
 
       


     

       
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>

     

       
53
       
 
       


     

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

     

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

     

       
0
       
 
       

     

       
56
       
 
       
        </div>

     

       
57
       
 
       


     

       
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>

     

       
88
       
 
       
        </div>

     

       
89
       
 
       
    </div>

     

       
90
       
 
       
</template>

     

···

       
70
       
 
       


     

       
71
       
 
       
<template>

     

       
72
       
 
       
  <aside

     

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

     

       
74
       
 
       
  >

     

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

     

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

     

···

       
70
       
 
       


     

       
71
       
 
       
<template>

     

       
72
       
 
       
  <aside

     

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

     

       
74
       
 
       
  >

     

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

     

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