Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 let { url }: { url: string } = $props();
3
4 let hostname = $derived(new URL(url).hostname);
5</script>
6
7<a class="fedi-link" href={url} target="_blank">
8 <div>
9 <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i> View on {hostname}
10 </div>
11</a>
12
13<style>
14 .fedi-link {
15 display: inline-block;
16 margin-bottom: 6px;
17 margin-top: 2px;
18 }
19
20 .fedi-link:hover {
21 text-decoration: none;
22 }
23
24 div {
25 border: 1px solid #d0d0d0;
26 border-radius: 8px;
27 padding: 5px 9px;
28 color: #555;
29 font-size: 10pt;
30 }
31
32 i {
33 margin-right: 3px;
34 }
35
36 .fedi-link:hover div {
37 background-color: #f6f7f8;
38 border: 1px solid #c8c8c8;
39 }
40
41 @media (prefers-color-scheme: dark) {
42 div {
43 border-color: #606060;
44 color: #909090;
45 }
46
47 .fedi-link:hover div {
48 background-color: #444;
49 border-color: #909090;
50 }
51 }
52</style>