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 AccountComponent from "./lib/AccountComponent.svelte";
4 import InfiniteLoading from "svelte-infinite-loading";
5 import { getNextPosts, Post, getAllMetadataFromPds, fetchGuestbookPosts } from "./lib/pdsfetch";
6 import { Config } from "../config";
7 const accountsPromise = getAllMetadataFromPds();
8 import { onMount } from "svelte";
9
10 let posts: Post[] = [];
11 let guestbookPosts: Post[] = [];
12
13 let clickCounter = 0;
14 const birdbrain = async () => {
15 clickCounter++;
16 if (clickCounter >= 10) {
17 clickCounter = 0;
18 document.getElementById('birdbrain').showPopover();
19 }
20 };
21
22 onMount(() => {
23 // Fetch initial posts
24 getNextPosts().then((initialPosts) => {
25 posts = initialPosts;
26 });
27 fetchGuestbookPosts().then((gbPosts) => {
28 console.log(gbPosts);
29 guestbookPosts = gbPosts;
30 });
31 });
32 // Infinite loading function
33 const onInfinite = ({
34 detail: { loaded, complete },
35 }: {
36 detail: { loaded: () => void; complete: () => void };
37 }) => {
38 getNextPosts().then((newPosts) => {
39 console.log("Loading next posts...");
40 if (newPosts.length > 0) {
41 posts = [...posts, ...newPosts];
42 loaded();
43 } else {
44 complete();
45 }
46 });
47 };
48</script>
49
50<main>
51 <div id="content">
52 {#await accountsPromise}
53 <div id="loadingbirds">
54 <div class="small">
55<pre>
56 █▓░░░░░░░░░▒
57 █▓▒ ░▒
58 ▓▒▒▒░ ▒
59 ▓▒░░░░ ░▓
60 █▒ ░░ ░ ░ ▓▒ ░█
61 ▓░ ░░ ▒▓░░▒▒░ ▒
62███████ ██▓▒░▒▒░ ░░░░ ░░░ ▒
63█▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░ ▓
64 ███▓▒░░▒░░░░▓▓█▓▓▒░ ░
65 ▓ ░
66 █ ░ ▒
67 █░ ▒█
68 ▒ ▒
69 █▒ █
70 ▓ ░█
71 ▓▒ ░░ ░▒
72 ▓▒▒░░▒▓░ ░░░▒▒▓▓▒▓▓
73 █▓█▓▓█ ███▓█
74 ████ ████
75</pre>
76 </div>
77 <div class="large">
78<pre>
79 ████▓▒░░░░░░░▒▓██
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</pre>
119 </div>
120 <p id="loadingText" data-text="pds is landing..." title="pds is landing...">pds is landing...</p>
121 </div>
122 {:then accountsData}
123 <div id="account">
124 <pre id="asciiart">
125 █▓░░░░░░░░░▒
126 █▓▒ ░▒
127 ▓▒▒▒░ ▒
128 ▓▒░░░░ ░▓
129 █▒ ░░ ░ ░ ▓▒ ░█
130 ▓░ ░░ ▒▓░░▒▒░ ▒
131███████ ██▓▒░▒▒░ ░░░░ ░░░ ▒
132█▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░ ▓
133 ███▓▒░░▒░░░░▓▓█▓▓▒░ ░
134 ▓ ░
135 █ ░ ▒
136 █░ ▒█
137 ▒ ▒
138 █▒ █
139 ▓ ░█
140 ▓▒ ░░ ░▒
141 ▓▒▒░░▒▓░ ░░░▒▒▓▓▒▓▓
142 █▓█▓▓█ ███▓█
143 ████ ████
144 </pre>
145 <h1 onclick={birdbrain} id="header">shimaenaga pds</h1>
146 <p id="subtitle">a project of <a href="https://veryroundbird.house" target="_blank">veryroundbird.house</a></p>
147 {#if Config.SHOW_GUESTBOOK}
148 <div id="guestbook">
149 <button type="button" id="guestbookBtn" popovertarget="guestbookContents">say hi!</button>
150 <div id="guestbookContents" popover>
151 <div id="signInfo">You can sign the guestbook <a href="{Config.GUESTBOOK_POST}" target="_blank">here</a>!</div>
152 <div id="guestbookPosts">
153 {#if guestbookPosts.length > 0}
154 {#each guestbookPosts as postObject}
155 <PostComponent post={postObject as Post} />
156 {/each}
157 {:else}
158 <p class="noGuestbookPosts">No guestbook posts yet!</p>
159 {/if}
160 </div>
161 </div>
162 </div>
163 {/if}
164 <p class="accountCount">{accountsData.length} birds nesting here</p>
165 <div id="accountsList">
166 {#each accountsData as accountObject}
167 <AccountComponent account={accountObject} />
168 {/each}
169 </div>
170 <footer id="footer">{@html Config.FOOTER_TEXT}</footer>
171 </div>
172 {:catch error}
173 <p>Error: {error.message}</p>
174 {/await}
175
176 <div id="feed">
177 {#each posts as postObject}
178 <PostComponent post={postObject as Post} />
179 {/each}
180 <InfiniteLoading on:infinite={onInfinite} distance={3000} />
181 </div>
182 </div>
183 <div id="birdbrain" popover>
184 <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>
185 </div>
186</main>