pdewey.com
forked from
baileytownsend.dev/pds-dash-fork
A fork of pds-dash-fork for arabica.systems
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 // TODO I think this was getting called twice?
35 // getNextPosts().then((initialPosts) => {
36 // posts = initialPosts;
37 // });
38 });
39 // Infinite loading function
40 const onInfinite = ({
41 detail: { loaded, complete },
42 }: {
43 detail: { loaded: () => void; complete: () => void };
44 }) => {
45 getNextPosts().then((newPosts) => {
46 console.log("Loading next posts...");
47 if (newPosts.length > 0) {
48 posts = [...posts, ...newPosts];
49 loaded();
50 } else {
51 complete();
52 }
53 });
54 };
55</script>
56
57<main>
58 <div id="Content">
59 {#await accountsPromise}
60 <p>Loading...</p>
61 {:then accountsData}
62 <div id="Account">
63 <h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1>
64 <p>Home to {accountsData.length} accounts</p>
65 <div id="accountsList">
66 {#each accountsData as accountObject}
67 <AccountComponent account={accountObject} />
68 {/each}
69 </div>
70 <p>{@html Config.FOOTER_TEXT}</p>
71 </div>
72 {:catch error}
73 <p>Error: {error.message}</p>
74 {/await}
75
76 <div id="Feed">
77 <div id="spacer"></div>
78 {#each posts as postObject}
79 <PostComponent post={postObject} />
80 {/each}
81 <InfiniteLoading on:infinite={onInfinite} distance={3000} />
82 <div id="spacer"></div>
83 </div>
84 </div>
85</main>
86
87<style>
88</style>