Thread viewer for Bluesky
mackuba.eu
1<script lang="ts">
2 import { api, blueAPI } from '../api.js';
3 import { Post, parseThreadPost } from '../models/posts.js';
4 import { showError } from '../utils.js';
5 import MainLoader from '../components/MainLoader.svelte';
6 import PostComponent from '../components/posts/PostComponent.svelte';
7 import PostWrapper from '../components/posts/PostWrapper.svelte';
8 import ThreadRootParent from '../components/posts/ThreadRootParent.svelte';
9 import ThreadRootParentRaw from '../components/posts/ThreadRootParentRaw.svelte';
10
11 type Props = { url: string } | { author: string, rkey: string };
12
13 let props: Props = $props();
14 let post: AnyPost | undefined = $state();
15 let loadingFailed = $state(false);
16
17 let rootComponent: PostComponent | undefined = $state();
18 let response: Promise<json>;
19
20 if ('url' in props) {
21 let { url } = props;
22
23 if (url.startsWith('at://')) {
24 response = api.loadThreadByAtURI(url);
25 } else {
26 response = api.loadThreadByURL(url);
27 }
28 } else {
29 let { author, rkey } = props;
30
31 response = api.loadThreadById(author, rkey);
32 }
33
34 response.then((json) => {
35 let root = parseThreadPost(json.thread);
36 window.root = root;
37 window.subtreeRoot = root;
38
39 post = root;
40
41 if (root instanceof Post) {
42 root.data.quoteCount = undefined;
43
44 blueAPI.getQuoteCount(root.uri).then(count => {
45 rootComponent?.setQuoteCount(count);
46 }).catch(error => {
47 console.warn("Couldn't load quote count: " + error);
48 });
49 }
50 }).catch((error) => {
51 showError(error);
52 loadingFailed = true;
53 });
54</script>
55
56<svelte:head>
57 {#if post instanceof Post}
58 <title>{post.author.displayName}: "{post.text}" - Skythread</title>
59 {/if}
60</svelte:head>
61
62{#if post}
63 <main>
64 {#if post instanceof Post}
65 {#if post.parent}
66 <ThreadRootParent post={post.parent} />
67 {:else if post.parentReference}
68 <ThreadRootParentRaw uri={post.parentReference.uri} />
69 {/if}
70
71 <PostComponent {post} placement="thread" bind:this={rootComponent} />
72 {:else}
73 <PostWrapper {post} placement="thread" />
74 {/if}
75 </main>
76{:else if !loadingFailed}
77 <MainLoader />
78{/if}