microcosm.blue
bad-example.com
+122
-46
index.html
+122
-46
index.html
···
3
3
<head>
4
4
<meta charset="utf-8">
5
5
<meta name="viewport" content="width=device-width"/>
6
+
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
6
7
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
7
8
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css"/>
8
9
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
···
146
147
description: null,
147
148
accounts: [],
148
149
accountsComplete: false,
150
+
version: null,
149
151
150
152
async init() {
151
153
await this.update(pds);
···
156
158
this.error = null;
157
159
this.description = null;
158
160
this.accounts = [];
161
+
this.accountsComplete = false;
162
+
this.version = null;
163
+
164
+
if (!pds) {
165
+
this.loadingDesc = false;
166
+
return;
167
+
}
168
+
159
169
let query = window.SimpleQuery(pds);
160
170
try {
161
171
this.description = await query('com.atproto.server.describeServer');
···
167
177
console.error(e);
168
178
}
169
179
}
180
+
let health
181
+
try {
182
+
health = await query('_health');
183
+
this.version = health.version;
184
+
} catch (e) {
185
+
if (window.isXrpcErr(e)) {
186
+
this.error = e.error;
187
+
} else {
188
+
this.error = 'Failed to reach (see console)';
189
+
console.error(e);
190
+
}
191
+
}
170
192
let accountsRes;
171
193
try {
172
194
accountsRes = await query('com.atproto.sync.listRepos', {
173
-
params: { limit: 7 },
195
+
params: { limit: 100 },
174
196
});
175
197
this.accounts = accountsRes.repos;
176
198
this.accountsComplete == !accountsRes.cursor;
···
272
294
this.loading = false;
273
295
},
274
296
}));
297
+
298
+
Alpine.data('didToHandle', did => ({
299
+
loading: false,
300
+
error: null,
301
+
handle: null,
302
+
async load() {
303
+
loading = true;
304
+
error = null;
305
+
handle = null;
306
+
let data;
307
+
try {
308
+
data = await window.slingshot('com.bad-example.identity.resolveMiniDoc', {
309
+
params: { identifier: did },
310
+
});
311
+
this.handle = data.handle;
312
+
} catch (e) {
313
+
if (window.isXrpcErr(e)) {
314
+
this.error = e.error;
315
+
} else {
316
+
this.error = 'failed (see console)';
317
+
console.error(e);
318
+
}
319
+
}
320
+
loading = false;
321
+
}
322
+
}))
275
323
})
276
324
</script>
277
325
</head>
···
341
389
<p x-show="loadingDesc">Loading…</p>
342
390
<p x-show="error" class="text-warning" x-text="error"></p>
343
391
<template x-if="description !== null">
344
-
<div class="overflow-x-auto">
345
-
<table class="table table-xs">
346
-
<tbody>
347
-
<tr>
348
-
<td class="text-sm">Open registration</td>
349
-
<td
350
-
class="text-sm"
351
-
x-text="!description.inviteCodeRequired"
352
-
></td>
353
-
</tr>
354
-
</tbody>
355
-
</table>
356
-
<h4 class="font-bold">
357
-
Accounts
358
-
</h4>
359
-
<table class="table table-xs">
360
-
<tbody>
361
-
<template x-for="account in accounts">
392
+
<div>
393
+
<div class="overflow-x-auto">
394
+
<table class="table table-xs">
395
+
<tbody>
362
396
<tr>
363
-
<td>
364
-
<code>
365
-
<a
366
-
href="#"
367
-
class="link"
368
-
x-text="account.did"
369
-
@click.prevent="goto(account.did)"
370
-
></a>
371
-
</code>
372
-
</td>
373
-
<td>
374
-
<span
375
-
x-show="account.active"
376
-
class="badge badge-sm badge-soft badge-success"
377
-
>
378
-
active
379
-
</span>
397
+
<td class="text-sm">
398
+
Open registration:
380
399
<span
381
-
x-show="!account.active"
382
-
x-text="account.status"
383
-
class="badge badge-sm badge-soft badge-warning"
400
+
x-text="!description.inviteCodeRequired"
384
401
></span>
385
402
</td>
386
403
</tr>
387
-
</template>
388
-
<template x-if="!accountsComplete">
389
404
<tr>
390
-
<td colspan="2" class="text-sm text-warning-content">
391
-
(account list clipped)
405
+
<td class="text-sm">
406
+
Version:
407
+
<code
408
+
class="text-xs"
409
+
x-text="version"
410
+
></code>
392
411
</td>
393
412
</tr>
394
-
</template>
395
-
</tbody>
396
-
</table>
413
+
</tbody>
414
+
</table>
415
+
</div>
416
+
<h4 class="font-bold">
417
+
Accounts
418
+
</h4>
419
+
<div class="overflow-x-auto overflow-y-auto max-h-26">
420
+
<table class="table table-xs">
421
+
<tbody>
422
+
<template x-for="account in accounts">
423
+
<tr>
424
+
<td>
425
+
<code>
426
+
<a
427
+
href="#"
428
+
class="link"
429
+
x-text="account.did"
430
+
@click.prevent="goto(account.did)"
431
+
></a>
432
+
</code>
433
+
</td>
434
+
<td>
435
+
<span
436
+
x-show="account.active"
437
+
class="badge badge-sm badge-soft badge-success"
438
+
>
439
+
active
440
+
</span>
441
+
<span
442
+
x-show="!account.active"
443
+
x-text="account.status"
444
+
class="badge badge-sm badge-soft badge-warning"
445
+
></span>
446
+
</td>
447
+
<td
448
+
x-data="didToHandle(account.did)"
449
+
x-intersect:enter.once="load"
450
+
>
451
+
<span x-show="loading">Loading…</span>
452
+
<span x-show="error !== null" x-text="error"></span>
453
+
<a
454
+
href="#"
455
+
class="link"
456
+
@click.prevent="goto(handle)"
457
+
x-show="handle !== null"
458
+
x-text="`@${handle}`"
459
+
></a>
460
+
</td>
461
+
</tr>
462
+
</template>
463
+
<template x-if="!loadingDesc && !accountsComplete">
464
+
<tr>
465
+
<td colspan="2" class="text-xs text-warning-content">
466
+
(more accounts not shown)
467
+
</td>
468
+
</tr>
469
+
</template>
470
+
</tbody>
471
+
</table>
472
+
</div>
397
473
</div>
398
474
</template>
399
475
</div>