eric.wien
A Vue app that displays bluesky skeets in realtime as they are created.
vinerima.tngl.sh
1<template>
2 <div class="skeet-view">
3 <div class="skeet-author">
4 <img class="skeet-author-avatar" :src="skeet.authorAvatar" />
5 <a :href="authorLink" class="skeet-author-link" target="_blank">{{
6 skeet.authorHandle ?? skeet.authorDid
7 }}</a>
8 </div>
9 <p class="skeet-date" v-if="skeet.createdAt">{{ skeet.createdAt }}</p>
10 <p class="skeet-text">{{ skeet.text }}</p>
11 <a :href="skeetLink" class="skeet-link" target="_blank">goto skeet</a>
12 </div>
13</template>
14
15<script setup lang="ts">
16import type { Post } from '@/types/post'
17import { computed } from 'vue'
18
19const { skeet } = defineProps<{
20 skeet: Post
21}>()
22
23const authorLink = computed(() => {
24 return `https://bsky.app/profile/${skeet.authorDid}`
25})
26const skeetLink = computed(() => {
27 return `${authorLink.value}/post/${skeet.uri.split('/').pop()}`
28})
29</script>
30
31<style lang="scss">
32.skeet-author {
33 display: flex;
34 flex-direction: row;
35 column-gap: 1rem;
36 padding-bottom: 0.5rem;
37 height: 2.5rem;
38}
39.skeet-author-avatar {
40 max-height: 2.5rem;
41 aspect-ratio: 1;
42 background-color: lightgray;
43}
44.skeet-author-link {
45 margin: auto 0;
46 font-weight: bold;
47}
48.skeet-view {
49 padding-top: 2rem;
50}
51</style>