this repo has no description
witchcraft.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 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 <h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1>
63 <p>Home to {accountsData.length} accounts</p>
64 <div id="accountsList">
65 {#each accountsData as accountObject}
66 <AccountComponent account={accountObject} />
67 {/each}
68 </div>
69 <p>{@html Config.FOOTER_TEXT}</p>
70 </div>
71 {:catch error}
72 <p>Error: {error.message}</p>
73 {/await}
74
75 <div id="Feed">
76 <div id="spacer"></div>
77 {#each posts as postObject}
78 <PostComponent post={postObject as Post} />
79 {/each}
80 <InfiniteLoading on:infinite={onInfinite} distance={3000} />
81 <div id="spacer"></div>
82 </div>
83 </div>
84</main>
85
86<style>
87
88</style>