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