limit record key links to record view

src/components/json.tsx

···
   parentIsBlob?: boolean;
   newTab?: boolean;
   hideBlobs?: boolean;
+  keyLinks?: boolean;
   path?: string;
 }
 
···
         class="relative flex size-fit shrink-0 items-center gap-x-1 wrap-anywhere"
         classList={{ "max-w-[40%] sm:max-w-[50%]": props.maxWidth !== undefined && show() }}
       >
-        <a
-          href={`#record:${fullPath()}`}
-          id={`key-${fullPath()}`}
-          class="group/key rounded"
-          classList={{
-            "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":
-              !props.isIndex && !isHighlighted(),
-            "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":
-              props.isIndex && !isHighlighted(),
-            "bg-indigo-200 text-indigo-700 dark:bg-indigo-500/60 dark:text-indigo-200":
-              isHighlighted() && !props.isIndex,
-            "bg-violet-200 text-violet-700 dark:bg-violet-500/60 dark:text-violet-200":
-              isHighlighted() && props.isIndex,
-          }}
+        <Show
+          when={ctx.keyLinks}
+          fallback={
+            <span
+              classList={{
+                "text-indigo-500 dark:text-indigo-400": !props.isIndex,
+                "text-violet-500 dark:text-violet-400": props.isIndex,
+              }}
+            >
+              {props.label}
+              <span class="text-neutral-500 dark:text-neutral-400">:</span>
+            </span>
+          }
         >
-          <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">
-            <span class="iconify lucide--link"></span>
-          </span>
-          {props.label}
-          <span class="text-neutral-500 dark:text-neutral-400">:</span>
-        </a>
+          <a
+            href={`#record:${fullPath()}`}
+            id={`key-${fullPath()}`}
+            class="group/key rounded"
+            classList={{
+              "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":
+                !props.isIndex && !isHighlighted(),
+              "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":
+                props.isIndex && !isHighlighted(),
+              "bg-indigo-200 text-indigo-700 dark:bg-indigo-500/60 dark:text-indigo-200":
+                isHighlighted() && !props.isIndex,
+              "bg-violet-200 text-violet-700 dark:bg-violet-500/60 dark:text-violet-200":
+                isHighlighted() && props.isIndex,
+            }}
+          >
+            <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">
+              <span class="iconify lucide--link"></span>
+            </span>
+            {props.label}
+            <span class="text-neutral-500 dark:text-neutral-400">:</span>
+          </a>
+        </Show>
         <Show when={!show() && summary()}>
           <button
             type="button"
···
   truncate?: boolean;
   newTab?: boolean;
   hideBlobs?: boolean;
+  keyLinks?: boolean;
 }) => {
   return (
     <JSONCtx.Provider
···
         truncate: props.truncate,
         newTab: props.newTab,
         hideBlobs: props.hideBlobs,
+        keyLinks: props.keyLinks,
       }}
     >
       <JSONValueInner data={props.data} />

src/views/record.tsx

···
             </div>
             <Show when={!location.hash || location.hash.startsWith("#record")}>
               <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">
-                <JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} />
+                <JSONValue data={record()?.value as any} repo={record()!.uri.split("/")[2]} keyLinks />
               </div>
             </Show>
             <Show when={location.hash === "#schema" || location.hash.startsWith("#schema:")}>