feat: support video preview

Author: alexdln

app/components/global/BlueskyPostEmbed.client.vue

@@ -37,7 +37,13 @@ interface BlueskyPost {
   uri: string
   author: PostAuthor
   record: { text: string; createdAt: string }
-  embed?: { $type: string; images?: EmbedImage[]; external?: EmbedExternal }
+  embed?: {
+    $type: string
+    images?: EmbedImage[]
+    external?: EmbedExternal
+    thumbnail?: string
+    aspectRatio?: { width: number; height: number }
+  }
   likeCount?: number
   replyCount?: number
   repostCount?: number
@@ -88,6 +94,7 @@ const { data: post, status } = useAsyncData(
 )
 
 const postUrl = computed(() => {
+  console.log('postValue', post.value)
   // Prefer the explicit URL prop if provided
   if (props.url) return props.url
 
@@ -182,6 +189,25 @@ const postUrl = computed(() => {
       </div>
     </template>
 
+    <!-- Embedded video -->
+    <template v-if="post.embed?.thumbnail">
+      <div class="relative block mb-3 p-0.5 bg-bg-muted rounded-lg">
+        <img
+          :src="post.embed.thumbnail"
+          alt=""
+          class="w-full rounded-lg object-cover"
+          :height="post.embed.aspectRatio?.height"
+          :width="post.embed.aspectRatio?.width"
+          loading="lazy"
+        />
+        <div
+          class="absolute inset-0 bg-bg/50 flex items-center justify-center text-fg text-sm font-medium"
+        >
+          Click to watch video on Bluesky
+        </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" />

modules/security-headers.ts

@@ -31,7 +31,12 @@ export default defineNuxtModule({
       !process.env.TEST
 
     // These assets are embedded directly on blog pages and should not affect image-proxy trust.
-    const cspOnlyImgOrigins = ['https://api.star-history.com', 'https://cdn.bsky.app']
+    const cspOnlyImgOrigins = [
+      'https://api.star-history.com',
+      'https://cdn.bsky.app',
+      'https://video.bsky.app',
+      'https://video.cdn.bsky.app',
+    ]
     const imgSrc = [
       "'self'",
       'data:',