fix: use native post component rather than third-party embed (#1705)

Author: danielroe

app/components/EmbeddableBlueskyPost.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { BLUESKY_API, BSKY_POST_AT_URI_REGEX } from '#shared/utils/constants'
+import {
+  BLUESKY_API,
+  BLUESKY_URL_EXTRACT_REGEX,
+  BSKY_POST_AT_URI_REGEX,
+} from '#shared/utils/constants'
 
 const props = defineProps<{
   /** AT URI of the post, e.g. at://did:plc:.../app.bsky.feed.post/... */
-  uri: string
+  uri?: string
+  /** Bluesky URL of the post, e.g. https://bsky.app/profile/handle/post/rkey */
+  url?: string
 }>()
 
 interface PostAuthor {
@@ -30,24 +36,60 @@ interface BlueskyPost {
   repostCount?: number
 }
 
-const postUrl = computed(() => {
-  const match = props.uri.match(BSKY_POST_AT_URI_REGEX)
+/**
+ * Resolve a bsky.app URL to an AT URI by resolving the handle to a DID.
+ * If an AT URI is provided directly, returns it as-is.
+ */
+async function resolveAtUri(): Promise<string | null> {
+  if (props.uri) return props.uri
+
+  if (!props.url) return null
+  const match = props.url.match(BLUESKY_URL_EXTRACT_REGEX)
   if (!match) return null
-  const [, did, rkey] = match
-  return `https://bsky.app/profile/${did}/post/${rkey}`
-})
+  const [, handle, rkey] = match
+
+  // If the handle is already a DID, build the AT URI directly
+  if (handle.startsWith('did:')) {
+    return `at://${handle}/app.bsky.feed.post/${rkey}`
+  }
+
+  // Resolve handle to DID
+  const res = await $fetch<{ did: string }>(
+    `${BLUESKY_API}/xrpc/com.atproto.identity.resolveHandle`,
+    { query: { handle } },
+  )
+  return `at://${res.did}/app.bsky.feed.post/${rkey}`
+}
+
+const cacheKey = computed(() => `bsky-post-${props.uri || props.url}`)
 
 const { data: post, status } = useAsyncData(
-  `bsky-post-${props.uri}`,
+  cacheKey.value,
   async (): Promise<BlueskyPost | null> => {
+    const atUri = await resolveAtUri()
+    if (!atUri) return null
+
     const response = await $fetch<{ posts: BlueskyPost[] }>(
       `${BLUESKY_API}/xrpc/app.bsky.feed.getPosts`,
-      { query: { uris: props.uri } },
+      { query: { uris: atUri } },
     )
     return response.posts[0] ?? null
   },
   { lazy: true, server: false },
 )
+
+const postUrl = computed(() => {
+  // Prefer the explicit URL prop if provided
+  if (props.url) return props.url
+
+  // Otherwise derive from the fetched post's AT URI
+  const uri = post.value?.uri ?? props.uri
+  if (!uri) return null
+  const match = uri.match(BSKY_POST_AT_URI_REGEX)
+  if (!match) return null
+  const [, did, rkey] = match
+  return `https://bsky.app/profile/${did}/post/${rkey}`
+})
 </script>
 
 <template>
@@ -63,7 +105,7 @@ const { data: post, status } = useAsyncData(
     :href="postUrl ?? '#'"
     target="_blank"
     rel="noopener noreferrer"
-    class="block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200"
+    class="not-prose block rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200"
   >
     <!-- Author row -->
     <div class="flex items-center gap-3 mb-3">

…p/components/BlueskyPostEmbed.client.vue …nents/global/BlueskyPostEmbed.client.vueapp/components/BlueskyPostEmbed.client.vue renamed to app/components/global/BlueskyPostEmbed.client.vue app/components/BlueskyPostEmbed.client.vue renamed to app/components/global/BlueskyPostEmbed.client.vue

@@ -43,7 +43,7 @@ people's frustrations with the npm experience on the web and the CLI. The questi
 as they voiced frustrations with the user experience including code browsing, missing data, trust signals, surfacing
 dependencies, and the friction surrounding the publishing experience.
 
-<EmbeddableBlueskyPost url="https://bsky.app/profile/danielroe.dev/post/3md3cmrg56k2r" />
+<BlueskyPostEmbed url="https://bsky.app/profile/danielroe.dev/post/3md3cmrg56k2r" />
 
 It was clear there was a huge opportunity to build a fast, modern browser for the npm registry with an improved
 developer experience, and that there were people willing to work with Daniel to build it.

app/pages/blog/alpha-release.md

@@ -1,16 +1,6 @@
-import {
-  object,
-  string,
-  startsWith,
-  minLength,
-  regex,
-  pipe,
-  nonEmpty,
-  optional,
-  picklist,
-} from 'valibot'
+import { object, string, startsWith, minLength, regex, pipe } from 'valibot'
 import type { InferOutput } from 'valibot'
-import { AT_URI_REGEX, BLUESKY_URL_REGEX, ERROR_BLUESKY_URL_FAILED } from '#shared/utils/constants'
+import { AT_URI_REGEX } from '#shared/utils/constants'
 
 /**
  * INFO: Validates AT Protocol URI format (at://did:plc:.../app.bsky.feed.post/...)
@@ -26,27 +16,3 @@ export const BlueSkyUriSchema = object({
 })
 
 export type BlueSkyUri = InferOutput<typeof BlueSkyUriSchema>
-
-/**
- * INFO: Validates query parameters for Bluesky oEmbed generation.
- * - url: Must be a valid bsky.app profile post URL
- * - colorMode: Optional theme preference (defaults to 'system')
- */
-export const BlueskyOEmbedRequestSchema = object({
-  url: pipe(string(), nonEmpty(), regex(BLUESKY_URL_REGEX, ERROR_BLUESKY_URL_FAILED)),
-  colorMode: optional(picklist(['system', 'dark', 'light']), 'system'),
-})
-
-export type BlueskyOEmbedRequest = InferOutput<typeof BlueskyOEmbedRequestSchema>
-
-/**
- * INFO: Explicit type generation for the response.
- */
-export const BlueskyOEmbedResponseSchema = object({
-  embedUrl: string(),
-  did: string(),
-  postId: string(),
-  handle: string(),
-})
-
-export type BlueskyOEmbedResponse = InferOutput<typeof BlueskyOEmbedResponseSchema>

app/plugins/bluesky-embed.ts

@@ -10,7 +10,6 @@ export const CACHE_MAX_AGE_ONE_YEAR = 60 * 60 * 24 * 365
 // API Strings
 export const NPMX_SITE = 'https://npmx.dev'
 export const NPMX_DOCS_SITE = 'https://docs.npmx.dev'
-export const BLUESKY_EMBED_BASE_ROUTE = 'https://embed.bsky.app'
 export const BLUESKY_API = 'https://public.api.bsky.app'
 export const BLUESKY_COMMENTS_REQUEST = '/api/atproto/bluesky-comments'
 export const NPM_REGISTRY = 'https://registry.npmjs.org'
@@ -21,7 +20,6 @@ export const ERROR_PACKAGE_REQUIREMENTS_FAILED =
   'Package name, version, and file path are required.'
 export const ERROR_BLUESKY_URL_FAILED =
   'Invalid Bluesky URL format. Expected: https://bsky.app/profile/HANDLE/post/POST_ID'
-export const ERROR_BLUESKY_EMBED_FAILED = 'Failed to generate Bluesky embed.'
 export const ERROR_FILE_LIST_FETCH_FAILED = 'Failed to fetch file list.'
 export const ERROR_CALC_INSTALL_SIZE_FAILED = 'Failed to calculate install size.'
 export const NPM_MISSING_README_SENTINEL = 'ERROR: No README data found!'