pds dash for shimaenaga.veryroundbird.house (based off of pds.witchcraft.systems)
veryroundbird.house
1<script lang="ts">
2 import PostComponent from "./lib/PostComponent.svelte";
3 import GuestbookPostComponent from "./lib/GuestbookPostComponent.svelte";
4 import AccountComponent from "./lib/AccountComponent.svelte";
5 import InfiniteLoading from "svelte-infinite-loading";
6 import { getNextPosts, Post, getAllMetadataFromPds, fetchGuestbookPosts } from "./lib/pdsfetch";
7 import { Config } from "../config";
8 const accountsPromise = getAllMetadataFromPds();
9 import { onMount } from "svelte";
10
11 let posts: Post[] = [];
12 let guestbookPosts: Post[] = [];
13
14 let clickCounter = 0;
15 const birdbrain = async () => {
16 clickCounter++;
17 if (clickCounter >= 10) {
18 clickCounter = 0;
19 document.getElementById('birdbrain').showPopover();
20 }
21 };
22
23 onMount(() => {
24 // Fetch initial posts
25 getNextPosts().then((initialPosts) => {
26 posts = initialPosts;
27 });
28 fetchGuestbookPosts().then((gbPosts) => {
29 console.log(gbPosts);
30 guestbookPosts = gbPosts;
31 });
32 });
33 // Infinite loading function
34 const onInfinite = ({
35 detail: { loaded, complete },
36 }: {
37 detail: { loaded: () => void; complete: () => void };
38 }) => {
39 getNextPosts().then((newPosts) => {
40 console.log("Loading next posts...");
41 if (newPosts.length > 0) {
42 posts = [...posts, ...newPosts];
43 loaded();
44 } else {
45 complete();
46 }
47 });
48 };
49</script>
50
51<main>
52 <div id="content">
53 {#await accountsPromise}
54 <div id="loadingbirds">
55 <div class="small">
56<pre>
57 █▓░░░░░░░░░▒
58 █▓▒ ░▒
59 ▓▒▒▒░ ▒
60 ▓▒░░░░ ░▓
61 █▒ ░░ ░ ░ ▓▒ ░█
62 ▓░ ░░ ▒▓░░▒▒░ ▒
63███████ ██▓▒░▒▒░ ░░░░ ░░░ ▒
64█▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░ ▓
65 ███▓▒░░▒░░░░▓▓█▓▓▒░ ░
66 ▓ ░
67 █ ░ ▒
68 █░ ▒█
69 ▒ ▒
70 █▒ █
71 ▓ ░█
72 ▓▒ ░░ ░▒
73 ▓▒▒░░▒▓░ ░░░▒▒▓▓▒▓▓
74 █▓█▓▓█ ███▓█
75 ████ ████
76</pre>
77 </div>
78 <div class="large">
79<pre>
80 ████▓▒░░░░░░░▒▓██
81 █▓░ ▒█
82 ██▓░ ▒█
83 ██▒ ▒█
84 ███▓▒░ ▓█
85 █▓░ ░ █
86 ██░ ░ ░█
87 █░ ▓
88 █▒ ▓
89 ██▒ ▒▓▓ █
90 █▒ ▓█ ░▒ ▒▓ ▓█
91 ██▒ ▒▓░ ░▒░░ ▓█
92 ███▒░ ░▒▒▒▒▒░ ▓█
93 █████ ██▓░ ░░░░ █
94█▓▒░░░░░░▒▒▒▓▓██████████▓▓▒░ ░▒▒▒▒▒▒▓▒▒░ ░▒▒░ ░█
95 ██████▓▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒░▒▒▒▒▓▒▒▓▓▓▓▒▒▒▒▒▒▓▒░░░▒▒▒░ ▒█
96 ███▓▓▒▒░░░░ ░░░▒▓▓▓▒▒▓▓▓▓▓▒░░▒▒▒▒░ █
97 ███▓▓▒ ▒▓▓▓▓▓▓▓█▓▒░░ █
98 █▓ ░▒▒▓▒░ ▓
99 █▓ ▓
100 █ █
101 █ ░█
102 █ ▓█
103 █░ ▒█
104 ▒ ▓█
105 ▓ █
106 █▒ ▒█
107 █▒ ▒█
108 █▓ ▒█
109 ██ ██
110 █▒ ▓█
111 ██░ ▒█
112 █░ ░▓█
113 █▓░ ▓▓▓░ ░▓▓▒ ░██
114 ███▓▒░ ▒▓▓▓ ▒▓▓▓▓▓▓▓████▓▓▓▓▒█
115 █▓██▓▓▓▓██ ████▓▓▓██
116 ██▓▓██ ██▓▓██
117 ███▓██ █▓▓▓██
118 ██████ ███████
119</pre>
120 </div>
121 <p id="loadingText" data-text="pds is landing..." title="pds is landing...">pds is landing...</p>
122 </div>
123 {:then accountsData}
124 <div id="account">
125 <pre id="asciiart">
126 █▓░░░░░░░░░▒
127 █▓▒ ░▒
128 ▓▒▒▒░ ▒
129 ▓▒░░░░ ░▓
130 █▒ ░░ ░ ░ ▓▒ ░█
131 ▓░ ░░ ▒▓░░▒▒░ ▒
132███████ ██▓▒░▒▒░ ░░░░ ░░░ ▒
133█▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░ ▓
134 ███▓▒░░▒░░░░▓▓█▓▓▒░ ░
135 ▓ ░
136 █ ░ ▒
137 █░ ▒█
138 ▒ ▒
139 █▒ █
140 ▓ ░█
141 ▓▒ ░░ ░▒
142 ▓▒▒░░▒▓░ ░░░▒▒▓▓▒▓▓
143 █▓█▓▓█ ███▓█
144 ████ ████
145 </pre>
146 <h1 onclick={birdbrain} id="header">shimaenaga pds</h1>
147 <p id="subtitle">a project of <a href="https://veryroundbird.house" target="_blank">veryroundbird.house</a></p>
148 {#if Config.SHOW_GUESTBOOK}
149 <div id="guestbook">
150 <button type="button" id="guestbookBtn" popovertarget="guestbookContents">say hi!</button>
151 <div id="guestbookContents" popover>
152 <div id="signInfo">You can sign the guestbook <a href="{Config.GUESTBOOK_POST}" target="_blank">here</a>!</div>
153 <div id="guestbookPosts">
154 {#if guestbookPosts.length > 0}
155 {#each guestbookPosts as postObject}
156 <GuestbookPostComponent post={postObject.post} />
157 {/each}
158 {:else}
159 <p class="noGuestbookPosts">No guestbook posts yet!</p>
160 {/if}
161 </div>
162 </div>
163 </div>
164 {/if}
165 <p class="accountCount">{accountsData.length} birds nesting here</p>
166 <div id="accountsList">
167 {#each accountsData as accountObject}
168 <AccountComponent account={accountObject} />
169 {/each}
170 </div>
171 <footer id="footer">{@html Config.FOOTER_TEXT}</footer>
172 </div>
173 {:catch error}
174 <p>Error: {error.message}</p>
175 {/await}
176
177 <div id="feed">
178 {#each posts as postObject}
179 <PostComponent post={postObject as Post} />
180 {/each}
181 <InfiniteLoading on:infinite={onInfinite} distance={3000} />
182 </div>
183 </div>
184 <div id="birdbrain" popover>
185 <iframe width="560" height="315" src="https://www.youtube.com/embed/0iVlSNpq8i8?si=Ao4bcr_4HIBqsBy2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
186 </div>
187</main>