From 6eb0317b508eb29904461c7c6ffbe215def3ec22 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Tue, 10 Feb 2026 16:09:47 -0500
Subject: [PATCH 1/3] fix: register EmbeddableBlueskyPost during SSR to resolve
 anonymous component warning

The EmbeddableBlueskyPost plugin was client-only (.client.ts), meaning the component was
unregistered during SSR when unplugin-vue-markdown compiles the blog.md files.
This produces the "missing template or render function" warning.
Convert the component and plugin to be included during SSR but use <ClientOnly> for browser-only rendering.
---
 ...t.client.vue => EmbeddableBlueskyPost.vue} | 52 ++++++++++---------
 ...uesky-embed.client.ts => bluesky-embed.ts} |  2 +-
 2 files changed, 28 insertions(+), 26 deletions(-)
 rename app/components/{EmbeddableBlueskyPost.client.vue => EmbeddableBlueskyPost.vue} (70%)
 rename app/plugins/{bluesky-embed.client.ts => bluesky-embed.ts} (96%)

diff --git a/app/components/EmbeddableBlueskyPost.client.vue b/app/components/EmbeddableBlueskyPost.vue
similarity index 70%
rename from app/components/EmbeddableBlueskyPost.client.vue
rename to app/components/EmbeddableBlueskyPost.vue
index 180e1f5e5..2cd6b65ec 100644
--- a/app/components/EmbeddableBlueskyPost.client.vue
+++ b/app/components/EmbeddableBlueskyPost.vue
@@ -50,33 +50,35 @@ function onPostMessage(event: MessageEvent) {
 </script>
 
 <template>
-  <article class="bluesky-embed-container">
-    <!-- Loading state -->
-    <LoadingSpinner
-      v-if="isLoading"
-      :text="$t('blog.atproto.loading_bluesky_post')"
-      aria-label="Loading Bluesky post..."
-      class="loading-spinner"
-    />
-
-    <!-- Success state -->
-    <div v-else-if="embedUrl" class="bluesky-embed-container">
-      <iframe
-        title="Bluesky Post"
-        :data-bluesky-id="embeddedId"
-        :src="embedUrl"
-        width="100%"
-        :height="iframeHeight"
-        frameborder="0"
-        scrolling="no"
+  <ClientOnly>
+    <article class="bluesky-embed-container">
+      <!-- Loading state -->
+      <LoadingSpinner
+        v-if="isLoading"
+        :text="$t('blog.atproto.loading_bluesky_post')"
+        aria-label="Loading Bluesky post..."
+        class="loading-spinner"
       />
-    </div>
 
-    <!-- Fallback state -->
-    <a v-else :href="url" target="_blank" rel="noopener noreferrer">
-      {{ $t('blog.atproto.view_on_bluesky') }}
-    </a>
-  </article>
+      <!-- Success state -->
+      <div v-else-if="embedUrl" class="bluesky-embed-container">
+        <iframe
+          title="Bluesky Post"
+          :data-bluesky-id="embeddedId"
+          :src="embedUrl"
+          width="100%"
+          :height="iframeHeight"
+          frameborder="0"
+          scrolling="no"
+        />
+      </div>
+
+      <!-- Fallback state -->
+      <a v-else :href="url" target="_blank" rel="noopener noreferrer">
+        {{ $t('blog.atproto.view_on_bluesky') }}
+      </a>
+    </article>
+  </ClientOnly>
 </template>
 
 <style scoped>
diff --git a/app/plugins/bluesky-embed.client.ts b/app/plugins/bluesky-embed.ts
similarity index 96%
rename from app/plugins/bluesky-embed.client.ts
rename to app/plugins/bluesky-embed.ts
index 5972fc7e3..ac05b53ed 100644
--- a/app/plugins/bluesky-embed.client.ts
+++ b/app/plugins/bluesky-embed.ts
@@ -1,4 +1,4 @@
-import EmbeddableBlueskyPost from '~/components/EmbeddableBlueskyPost.client.vue'
+import EmbeddableBlueskyPost from '~/components/EmbeddableBlueskyPost.vue'
 
 /**
  * INFO: .md files are transformed into Vue SFCs by unplugin-vue-markdown during the Vite transform pipeline

From b316bad8dca74d365ce48e4307deffa7fb46ef12 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Tue, 10 Feb 2026 16:15:12 -0500
Subject: [PATCH 2/3] fix: use typed ATproto client when fetching bsky embeds

The oembed endpoint used a raw fetch and is missing the `/xrpc` path prefix. This causes
a 502 error when trying to fetch embeds. We can use the typed client to be consistent
with author-profiles and other atproto api routes. And means we don't need to specify the
/xrpc path in the fetch.
---
 lexicons.json                                 |  5 +++
 .../com/atproto/identity/resolveHandle.json   | 41 +++++++++++++++++++
 server/api/atproto/bluesky-oembed.get.ts      | 17 ++++----
 3 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 lexicons/com/atproto/identity/resolveHandle.json

diff --git a/lexicons.json b/lexicons.json
index c13112e7a..af3d3f232 100644
--- a/lexicons.json
+++ b/lexicons.json
@@ -10,6 +10,7 @@
     "app.bsky.feed.getPostThread",
     "app.bsky.feed.getPosts",
     "app.bsky.feed.post",
+    "com.atproto.identity.resolveHandle",
     "com.bad-example.identity.resolveMiniDoc",
     "site.standard.document"
   ],
@@ -98,6 +99,10 @@
       "uri": "at://did:plc:4v4y5r3lwsbtmsxhile2ljac/com.atproto.lexicon.schema/app.bsky.richtext.facet",
       "cid": "bafyreidg56eo7zynf6ihz4xb627vwoqf5idnevkmwp7sxc4tijg6xngbu4"
     },
+    "com.atproto.identity.resolveHandle": {
+      "uri": "at://did:plc:6msi3pj7krzih5qxqtryxlzw/com.atproto.lexicon.schema/com.atproto.identity.resolveHandle",
+      "cid": "bafyreigckmqtt3jrtzd7tvigjatnz6ajqyafs26h5pwcudwag2anedxnmu"
+    },
     "com.atproto.label.defs": {
       "uri": "at://did:plc:6msi3pj7krzih5qxqtryxlzw/com.atproto.lexicon.schema/com.atproto.label.defs",
       "cid": "bafyreig4hmnb2xkecyg4aaqfhr2rrcxxb3gsr4xks4rqb7rscrycalbrji"
diff --git a/lexicons/com/atproto/identity/resolveHandle.json b/lexicons/com/atproto/identity/resolveHandle.json
new file mode 100644
index 000000000..3b7bff82b
--- /dev/null
+++ b/lexicons/com/atproto/identity/resolveHandle.json
@@ -0,0 +1,41 @@
+{
+  "id": "com.atproto.identity.resolveHandle",
+  "defs": {
+    "main": {
+      "type": "query",
+      "errors": [
+        {
+          "name": "HandleNotFound",
+          "description": "The resolution process confirmed that the handle does not resolve to any DID."
+        }
+      ],
+      "output": {
+        "schema": {
+          "type": "object",
+          "required": ["did"],
+          "properties": {
+            "did": {
+              "type": "string",
+              "format": "did"
+            }
+          }
+        },
+        "encoding": "application/json"
+      },
+      "parameters": {
+        "type": "params",
+        "required": ["handle"],
+        "properties": {
+          "handle": {
+            "type": "string",
+            "format": "handle",
+            "description": "The handle to resolve."
+          }
+        }
+      },
+      "description": "Resolves an atproto handle (hostname) to a DID. Does not necessarily bi-directionally verify against the the DID document."
+    }
+  },
+  "$type": "com.atproto.lexicon.schema",
+  "lexicon": 1
+}
diff --git a/server/api/atproto/bluesky-oembed.get.ts b/server/api/atproto/bluesky-oembed.get.ts
index 352f34e36..497bcf66a 100644
--- a/server/api/atproto/bluesky-oembed.get.ts
+++ b/server/api/atproto/bluesky-oembed.get.ts
@@ -8,6 +8,8 @@ import {
   BLUESKY_URL_EXTRACT_REGEX,
 } from '#shared/utils/constants'
 import { type BlueskyOEmbedResponse, BlueskyOEmbedRequestSchema } from '#shared/schemas/atproto'
+import { Client } from '@atproto/lex'
+import * as com from '#shared/types/lexicons/com'
 
 export default defineCachedEventHandler(
   async (event): Promise<BlueskyOEmbedResponse> => {
@@ -21,15 +23,14 @@ export default defineCachedEventHandler(
        * If the schema passes, this regex is mathematically guaranteed to match and contain both capture groups.
        * Match returns ["profile/danielroe.dev/post/123", "danielroe.dev", "123"] — only want the two capture groups, the full match string is discarded.
        */
-      const [, handle, postId] = url.match(BLUESKY_URL_EXTRACT_REGEX)! as [string, string, string]
+      const [, handle, postId] = url.match(BLUESKY_URL_EXTRACT_REGEX)! as [
+        string,
+        `${string}.${string}`,
+        string,
+      ]
 
-      // INFO: Resolve handle to DID using Bluesky's public API
-      const { did } = await $fetch<{ did: string }>(
-        `${BLUESKY_API}com.atproto.identity.resolveHandle`,
-        {
-          query: { handle },
-        },
-      )
+      const client = new Client({ service: BLUESKY_API })
+      const { did } = await client.call(com.atproto.identity.resolveHandle, { handle })
 
       // INFO: Construct the embed URL with the DID
       const embedUrl = `${BLUESKY_EMBED_BASE_ROUTE}/embed/${did}/app.bsky.feed.post/${postId}?colorMode=${colorMode}`

From e4b10c9e8ef24e224838454a8efd3a7f8afde314 Mon Sep 17 00:00:00 2001
From: Jonathan Yeong <hey@jonathanyeong.com>
Date: Tue, 10 Feb 2026 16:42:58 -0500
Subject: [PATCH 3/3] refactor: rename useAuthorProfiles to
 useBlueskyAuthorProfiles for clarity

Add a comment to hopefully clarify how useBlueskyAuthorProfiles works with
the bluesky-author-profiles server end point.
---
 app/components/AuthorList.vue                 |  2 +-
 app/components/OgImage/BlogPost.vue           |  2 +-
 app/composables/useAuthorProfiles.ts          | 30 ----------------
 app/composables/useBlueskyAuthorProfiles.ts   | 36 +++++++++++++++++++
 ....get.ts => bluesky-author-profiles.get.ts} |  0
 5 files changed, 38 insertions(+), 32 deletions(-)
 delete mode 100644 app/composables/useAuthorProfiles.ts
 create mode 100644 app/composables/useBlueskyAuthorProfiles.ts
 rename server/api/atproto/{author-profiles.get.ts => bluesky-author-profiles.get.ts} (100%)

