Prettify output JSON metadata

diff --git a/index.html b/index.html
index be496f695594653649778806875f008d25faafa5..46959785107b3c2d6119890e058201ee1de309f9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -43,7 +43,8 @@
       font-weight: 700;
     }
 
-    input {
+    input,
+    output {
       font-size: 1rem;
       margin-block-end: 8px;
       padding: 8px;
@@ -63,11 +64,19 @@
       transition: filter 600ms;
     }
 
-    :is(input, button):is(:hover, :focus-within) {
+    :is(input, output, button):is(:hover, :focus-within) {
       filter: drop-shadow(0 0 2px hsl(216deg 70% 50%));
       transition: filter 200ms;
     }
 
+    output {
+      font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+      background: hsl(216deg 20% 95%);
+      white-space: pre;
+      overflow-x: auto;
+      visibility: hidden;
+    }
+
     .sr-only {
       position: absolute;
       width: 1px;
@@ -135,10 +144,11 @@
       }
       else {
         const { cidV0, cidV1 } = calculateCID(metadata);
-        output = JSON.stringify(await fetchJSONMetadata(cidV1, ipfs));
+        output = JSON.stringify(await fetchJSONMetadata(cidV1, ipfs), null, 2);
       }
 
       result.textContent = output;
+      result.style.setProperty('visibility', 'visible');
     })
   </script>
 </body>