feat: support external embed in bskypost

Author: alexdln

app/components/global/BlueskyPostEmbed.client.vue

@@ -26,11 +26,18 @@ interface EmbedImage {
   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[] }
+  embed?: { $type: string; images?: EmbedImage[]; external?: EmbedExternal }
   likeCount?: number
   replyCount?: number
   repostCount?: number
@@ -81,6 +88,7 @@ const { data: post, status } = useAsyncData(
 )
 
 const postUrl = computed(() => {
+  console.log(post.value?.embed)
   // Prefer the explicit URL prop if provided
   if (props.url) return props.url
 
@@ -107,7 +115,7 @@ const postUrl = computed(() => {
     :href="postUrl ?? '#'"
     target="_blank"
     rel="noopener noreferrer"
-    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 relative group"
+    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
@@ -154,6 +162,27 @@ const postUrl = computed(() => {
       />
     </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="post.embed.external.title"
+          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" />

app/pages/blog/release/0.8.md

@@ -54,15 +54,15 @@ There is a lot to unpack, a lot of potential for collaborating with other atprot
 
 [ keynote video: youtube or streamplace ].
 
-# Noodles!
+## Noodles!
 
 Thinking about who we are and what we stand for, we decided to launch noodles. The little change on the main page focused on what we care about.
 
 https://npmx.dev/?kawaii
 
 <BlueskyPostEmbed url="https://bsky.app/profile/npmx.dev/post/3miet6zoc5s2i" />
 
-# News
+## News
 
 A lot has happened since our [alpha launch](link). You can read Alex’s post for an overview of this past month, and to learn about some of the ideas the community is working on.
 
@@ -72,6 +72,6 @@ We were also featured the latest Igalia Chats episode discussing about the histo
 
 <BlueskyPostEmbed url="https://bsky.app/profile/igalia.com/post/3miwbkgbgyk2m" />
 
-# What’s next
+## What’s next
 
 We have several features in the making, npmx 0.9 is already looking like a very interesting milestone for us. If you’re interested in getting involved, join us at [build.npmx.dev](https://build.npmx.dev). We’re just getting started!