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 { fetchAllPosts, Post, getAllMetadataFromPds } from "./lib/pdsfetch";
5 const postsPromise = fetchAllPosts();
6 const accountsPromise = getAllMetadataFromPds();
7</script>
8
9<main>
10 <div id="Content">
11 {#await accountsPromise}
12 <p>Loading...</p>
13 {:then accountsData}
14 <div id="Account">
15 <h1 id="Header">ATProto PDS</h1>
16 <p>Home to {accountsData.length} accounts</p>
17 {#each accountsData as accountObject}
18 <AccountComponent account={accountObject} />
19 {/each}
20 </div>
21 {:catch error}
22 <p>Error: {error.message}</p>
23 {/await}
24
25 {#await postsPromise}
26 <p>Loading...</p>
27 {:then postsData}
28 <div id="Feed">
29 {#each postsData as postObject}
30 <PostComponent post={postObject as Post} />
31 {/each}
32 </div>
33 {/await}
34 </div>
35</main>
36
37<style>
38 #Content {
39 display: flex;
40 /* split the screen in half, left for accounts, right for posts */
41 width: 100%;
42 height: 100%;
43 flex-direction: row;
44 justify-content: space-between;
45 align-items: center;
46 background-color: #12082b;
47 color: #ffffff;
48 }
49 #Feed {
50 width: 65%;
51 height: 80vh;
52 overflow-y: scroll;
53 padding: 20px;
54 }
55 #Account {
56 width: 35%;
57 height: 80vh;
58 overflow-y: scroll;
59 padding: 20px;
60 background-color: #070311;
61
62 border-radius: 10px;
63 }
64 #Header {
65 text-align: center;
66 font-size: 2em;
67 margin-bottom: 20px;
68 }
69</style>