zzstoatzz.io
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>
-1
src/lib/components/PdsPanel.svelte
-1
src/lib/components/PdsPanel.svelte
+131
-1
src/routes/+page.svelte
+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>