nornoe.bsky.social
A Miiverse-themed Bluesky client
1.6 kB
79 lines
1<script setup lang="ts">
2 import type { AppBskyEmbedExternal } from '@atproto/api';
3
4 defineProps<{
5 external: AppBskyEmbedExternal.ViewExternal
6 }>()
7</script>
8
9<template>
10 <a :href="external.uri" target="_blank" class="post-external card">
11 <div
12 v-if=" external.thumb"
13 class="external-thumbnail-container"
14 >
15 <img :src="external.thumb" />
16 </div>
17 <div class="external-infos">
18 <p class="external-title">
19 <template v-if="external.title.length > 0">
20 {{ external.title }}
21 </template>
22 <template v-else>
23 {{ external.uri }}
24 </template>
25 </p>
26 <p class="external-description">
27 {{ external.description }}
28 </p>
29 <p class="external-link">
30 {{ external.uri.split('//')[1].split('/')[0] }}
31 </p>
32 </div>
33 </a>
34</template>
35
36<style scoped lang="scss">
37.post-external {
38 .external-thumbnail-container {
39 width: 100%;
40 aspect-ratio: 1.91 / 1;
41 overflow: hidden;
42 position: relative;
43
44 img {
45 object-fit: cover;
46 width: 100%;
47 height: 100%;
48 }
49 }
50 .external-infos {
51 padding: 0.75rem;
52
53 p {
54 margin: 0;
55 }
56
57 .external-title {
58 font-size: 1rem;
59 font-weight: 600;
60 margin-bottom: 0.5rem;
61 text-overflow: ellipsis;
62 }
63
64 .external-description {
65 font-size: 0.75rem;
66 width: 100%;
67 padding-bottom: 0.5rem;
68 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
69 text-overflow: ellipsis;
70 }
71
72 .external-link {
73 font-size: 0.625rem;
74 margin-top: 0.5rem;
75 }
76 }
77}
78</style>
79