From 6aaf1d1cf4d794b0850ac94ac6840d565c0952fd Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Tue, 2 May 2023 21:09:28 -0700
Subject: [PATCH] Prettify output JSON metadata

---
 index.html | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index be496f6..4695978 100644
--- 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>
-- 
2.47.3