witchcraft.systems
this repo has no description
astrra.space
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 /* desktop style */
45
46 #Content {
47 display: flex;
48 /* split the screen in half, left for accounts, right for posts */
49 width: 100%;
50 height: 100%;
51 flex-direction: row;
52 justify-content: space-between;
53 align-items: center;
54 background-color: var(--background-color);
55 color: var(--text-color);
56 }
57 #Feed {
58 width: 65%;
59 height: 100vh;
60 overflow-y: scroll;
61 padding: 20px;
62 padding-bottom: 0;
63 padding-top: 0;
64 margin-top: 0;
65 margin-bottom: 0;
66 }
67 #spacer {
68 padding: 0;
69 margin: 0;
70 height: 10vh;
71 width: 100%;
72 }
73 #Account {
74 width: 35%;
75 display: flex;
76 flex-direction: column;
77 border: 1px solid var(--border-color);
78 background-color: var(--content-background-color);
79 height: 80vh;
80 padding: 20px;
81 margin-left: 20px;
82 }
83 #accountsList {
84 display: flex;
85 flex-direction: column;
86 overflow-y: scroll;
87 height: 100%;
88 width: 100%;
89 padding: 0px;
90 margin: 0px;
91 }
92
93 #Header {
94 text-align: center;
95 font-size: 2em;
96 margin-bottom: 20px;
97 }
98
99 /* mobile style */
100 @media screen and (max-width: 600px) {
101 #Content {
102 flex-direction: column;
103 width: auto;
104 padding-left: 0px;
105 padding-right: 0px;
106 margin-top: 5%;
107 }
108 #Account {
109 width: auto;
110 padding-left: 5%;
111 padding-right: 5%;
112 margin-bottom: 20px;
113 margin-left: 5%;
114 margin-right: 5%;
115 height: auto;
116 }
117 #Feed {
118 width: 95%;
119 margin: 0px;
120 margin-left: 10%;
121 margin-right: 10%;
122 padding: 0px;
123 height: auto;
124 }
125
126 #spacer {
127 height: 0;
128 }
129 }
130</style>