forked from
pds.ls/pdsls
atmosphere explorer
limit record key links to record view
+39
-21
+38
-20
src/components/json.tsx
+38
-20
src/components/json.tsx
···
28
28
parentIsBlob?: boolean;
29
29
newTab?: boolean;
30
30
hideBlobs?: boolean;
31
+
keyLinks?: boolean;
31
32
path?: string;
32
33
}
33
34
···
206
207
class="relative flex size-fit shrink-0 items-center gap-x-1 wrap-anywhere"
207
208
classList={{ "max-w-[40%] sm:max-w-[50%]": props.maxWidth !== undefined && show() }}
208
209
>
209
-
<a
210
-
href={`#record:${fullPath()}`}
211
-
id={`key-${fullPath()}`}
212
-
class="group/key rounded"
213
-
classList={{
214
-
"text-indigo-500 hover:text-indigo-700 active:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 dark:active:text-indigo-200":
215
-
!props.isIndex && !isHighlighted(),
216
-
"text-violet-500 hover:text-violet-700 active:text-violet-800 dark:text-violet-400 dark:hover:text-violet-300 dark:active:text-violet-200":
217
-
props.isIndex && !isHighlighted(),
218
-
"bg-indigo-200 text-indigo-700 dark:bg-indigo-500/60 dark:text-indigo-200":
219
-
isHighlighted() && !props.isIndex,
220
-
"bg-violet-200 text-violet-700 dark:bg-violet-500/60 dark:text-violet-200":
221
-
isHighlighted() && props.isIndex,
222
-
}}
210
+
<Show
211
+
when={ctx.keyLinks}
212
+
fallback={
213
+
<span
214
+
classList={{
215
+
"text-indigo-500 dark:text-indigo-400": !props.isIndex,
216
+
"text-violet-500 dark:text-violet-400": props.isIndex,
217
+
}}
218
+
>
219
+
{props.label}
220
+
<span class="text-neutral-500 dark:text-neutral-400">:</span>
221
+
</span>
222
+
}
223
223
>
224
-
<span class="absolute top-1/2 -left-3.5 flex -translate-y-1/2 items-center text-xs text-neutral-500 opacity-0 transition-opacity group-hover/key:opacity-100 dark:text-neutral-400">
225
-
<span class="iconify lucide--link"></span>
226
-
</span>
227
-
{props.label}
228
-
<span class="text-neutral-500 dark:text-neutral-400">:</span>
229
-
</a>
224
+
<a
225
+
href={`#record:${fullPath()}`}
226
+
id={`key-${fullPath()}`}
227
+
class="group/key rounded"
228
+
classList={{
229
+
"text-indigo-500 hover:text-indigo-700 active:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 dark:active:text-indigo-200":
230
+
!props.isIndex && !isHighlighted(),
231
+
"text-violet-500 hover:text-violet-700 active:text-violet-800 dark:text-violet-400 dark:hover:text-violet-300 dark:active:text-violet-200":
232
+
props.isIndex && !isHighlighted(),
233
+
"bg-indigo-200 text-indigo-700 dark:bg-indigo-500/60 dark:text-indigo-200":
234
+
isHighlighted() && !props.isIndex,
235
+
"bg-violet-200 text-violet-700 dark:bg-violet-500/60 dark:text-violet-200":
236
+
isHighlighted() && props.isIndex,
237
+
}}
238
+
>
239
+
<span class="absolute top-1/2 -left-3.5 flex -translate-y-1/2 items-center text-xs text-neutral-500 opacity-0 transition-opacity group-hover/key:opacity-100 dark:text-neutral-400">
240
+
<span class="iconify lucide--link"></span>
241
+
</span>
242
+
{props.label}
243
+
<span class="text-neutral-500 dark:text-neutral-400">:</span>
244
+
</a>
245
+
</Show>
230
246
<Show when={!show() && summary()}>
231
247
<button
232
248
type="button"
···
453
469
truncate?: boolean;
454
470
newTab?: boolean;
455
471
hideBlobs?: boolean;
472
+
keyLinks?: boolean;
456
473
}) => {
457
474
return (
458
475
<JSONCtx.Provider
···
461
478
truncate: props.truncate,
462
479
newTab: props.newTab,
463
480
hideBlobs: props.hideBlobs,
481
+
keyLinks: props.keyLinks,
464
482
}}
465
483
>
466
484
<JSONValueInner data={props.data} />
+1
-1
src/views/record.tsx
+1
-1
src/views/record.tsx
···
550
550
</div>
551
551
<Show when={!location.hash || location.hash.startsWith("#record")}>
552
552
<div class="w-full max-w-screen min-w-full px-2 font-mono text-xs wrap-anywhere whitespace-pre-wrap sm:w-max sm:text-sm md:max-w-3xl">
553
-
<JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />
553
+
<JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} keyLinks />
554
554
</div>
555
555
</Show>
556
556
<Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}>