fix: address rtl issues, clean up classes, and todos

Author: jonathanyeong

app/components/BlogPostWrapper.vue

@@ -13,12 +13,6 @@ useSeoMeta({
   ogType: 'article',
 })
 
-// Hardcoded values for reference/testing
-// const BSKY_DID = 'did:plc:jbeaa5kdaladzwq3r7f5xgwe'
-// const BSKY_DID = 'did:plc:5ixnpdbogli5f7fbbee5fmuq' // Albie
-// const BSKY_POST_ID = '3mcg6svsgsm2k'
-// const BSKY_POST_ID = '3mdoijswyz22u'
-
 const slug = computed(() => props.frontmatter?.slug)
 
 // Use Constellation to find the Bluesky post linking to this blog post

app/components/BlueskyComment.vue

@@ -53,7 +53,7 @@ function getHostname(uri: string): string {
         v-if="comment.author.avatar"
         :src="comment.author.avatar"
         :alt="comment.author.displayName || comment.author.handle"
-        :class="['rounded-full m-0', depth === 0 ? 'w-10 h-10' : 'w-8 h-8']"
+        :class="['rounded-full', depth === 0 ? 'w-10 h-10' : 'w-8 h-8']"
         width="40"
         height="40"
         loading="lazy"
@@ -123,7 +123,7 @@ function getHostname(uri: string): string {
           <img
             :src="img.thumb"
             :alt="img.alt || 'Embedded image'"
-            class="rounded-lg max-w-48 max-h-36 object-cover m-0"
+            class="rounded-lg max-w-48 max-h-36 object-cover"
             loading="lazy"
           />
         </a>
@@ -141,7 +141,7 @@ function getHostname(uri: string): string {
           v-if="comment.embed.external.thumb"
           :src="comment.embed.external.thumb"
           :alt="comment.embed.external.title"
-          class="w-20 h-20 rounded object-cover shrink-0 m-0"
+          class="w-20 h-20 rounded object-cover shrink-0"
           loading="lazy"
         />
         <div class="min-w-0">
@@ -172,7 +172,7 @@ function getHostname(uri: string): string {
 
       <!-- Nested replies -->
       <template v-if="comment.replies.length > 0">
-        <div v-if="depth < MaxDepth" class="mt-2 pl-2 border-l-2 border-border flex flex-col">
+        <div v-if="depth < MaxDepth" class="mt-2 ps-2 border-is-2 border-border flex flex-col">
           <BlueskyComment
             v-for="reply in comment.replies"
             :key="reply.uri"

app/components/BlueskyComments.client.vue

@@ -96,10 +96,8 @@ const totalLikes = computed(() => likesInfo.value?.totalLikes || 0)
 const { data: likesInfo } = useAsyncData(
   `bsky-likes-${props.postUri}`,
   async () => {
-    const encodedUri = encodeURIComponent(props.postUri)
-
-    // Default getLikes limit is 50. We use it in conjunction with getPosts
-    // to show remaining likes
+    // Default getLikes limit is 50. With 1 <= limit <= 100
+    // So we use it in conjunction with getPosts to display remaining likes count
     const [postData, likesData] = await Promise.all([
       $fetch<{ posts: { likeCount?: number }[] }>(`${BSKY_API}app.bsky.feed.getPosts`, {
         query: { uris: props.postUri },
@@ -154,7 +152,7 @@ const { data: likesInfo } = useAsyncData(
             :href="postUrl"
             target="_blank"
             rel="noopener noreferrer"
-            class="link ml-auto"
+            class="link ms-auto"
           >
             +{{ totalLikes - likes.length }} more
           </a>
@@ -197,7 +195,7 @@ const { data: likesInfo } = useAsyncData(
             :href="postUrl"
             target="_blank"
             rel="noopener noreferrer"
-            class="link ml-auto"
+            class="link ms-auto"
           >
             Reply on Bluesky
           </a>

app/composables/useBlogPostBlueskyLink.ts

@@ -3,6 +3,11 @@ import { NPMX_SITE } from '#shared/utils/constants'
 
 const BLOG_BACKLINK_TTL_IN_SECONDS = 60 * 5
 
+// TODO: Remove did when going live
+const TESTING_ROE_DID = 'did:plc:jbeaa5kdaladzwq3r7f5xgwe'
+// const TESTING_BACKLINK_URL = 'https://roe.dev/blog/the-golden-thread'
+// const NPMX_DID = 'did:plc:u5zp7npt5kpueado77kuihyz'
+
 export interface BlogPostBlueskyLink {
   did: string
   rkey: string
@@ -16,6 +21,7 @@ export function useBlogPostBlueskyLink(slug: MaybeRefOrGetter<string | null | un
     const s = toValue(slug)
     if (!s) return null
     return `${NPMX_SITE}/blog/${s}`
+    // return TESTING_BACKLINK_URL
   })
 
   return useLazyAsyncData<BlogPostBlueskyLink | null>(
@@ -35,7 +41,7 @@ export function useBlogPostBlueskyLink(slug: MaybeRefOrGetter<string | null | un
           1,
           undefined,
           true,
-          [['did:plc:jbeaa5kdaladzwq3r7f5xgwe']],
+          [[TESTING_ROE_DID]],
           BLOG_BACKLINK_TTL_IN_SECONDS,
         )
 
@@ -56,7 +62,7 @@ export function useBlogPostBlueskyLink(slug: MaybeRefOrGetter<string | null | un
           1,
           undefined,
           true,
-          [['did:plc:jbeaa5kdaladzwq3r7f5xgwe']],
+          [[TESTING_ROE_DID]],
           BLOG_BACKLINK_TTL_IN_SECONDS,
         )