BlueskyPostEmbed.client.vue

<script setup lang="ts">
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
  /** Bluesky URL of the post, e.g. https://bsky.app/profile/handle/post/rkey */
  url?: string
}>()

interface PostAuthor {
  did: string
  handle: string
  displayName?: string
  avatar?: string
}

interface EmbedImage {
  thumb: string
  fullsize: string
  alt: string
  aspectRatio?: { width: number; height: number }
}

interface EmbedExternal {
  description?: string
  thumb?: string
  title?: string
  uri: string
}

interface BlueskyPost {
  uri: string
  author: PostAuthor
  record: { text: string; createdAt: string }
  embed?: { $type: string; images?: EmbedImage[]; external?: EmbedExternal }
  likeCount?: number
  replyCount?: number
  repostCount?: number
}

/**
 * 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 [, handle, rkey] = match

  if (!handle || !rkey) return null

  // 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(
  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: 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>
  <div
    v-if="status === 'pending'"
    class="rounded-lg border border-border bg-bg-subtle p-6 text-center text-fg-subtle text-sm"
  >
    <span class="i-svg-spinners:90-ring-with-bg h-5 w-5 inline-block" />
  </div>

  <a
    v-else-if="post"
    :href="postUrl ?? '#'"
    target="_blank"
    rel="noopener noreferrer"
    class="not-prose block my-4 rounded-lg border border-border bg-bg-subtle p-4 sm:p-5 no-underline hover:border-border-hover transition-colors duration-200 relative group"
  >
    <!-- Bluesky icon -->
    <span
      class="i-simple-icons:bluesky w-5 h-5 text-fg-subtle group-hover:text-blue-500 absolute top-4 end-4 sm:top-5 sm:end-5"
      aria-hidden="true"
    />

    <!-- Author row -->
    <div class="flex items-center gap-3 mb-3 pe-7">
      <img
        v-if="post.author.avatar"
        :src="`${post.author.avatar}?size=48`"
        :alt="post.author.displayName || post.author.handle"
        width="40"
        height="40"
        class="w-10 h-10 rounded-full"
        loading="lazy"
      />
      <div class="min-w-0">
        <div class="font-medium text-fg truncate">
          {{ post.author.displayName || post.author.handle }}
        </div>
        <div class="text-sm text-fg-subtle truncate">@{{ post.author.handle }}</div>
      </div>
    </div>

    <!-- Post text -->
    <p class="text-fg-muted whitespace-pre-wrap leading-relaxed mb-3">{{ post.record.text }}</p>

    <!-- Embedded images -->
    <template v-if="post.embed?.images?.length">
      <img
        v-for="(img, i) in post.embed.images"
        :key="i"
        :src="img.fullsize"
        :alt="img.alt"
        class="w-full mb-3 rounded-lg object-cover"
        :style="
          img.aspectRatio
            ? { aspectRatio: `${img.aspectRatio.width}/${img.aspectRatio.height}` }
            : undefined
        "
        loading="lazy"
      />
    </template>

    <!-- Embedded external embed -->
    <template v-if="post.embed?.external && post.embed.external.uri">
      <div class="block mb-3 p-0.5 bg-bg-muted rounded-lg">
        <img
          v-if="post.embed.external.thumb"
          :src="post.embed.external.thumb"
          alt=""
          class="w-full rounded-lg object-cover"
          loading="lazy"
        />
        <div class="text-fg-muted text-sm p-2">
          <p class="font-medium truncate">
            {{ post.embed.external.title || post.embed.external.uri }}
          </p>
          <p v-if="post.embed.external.description" class="text-sm line-clamp-2 mt-1">
            {{ post.embed.external.description }}
          </p>
        </div>
      </div>
    </template>

    <!-- Timestamp + engagement -->
    <div class="flex items-center gap-4 text-sm text-fg-subtle">
      <DateTime :datetime="post.record.createdAt" date-style="medium" />
      <span v-if="post.likeCount" class="flex items-center gap-1">
        <span class="i-lucide:heart w-3.5 h-3.5" aria-hidden="true" />
        {{ post.likeCount }}
      </span>
      <span v-if="post.repostCount" class="flex items-center gap-1">
        <span class="i-lucide:repeat w-3.5 h-3.5" aria-hidden="true" />
        {{ post.repostCount }}
      </span>
      <span v-if="post.replyCount" class="flex items-center gap-1">
        <span class="i-lucide:message-circle w-3.5 h-3.5" aria-hidden="true" />
        {{ post.replyCount }}
      </span>
    </div>
  </a>
</template>