witchcraft.systems
+12
-1
.forgejo/workflows/deploy.yaml
+12
-1
.forgejo/workflows/deploy.yaml
···
6
6
- main
7
7
- astra/ci
8
8
9
+
9
10
jobs:
10
11
deploy:
11
12
name: Deploy
12
13
runs-on: ubuntu-latest
13
14
14
15
steps:
15
-
- name: Checkout repo
16
+
- name: Checkout main repo
16
17
uses: actions/checkout@v4
17
18
19
+
- name: Checkout overrides repo
20
+
uses: actions/checkout@v4
21
+
with:
22
+
repository: scientific-witchery/pds-dash-overrides
23
+
token: ${{ secrets.OVERRIDES_TOKEN}}
24
+
path: overrides
25
+
26
+
- name: Copy config file to root
27
+
run: cp overrides/config.ts ./config.ts
28
+
18
29
- name: Setup Node.js
19
30
uses: actions/setup-node@v3
20
31
with:
+21
-1
src/App.svelte
+21
-1
src/App.svelte
···
9
9
10
10
let posts: Post[] = [];
11
11
12
+
let hue: number = 1;
13
+
const cycleColors = async () => {
14
+
while (true) {
15
+
hue += 1;
16
+
if (hue > 360) {
17
+
hue = 0;
18
+
}
19
+
document.documentElement.style.setProperty("--primary-h", hue.toString());
20
+
await new Promise((resolve) => setTimeout(resolve, 10));
21
+
}
22
+
}
23
+
let clickCounter = 0;
24
+
const carameldansenfusion = async () => {
25
+
clickCounter++;
26
+
if (clickCounter >= 10) {
27
+
clickCounter = 0;
28
+
cycleColors();
29
+
}
30
+
};
31
+
12
32
onMount(() => {
13
33
// Fetch initial posts
14
34
getNextPosts().then((initialPosts) => {
···
39
59
<p>Loading...</p>
40
60
{:then accountsData}
41
61
<div id="Account">
42
-
<h1 id="Header">ATProto PDS</h1>
62
+
<h1 onclick={carameldansenfusion} id="Header">ATProto PDS</h1>
43
63
<p>Home to {accountsData.length} accounts</p>
44
64
<div id="accountsList">
45
65
{#each accountsData as accountObject}
+3
-2
themes/default/theme.css
+3
-2
themes/default/theme.css
···
2
2
3
3
:root {
4
4
/* Modern color palette */
5
-
--link-color: #4f46e5;
5
+
--primary-h: 243;
6
+
--link-color: hsl(var(--primary-h), 73%, 59%);
6
7
--link-hover-color: #4338ca;
7
8
--time-color: #8b5cf6;
8
9
--background-color: #f8fafc;
···
342
343
font-size: 1.8em;
343
344
margin-bottom: 16px;
344
345
font-weight: 700;
345
-
background: linear-gradient(to right, #3b82f6, #8b5cf6);
346
+
background: linear-gradient(to right, var(--link-color), #8b5cf6);
346
347
-webkit-background-clip: text;
347
348
-webkit-text-fill-color: transparent;
348
349
background-clip: text;
+370
themes/express/theme.css
+370
themes/express/theme.css
···
1
+
@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap");
2
+
3
+
:root {
4
+
/* Color overrides, edit to whatever you want */
5
+
--primary-h: 341; /* Hue */
6
+
--background-color: hsl(var(--primary-h), 62%, 30%);
7
+
--text-color: hsl(var(--primary-h), 69%, 18%);
8
+
--link-color: hsl(var(--primary-h), 100%, 20%);
9
+
--link-hover-color: hsl(var(--primary-h), 20%, 20%);
10
+
--border-color: hsl(var(--primary-h), 59%, 52%);
11
+
--content-background-color: hsl(var(--primary-h), 97%, 73%);
12
+
13
+
--header-background-color: hsl(var(--primary-h), 97%, 73%);
14
+
--indicator-inactive-color: #4a4a4a;
15
+
--indicator-active-color: var(--border-color);
16
+
}
17
+
18
+
a {
19
+
font-weight: 500;
20
+
color: var(--link-color);
21
+
text-decoration: inherit;
22
+
}
23
+
a:hover {
24
+
color: var(--link-hover-color);
25
+
text-decoration: underline;
26
+
}
27
+
28
+
body {
29
+
margin: 0;
30
+
display: flex;
31
+
place-items: center;
32
+
min-width: 320px;
33
+
min-height: 100vh;
34
+
background-color: var(--background-color);
35
+
font-family: "Share Tech Mono", monospace;
36
+
font-size: 24px;
37
+
color: var(--text-color);
38
+
border-color: var(--border-color);
39
+
overflow-wrap: break-word;
40
+
word-wrap: normal;
41
+
word-break: break-word;
42
+
hyphens: none;
43
+
}
44
+
45
+
h1 {
46
+
font-size: 3.2em;
47
+
line-height: 1.1;
48
+
}
49
+
50
+
#app {
51
+
max-width: 1400px;
52
+
width: 100%;
53
+
margin: 0;
54
+
padding: 0;
55
+
margin-left: auto;
56
+
margin-right: auto;
57
+
text-align: center;
58
+
}
59
+
60
+
/* Post Component */
61
+
a:hover {
62
+
text-decoration: underline;
63
+
}
64
+
#postContainer {
65
+
display: flex;
66
+
flex-direction: column;
67
+
border: 4px solid var(--border-color);
68
+
background-color: var(--background-color);
69
+
margin-bottom: 15px;
70
+
overflow-wrap: break-word;
71
+
box-shadow: var(--border-color) 10px 10px;
72
+
}
73
+
#postHeader {
74
+
display: flex;
75
+
flex-direction: row;
76
+
align-items: center;
77
+
justify-content: start;
78
+
background-color: var(--header-background-color);
79
+
padding: 0px 0px;
80
+
height: fit-content;
81
+
82
+
font-weight: bold;
83
+
overflow-wrap: break-word;
84
+
height: 64px;
85
+
}
86
+
#displayName {
87
+
display: block;
88
+
color: var(--text-color);
89
+
font-size: 1.2em;
90
+
padding: 0;
91
+
margin: 0;
92
+
overflow-wrap: normal;
93
+
word-wrap: break-word;
94
+
word-break: break-word;
95
+
text-overflow: ellipsis;
96
+
overflow: hidden;
97
+
white-space: nowrap;
98
+
width: 100%;
99
+
}
100
+
#handle {
101
+
display: block;
102
+
color: var(--border-color);
103
+
font-size: 0.8em;
104
+
padding: 0;
105
+
margin: 0;
106
+
}
107
+
108
+
#postLink {
109
+
color: var(--link-hover-color);
110
+
font-size: 0.8em;
111
+
padding: 0;
112
+
margin: 0;
113
+
}
114
+
#postContent {
115
+
display: flex;
116
+
text-align: start;
117
+
flex-direction: column;
118
+
padding: 10px;
119
+
background-color: var(--content-background-color);
120
+
color: var(--text-color);
121
+
overflow-wrap: break-word;
122
+
white-space: pre-line;
123
+
}
124
+
#replyingText {
125
+
font-size: 0.7em;
126
+
margin: 0;
127
+
padding: 0;
128
+
padding-bottom: 5px;
129
+
}
130
+
#quotingText {
131
+
font-size: 0.7em;
132
+
margin: 0;
133
+
padding: 0;
134
+
padding-bottom: 5px;
135
+
}
136
+
#postText {
137
+
margin: 0;
138
+
padding: 0;
139
+
overflow-wrap: break-word;
140
+
word-wrap: normal;
141
+
word-break: break-word;
142
+
hyphens: none;
143
+
}
144
+
#headerText {
145
+
margin-left: 10px;
146
+
font-size: 0.9em;
147
+
text-align: start;
148
+
word-break: break-word;
149
+
max-width: 80%;
150
+
max-height: 95%;
151
+
overflow: hidden;
152
+
align-self: flex-start;
153
+
margin-top: auto;
154
+
margin-bottom: auto;
155
+
}
156
+
#avatar {
157
+
height: 30px;
158
+
width: 30px;
159
+
overflow: hidden;
160
+
object-fit: cover;
161
+
}
162
+
#postContainer #avatar {
163
+
height: 60px;
164
+
width: 60px;
165
+
border-right: var(--border-color) 4px solid;
166
+
border-bottom: var(--border-color) 4px solid;
167
+
}
168
+
#carouselContainer {
169
+
position: relative;
170
+
width: 100%;
171
+
margin-top: 10px;
172
+
display: flex;
173
+
flex-direction: column;
174
+
align-items: center;
175
+
}
176
+
#carouselControls {
177
+
display: flex;
178
+
justify-content: space-between;
179
+
align-items: center;
180
+
width: 100%;
181
+
max-width: 500px;
182
+
margin-top: 5px;
183
+
}
184
+
#carouselIndicators {
185
+
display: flex;
186
+
gap: 5px;
187
+
}
188
+
.indicator {
189
+
width: 8px;
190
+
height: 8px;
191
+
background-color: var(--indicator-inactive-color);
192
+
}
193
+
.indicator.active {
194
+
background-color: var(--indicator-active-color);
195
+
}
196
+
#prevBtn,
197
+
#nextBtn {
198
+
background-color: rgba(31, 17, 69, 0.7);
199
+
color: var(--text-color);
200
+
border: 4px solid var(--border-color);
201
+
width: 30px;
202
+
height: 30px;
203
+
cursor: pointer;
204
+
display: flex;
205
+
align-items: center;
206
+
justify-content: center;
207
+
}
208
+
#prevBtn:disabled,
209
+
#nextBtn:disabled {
210
+
opacity: 0.5;
211
+
cursor: not-allowed;
212
+
}
213
+
#embedVideo {
214
+
width: 100%;
215
+
max-width: 500px;
216
+
margin-top: 10px;
217
+
align-self: center;
218
+
}
219
+
220
+
#embedImages {
221
+
min-width: min(100%, 500px);
222
+
max-width: min(100%, 500px);
223
+
max-height: 500px;
224
+
object-fit: contain;
225
+
226
+
margin: 0;
227
+
}
228
+
229
+
/* Account Component */
230
+
#accountContainer {
231
+
display: flex;
232
+
text-align: start;
233
+
align-items: center;
234
+
background-color: var(--header-background-color);
235
+
padding: 0px;
236
+
margin-bottom: 15px;
237
+
margin-right: 4px;
238
+
border: 4px solid var(--border-color);
239
+
box-shadow: var(--border-color) 10px 10px;
240
+
}
241
+
#accountName {
242
+
margin-left: 10px;
243
+
font-size: 1em;
244
+
max-width: 80%;
245
+
246
+
/* replace overflow with ellipsis */
247
+
overflow: hidden;
248
+
text-overflow: ellipsis;
249
+
white-space: nowrap;
250
+
}
251
+
252
+
/* App.Svelte */
253
+
/* desktop style */
254
+
255
+
#Content {
256
+
display: flex;
257
+
/* split the screen in half, left for accounts, right for posts */
258
+
width: 100%;
259
+
height: 100%;
260
+
flex-direction: row;
261
+
justify-content: space-between;
262
+
align-items: center;
263
+
background-color: var(--background-color);
264
+
color: var(--text-color);
265
+
}
266
+
#Feed {
267
+
overflow-y: scroll;
268
+
width: 65%;
269
+
height: 100vh;
270
+
padding: 20px;
271
+
padding-bottom: 0;
272
+
padding-top: 0;
273
+
margin-top: 0;
274
+
margin-bottom: 0;
275
+
}
276
+
#spacer {
277
+
padding: 0;
278
+
margin: 0;
279
+
height: 10vh;
280
+
width: 100%;
281
+
}
282
+
#Account {
283
+
width: 35%;
284
+
display: flex;
285
+
flex-direction: column;
286
+
border: 4px solid var(--border-color);
287
+
background-color: var(--content-background-color);
288
+
box-shadow: var(--border-color) 10px 10px;
289
+
height: 80vh;
290
+
padding: 20px;
291
+
margin-left: 20px;
292
+
}
293
+
#accountsList {
294
+
display: flex;
295
+
flex-direction: column;
296
+
overflow-y: scroll;
297
+
height: 100%;
298
+
width: 100%;
299
+
padding: 0px;
300
+
margin: 0px;
301
+
}
302
+
303
+
#Header {
304
+
text-align: center;
305
+
font-size: 2em;
306
+
margin-bottom: 20px;
307
+
}
308
+
309
+
/* mobile style */
310
+
@media screen and (max-width: 600px) {
311
+
#Content {
312
+
flex-direction: column;
313
+
width: auto;
314
+
padding-left: 0px;
315
+
padding-right: 0px;
316
+
margin-top: 5%;
317
+
}
318
+
#Account {
319
+
width: 85%;
320
+
padding-left: 5%;
321
+
padding-right: 5%;
322
+
margin-bottom: 20px;
323
+
margin-left: 5%;
324
+
margin-right: 5%;
325
+
height: auto;
326
+
}
327
+
#Feed {
328
+
width: 95%;
329
+
margin: 0px;
330
+
margin-left: 10%;
331
+
margin-right: 10%;
332
+
padding: 0px;
333
+
overflow-y: visible;
334
+
}
335
+
336
+
#spacer {
337
+
height: 0;
338
+
}
339
+
}
340
+
341
+
::-webkit-scrollbar {
342
+
width: 0px;
343
+
background: transparent;
344
+
padding: 0;
345
+
margin: 0;
346
+
}
347
+
::-webkit-scrollbar-thumb {
348
+
background: transparent;
349
+
border-radius: 0;
350
+
}
351
+
::-webkit-scrollbar-track {
352
+
background: transparent;
353
+
border-radius: 0;
354
+
}
355
+
::-webkit-scrollbar-corner {
356
+
background: transparent;
357
+
border-radius: 0;
358
+
}
359
+
::-webkit-scrollbar-button {
360
+
background: transparent;
361
+
border-radius: 0;
362
+
}
363
+
364
+
* {
365
+
scrollbar-width: none;
366
+
scrollbar-color: transparent transparent;
367
+
-ms-overflow-style: none; /* IE and Edge */
368
+
-webkit-overflow-scrolling: touch;
369
+
-webkit-scrollbar: none; /* Safari */
370
+
}