olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
add record link to schema tab
handle.invalid
+24
-20
+18
-3
src/components/lexicon-schema.tsx
+18
-3
src/components/lexicon-schema.tsx
···
1
1
import { Nsid } from "@atcute/lexicons";
2
-
import { useLocation, useNavigate } from "@solidjs/router";
2
+
import { AtprotoDid } from "@atcute/lexicons/syntax";
3
+
import { A, useLocation, useNavigate } from "@solidjs/router";
3
4
import { createEffect, For, Show } from "solid-js";
4
5
import { resolveLexiconAuthority } from "../utils/api.js";
6
+
import Tooltip from "./tooltip.jsx";
5
7
6
8
// Style constants
7
9
const CONTAINER_CLASS =
···
689
691
);
690
692
};
691
693
692
-
export const LexiconSchemaView = (props: { schema: LexiconSchema }) => {
694
+
export const LexiconSchemaView = (props: { schema: LexiconSchema; authority?: AtprotoDid }) => {
693
695
const location = useLocation();
694
696
695
697
// Handle scrolling to a definition when hash is like #schema:definitionName
···
708
710
<div class="w-full max-w-4xl px-2">
709
711
{/* Header */}
710
712
<div class="flex flex-col gap-2 border-b border-neutral-300 pb-3 dark:border-neutral-700">
711
-
<h2 class="text-lg font-semibold">{props.schema.id}</h2>
713
+
<div class="flex items-center gap-0.5">
714
+
<h2 class="text-lg font-semibold">{props.schema.id}</h2>
715
+
<Show when={props.authority}>
716
+
<Tooltip text="View record">
717
+
<A
718
+
href={`/at://${props.authority}/com.atproto.lexicon.schema/${props.schema.id}`}
719
+
class="flex items-center p-1.5 text-neutral-600 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-neutral-200"
720
+
target="_blank"
721
+
>
722
+
<span class="iconify lucide--external-link text-sm"></span>
723
+
</A>
724
+
</Tooltip>
725
+
</Show>
726
+
</div>
712
727
<div class="flex gap-4 text-sm text-neutral-600 dark:text-neutral-400">
713
728
<span>
714
729
<span class="font-medium">Lexicon version: </span>
+6
-17
src/views/record.tsx
+6
-17
src/views/record.tsx
···
195
195
const [externalLink, setExternalLink] = createSignal<
196
196
{ label: string; link: string; icon?: string } | undefined
197
197
>();
198
-
const [lexiconUri, setLexiconUri] = createSignal<string>();
198
+
const [lexiconAuthority, setLexiconAuthority] = createSignal<AtprotoDid>();
199
199
const [validRecord, setValidRecord] = createSignal<boolean | undefined>(undefined);
200
200
const [validSchema, setValidSchema] = createSignal<boolean | undefined>(undefined);
201
201
const [schema, setSchema] = createSignal<ResolvedSchema>();
···
207
207
const fetchRecord = async () => {
208
208
setValidRecord(undefined);
209
209
setValidSchema(undefined);
210
-
setLexiconUri(undefined);
211
210
const pds = await resolvePDS(did!);
212
211
rpc = new Client({ handler: simpleFetchHandler({ service: pds }) });
213
212
const res = await rpc.get("com.atproto.repo.getRecord", {
···
309
308
const resolveLexicon = async (nsid: Nsid) => {
310
309
try {
311
310
const authority = await resolveLexiconAuthority(nsid);
312
-
setLexiconUri(`at://${authority}/com.atproto.lexicon.schema/${nsid}`);
311
+
setLexiconAuthority(authority);
313
312
if (params.collection !== "com.atproto.lexicon.schema") {
314
313
const schema = await resolveLexiconSchema(authority, nsid);
315
314
setSchema(schema);
···
487
486
</Show>
488
487
<Show when={schema() || params.collection === "com.atproto.lexicon.schema"}>
489
488
<ErrorBoundary fallback={(err) => <div>Error: {err.message}</div>}>
490
-
<LexiconSchemaView schema={schema()?.rawSchema ?? (record()?.value as any)} />
489
+
<LexiconSchemaView
490
+
schema={schema()?.rawSchema ?? (record()?.value as any)}
491
+
authority={lexiconAuthority()}
492
+
/>
491
493
</ErrorBoundary>
492
494
</Show>
493
495
</Show>
···
565
567
</Button>
566
568
</Show>
567
569
</div>
568
-
<Show when={lexiconUri()}>
569
-
<div>
570
-
<p class="font-semibold">Lexicon schema</p>
571
-
<div class="truncate text-xs">
572
-
<A
573
-
href={`/${lexiconUri()}`}
574
-
class="text-blue-500 hover:underline active:underline dark:text-blue-400"
575
-
>
576
-
{lexiconUri()}
577
-
</A>
578
-
</div>
579
-
</div>
580
-
</Show>
581
570
</div>
582
571
</Show>
583
572
</div>