A Miiverse-themed Bluesky client
0

Configure Feed

Select the types of activity you want to include in your feed.

1<script setup lang="ts"> 2 import type { AppBskyEmbedRecord, AppBskyFeedDefs } from '@atproto/api'; 3 4 const props = defineProps<{ 5 record: AppBskyEmbedRecord.ViewRecord 6 }>() 7 8 const embedToDisplay = computed(() => { 9 const embeds = props.record.embeds 10 if (!embeds || embeds.length === 0) return undefined 11 12 const embed = embeds[0] 13 14 switch (embed.$type) { 15 case 'app.bsky.embed.images#view': 16 case 'app.bsky.embed.external#view': 17 case 'app.bsky.embed.video#view': 18 return embed 19 20 case 'app.bsky.embed.recordWithMedia#view': 21 // Only return media if there's any 22 if ( 23 'media' in embed && 24 embed.media?.$type === 'app.bsky.embed.images#view' 25 ) { 26 return embed.media 27 } 28 return undefined 29 30 case 'app.bsky.embed.record#view': 31 // Don't show this type of embed 32 return undefined 33 34 default: 35 return undefined 36 } 37 }) 38 39 const postView: AppBskyFeedDefs.PostView = { 40 $type: 'app.bsky.feed.defs#postView', 41 uri: props.record.uri, 42 cid: props.record.cid, 43 author: props.record.author, 44 record: props.record.value, 45 embed: embedToDisplay.value, 46 replyCount: props.record.replyCount, 47 repostCount: props.record.repostCount, 48 likeCount: props.record.likeCount, 49 quoteCount: props.record.quoteCount, 50 indexedAt: props.record.indexedAt, 51 labels: props.record.labels, 52 } 53</script> 54 55<template> 56 <NuxtLink :to="`/users/${postView.author.handle}/posts/${postView.uri.split('/').pop()}`" class="post"> 57 <PostItem :post="postView" type="embed" /> 58 </NuxtLink> 59</template> 60