witchcraft.systems
this repo has no description
ari.express
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 import { onMount } from "svelte";
8 import { CssVarsFromHue } from "./lib/colorgenerator";
9
10
11 const accountsPromise = getAllMetadataFromPds();
12 let colors = CssVarsFromHue(Config.HUE);
13
14 let posts: Post[] = [];
15
16 const cycleColors = async () => {
17 let hue = Config.HUE;
18 while (true) {
19 colors = CssVarsFromHue(hue);
20 hue += 1;
21 if (hue > 360) {
22 hue = 0;
23 }
24 // Wait for 1 second before changing colors again
25 await new Promise((resolve) => setTimeout(resolve, 10));
26 }
27 }
28 cycleColors();
29 onMount(() => {
30 // Fetch initial posts
31 getNextPosts().then((initialPosts) => {
32 posts = initialPosts;
33 });
34 });
35 // Infinite loading function
36 const onInfinite = ({
37 detail: { loaded, complete },
38 }: {
39 detail: { loaded: () => void; complete: () => void };
40 }) => {
41 getNextPosts().then((newPosts) => {
42 console.log("Loading next posts...");
43 if (newPosts.length > 0) {
44 posts = [...posts, ...newPosts];
45 loaded();
46 } else {
47 complete();
48 }
49 });
50 };
51</script>
52
53<main style="
54 --background-color: {colors.background};
55 --header-background-color: {colors.header};
56 --content-background-color: {colors.content};
57 --text-color: {colors.text};
58 --border-color: {colors.accent};
59 --link-color: {colors.link};
60 --link-hover-color: {colors.linkHover};
61 --indicator-inactive-color: #4a4a4a;
62 --indicator-active-color: {colors.accent};
63">
64 <div id="Content">
65 {#await accountsPromise}
66 <p>Loading...</p>
67 {:then accountsData}
68 <div id="Account">
69 <h1 id="Header">ATProto PDS</h1>
70 <p>Home to {accountsData.length} accounts</p>
71 <div id="accountsList">
72 {#each accountsData as accountObject}
73 <AccountComponent account={accountObject} />
74 {/each}
75 </div>
76 <p>{@html Config.FOOTER_TEXT}</p>
77 </div>
78 {:catch error}
79 <p>Error: {error.message}</p>
80 {/await}
81
82 <div id="Feed">
83 <div id="spacer"></div>
84 {#each posts as postObject}
85 <PostComponent post={postObject as Post} />
86 {/each}
87 <InfiniteLoading on:infinite={onInfinite} distance={3000} />
88 <div id="spacer"></div>
89 </div>
90 </div>
91</main>
92
93<style>
94 /* desktop style */
95 #Content {
96 display: flex;
97 /* split the screen in half, left for accounts, right for posts */
98 width: 100%;
99 height: 100%;
100 flex-direction: row;
101 justify-content: space-between;
102 align-items: center;
103 background-color: var(--background-color);
104 color: var(--text-color);
105 }
106 #Feed {
107 overflow-y: scroll;
108 width: 65%;
109 height: 100vh;
110 padding: 20px;
111 padding-bottom: 0;
112 padding-top: 0;
113 margin-top: 0;
114 margin-bottom: 0;
115 }
116 #spacer {
117 padding: 0;
118 margin: 0;
119 height: 10vh;
120 width: 100%;
121 }
122 #Account {
123 width: 35%;
124 display: flex;
125 flex-direction: column;
126 border: 1px solid var(--border-color);
127 background-color: var(--content-background-color);
128 height: 80vh;
129 padding: 20px;
130 margin-left: 20px;
131 }
132 #accountsList {
133 display: flex;
134 flex-direction: column;
135 overflow-y: scroll;
136 height: 100%;
137 width: 100%;
138 padding: 0px;
139 margin: 0px;
140 }
141
142 #Header {
143 text-align: center;
144 font-size: 2em;
145 margin-bottom: 20px;
146 }
147
148 /* mobile style */
149 @media screen and (max-width: 600px) {
150 #Content {
151 flex-direction: column;
152 width: auto;
153 padding-left: 0px;
154 padding-right: 0px;
155 margin-top: 5%;
156 }
157 #Account {
158 width: 85%;
159 padding-left: 5%;
160 padding-right: 5%;
161 margin-bottom: 20px;
162 margin-left: 5%;
163 margin-right: 5%;
164 height: auto;
165 }
166 #Feed {
167 width: 95%;
168 margin: 0px;
169 margin-left: 10%;
170 margin-right: 10%;
171 padding: 0px;
172 overflow-y: visible;
173 }
174
175 #spacer {
176 height: 0;
177 }
178 }
179</style>