this repo has no description sites.wisp.place/zzstoatzz.io/pds-message-poc
pds messaging

add infrastructure section showing backing services

clickable cards linking to the real ATProto infrastructure:
- PDS (describeServer endpoint)
- spam labeler (DID on plc.directory)
- PLC directory

also fix panel height alignment in grid layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

+131 -2
-1
src/lib/components/PdsPanel.svelte
··· 54 54 background: #111; 55 55 border: 1px solid #222; 56 56 padding: 1rem; 57 - height: 400px; 58 57 display: flex; 59 58 flex-direction: column; 60 59 }
+131 -1
src/routes/+page.svelte
··· 248 248 {/key} 249 249 {/if} 250 250 251 + <section class="infrastructure"> 252 + <h3>infrastructure</h3> 253 + <p class="infra-desc">this demo is backed by real ATProto services</p> 254 + <div class="infra-grid"> 255 + <a href="https://pds-message-demo.nate-8fe.workers.dev/xrpc/com.atproto.server.describeServer" target="_blank" class="infra-card"> 256 + <div class="infra-icon"> 257 + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> 258 + <rect x="2" y="3" width="20" height="18" rx="2"/> 259 + <line x1="2" y1="9" x2="22" y2="9"/> 260 + <circle cx="6" cy="6" r="1" fill="currentColor"/> 261 + <circle cx="10" cy="6" r="1" fill="currentColor"/> 262 + </svg> 263 + </div> 264 + <div class="infra-content"> 265 + <div class="infra-label">personal data server</div> 266 + <div class="infra-value">pds-message-demo.nate-8fe.workers.dev</div> 267 + <div class="infra-detail">cloudflare worker + durable objects</div> 268 + </div> 269 + </a> 270 + 271 + <a href="https://plc.directory/did:plc:x6io7svnbth4pikg2e63vvkx" target="_blank" class="infra-card"> 272 + <div class="infra-icon"> 273 + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> 274 + <path d="M12 2L2 7l10 5 10-5-10-5z"/> 275 + <path d="M2 17l10 5 10-5"/> 276 + <path d="M2 12l10 5 10-5"/> 277 + </svg> 278 + </div> 279 + <div class="infra-content"> 280 + <div class="infra-label">spam labeler</div> 281 + <div class="infra-value">did:plc:x6io7svnbth4pikg2e63vvkx</div> 282 + <div class="infra-detail">signs labels with secp256k1 + dag-cbor</div> 283 + </div> 284 + </a> 285 + 286 + <a href="https://plc.directory" target="_blank" class="infra-card"> 287 + <div class="infra-icon"> 288 + <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"> 289 + <circle cx="12" cy="12" r="10"/> 290 + <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/> 291 + <line x1="2" y1="12" x2="22" y2="12"/> 292 + </svg> 293 + </div> 294 + <div class="infra-content"> 295 + <div class="infra-label">did:plc directory</div> 296 + <div class="infra-value">plc.directory</div> 297 + <div class="infra-detail">resolves DIDs to signing keys & endpoints</div> 298 + </div> 299 + </a> 300 + </div> 301 + </section> 302 + 251 303 <footer> 252 304 <p> 253 305 inspired by <a href="https://bsky.app/profile/jacob.gold/post/3mbsbqsc3vc24">jacob.gold's post</a> 254 306 · 255 - <a href="https://tangled.org/zzstoatzz.io/pds-message-poc">source</a> 307 + <a href="https://tangled.sh/zzstoatzz.io/pds-message-poc">source</a> 256 308 </p> 257 309 </footer> 258 310 ··· 275 327 gap: 1rem; 276 328 max-width: 1000px; 277 329 margin: 0 auto; 330 + align-items: stretch; 278 331 } 279 332 280 333 .center { ··· 443 496 padding: 1rem; 444 497 color: #444; 445 498 font-size: 12px; 499 + align-self: stretch; 446 500 } 447 501 448 502 .state-summary { ··· 472 526 } 473 527 .state-grid .blocked { 474 528 color: #a44; 529 + } 530 + 531 + .infrastructure { 532 + max-width: 1000px; 533 + margin: 2rem auto 0; 534 + padding: 1.5rem; 535 + } 536 + .infrastructure h3 { 537 + font-size: 11px; 538 + color: #555; 539 + text-transform: lowercase; 540 + margin-bottom: 0.25rem; 541 + text-align: center; 542 + } 543 + .infra-desc { 544 + font-size: 11px; 545 + color: #444; 546 + text-align: center; 547 + margin-bottom: 1rem; 548 + } 549 + .infra-grid { 550 + display: grid; 551 + grid-template-columns: repeat(3, 1fr); 552 + gap: 1rem; 553 + } 554 + .infra-card { 555 + display: flex; 556 + gap: 1rem; 557 + padding: 1rem; 558 + background: #0d0d0d; 559 + border: 1px solid #1a1a1a; 560 + text-decoration: none; 561 + transition: border-color 0.15s, background 0.15s; 562 + } 563 + .infra-card:hover { 564 + border-color: #333; 565 + background: #111; 566 + } 567 + .infra-icon { 568 + flex-shrink: 0; 569 + width: 32px; 570 + height: 32px; 571 + color: #444; 572 + } 573 + .infra-card:hover .infra-icon { 574 + color: #666; 575 + } 576 + .infra-icon svg { 577 + width: 100%; 578 + height: 100%; 579 + } 580 + .infra-content { 581 + min-width: 0; 582 + } 583 + .infra-label { 584 + font-size: 10px; 585 + color: #666; 586 + text-transform: uppercase; 587 + letter-spacing: 0.5px; 588 + margin-bottom: 2px; 589 + } 590 + .infra-value { 591 + font-size: 11px; 592 + color: #888; 593 + font-family: monospace; 594 + overflow: hidden; 595 + text-overflow: ellipsis; 596 + white-space: nowrap; 597 + } 598 + .infra-card:hover .infra-value { 599 + color: #aaa; 600 + } 601 + .infra-detail { 602 + font-size: 10px; 603 + color: #444; 604 + margin-top: 4px; 475 605 } 476 606 </style>