this repo has no description
Style still WIP but much better now
+113
-61
+7
-1
config.ts
+7
-1
config.ts
···
6
6
* The base URL of the PDS (Personal Data Server)
7
7
* @default "https://pds.witchcraft.systems"
8
8
*/
9
-
static readonly PDS_URL: string = "https://pds.witchcraft.systems";
9
+
static readonly PDS_URL: string = "https://ap.brid.gy";
10
10
11
11
/**
12
12
* The base URL of the frontend service for linking to replies
13
13
* @default "https://deer.social"
14
14
*/
15
15
static readonly FRONTEND_URL: string = "https://deer.social";
16
+
17
+
/**
18
+
* Maximum number of posts to fetch from the PDS per user
19
+
* @default 10
20
+
*/
21
+
static readonly MAX_POSTS_PER_USER: number = 1;
16
22
}
+29
-5
src/App.svelte
+29
-5
src/App.svelte
···
14
14
<div id="Account">
15
15
<h1 id="Header">ATProto PDS</h1>
16
16
<p>Home to {accountsData.length} accounts</p>
17
+
<div id="accountsList">
17
18
{#each accountsData as accountObject}
18
19
<AccountComponent account={accountObject} />
19
20
{/each}
21
+
</div>
20
22
</div>
21
23
{:catch error}
22
24
<p>Error: {error.message}</p>
···
26
28
<p>Loading...</p>
27
29
{:then postsData}
28
30
<div id="Feed">
31
+
<div id="spacer"></div>
29
32
{#each postsData as postObject}
30
33
<PostComponent post={postObject as Post} />
31
34
{/each}
35
+
<div id="spacer"></div>
32
36
</div>
33
37
{/await}
34
38
</div>
···
48
52
}
49
53
#Feed {
50
54
width: 65%;
51
-
height: 80vh;
55
+
height: 100vh;
52
56
overflow-y: scroll;
53
57
padding: 20px;
58
+
padding-bottom: 0;
59
+
padding-top: 0;
60
+
margin-top: 0;
61
+
margin-bottom: 0;
62
+
}
63
+
#spacer {
64
+
padding: 0;
65
+
margin: 0;
66
+
height: 10vh;
67
+
width: 100%;
54
68
}
55
69
#Account {
56
70
width: 35%;
71
+
display: flex;
72
+
flex-direction: column;
73
+
border: 1px solid #8054f0;
74
+
background-color: #0d0620;
57
75
height: 80vh;
76
+
padding: 20px;
77
+
}
78
+
#accountsList {
79
+
display: flex;
80
+
flex-direction: column;
58
81
overflow-y: scroll;
59
-
padding: 20px;
60
-
background-color: #070311;
61
-
62
-
border-radius: 10px;
82
+
height: 100%;
83
+
width: 100%;
84
+
padding: 0px;
85
+
margin: 0px;
63
86
}
87
+
64
88
#Header {
65
89
text-align: center;
66
90
font-size: 2em;
+23
-4
src/app.css
+23
-4
src/app.css
···
6
6
::-webkit-scrollbar {
7
7
width: 0px;
8
8
background: transparent;
9
+
padding: 0;
10
+
margin: 0;
9
11
}
10
-
12
+
::-webkit-scrollbar-thumb {
13
+
background: transparent;
14
+
border-radius: 0;
15
+
}
16
+
::-webkit-scrollbar-track {
17
+
background: transparent;
18
+
border-radius: 0;
19
+
}
20
+
::-webkit-scrollbar-corner {
21
+
background: transparent;
22
+
border-radius: 0;
23
+
}
24
+
::-webkit-scrollbar-button {
25
+
background: transparent;
26
+
border-radius: 0;
27
+
}
11
28
* {
12
-
scrollbar-width: thin;
29
+
scrollbar-width: none;
13
30
scrollbar-color: transparent transparent;
14
31
-ms-overflow-style: none; /* IE and Edge */
15
32
-webkit-overflow-scrolling: touch;
···
45
62
46
63
#app {
47
64
max-width: 1400px;
48
-
margin: 0 auto;
49
-
padding: 2rem;
65
+
margin: 0;
66
+
padding: 0;
67
+
margin-left: auto;
68
+
margin-right: auto;
50
69
text-align: center;
51
70
}
52
71
+38
-39
src/lib/AccountComponent.svelte
+38
-39
src/lib/AccountComponent.svelte
···
1
1
<script lang="ts">
2
-
import type { AccountMetadata } from "./pdsfetch";
3
-
const { account }: { account: AccountMetadata } = $props();
4
-
import { Config } from "../../config";
2
+
import type { AccountMetadata } from "./pdsfetch";
3
+
const { account }: { account: AccountMetadata } = $props();
4
+
import { Config } from "../../config";
5
5
</script>
6
6
7
7
<a id="link" href="{Config.FRONTEND_URL}/profile/{account.did}">
8
-
<div id="accountContainer">
9
-
{#if account.avatarCid}
10
-
<img
11
-
id="avatar"
12
-
alt="avatar of {account.displayName}"
13
-
src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
14
-
/>
15
-
{/if}
16
-
<div id="accountName">
17
-
{account.displayName || account.handle || account.did}
18
-
</div>
8
+
<div id="accountContainer">
9
+
{#if account.avatarCid}
10
+
<img
11
+
id="avatar"
12
+
alt="avatar of {account.displayName}"
13
+
src="{Config.PDS_URL}/xrpc/com.atproto.sync.getBlob?did={account.did}&cid={account.avatarCid}"
14
+
/>
15
+
{/if}
16
+
<div id="accountName">
17
+
{account.displayName || account.handle || account.did}
19
18
</div>
19
+
</div>
20
20
</a>
21
21
22
22
<style>
23
-
#accountContainer {
24
-
display: flex;
25
-
text-align: start;
26
-
align-items: center;
27
-
background-color: #0d0620;
28
-
padding: 4%;
29
-
margin: 10px;
23
+
#accountContainer {
24
+
display: flex;
25
+
text-align: start;
26
+
align-items: center;
27
+
background-color: #12082b;
28
+
padding: 0px;
29
+
margin-bottom: 15px;
30
+
border: 1px solid #8054f0;
31
+
}
32
+
#accountName {
33
+
margin-left: 10px;
34
+
font-size: 0.9em;
30
35
31
-
/* round corners */
32
-
border-radius: 10px;
33
-
}
34
-
#accountName {
35
-
margin-left: 10px;
36
-
font-size: 0.9em;
37
-
38
-
/* replace overflow with ellipsis */
39
-
overflow: hidden;
40
-
text-overflow: ellipsis;
41
-
white-space: nowrap;
42
-
max-width: 80%;
43
-
}
44
-
#avatar {
45
-
width: 50px;
46
-
height: 50px;
47
-
border-radius: 50%;
48
-
}
36
+
/* replace overflow with ellipsis */
37
+
overflow: hidden;
38
+
text-overflow: ellipsis;
39
+
white-space: nowrap;
40
+
max-width: 80%;
41
+
}
42
+
#avatar {
43
+
width: 50px;
44
+
height: 50px;
45
+
margin: 0px;
46
+
border-right: #8054f0 1px solid;
47
+
}
49
48
</style>
+15
-11
src/lib/PostComponent.svelte
+15
-11
src/lib/PostComponent.svelte
···
25
25
</div>
26
26
<div id="postContent">
27
27
{#if post.replyingUri}
28
-
<a
29
-
id="replyingText"
30
-
href="https://deer.social/profile/{post.replyingUri.repo}/post/{post
31
-
.replyingUri.rkey}">replying to {post.replyingUri.repo}</a
32
-
>
28
+
<a
29
+
id="replyingText"
30
+
href="{Config.FRONTEND_URL}/profile/{post.replyingUri.repo}/post/{post
31
+
.replyingUri.rkey}">replying to {post.replyingUri.repo}</a
32
+
>
33
33
{/if}
34
-
<p>{post.text}</p>
35
-
34
+
<div id="postText">{post.text}</div>
36
35
{#if post.quotingUri}
37
36
<a
38
37
id="quotingText"
39
-
href="https://deer.social/profile/{post.quotingUri.repo}/post/{post
38
+
href="{Config.FRONTEND_URL}/profile/{post.quotingUri.repo}/post/{post
40
39
.quotingUri.rkey}">quoting {post.quotingUri.repo}</a
41
40
>
42
41
{/if}
···
66
65
flex-direction: column;
67
66
border: 1px solid #8054f0;
68
67
background-color: black;
69
-
margin-bottom: -1px;
68
+
margin-bottom: 15px;
69
+
overflow-wrap: break-word;
70
70
}
71
71
#postHeader {
72
72
display: flex;
···
78
78
height: fit-content;
79
79
border-bottom: 1px solid #8054f0;
80
80
font-weight: bold;
81
+
overflow-wrap: break-word;
81
82
}
82
83
#postContent {
83
84
display: flex;
···
86
87
padding: 10px;
87
88
background-color: #0d0620;
88
89
color: white;
90
+
overflow-wrap: break-word;
89
91
}
90
92
#replyingText {
91
93
font-size: 0.7em;
92
-
color: white;
93
94
margin: 0;
94
-
margin-bottom: 10px;
95
95
padding: 0;
96
+
padding-bottom: 5px;
96
97
}
97
98
#postText {
98
99
margin: 0;
100
+
margin-bottom: 5px;
99
101
padding: 0;
100
102
}
101
103
#headerText {
102
104
margin-left: 10px;
103
105
font-size: 0.9em;
104
106
text-align: start;
107
+
overflow-wrap: break-word;
108
+
overflow: hidden;
105
109
}
106
110
#avatar {
107
111
width: 50px;