From b201c66d328379bd0d077506d97992f9502ea7c4 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 16 Jan 2026 21:06:12 +0000
Subject: [PATCH] fix: render more bsky facets (#1794)

---
 app/components/BlueskyComment.vue         | 223 +++++++++++++++++++++-
 app/components/BlueskyComments.client.vue |  51 ++++-
 budget.json                               |   2 +-
 test/unit/bundle.spec.ts                  |   2 +-
 4 files changed, 265 insertions(+), 13 deletions(-)

diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index 45c10d46..85f1b271 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -1,4 +1,18 @@
 <script setup lang="ts">
+import type {
+  AppBskyRichtextFacet,
+  AppBskyEmbedImages,
+  AppBskyEmbedExternal,
+} from '@atproto/api'
+
+type Facet = AppBskyRichtextFacet.Main
+
+interface CommentEmbed {
+  type: 'images' | 'external'
+  images?: AppBskyEmbedImages.ViewImage[]
+  external?: AppBskyEmbedExternal.ViewExternal
+}
+
 interface Comment {
   uri: string
   cid: string
@@ -9,6 +23,8 @@ interface Comment {
     avatar?: string
   }
   text: string
+  facets?: Facet[]
+  embed?: CommentEmbed
   createdAt: string
   likeCount: number
   replyCount: number
@@ -16,6 +32,86 @@ interface Comment {
   replies: Comment[]
 }
 
+// Rich text segment for rendering
+interface TextSegment {
+  text: string
+  type: 'text' | 'link' | 'mention' | 'tag'
+  url?: string
+}
+
+function parseRichText (text: string, facets?: Facet[]): TextSegment[] {
+  if (!facets || facets.length === 0) {
+    return [{ text, type: 'text' }]
+  }
+
+  // Convert string to bytes for proper indexing (Bluesky uses byte offsets)
+  const encoder = new TextEncoder()
+  const decoder = new TextDecoder()
+  const bytes = encoder.encode(text)
+
+  // Sort facets by start index
+  const sortedFacets = [...facets].sort((a, b) => a.index.byteStart - b.index.byteStart)
+
+  const segments: TextSegment[] = []
+  let lastEnd = 0
+
+  for (const facet of sortedFacets) {
+    const { byteStart, byteEnd } = facet.index
+
+    // Add plain text before this facet
+    if (byteStart > lastEnd) {
+      segments.push({
+        text: decoder.decode(bytes.slice(lastEnd, byteStart)),
+        type: 'text',
+      })
+    }
+
+    const facetText = decoder.decode(bytes.slice(byteStart, byteEnd))
+    const feature = facet.features[0] as
+      | { $type: 'app.bsky.richtext.facet#link', uri: string }
+      | { $type: 'app.bsky.richtext.facet#mention', did: string }
+      | { $type: 'app.bsky.richtext.facet#tag', tag: string }
+      | undefined
+
+    if (feature?.$type === 'app.bsky.richtext.facet#link') {
+      segments.push({
+        text: facetText,
+        type: 'link',
+        url: feature.uri,
+      })
+    }
+    else if (feature?.$type === 'app.bsky.richtext.facet#mention') {
+      segments.push({
+        text: facetText,
+        type: 'mention',
+        url: `https://bsky.app/profile/${feature.did}`,
+      })
+    }
+    else if (feature?.$type === 'app.bsky.richtext.facet#tag') {
+      segments.push({
+        text: facetText,
+        type: 'tag',
+        url: `https://bsky.app/hashtag/${feature.tag}`,
+      })
+    }
+    else {
+      segments.push({ text: facetText, type: 'text' })
+    }
+
+    lastEnd = byteEnd
+  }
+
+  // Add remaining text after last facet
+  if (lastEnd < bytes.length) {
+    segments.push({
+      text: decoder.decode(bytes.slice(lastEnd)),
+      type: 'text',
+    })
+  }
+
+  return segments
+}
+
 function getCommentUrl (comment: Comment): string {
   const match = comment.uri.match(/at:\/\/([^/]+)\/app\.bsky\.feed\.post\/(.+)/)
   if (match) {
@@ -31,6 +127,7 @@ const props = defineProps<{
 }>()
 
 const commentUrl = computed(() => getCommentUrl(props.comment))
+const richText = computed(() => parseRichText(props.comment.text, props.comment.facets))
 const maxDepth = 4
 </script>
 
@@ -92,9 +189,70 @@ const maxDepth = 4
       </div>
 
       <p class="mt-1 whitespace-pre-wrap break-words">
-        {{ comment.text }}
+        <template
+          v-for="(segment, i) in richText"
+          :key="i"
+        >
+          <a
+            v-if="segment.type === 'link' || segment.type === 'mention' || segment.type === 'tag'"
+            :href="segment.url"
+            target="_blank"
+            rel="noopener"
+            class="text-blue-400 hover:underline"
+          >{{ segment.text }}</a>
+          <template v-else>
+            {{ segment.text }}
+          </template>
+        </template>
       </p>
 
+      <div
+        v-if="comment.embed?.type === 'images' && comment.embed.images"
+        class="mt-2 flex gap-2 flex-wrap"
+      >
+        <a
+          v-for="(img, i) in comment.embed.images"
+          :key="i"
+          :href="img.fullsize"
+          target="_blank"
+          rel="noopener"
+          class="block"
+        >
+          <img
+            :src="img.thumb"
+            :alt="img.alt || 'Image'"
+            class="rounded-lg max-h-48 object-cover"
+            loading="lazy"
+          >
+        </a>
+      </div>
+
+      <a
+        v-if="comment.embed?.type === 'external' && comment.embed.external"
+        :href="comment.embed.external.uri"
+        target="_blank"
+        rel="noopener"
+        class="mt-2 block border border-gray-700 rounded-lg overflow-hidden hover:border-gray-600 transition-colors"
+      >
+        <div class="flex">
+          <img
+            v-if="comment.embed.external.thumb"
+            :src="comment.embed.external.thumb"
+            :alt="comment.embed.external.title"
+            class="w-24 h-24 object-cover flex-shrink-0"
+            loading="lazy"
+          >
+          <div class="p-3 min-w-0">
+            <p class="text-sm font-medium truncate">
+              {{ comment.embed.external.title }}
+            </p>
+            <p class="text-xs text-gray-500 line-clamp-2 mt-1">
+              {{ comment.embed.external.description }}
+            </p>
+          </div>
+        </div>
+      </a>
+
       <div
         v-if="comment.likeCount > 0 || comment.repostCount > 0"
         class="flex items-center gap-4 mt-2 text-sm text-gray-500"
@@ -176,9 +334,70 @@ const maxDepth = 4
     </div>
 
     <p class="mt-1 whitespace-pre-wrap break-words">
-      {{ comment.text }}
+      <template
+        v-for="(segment, i) in richText"
+        :key="i"
+      >
+        <a
+          v-if="segment.type === 'link' || segment.type === 'mention' || segment.type === 'tag'"
+          :href="segment.url"
+          target="_blank"
+          rel="noopener"
+          class="text-blue-400 hover:underline"
+        >{{ segment.text }}</a>
+        <template v-else>
+          {{ segment.text }}
+        </template>
+      </template>
     </p>
 
+    <div
+      v-if="comment.embed?.type === 'images' && comment.embed.images"
+      class="mt-2 flex gap-2 flex-wrap"
+    >
+      <a
+        v-for="(img, i) in comment.embed.images"
+        :key="i"
+        :href="img.fullsize"
+        target="_blank"
+        rel="noopener"
+        class="block"
+      >
+        <img
+          :src="img.thumb"
+          :alt="img.alt || 'Image'"
+          class="rounded-lg max-h-32 object-cover"
+          loading="lazy"
+        >
+      </a>
+    </div>
+
+    <a
+      v-if="comment.embed?.type === 'external' && comment.embed.external"
+      :href="comment.embed.external.uri"
+      target="_blank"
+      rel="noopener"
+      class="mt-2 block border border-gray-700 rounded-lg overflow-hidden hover:border-gray-600 transition-colors"
+    >
+      <div class="flex">
+        <img
+          v-if="comment.embed.external.thumb"
+          :src="comment.embed.external.thumb"
+          :alt="comment.embed.external.title"
+          class="w-20 h-20 object-cover flex-shrink-0"
+          loading="lazy"
+        >
+        <div class="p-2 min-w-0">
+          <p class="text-sm font-medium truncate">
+            {{ comment.embed.external.title }}
+          </p>
+          <p class="text-xs text-gray-500 line-clamp-2 mt-1">
+            {{ comment.embed.external.description }}
+          </p>
+        </div>
+      </div>
+    </a>
+
     <template v-if="comment.replies.length > 0">
       <div
         v-if="depth < maxDepth"
diff --git a/app/components/BlueskyComments.client.vue b/app/components/BlueskyComments.client.vue
index e8c13a9f..5c75b1d2 100644
--- a/app/components/BlueskyComments.client.vue
+++ b/app/components/BlueskyComments.client.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import type { AppBskyFeedDefs } from '@atproto/api'
+import type { AppBskyFeedDefs, AppBskyRichtextFacet, AppBskyEmbedImages, AppBskyEmbedExternal } from '@atproto/api'
 
 const props = defineProps<{
   uri: string
 }>()
 
+type Facet = AppBskyRichtextFacet.Main
 type ThreadViewPost = AppBskyFeedDefs.ThreadViewPost
 
-function isThreadViewPost (v: unknown): v is ThreadViewPost {
-  return (
-    typeof v === 'object'
-    && v !== null
-    && '$type' in v
-    && v.$type === 'app.bsky.feed.defs#threadViewPost'
-  )
+interface CommentEmbed {
+  type: 'images' | 'external'
+  images?: AppBskyEmbedImages.ViewImage[]
+  external?: AppBskyEmbedExternal.ViewExternal
 }
 
 interface Comment {
@@ -26,6 +24,8 @@ interface Comment {
     avatar?: string
   }
   text: string
+  facets?: Facet[]
+  embed?: CommentEmbed
   createdAt: string
   likeCount: number
   replyCount: number
@@ -33,11 +33,42 @@ interface Comment {
   replies: Comment[]
 }
 
+function isThreadViewPost (v: unknown): v is ThreadViewPost {
+  return (
+    typeof v === 'object'
+    && v !== null
+    && '$type' in v
+    && v.$type === 'app.bsky.feed.defs#threadViewPost'
+  )
+}
+
+function parseEmbed (embed: unknown): CommentEmbed | undefined {
+  if (!embed || typeof embed !== 'object') return undefined
+
+  const e = embed as Record<string, unknown>
+
+  if (e.$type === 'app.bsky.embed.images#view' && Array.isArray(e.images)) {
+    return {
+      type: 'images',
+      images: e.images as AppBskyEmbedImages.ViewImage[],
+    }
+  }
+
+  if (e.$type === 'app.bsky.embed.external#view' && e.external) {
+    return {
+      type: 'external',
+      external: e.external as AppBskyEmbedExternal.ViewExternal,
+    }
+  }
+
+  return undefined
+}
+
 function parseThread (thread: ThreadViewPost): Comment | null {
   if (!isThreadViewPost(thread)) return null
 
   const post = thread.post
-  const record = post.record
+  const record = post.record as { text: string, createdAt: string, facets?: Facet[] }
 
   const replies: Comment[] = []
   if (thread.replies) {
@@ -62,6 +93,8 @@ function parseThread (thread: ThreadViewPost): Comment | null {
     },
     text: record.text as string,
     createdAt: record.createdAt as string,
+    facets: record.facets,
+    embed: parseEmbed(post.embed),
     likeCount: post.likeCount ?? 0,
     replyCount: post.replyCount ?? 0,
     repostCount: post.repostCount ?? 0,
diff --git a/budget.json b/budget.json
index 50f7f56d..d43a0a3e 100644
--- a/budget.json
+++ b/budget.json
@@ -8,7 +8,7 @@
       },
       {
         "resourceType": "script",
-        "budget": 87
+        "budget": 88
       },
       {
         "resourceType": "stylesheet",
diff --git a/test/unit/bundle.spec.ts b/test/unit/bundle.spec.ts
index feb14bc6..7a42e4ce 100644
--- a/test/unit/bundle.spec.ts
+++ b/test/unit/bundle.spec.ts
@@ -36,7 +36,7 @@ describe('project sizes', () => {
     stats.client = await analyzeSizes('**/*.js', publicDir)
     expect
       .soft(roundToKilobytes(stats.client.totalBytes))
-      .toMatchInlineSnapshot(`"512k"`)
+      .toMatchInlineSnapshot(`"515k"`)
     expect.soft(stats.client.files.map(f => f.replace(/\..*\.js/, '.js').replace(/_scripts\/.*\.js/, '_scripts/script.js')).sort())
       .toMatchInlineSnapshot(`
         [
-- 
2.51.2