forked from
pds.ls/pdsls
atproto explorer
fix padding
+200
-196
+1
-1
src/views/pds.tsx
+1
-1
src/views/pds.tsx
+3
-1
src/views/record.tsx
+3
-1
src/views/record.tsx
···
217
217
<div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
218
218
}
219
219
>
220
-
<Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} />
220
+
<div class="w-full px-2">
221
+
<Backlinks target={`at://${did}/${params.collection}/${params.rkey}`} />
222
+
</div>
221
223
</Suspense>
222
224
</ErrorBoundary>
223
225
</Show>
+196
-194
src/views/repo.tsx
+196
-194
src/views/repo.tsx
···
187
187
</DropdownMenu>
188
188
</MenuProvider>
189
189
</div>
190
-
<Show when={location.hash === "#logs"}>
191
-
<ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
192
-
<Suspense
193
-
fallback={
194
-
<div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
195
-
}
196
-
>
197
-
<PlcLogView did={did} />
198
-
</Suspense>
199
-
</ErrorBoundary>
200
-
</Show>
201
-
<Show when={location.hash === "#backlinks"}>
202
-
<ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
203
-
<Suspense
204
-
fallback={
205
-
<div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
206
-
}
207
-
>
208
-
<Backlinks target={did} />
209
-
</Suspense>
210
-
</ErrorBoundary>
211
-
</Show>
212
-
<Show when={location.hash === "#blobs"}>
213
-
<ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
214
-
<Suspense
215
-
fallback={
216
-
<div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
217
-
}
218
-
>
219
-
<BlobView pds={pds!} repo={did} />
220
-
</Suspense>
221
-
</ErrorBoundary>
222
-
</Show>
223
-
<Show when={nsids() && (!location.hash || location.hash === "#collections")}>
224
-
<TextInput
225
-
name="filter"
226
-
placeholder="Filter collections"
227
-
onInput={(e) => setFilter(e.currentTarget.value)}
228
-
class="grow"
229
-
/>
230
-
<div class="flex flex-col font-mono">
231
-
<div class="grid grid-cols-[min-content_1fr] items-center gap-x-2 overflow-hidden text-sm">
232
-
<For
233
-
each={Object.keys(nsids() ?? {}).filter((authority) =>
234
-
filter() ?
235
-
authority.startsWith(filter()!) || filter()?.startsWith(authority)
236
-
: true,
237
-
)}
190
+
<div class="flex w-full flex-col gap-2 px-2">
191
+
<Show when={location.hash === "#logs"}>
192
+
<ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
193
+
<Suspense
194
+
fallback={
195
+
<div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
196
+
}
238
197
>
239
-
{(authority) => (
240
-
<>
241
-
<button onclick={() => toggleCollection(authority)} class="flex items-center">
242
-
<span
243
-
classList={{
244
-
"iconify lucide--chevron-down text-lg transition-transform": true,
245
-
"-rotate-90": nsids()?.[authority].hidden,
246
-
}}
247
-
></span>
248
-
</button>
249
-
<button
250
-
class="bg-transparent text-left wrap-anywhere"
251
-
onclick={() => toggleCollection(authority)}
252
-
>
253
-
{authority}
254
-
</button>
255
-
<Show when={!nsids()?.[authority].hidden}>
256
-
<div></div>
257
-
<div class="flex flex-col">
258
-
<For
259
-
each={nsids()?.[authority].nsids.filter((nsid) =>
260
-
filter() ?
261
-
nsid.startsWith(filter()!.split(".").slice(2).join("."))
262
-
: true,
263
-
)}
264
-
>
265
-
{(nsid) => (
266
-
<A
267
-
href={`/at://${did}/${authority}.${nsid}`}
268
-
class="text-blue-400 hover:underline active:underline"
269
-
>
270
-
{authority}.{nsid}
271
-
</A>
272
-
)}
273
-
</For>
274
-
</div>
275
-
</Show>
276
-
</>
277
-
)}
278
-
</For>
198
+
<PlcLogView did={did} />
199
+
</Suspense>
200
+
</ErrorBoundary>
201
+
</Show>
202
+
<Show when={location.hash === "#backlinks"}>
203
+
<ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
204
+
<Suspense
205
+
fallback={
206
+
<div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
207
+
}
208
+
>
209
+
<Backlinks target={did} />
210
+
</Suspense>
211
+
</ErrorBoundary>
212
+
</Show>
213
+
<Show when={location.hash === "#blobs"}>
214
+
<ErrorBoundary fallback={(err) => <div class="break-words">Error: {err.message}</div>}>
215
+
<Suspense
216
+
fallback={
217
+
<div class="iconify lucide--loader-circle animate-spin self-center text-xl" />
218
+
}
219
+
>
220
+
<BlobView pds={pds!} repo={did} />
221
+
</Suspense>
222
+
</ErrorBoundary>
223
+
</Show>
224
+
<Show when={nsids() && (!location.hash || location.hash === "#collections")}>
225
+
<TextInput
226
+
name="filter"
227
+
placeholder="Filter collections"
228
+
onInput={(e) => setFilter(e.currentTarget.value)}
229
+
class="grow"
230
+
/>
231
+
<div class="flex flex-col font-mono">
232
+
<div class="grid grid-cols-[min-content_1fr] items-center gap-x-2 overflow-hidden text-sm">
233
+
<For
234
+
each={Object.keys(nsids() ?? {}).filter((authority) =>
235
+
filter() ?
236
+
authority.startsWith(filter()!) || filter()?.startsWith(authority)
237
+
: true,
238
+
)}
239
+
>
240
+
{(authority) => (
241
+
<>
242
+
<button onclick={() => toggleCollection(authority)} class="flex items-center">
243
+
<span
244
+
classList={{
245
+
"iconify lucide--chevron-down text-lg transition-transform": true,
246
+
"-rotate-90": nsids()?.[authority].hidden,
247
+
}}
248
+
></span>
249
+
</button>
250
+
<button
251
+
class="bg-transparent text-left wrap-anywhere"
252
+
onclick={() => toggleCollection(authority)}
253
+
>
254
+
{authority}
255
+
</button>
256
+
<Show when={!nsids()?.[authority].hidden}>
257
+
<div></div>
258
+
<div class="flex flex-col">
259
+
<For
260
+
each={nsids()?.[authority].nsids.filter((nsid) =>
261
+
filter() ?
262
+
nsid.startsWith(filter()!.split(".").slice(2).join("."))
263
+
: true,
264
+
)}
265
+
>
266
+
{(nsid) => (
267
+
<A
268
+
href={`/at://${did}/${authority}.${nsid}`}
269
+
class="text-blue-400 hover:underline active:underline"
270
+
>
271
+
{authority}.{nsid}
272
+
</A>
273
+
)}
274
+
</For>
275
+
</div>
276
+
</Show>
277
+
</>
278
+
)}
279
+
</For>
280
+
</div>
279
281
</div>
280
-
</div>
281
-
</Show>
282
-
<Show when={location.hash === "#identity"}>
283
-
<Show when={didDoc()}>
284
-
{(didDocument) => (
285
-
<div class="flex flex-col gap-y-1 wrap-anywhere">
286
-
<div class="flex items-baseline justify-between gap-2">
282
+
</Show>
283
+
<Show when={location.hash === "#identity"}>
284
+
<Show when={didDoc()}>
285
+
{(didDocument) => (
286
+
<div class="flex flex-col gap-y-1 wrap-anywhere">
287
+
<div class="flex items-baseline justify-between gap-2">
288
+
<div>
289
+
<div class="flex items-center gap-1">
290
+
<div class="iconify lucide--id-card" />
291
+
<p class="font-semibold">ID</p>
292
+
</div>
293
+
<div class="text-sm">{didDocument().id}</div>
294
+
</div>
295
+
<Tooltip text="DID document">
296
+
<a
297
+
href={
298
+
did.startsWith("did:plc") ?
299
+
`${localStorage.plcDirectory ?? "https://plc.directory"}/${did}`
300
+
: `https://${did.split("did:web:")[1]}/.well-known/did.json`
301
+
}
302
+
target="_blank"
303
+
class="-mr-1 flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
304
+
>
305
+
<span class="iconify lucide--external-link"></span>
306
+
</a>
307
+
</Tooltip>
308
+
</div>
287
309
<div>
288
310
<div class="flex items-center gap-1">
289
-
<div class="iconify lucide--id-card" />
290
-
<p class="font-semibold">ID</p>
311
+
<div class="iconify lucide--at-sign" />
312
+
<p class="font-semibold">Aliases</p>
291
313
</div>
292
-
<div class="text-sm">{didDocument().id}</div>
314
+
<ul>
315
+
<For each={didDocument().alsoKnownAs}>
316
+
{(alias) => (
317
+
<li class="flex items-center gap-1 text-sm">
318
+
<span>{alias}</span>
319
+
<Show when={alias.startsWith("at://")}>
320
+
<Tooltip
321
+
text={
322
+
validHandles[alias] === true ? "Valid handle"
323
+
: validHandles[alias] === undefined ?
324
+
"Validating"
325
+
: "Invalid handle"
326
+
}
327
+
>
328
+
<span
329
+
classList={{
330
+
"iconify lucide--circle-check": validHandles[alias] === true,
331
+
"iconify lucide--circle-x text-red-500 dark:text-red-400":
332
+
validHandles[alias] === false,
333
+
"iconify lucide--loader-circle animate-spin":
334
+
validHandles[alias] === undefined,
335
+
}}
336
+
></span>
337
+
</Tooltip>
338
+
</Show>
339
+
</li>
340
+
)}
341
+
</For>
342
+
</ul>
293
343
</div>
294
-
<Tooltip text="DID document">
295
-
<a
296
-
href={
297
-
did.startsWith("did:plc") ?
298
-
`${localStorage.plcDirectory ?? "https://plc.directory"}/${did}`
299
-
: `https://${did.split("did:web:")[1]}/.well-known/did.json`
300
-
}
301
-
target="_blank"
302
-
class="-mr-1 flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
303
-
>
304
-
<span class="iconify lucide--external-link"></span>
305
-
</a>
306
-
</Tooltip>
307
-
</div>
308
-
<div>
309
-
<div class="flex items-center gap-1">
310
-
<div class="iconify lucide--at-sign" />
311
-
<p class="font-semibold">Aliases</p>
344
+
<div>
345
+
<div class="flex items-center gap-1">
346
+
<div class="iconify lucide--hard-drive" />
347
+
<p class="font-semibold">Services</p>
348
+
</div>
349
+
<ul>
350
+
<For each={didDocument().service}>
351
+
{(service) => (
352
+
<li class="flex flex-col text-sm">
353
+
<span>#{service.id.split("#")[1]}</span>
354
+
<a
355
+
class="w-fit text-blue-400 hover:underline active:underline"
356
+
href={service.serviceEndpoint.toString()}
357
+
target="_blank"
358
+
>
359
+
{service.serviceEndpoint.toString()}
360
+
</a>
361
+
</li>
362
+
)}
363
+
</For>
364
+
</ul>
312
365
</div>
313
-
<ul>
314
-
<For each={didDocument().alsoKnownAs}>
315
-
{(alias) => (
316
-
<li class="flex items-center gap-1 text-sm">
317
-
<span>{alias}</span>
318
-
<Show when={alias.startsWith("at://")}>
319
-
<Tooltip
320
-
text={
321
-
validHandles[alias] === true ? "Valid handle"
322
-
: validHandles[alias] === undefined ?
323
-
"Validating"
324
-
: "Invalid handle"
325
-
}
326
-
>
327
-
<span
328
-
classList={{
329
-
"iconify lucide--circle-check": validHandles[alias] === true,
330
-
"iconify lucide--circle-x text-red-500 dark:text-red-400":
331
-
validHandles[alias] === false,
332
-
"iconify lucide--loader-circle animate-spin":
333
-
validHandles[alias] === undefined,
334
-
}}
335
-
></span>
336
-
</Tooltip>
366
+
<div>
367
+
<div class="flex items-center gap-1">
368
+
<div class="iconify lucide--shield-check" />
369
+
<p class="font-semibold">Verification methods</p>
370
+
</div>
371
+
<ul>
372
+
<For each={didDocument().verificationMethod}>
373
+
{(verif) => (
374
+
<Show when={verif.publicKeyMultibase}>
375
+
{(key) => (
376
+
<li class="flex flex-col text-sm">
377
+
<span>#{verif.id.split("#")[1]}</span>
378
+
<span class="flex items-center gap-0.5">
379
+
<div class="iconify lucide--key-round" />
380
+
<ErrorBoundary fallback={<>unknown</>}>
381
+
{parsePublicMultikey(key()).type}
382
+
</ErrorBoundary>
383
+
</span>
384
+
<span class="truncate">{key()}</span>
385
+
</li>
386
+
)}
337
387
</Show>
338
-
</li>
339
-
)}
340
-
</For>
341
-
</ul>
342
-
</div>
343
-
<div>
344
-
<div class="flex items-center gap-1">
345
-
<div class="iconify lucide--hard-drive" />
346
-
<p class="font-semibold">Services</p>
388
+
)}
389
+
</For>
390
+
</ul>
347
391
</div>
348
-
<ul>
349
-
<For each={didDocument().service}>
350
-
{(service) => (
351
-
<li class="flex flex-col text-sm">
352
-
<span>#{service.id.split("#")[1]}</span>
353
-
<a
354
-
class="w-fit text-blue-400 hover:underline active:underline"
355
-
href={service.serviceEndpoint.toString()}
356
-
target="_blank"
357
-
>
358
-
{service.serviceEndpoint.toString()}
359
-
</a>
360
-
</li>
361
-
)}
362
-
</For>
363
-
</ul>
364
392
</div>
365
-
<div>
366
-
<div class="flex items-center gap-1">
367
-
<div class="iconify lucide--shield-check" />
368
-
<p class="font-semibold">Verification methods</p>
369
-
</div>
370
-
<ul>
371
-
<For each={didDocument().verificationMethod}>
372
-
{(verif) => (
373
-
<Show when={verif.publicKeyMultibase}>
374
-
{(key) => (
375
-
<li class="flex flex-col text-sm">
376
-
<span>#{verif.id.split("#")[1]}</span>
377
-
<span class="flex items-center gap-0.5">
378
-
<div class="iconify lucide--key-round" />
379
-
<ErrorBoundary fallback={<>unknown</>}>
380
-
{parsePublicMultikey(key()).type}
381
-
</ErrorBoundary>
382
-
</span>
383
-
<span class="truncate">{key()}</span>
384
-
</li>
385
-
)}
386
-
</Show>
387
-
)}
388
-
</For>
389
-
</ul>
390
-
</div>
391
-
</div>
392
-
)}
393
+
)}
394
+
</Show>
393
395
</Show>
394
-
</Show>
396
+
</div>
395
397
</div>
396
398
</Show>
397
399
);