forked from
did:plc:2hcnfmbfr4ucfbjpnvjqvt3e/bbell
wip bsky client for the web & android
feat: link embeds
+86
+81
src/components/Feed/Embeds/ExternalEmbed.vue
+81
src/components/Feed/Embeds/ExternalEmbed.vue
···
1
+
<script lang="ts" setup>
2
+
import { AppBskyEmbedExternal } from '@atcute/bluesky'
3
+
4
+
defineProps<{
5
+
embed: AppBskyEmbedExternal.ViewExternal
6
+
}>()
7
+
</script>
8
+
9
+
<template>
10
+
<a :href="embed.uri" target="_blank" rel="noopener noreferrer">
11
+
<div class="embed-thumbnail" v-if="embed.thumb">
12
+
<img :src="embed.thumb" alt="thumbnail" loading="lazy" />
13
+
</div>
14
+
<div class="embed-info">
15
+
<div class="embed-title">{{ embed.title }}</div>
16
+
<div class="embed-description" v-if="embed.description">
17
+
{{ embed.description }}
18
+
</div>
19
+
<div class="embed-uri">{{ embed.uri }}</div>
20
+
</div>
21
+
</a>
22
+
</template>
23
+
24
+
<style lang="scss" scoped>
25
+
a {
26
+
display: flex;
27
+
flex-direction: column;
28
+
text-decoration: none;
29
+
color: inherit;
30
+
31
+
border: 1px solid hsla(var(--surface2) / 0.5);
32
+
border-radius: var(--radius-md);
33
+
overflow: hidden;
34
+
margin-top: 0.5rem;
35
+
36
+
&:hover {
37
+
background-color: hsla(var(--surface0) / 0.3);
38
+
border-color: hsla(var(--surface2) / 0.8);
39
+
}
40
+
}
41
+
42
+
.embed-thumbnail {
43
+
flex-shrink: 0;
44
+
width: 100%;
45
+
background-color: hsl(var(--surface1));
46
+
/* aspect-ratio: 16 / 9; */
47
+
max-height: 256px;
48
+
49
+
img {
50
+
width: 100%;
51
+
height: 100%;
52
+
object-fit: cover;
53
+
}
54
+
}
55
+
56
+
.embed-info {
57
+
padding: 0.5rem;
58
+
flex: 1;
59
+
display: flex;
60
+
flex-direction: column;
61
+
justify-content: center;
62
+
63
+
.embed-title {
64
+
font-weight: 600;
65
+
color: hsl(var(--text));
66
+
}
67
+
68
+
.embed-description {
69
+
font-size: 0 nine rem;
70
+
color: hsl(var(--subtext1));
71
+
}
72
+
73
+
.embed-uri {
74
+
font-size: 0.8rem;
75
+
color: hsla(var(--subtext0) / 0.5);
76
+
overflow: hidden;
77
+
text-wrap: nowrap;
78
+
text-overflow: ellipsis;
79
+
}
80
+
}
81
+
</style>
+5
src/components/Feed/FeedItem.vue
+5
src/components/Feed/FeedItem.vue
···
12
12
import { usePostStore } from '@/stores/posts'
13
13
import ImageEmbed from './Embeds/ImageEmbed.vue'
14
14
import EmbedRecord from './Embeds/EmbedRecord.vue'
15
+
import ExternalEmbed from './Embeds/ExternalEmbed.vue'
15
16
16
17
type PostInput = AppBskyFeedDefs.PostView | AppBskyEmbedRecord.ViewRecord
17
18
···
127
128
128
129
<div class="post-embeds" v-if="embed">
129
130
<ImageEmbed v-if="embed.$type === 'app.bsky.embed.images#view'" :embed="embed" />
131
+
<ExternalEmbed
132
+
v-else-if="embed.$type === 'app.bsky.embed.external#view'"
133
+
:embed="embed.external"
134
+
/>
130
135
<template v-else-if="embed.$type === 'app.bsky.embed.record#view'">
131
136
<EmbedRecord v-if="!embedded" :embed="embed" />
132
137
<div v-else class="embedded-record">Post has nested quote.</div>