fork of https://forged.synth.download/sd/pds-dash but with my cool and awesome customization!
pushing my changes
+525
-10
+4
-4
config.ts
+4
-4
config.ts
···
6
6
* The base URL of the PDS (Personal Data Server).
7
7
* @default none
8
8
*/
9
-
static readonly PDS_URL: string = "https://pds.synth.download";
9
+
static readonly PDS_URL: string = "https://at.gayfamicom.lol";
10
10
11
11
/**
12
12
* Theme to be used
13
13
* @default "default"
14
14
*/
15
-
static readonly THEME: string = "synthdownload";
15
+
static readonly THEME: string = "gayfamicom";
16
16
17
17
/**
18
18
* The base URL of the frontend service for linking to replies/quotes/accounts etc.
19
19
* @default "https://deer.social" // or https://bsky.app if you're boring
20
20
*/
21
-
static readonly FRONTEND_URL: string = "https://catsky.social";
21
+
static readonly FRONTEND_URL: string = "https://witchsky.app";
22
22
23
23
/**
24
24
* Maximum number of posts to fetch from the PDS per request
···
34
34
* @default "<a href='https://git.witchcraft.systems/scientific-witchery/pds-dash' target='_blank'>Source</a> (<a href='https://github.com/witchcraft-systems/pds-dash/' target='_blank'>github mirror</a>)"
35
35
*/
36
36
static readonly FOOTER_TEXT: string =
37
-
"<a href='https://synth.download' target='_blank'>Site</a> <span>•</span> <a href='https://forged.synth.download/sd/pds-dash' target='_blank'>Source</a>";
37
+
"<a href='https://gayfamicom.lol' target='_blank'>website</a> <span>•</span> <a href='https://git.gay/gayfamicom/pds-dash' target='_blank'>source</a>";
38
38
39
39
/**
40
40
* Whether to show the posts with timestamps that are in the future.
+1
-1
index.html
+1
-1
index.html
public/favicon.ico
public/favicon.ico
This is a binary file and will not be displayed.
+4
-4
src/App.svelte
+4
-4
src/App.svelte
···
42
42
detail: { loaded: () => void; complete: () => void };
43
43
}) => {
44
44
getNextPosts().then((newPosts) => {
45
-
console.log("Loading next posts...");
45
+
console.log("loadin next posts...");
46
46
if (newPosts.length > 0) {
47
47
posts = [...posts, ...newPosts];
48
48
loaded();
···
56
56
<main>
57
57
<div id="Content">
58
58
{#await accountsPromise}
59
-
<p>Loading...</p>
59
+
<p>loadin...</p>
60
60
{:then accountsData}
61
61
<div id="Account">
62
-
<h1 onclick={carameldansenfusion} id="Header">Synth.Download PDS</h1>
62
+
<h1 onclick={carameldansenfusion} id="Header"><img style="height: auto; width: 25px; margin-right: 10px;" src="favicon.ico">gayfamicom PDS</h1>
63
63
<p>Home to {accountsData.length} accounts</p>
64
64
<div id="accountsList">
65
65
{#each accountsData as accountObject}
···
69
69
<p>{@html Config.FOOTER_TEXT}</p>
70
70
</div>
71
71
{:catch error}
72
-
<p>Error: {error.message}</p>
72
+
<p>error: {error.message}</p>
73
73
{/await}
74
74
75
75
<div id="Feed">
+511
themes/gayfamicom/theme.css
+511
themes/gayfamicom/theme.css
···
1
+
/* Synth.Download-alike for pds-dash */
2
+
3
+
/* Ayu Light */
4
+
@media (prefers-color-scheme: light) {
5
+
:root {
6
+
--background: #dce0e8;
7
+
--foreground: #4c4f69;
8
+
--accent: #8839ef;
9
+
--link: hsl(from var(--accent) h s calc(l - 30)); /* darken for light */
10
+
11
+
--black: #8A9199;
12
+
--red: #F51818;
13
+
--green: #86B300;
14
+
--yellow: #F2AE49;
15
+
--blue: #399EE6;
16
+
--purple: #A37ACC;
17
+
--cyan: #4CBF99;
18
+
--white: #FAFAFA;
19
+
20
+
--dark-black: #575F66;
21
+
--dark-red: #F51818;
22
+
--dark-green: #86B300;
23
+
--dark-yellow: #F2AE49;
24
+
--dark-blue: #399EE6;
25
+
--dark-purple: #A37ACC;
26
+
--dark-cyan: #4CBF99;
27
+
--dark-white: #FAFAFA;
28
+
29
+
--border: hsl(from var(--foreground) h s calc(l + 10));
30
+
--hover: hsl(from var(--background) h s calc(l - 15));
31
+
--shadow: rgba(from var(--foreground) r g b / .8);
32
+
--focused: var(--dark-purple)
33
+
}
34
+
}
35
+
36
+
/* Astrodark */
37
+
@media (prefers-color-scheme: dark) {
38
+
:root {
39
+
--background: #1e1e2e;
40
+
--foreground: #cdd6f4;
41
+
--accent: #cba6f7;
42
+
--link: var(--accent);
43
+
44
+
--black: #576176;
45
+
--red: #FAA5AB;
46
+
--green: #A5CD84;
47
+
--yellow: #EFBD58;
48
+
--blue: #8DC3F1;
49
+
--purple: #DEAEED;
50
+
--cyan: #27FFDF;
51
+
--white: #CACCD3;
52
+
53
+
--dark-black: #111317;
54
+
--dark-red: #F8747E;
55
+
--dark-green: #75AD47;
56
+
--dark-yellow: #D09214;
57
+
--dark-blue: #50A4E9;
58
+
--dark-purple: #CC83E3;
59
+
--dark-cyan: #00B298;
60
+
--dark-white: #ADB0BB;
61
+
62
+
--border: hsl(from var(--background) h s calc(l + 40));
63
+
--hover: hsl(from var(--background) h s calc(l + 20));
64
+
;
65
+
--shadow: rgba(from var(--background) r g b / .8);
66
+
--focused: var(--dark-purple)
67
+
}
68
+
}
69
+
70
+
:root {
71
+
color-scheme: light dark;
72
+
}
73
+
74
+
/* hide accounts that don't want to appear on the frontend */
75
+
#Account *[href*="did:plc:hw7ld4s64f63ckseprlk4ksj"] {
76
+
display: none;
77
+
}
78
+
79
+
body {
80
+
margin: 0;
81
+
display: flex;
82
+
place-items: center;
83
+
background-color: var(--background);
84
+
font-family: monospace, -apple-system, system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
85
+
font-size: 14px;
86
+
line-height: 1.25;
87
+
color: var(--foreground);
88
+
border-color: var(--border);
89
+
overflow-wrap: break-word;
90
+
word-break: break-word;
91
+
hyphens: none;
92
+
}
93
+
94
+
a {
95
+
color: var(--foreground);
96
+
text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
97
+
text-decoration-thickness: 0.1em;
98
+
transition: 0.2s;
99
+
&:hover {
100
+
color: var(--link);
101
+
text-decoration-color: var(--accent);
102
+
text-decoration-skip-ink: none;
103
+
text-decoration-thickness: .3em;
104
+
}
105
+
}
106
+
107
+
h1 {
108
+
font-size: 2.5em;
109
+
line-height: 1.2;
110
+
font-weight: 700;
111
+
}
112
+
113
+
#app {
114
+
padding: 0;
115
+
text-align: center;
116
+
width: 100%;
117
+
}
118
+
119
+
/* Post Component */
120
+
#postContainer {
121
+
display: flex;
122
+
flex-direction: column;
123
+
border-radius: .8rem;
124
+
outline: 2px solid var(--accent);
125
+
background-color: var(--background);
126
+
margin-bottom: 20px;
127
+
overflow-wrap: break-word;
128
+
overflow: hidden;
129
+
margin-left: auto;
130
+
margin-right: auto;
131
+
box-shadow: 5px 5px solid var(--shadow);
132
+
transition: .2s;
133
+
max-width: 40rem;
134
+
}
135
+
136
+
#postContainer:hover {
137
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
138
+
outline: 4px solid var(--accent);
139
+
#postHeader {
140
+
border-color: var(--accent);
141
+
}
142
+
}
143
+
144
+
#postHeader {
145
+
display: flex;
146
+
flex-direction: row;
147
+
align-items: center;
148
+
justify-content: start;
149
+
padding: .8rem;
150
+
height: 60px;
151
+
border-bottom: .1rem solid var(--border);
152
+
font-weight: 600;
153
+
overflow-wrap: break-word;
154
+
transition: .2s;
155
+
}
156
+
157
+
#displayName {
158
+
display: block;
159
+
font-size: 1.1em;
160
+
padding: 0;
161
+
margin: 0 0 2px 0;
162
+
text-overflow: ellipsis;
163
+
overflow: hidden;
164
+
white-space: nowrap;
165
+
width: 100%;
166
+
letter-spacing: -0.01em;
167
+
text-decoration-color: transparent;
168
+
&:hover { text-decoration-color: var(--accent); }
169
+
}
170
+
171
+
#handle {
172
+
display: flex;
173
+
font-size: 0.85em;
174
+
font-weight: 400;
175
+
padding: 0;
176
+
margin: 0;
177
+
gap: .7rem;
178
+
a {
179
+
text-decoration-color: transparent;
180
+
&:hover { text-decoration-color: var(--accent); }
181
+
}
182
+
a:first-child {
183
+
opacity: .9;
184
+
}
185
+
}
186
+
187
+
#postLink {
188
+
padding: 0;
189
+
margin: 0;
190
+
margin-left: auto;
191
+
opacity: 0.7;
192
+
}
193
+
194
+
#postContent {
195
+
display: flex;
196
+
text-align: start;
197
+
flex-direction: column;
198
+
padding: 10px;
199
+
background-color: var(--background);
200
+
color: var(--foreground);
201
+
overflow-wrap: break-word;
202
+
white-space: pre-line;
203
+
line-height: 1.6;
204
+
}
205
+
206
+
#replyingText,
207
+
#quotingText {
208
+
font-size: 0.8em;
209
+
margin-bottom: .6rem;
210
+
padding: .2rem;
211
+
border-radius: .4rem;
212
+
color: var(--foreground);
213
+
background: color-mix(in srgb, var(--hover) 50%, transparent);
214
+
opacity: .7;
215
+
transition: .2s;
216
+
width: max-content;
217
+
&:hover {
218
+
opacity: 1;
219
+
outline: .1rem solid var(--accent);
220
+
}
221
+
}
222
+
223
+
#postText {
224
+
margin: 0 0 8px 0;
225
+
padding: 0;
226
+
overflow-wrap: break-word;
227
+
word-break: break-word;
228
+
hyphens: none;
229
+
font-size: 1.05em;
230
+
}
231
+
232
+
#headerText {
233
+
margin-left: 12px;
234
+
font-size: 0.9em;
235
+
text-align: start;
236
+
word-break: break-word;
237
+
width: 100%;
238
+
max-height: 95%;
239
+
overflow: hidden;
240
+
align-self: flex-start;
241
+
margin-top: auto;
242
+
margin-bottom: auto;
243
+
}
244
+
245
+
#carouselContainer {
246
+
position: relative;
247
+
width: 100%;
248
+
margin-top: 12px;
249
+
display: flex;
250
+
flex-direction: column;
251
+
align-items: center;
252
+
border-radius: 8px;
253
+
overflow: hidden;
254
+
}
255
+
256
+
#carouselControls {
257
+
display: flex;
258
+
justify-content: space-between;
259
+
align-items: center;
260
+
width: 100%;
261
+
max-width: 500px;
262
+
margin-top: 10px;
263
+
}
264
+
265
+
#carouselIndicators {
266
+
display: flex;
267
+
gap: 6px;
268
+
}
269
+
270
+
.indicator {
271
+
width: 6px;
272
+
height: 6px;
273
+
background-color: var(--indicator-inactive-color);
274
+
border-radius: 50%;
275
+
transition: background-color 0.2s ease, transform 0.2s ease;
276
+
}
277
+
278
+
.indicator.active {
279
+
background-color: var(--indicator-active-color);
280
+
transform: scale(1.3);
281
+
}
282
+
283
+
#prevBtn,
284
+
#nextBtn {
285
+
background-color: var(--button-bg);
286
+
color: var(--text-color);
287
+
border: 1px solid var(--border-color);
288
+
width: 32px;
289
+
height: 32px;
290
+
cursor: pointer;
291
+
display: flex;
292
+
align-items: center;
293
+
justify-content: center;
294
+
border-radius: 50%;
295
+
transition: background-color 0.15s ease, transform 0.15s ease;
296
+
font-size: 16px;
297
+
}
298
+
299
+
#prevBtn:hover:not(:disabled),
300
+
#nextBtn:hover:not(:disabled) {
301
+
background-color: var(--button-hover);
302
+
transform: scale(1.05);
303
+
}
304
+
305
+
#prevBtn:disabled,
306
+
#nextBtn:disabled {
307
+
opacity: 0.4;
308
+
cursor: not-allowed;
309
+
}
310
+
311
+
#embedVideo {
312
+
width: 100%;
313
+
max-width: 500px;
314
+
margin-top: 12px;
315
+
align-self: center;
316
+
border-radius: 8px;
317
+
overflow: hidden;
318
+
}
319
+
320
+
#embedImages {
321
+
min-width: min(100%, 500px);
322
+
max-width: min(100%, 500px);
323
+
max-height: 500px;
324
+
object-fit: contain;
325
+
margin: 0;
326
+
border-radius: 8px;
327
+
}
328
+
329
+
/* Account Component */
330
+
#accountContainer {
331
+
display: flex;
332
+
text-align: start;
333
+
align-items: center;
334
+
background-color: var(--content-background-color);
335
+
padding: 12px;
336
+
margin-bottom: 15px;
337
+
border: 1px solid var(--border-color);
338
+
border-radius: 12px;
339
+
transition: background-color 0.15s ease;
340
+
}
341
+
342
+
#accountContainer:hover {
343
+
background-color: var(--hover);
344
+
}
345
+
346
+
#accountName {
347
+
margin-left: 12px;
348
+
font-size: 0.95em;
349
+
max-width: 80%;
350
+
overflow: hidden;
351
+
text-overflow: ellipsis;
352
+
white-space: nowrap;
353
+
font-weight: 500;
354
+
}
355
+
356
+
#avatar {
357
+
width: 48px;
358
+
height: 48px;
359
+
margin: 0;
360
+
object-fit: cover;
361
+
border-radius: 20%;
362
+
box-shadow: 0 1px 3px var(--shadow);
363
+
}
364
+
365
+
/* App.Svelte Layout */
366
+
#Content {
367
+
display: flex;
368
+
width: 100%;
369
+
height: 100%;
370
+
flex-direction: row;
371
+
justify-content: space-between;
372
+
align-items: center;
373
+
background-color: var(--background);
374
+
gap: 24px;
375
+
}
376
+
377
+
#Feed {
378
+
overflow-y: auto;
379
+
height: 100vh;
380
+
width: 100%;
381
+
margin-right: 2rem;
382
+
padding-right: .6rem;
383
+
padding-left: .6rem;
384
+
}
385
+
386
+
#spacer {
387
+
padding: 0;
388
+
margin: 0;
389
+
height: 10vh;
390
+
width: 100%;
391
+
}
392
+
393
+
#Account {
394
+
max-width: 30rem;
395
+
display: flex;
396
+
flex-direction: column;
397
+
max-height: 90vh;
398
+
padding: 1rem;
399
+
margin-left: 1rem;
400
+
401
+
p:nth-child(2) {
402
+
text-align: left;
403
+
}
404
+
}
405
+
406
+
#accountsList {
407
+
display: flex;
408
+
flex-direction: column;
409
+
overflow-y: auto;
410
+
height: 100%;
411
+
width: 100%;
412
+
margin: 0;
413
+
#link {
414
+
text-decoration-color: transparent;
415
+
&:hover { text-decoration-color: var(--accent); }
416
+
#accountContainer {
417
+
border: .1rem solid var(--border);
418
+
border-radius: .8rem;
419
+
transition: .2s;
420
+
&:hover {
421
+
border-color: var(--accent);
422
+
}
423
+
}
424
+
}
425
+
}
426
+
427
+
#Header {
428
+
text-align: left;
429
+
font-size: 1.8em;
430
+
margin-bottom: 0;
431
+
color: var(--accent);
432
+
}
433
+
434
+
/* Mobile Styles */
435
+
@media screen and (max-width: 1010px) {
436
+
#Content {
437
+
flex-direction: column;
438
+
width: auto;
439
+
padding: 12px;
440
+
margin-top: 0;
441
+
}
442
+
443
+
#Account {
444
+
width: calc(100% - 32px);
445
+
padding: 16px;
446
+
margin-bottom: 20px;
447
+
margin-left: 0;
448
+
margin-right: 0;
449
+
height: auto;
450
+
order: -1;
451
+
}
452
+
453
+
#Feed {
454
+
width: 100%;
455
+
margin: 0;
456
+
padding: 0;
457
+
overflow-y: visible;
458
+
}
459
+
460
+
#spacer {
461
+
height: 5vh;
462
+
}
463
+
464
+
body {
465
+
font-size: 16px;
466
+
}
467
+
468
+
#postHeader {
469
+
padding: 10px;
470
+
height: auto;
471
+
min-height: 50px;
472
+
}
473
+
}
474
+
475
+
/* Scrollbar Styles */
476
+
::-webkit-scrollbar {
477
+
width: 0px;
478
+
background: transparent;
479
+
padding: 0;
480
+
margin: 0;
481
+
}
482
+
483
+
::-webkit-scrollbar-thumb {
484
+
background: transparent;
485
+
border-radius: 0;
486
+
}
487
+
488
+
::-webkit-scrollbar-track {
489
+
background: transparent;
490
+
border-radius: 0;
491
+
}
492
+
493
+
::-webkit-scrollbar-corner {
494
+
background: transparent;
495
+
border-radius: 0;
496
+
}
497
+
498
+
::-webkit-scrollbar-button {
499
+
background: transparent;
500
+
border-radius: 0;
501
+
}
502
+
503
+
* {
504
+
scrollbar-width: none;
505
+
scrollbar-color: transparent transparent;
506
+
-ms-overflow-style: none;
507
+
/* IE and Edge */
508
+
-webkit-overflow-scrolling: touch;
509
+
-webkit-scrollbar: none;
510
+
/* Safari */
511
+
}
+5
-1
themes/synthdownload/theme.css
+5
-1
themes/synthdownload/theme.css