fork of https://forged.synth.download/sd/pds-dash but with my cool and awesome customization!
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

pushing my changes

Niko 8b7b755e 5ac84f41

+525 -10
+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
··· 3 3 <head> 4 4 <meta charset="UTF-8" /> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 - <title>Synth.Download PDS</title> 6 + <title>at.gayfamicom.lol PDS</title> 7 7 </head> 8 8 <body> 9 9 <div id="app"></div>
public/favicon.ico

This is a binary file and will not be displayed.

+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
··· 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
··· 33 33 } 34 34 } 35 35 36 + img:hover { 37 + transform: scale(1.5); 38 + } 39 + 36 40 /* Astrodark */ 37 41 @media (prefers-color-scheme: dark) { 38 42 :root { ··· 508 512 -webkit-overflow-scrolling: touch; 509 513 -webkit-scrollbar: none; 510 514 /* Safari */ 511 - } 515 + }