feat: use constellation to fetch bluesky backlinks

This is a WIP. It only runs once on the client when you refresh the page.

Author: jonathanyeong

app/components/BlogPostWrapper.vue

@@ -13,16 +13,17 @@ useSeoMeta({
   ogType: 'article',
 })
 
-// TODO: Hardcoded for testing - waiting on constellation/slingshot work
-// Using Daniel Roe's post for testing: https://bsky.app/profile/danielroe.dev/post/3mcg6svsgsm2k
-const BSKY_DID = 'did:plc:jbeaa5kdaladzwq3r7f5xgwe'
-// const BSKY_DID = 'did:plc:5ixnpdbogli5f7fbbee5fmuq'
-const BSKY_POST_ID = '3mcg6svsgsm2k'
+// 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 blueskyPostUri = computed(() =>
-  BSKY_POST_ID ? `at://${BSKY_DID}/app.bsky.feed.post/${BSKY_POST_ID}` : null,
-)
+const slug = computed(() => props.frontmatter?.slug)
+
+// Use Constellation to find the Bluesky post linking to this blog post
+const { data: blueskyLink } = useBlogPostBlueskyLink(slug)
+const blueskyPostUri = computed(() => blueskyLink.value?.postUri ?? null)
 </script>
 
 <template>

app/composables/useBlogPostBlueskyLink.ts

@@ -0,0 +1,80 @@
+import { Constellation } from '#shared/utils/constellation'
+// import { NPMX_SITE } from '#shared/utils/constants'
+
+const BLOG_BACKLINK_TTL_IN_SECONDS = 60 * 5
+
+export interface BlogPostBlueskyLink {
+  did: string
+  rkey: string
+  postUri: string
+}
+
+export function useBlogPostBlueskyLink(slug: MaybeRefOrGetter<string | null | undefined>) {
+  const cachedFetch = useCachedFetch()
+
+  const blogUrl = computed(() => {
+    const s = toValue(slug)
+    if (!s) return null
+    // return `${NPMX_SITE}/blog/${s}`
+    // TODO: Deploy Preview used for testing remove before merge
+    return `https://npmxdev-git-fork-jonathanyeong-feat-atproto-blog-fe-poetry.vercel.app/blog/${s}`
+  })
+
+  return useLazyAsyncData<BlogPostBlueskyLink | null>(
+    () => (blogUrl.value ? `blog-bsky-link:${blogUrl.value}` : 'blog-bsky-link:none'),
+    async () => {
+      const url = blogUrl.value
+      if (!url) return null
+
+      const constellation = new Constellation(cachedFetch)
+
+      try {
+        // Try embed.external.uri first (link card embeds)
+        const { data: embedBacklinks } = await constellation.getBackLinks(
+          url,
+          'app.bsky.feed.post',
+          'embed.external.uri',
+          1,
+          undefined,
+          false,
+          [['did:plc:5ixnpdbogli5f7fbbee5fmuq']],
+          BLOG_BACKLINK_TTL_IN_SECONDS,
+        )
+
+        const embedRecord = embedBacklinks.records[0]
+        if (embedRecord) {
+          return {
+            did: embedRecord.did,
+            rkey: embedRecord.rkey,
+            postUri: `at://${embedRecord.did}/app.bsky.feed.post/${embedRecord.rkey}`,
+          }
+        }
+
+        // Try facets.features.uri (URLs in post text)
+        const { data: facetBacklinks } = await constellation.getBackLinks(
+          url,
+          'app.bsky.feed.post',
+          'facets.features.uri',
+          1,
+          undefined,
+          false,
+          [],
+          BLOG_BACKLINK_TTL_IN_SECONDS,
+        )
+
+        const facetRecord = facetBacklinks.records[0]
+        if (facetRecord) {
+          return {
+            did: facetRecord.did,
+            rkey: facetRecord.rkey,
+            postUri: `at://${facetRecord.did}/app.bsky.feed.post/${facetRecord.rkey}`,
+          }
+        }
+      } catch {
+        // Constellation unavailable or error - fail silently
+      }
+
+      return null
+    },
+  )
+}

shared/schemas/blog.ts

@@ -7,6 +7,7 @@ export const BlogPostSchema = object({
   date: pipe(string(), isoDate()),
   description: string(),
   path: string(),
+  slug: string(),
   excerpt: optional(string()),
   tags: optional(array(string())),
   draft: optional(boolean()),