@@ -16,7 +16,9 @@ const postUrl = computed(() => data.value?.postUrl)
1616 <section class =" mt-12 pt-8 border-t border-border max-w-prose mx-auto" >
1717 <!-- Likes -->
1818 <div v-if =" likes.length > 0" class =" mb-8" >
19- <h3 class =" text-lg font-semibold text-fg mb-4" >Likes on Bluesky ({{ totalLikes }})</h3 >
19+ <h3 class =" text-xl font-semibold text-fg mb-4" >
20+ {{ $t('blog.atproto.likes_on_bluesky') }} ({{ totalLikes }})
21+ </h3 >
2022 <ul class =" flex flex-wrap gap-1 list-none p-0 m-0" >
2123 <li v-for =" like in likes" :key =" like.actor.did" class =" m-0 p-0" >
2224 <a
@@ -50,56 +52,50 @@ const postUrl = computed(() => data.value?.postUrl)
5052 rel =" noopener noreferrer"
5153 class =" link ms-auto"
5254 >
53- +{{ totalLikes - likes.length }} more
55+ +{{ totalLikes - likes.length }}
5456 </a >
5557 </li >
5658 </ul >
5759 </div >
5860
5961 <!-- Comments Section -->
6062 <div class =" mb-8" >
61- <h3 class =" text-lg font-semibold text-fg mb-4" >Comments </h3 >
63+ <h3 class =" text-xl font-semibold text-fg mb-4" >{{ $t('blog.atproto.comments') }} </h3 >
6264
6365 <!-- Build-time/Initial loading -->
6466 <div v-if =" pending && !thread" class =" flex items-center gap-2 text-fg-muted" role =" status" >
6567 <span class =" i-svg-spinners:90-ring-with-bg h-5 w-5" aria-hidden =" true" />
66- <span >Loading comments... </span >
68+ <span >{{ $t('blog.atproto.loading_comments') }} </span >
6769 </div >
6870
6971 <!-- Background refresh indicator -->
7072 <div v-else-if =" pending && thread" class =" text-xs text-fg-subtle mb-4 animate-pulse" >
71- Updating...
73+ {{ $t('blog.atproto.updating') }}
7274 </div >
7375
7476 <!-- Error State -->
7577 <div v-else-if =" error" class =" text-fg-muted" >
76- Could not load comments.
77- <a v-if =" postUrl" :href = " postUrl " target = " _blank " rel = " noopener noreferrer " class = " link " >
78- View on Bluesky
79- </a >
78+ {{ $t('blog.atproto.could_not_load_comments') }}
79+ <LinkBase v-if =" postUrl" variant = " button-primary " :to = " postUrl " >
80+ {{ $t('blog.atproto.view_on_bluesky') }}
81+ </LinkBase >
8082 </div >
8183
8284 <!-- No comments -->
8385 <div v-else-if =" !thread || thread.replies.length === 0" >
84- <p class =" text-fg-muted mb-4" >No comments yet. </p >
85- <a v-if =" postUrl" :href = " postUrl " target = " _blank " rel = " noopener noreferrer " class = " link " >
86- Reply on Bluesky
87- </a >
86+ <p class =" text-fg-muted mb-4" >{{ $t('blog.atproto.no_comments_yet') }} </p >
87+ <LinkBase v-if =" postUrl" variant = " button-primary " :to = " postUrl " >
88+ {{ $t('blog.atproto.reply_on_bluesky') }}
89+ </LinkBase >
8890 </div >
8991
9092 <!-- Comments Thread -->
9193 <div v-else class =" flex flex-col gap-6" >
92- <div class =" flex items-center gap-4 text-sm text-fg-muted" >
94+ <div class =" flex items-center justify-between gap-4 text-sm text-fg-muted" >
9395 <span >{{ thread.replyCount }} {{ thread.replyCount === 1 ? 'reply' : 'replies' }}</span >
94- <a
95- v-if =" postUrl"
96- :href =" postUrl"
97- target =" _blank"
98- rel =" noopener noreferrer"
99- class =" link ms-auto"
100- >
101- Reply on Bluesky
102- </a >
96+ <LinkBase v-if =" postUrl" variant =" button-primary" :to =" postUrl" >
97+ {{ $t('blog.atproto.reply_on_bluesky') }}
98+ </LinkBase >
10399 </div >
104100
105101 <BlueskyComment
@@ -109,16 +105,9 @@ const postUrl = computed(() => data.value?.postUrl)
109105 :depth =" 0"
110106 />
111107
112- <a
113- v-if =" postUrl"
114- :href =" postUrl"
115- target =" _blank"
116- rel =" noopener noreferrer"
117- class =" link inline-flex items-center gap-2"
118- >
119- Like this post or add your comment on Bluesky
120- <span class =" i-carbon:arrow-right" aria-hidden =" true" />
121- </a >
108+ <LinkBase v-if =" postUrl" variant =" button-primary" :to =" postUrl" >
109+ {{ $t('blog.atproto.like_or_reply_on_bluesky') }}
110+ </LinkBase >
122111 </div >
123112 </div >
124113 </section >
0 commit comments