diff --git a/app/components/AuthorList.vue b/app/components/AuthorList.vue
index b8cb93117..ee5de3464 100644
--- a/app/components/AuthorList.vue
+++ b/app/components/AuthorList.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
   variant?: 'compact' | 'expanded'
 }>()
 
-const { resolvedAuthors } = useAuthorProfiles(props.authors)
+const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
 </script>
 
 <template>
diff --git a/app/components/OgImage/BlogPost.vue b/app/components/OgImage/BlogPost.vue
index b52f9dc1b..c4449753d 100644
--- a/app/components/OgImage/BlogPost.vue
+++ b/app/components/OgImage/BlogPost.vue
@@ -15,7 +15,7 @@ const props = withDefaults(
   },
 )
 
-const { resolvedAuthors } = useAuthorProfiles(props.authors)
+const { resolvedAuthors } = useBlueskyAuthorProfiles(props.authors)
 
 const formattedDate = computed(() => {
   if (!props.date) return ''
diff --git a/app/composables/useAuthorProfiles.ts b/app/composables/useAuthorProfiles.ts
deleted file mode 100644
index 134a15539..000000000
--- a/app/composables/useAuthorProfiles.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { Author, ResolvedAuthor } from '#shared/schemas/blog'
-
-/**
- * @public
- */
-export function useAuthorProfiles(authors: Author[]) {
-  const authorsJson = JSON.stringify(authors)
-
-  const { data } = useFetch('/api/atproto/author-profiles', {
-    query: {
-      authors: authorsJson,
-    },
-  })
-
-  const resolvedAuthors = computed<ResolvedAuthor[]>(
-    () =>
-      data.value?.authors ??
-      authors.map(author => ({
-        ...author,
-        avatar: null,
-        profileUrl: author.blueskyHandle
-          ? `https://bsky.app/profile/${author.blueskyHandle}`
-          : null,
-      })),
-  )
-
-  return {
-    resolvedAuthors,
-  }
-}
diff --git a/app/composables/useBlueskyAuthorProfiles.ts b/app/composables/useBlueskyAuthorProfiles.ts
new file mode 100644
index 000000000..5f4758dfe
--- /dev/null
+++ b/app/composables/useBlueskyAuthorProfiles.ts
@@ -0,0 +1,36 @@
+import type { Author, ResolvedAuthor } from '#shared/schemas/blog'
+
+/**
+ * Fetches author avatar URLs and profile links from the Bluesky API (AT Protocol).
+ *
+ * Makes a server-side request to `/api/atproto/bluesky-author-profiles`, which looks up
+ * each author's Bluesky profile to retrieve their avatar. Results are cached for 1 day.
+ *
+ * While the fetch is pending (or if it fails), returns authors with `avatar: null`
+ * and a constructed profile URL as fallback.
+ */
+export function useBlueskyAuthorProfiles(authors: Author[]) {
+  const authorsJson = JSON.stringify(authors)
+
+  const { data } = useFetch('/api/atproto/bluesky-author-profiles', {
+    query: {
+      authors: authorsJson,
+    },
+  })
+
+  const resolvedAuthors = computed<ResolvedAuthor[]>(
+    () => data.value?.authors ?? withoutBlueskyData(authors),
+  )
+
+  return {
+    resolvedAuthors,
+  }
+}
+
+function withoutBlueskyData(authors: Author[]): ResolvedAuthor[] {
+  return authors.map(author => ({
+    ...author,
+    avatar: null,
+    profileUrl: author.blueskyHandle ? `https://bsky.app/profile/${author.blueskyHandle}` : null,
+  }))
+}
diff --git a/server/api/atproto/author-profiles.get.ts b/server/api/atproto/bluesky-author-profiles.get.ts
similarity index 100%
rename from server/api/atproto/author-profiles.get.ts
rename to server/api/atproto/bluesky-author-profiles.get.ts