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