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 } from "./lib/pdsfetch";
6 import { Config } from "../config";
7 const accountsPromise = getAllMetadataFromPds();
8 import { onMount } from "svelte";
9
10 let posts: Post[] = [];
11
12 let hue: number = 1;
13 const cycleColors = async () => {
14 while (true) {
15 hue += 1;
16 if (hue > 360) {
17 hue = 0;
18 }
19 document.documentElement.style.setProperty("--primary-h", hue.toString());
20 await new Promise((resolve) => setTimeout(resolve, 10));
21 }
22 }
23 let clickCounter = 0;
24 const carameldansenfusion = async () => {
25 clickCounter++;
26 if (clickCounter >= 10) {
27 clickCounter = 0;
28 cycleColors();
29 }
30 };
31
32 onMount(() => {
33 // Fetch initial posts
34 getNextPosts().then((initialPosts) => {
35 posts = initialPosts;
36 });
37 });
38 // Infinite loading function
39 const onInfinite = ({
40 detail: { loaded, complete },
41 }: {
42 detail: { loaded: () => void; complete: () => void };
43 }) => {
44 getNextPosts().then((newPosts) => {
45 console.log("Loading next posts...");
46 if (newPosts.length > 0) {
47 posts = [...posts, ...newPosts];
48 loaded();
49 } else {
50 complete();
51 }
52 });
53 };
54</script>
55
56<main>
57 <div id="content">
58 {#await accountsPromise}
59 <p>Loading...</p>
60 {:then accountsData}
61 <div id="account">
62 <pre id="asciiart">
63 █▓░░░░░░░░░▒
64 █▓▒ ░▒
65 ▓▒▒▒░ ▒
66 ▓▒░░░░ ░▓
67 █▒ ░░ ░ ░ ▓▒ ░█
68 ▓░ ░░ ▒▓░░▒▒░ ▒
69███████ ██▓▒░▒▒░ ░░░░ ░░░ ▒
70█▓▓▓▓▓▓▓▓▓▓▓▓▓▒▓▓▓▓▓▒▒▓▒▒▒▓░ ▓
71 ███▓▒░░▒░░░░▓▓█▓▓▒░ ░
72 ▓ ░
73 █ ░ ▒
74 █░ ▒█
75 ▒ ▒
76 █▒ █
77 ▓ ░█
78 ▓▒ ░░ ░▒
79 ▓▒▒░░▒▓░ ░░░▒▒▓▓▒▓▓
80 █▓█▓▓█ ███▓█
81 ████ ████
82 </pre>
83 <h1 onclick={carameldansenfusion} id="header">shimaenaga pds</h1>
84 <p id="subtitle">a project of <a href="https://veryroundbird.house" target="_blank">veryroundbird.house</a></p>
85 {#if Config.SHOW_GUESTBOOK}
86 <div id="guestbook">
87 <button type="button" id="guestbookBtn" popovertarget="guestbookContents">say hi!</button>
88 <div id="guestbookContents" popover>
89 <div id="signInfo">You can sign the guestbook <a href="{Config.GUESTBOOK_POST}" target="_blank">here</a>!</div>
90 <div id="guestbookPosts">
91
92 </div>
93 </div>
94 </div>
95 {/if}
96 <p class="accountCount">{accountsData.length} birds nesting here</p>
97 <div id="accountsList">
98 {#each accountsData as accountObject}
99 <AccountComponent account={accountObject} />
100 {/each}
101 </div>
102 <footer id="footer">{@html Config.FOOTER_TEXT}</footer>
103 </div>
104 {:catch error}
105 <p>Error: {error.message}</p>
106 {/await}
107
108 <div id="feed">
109 {#each posts as postObject}
110 <PostComponent post={postObject as Post} />
111 {/each}
112 <InfiniteLoading on:infinite={onInfinite} distance={3000} />
113 </div>
114 </div>
115</main>