Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 import { getPostContext } from '../posts/PostComponent.svelte';
3 import { InlineImageEmbed, RawImageEmbed } from '../../models/embeds';
4
5 let { embed }: { embed: InlineImageEmbed | RawImageEmbed } = $props();
6 let { post } = getPostContext();
7
8 function imageURL(img: json): string {
9 if (img.fullsize) {
10 return img.fullsize;
11 } else {
12 let cid = img.image.ref['$link'];
13 return `https://cdn.bsky.app/img/feed_fullsize/plain/${post.author.did}/${cid}@jpeg`;
14 }
15 }
16</script>
17
18<div>
19 {#each embed.images as image}
20 <p>[<a href={imageURL(image)}>Image</a>]</p>
21
22 {#if image.alt}
23 <details class="image-alt">
24 <summary>Show alt</summary>
25 {image.alt}
26 </details>
27 {/if}
28 {/each}
29</div>
30
31<style>
32 .image-alt {
33 font-size: 11pt;
34 color: #666;
35 margin-bottom: 20px;
36 }
37
38 .image-alt summary {
39 font-size: 11pt;
40 color: #666;
41 margin-bottom: 5px;
42 user-select: none;
43 -webkit-user-select: none;
44 cursor: default;
45 }
46
47 @media (prefers-color-scheme: dark) {
48 .image-alt, .image-alt summary { color: #999; }
49 }
50</style>