fix: use i18n pluralisation

Author: danielroe

app/components/BlueskyComment.vue

@@ -165,10 +165,10 @@ function getHostname(uri: string): string {
         class="mt-2 flex gap-4 text-sm text-fg-subtle"
       >
         <span v-if="comment.likeCount > 0">
-          {{ comment.likeCount }} {{ comment.likeCount === 1 ? 'like' : 'likes' }}
+          {{ $t('blog.atproto.like_count', { count: comment.likeCount }, comment.likeCount) }}
         </span>
         <span v-if="comment.repostCount > 0">
-          {{ comment.repostCount }} {{ comment.repostCount === 1 ? 'repost' : 'reposts' }}
+          {{ $t('blog.atproto.repost_count', { count: comment.repostCount }, comment.repostCount) }}
         </span>
       </div>
 
@@ -189,8 +189,13 @@ function getHostname(uri: string): string {
           rel="noopener noreferrer"
           class="mt-2 block text-sm link"
         >
-          {{ comment.replies.length }} more
-          {{ comment.replies.length === 1 ? 'reply' : 'replies' }}...
+          {{
+            $t(
+              'blog.atproto.more_replies',
+              { count: comment.replies.length },
+              comment.replies.length,
+            )
+          }}
         </a>
       </template>
     </div>

app/components/BlueskyComments.vue

@@ -92,7 +92,9 @@ const postUrl = computed(() => data.value?.postUrl)
       <!-- Comments Thread -->
       <div v-else class="flex flex-col gap-6">
         <div class="flex items-center justify-between gap-4 text-sm text-fg-muted">
-          <span>{{ thread.replyCount }} {{ thread.replyCount === 1 ? 'reply' : 'replies' }}</span>
+          <span>{{
+            $t('blog.atproto.reply_count', { count: thread.replyCount }, thread.replyCount)
+          }}</span>
           <LinkBase v-if="postUrl" variant="button-primary" :to="postUrl">
             {{ $t('blog.atproto.reply_on_bluesky') }}
           </LinkBase>

i18n/locales/en.json

@@ -94,7 +94,11 @@
       "could_not_load_comments": "Could not load comments.",
       "comments": "Comments",
       "loading_comments": "Loading comments...",
-      "updating": "Updating..."
+      "updating": "Updating...",
+      "reply_count": "{count} reply | {count} replies",
+      "like_count": "{count} like | {count} likes",
+      "repost_count": "{count} repost | {count} reposts",
+      "more_replies": "{count} more reply... | {count} more replies..."
     }
   },
   "settings": {

i18n/schema.json

@@ -288,6 +288,18 @@
             },
             "updating": {
               "type": "string"
+            },
+            "reply_count": {
+              "type": "string"
+            },
+            "like_count": {
+              "type": "string"
+            },
+            "repost_count": {
+              "type": "string"
+            },
+            "more_replies": {
+              "type": "string"
             }
           },
           "additionalProperties": false

lunaria/files/en-GB.json

@@ -93,7 +93,11 @@
       "could_not_load_comments": "Could not load comments.",
       "comments": "Comments",
       "loading_comments": "Loading comments...",
-      "updating": "Updating..."
+      "updating": "Updating...",
+      "reply_count": "{count} reply | {count} replies",
+      "like_count": "{count} like | {count} likes",
+      "repost_count": "{count} repost | {count} reposts",
+      "more_replies": "{count} more reply... | {count} more replies..."
     }
   },
   "settings": {

lunaria/files/en-US.json

@@ -93,7 +93,11 @@
       "could_not_load_comments": "Could not load comments.",
       "comments": "Comments",
       "loading_comments": "Loading comments...",
-      "updating": "Updating..."
+      "updating": "Updating...",
+      "reply_count": "{count} reply | {count} replies",
+      "like_count": "{count} like | {count} likes",
+      "repost_count": "{count} repost | {count} reposts",
+      "more_replies": "{count} more reply... | {count} more replies..."
     }
   },
   "settings": {