Thread viewer for Bluesky
1<script lang="ts">
2 import { RichText, type Facet } from '../../lib/rich_text_lite.js';
3 import { linkToHashtagPage } from '../router.js';
4 import { isValidURL } from '../utils.js';
5
6 let { text, facets }: { text: string, facets: Facet[] } = $props();
7
8 let richText = $derived(new RichText({ text, facets }));
9 let segments = $derived(richText.segments());
10</script>
11
12{#each segments as segment}
13 {#if segment.mention}
14 <a href="https://bsky.app/profile/{segment.mention.did}">{segment.text}</a>
15 {:else if segment.link}
16 {#if isValidURL(segment.link.uri)}
17 <a href="{segment.link.uri}">{segment.text}</a>
18 {:else}
19 [{segment.text}]({segment.link.uri})
20 {/if}
21 {:else if segment.tag}
22 <a href={linkToHashtagPage(segment.tag.tag)}>{segment.text}</a>
23 {:else}
24 {@const lines = segment.text.split("\n")}
25
26 {#each lines as line, i}
27 {#if i > 0}<br>{/if}{line}
28 {/each}
29 {/if}
30{/each}