Misc Playground/Docs fixes

packages/docs/src/.vitepress/config.ts

@@ -123,6 +123,7 @@ export default withMermaid({
       // TODO: Re-enable once we release documentation
       // { text: 'Documentation', link: '/quick-start' },
       { text: 'Tools', link: '/tools/primitives' },
+      { text: 'Playground', link: '/playground' },
     ],
 
     sidebar: {
@@ -134,6 +135,7 @@ export default withMermaid({
             { text: 'Quick Start', link: '/quick-start' },
             { text: 'Architecture', link: '/architecture' },
             { text: 'Best Practices', link: '/api-examples' },
+            { text: 'Contributing', link: '/contributing' },
           ],
         },
         {

packages/docs/src/.vitepress/theme/components/CodeSandbox.vue

@@ -373,7 +373,7 @@ defineExpose({
   display: flex;
   flex-direction: column;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  margin-bottom: 1em;
+  overflow-y: hidden;
 }
 
 .editor-container {
@@ -385,20 +385,6 @@ defineExpose({
   overflow: hidden; /* Contain overflow */
 }
 
-.editor-container .ace_editor {
-  background: transparent !important;
-  font-family: var(--vp-font-family-mono);
-  line-height: var(--vp-code-line-height);
-  font-size: var(--vp-code-font-size);
-  flex: 1 1 auto; /* Allow editor to grow */
-  overflow: auto; /* Enable scrolling */
-  min-height: 3em;
-}
-
-.editor-container .ace_editor .ace_gutter {
-  background: transparent !important;
-}
-
 .editor-buttons {
   position: absolute;
   padding:10px;

packages/docs/src/.vitepress/theme/components/CodeSandboxTemplate.html

@@ -3,7 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <title>Code Sandbox</title>
-    <script>
+    <script type="module">
+      // NOTE: We want to be able to console.log, etc, structures that contain bigint and also Uint8Array.
+      //       Thus, JSON.stringify isn't sufficient (it cannot do bigint and Uint8Array output is cumbersome).
+      //       So we import our encodeExtendedJson function and use that in place of JSON.stringify.
+      // TODO: We want to find a nicer way to include the latest version.
+      import { encodeExtendedJson } from 'https://cdn.jsdelivr.net/npm/@xocash/primitives@0.0.2-development.210/+esm';
+
       // Override console methods to capture and post messages to parent
       const originalConsole = window.console;
 
@@ -17,7 +23,9 @@
               type: 'log',
               content: args
                 .map((arg) =>
-                  typeof arg === 'object' ? JSON.stringify(arg) : String(arg),
+                  typeof arg === 'object'
+                    ? encodeExtendedJson(arg, 2)
+                    : String(arg),
                 )
                 .join(' '),
             },
@@ -33,7 +41,9 @@
               type: 'info',
               content: args
                 .map((arg) =>
-                  typeof arg === 'object' ? JSON.stringify(arg) : String(arg),
+                  typeof arg === 'object'
+                    ? encodeExtendedJson(arg, 2)
+                    : String(arg),
                 )
                 .join(' '),
             },
@@ -49,7 +59,9 @@
               type: 'warn',
               content: args
                 .map((arg) =>
-                  typeof arg === 'object' ? JSON.stringify(arg) : String(arg),
+                  typeof arg === 'object'
+                    ? encodeExtendedJson(arg, 2)
+                    : String(arg),
                 )
                 .join(' '),
             },
@@ -65,7 +77,9 @@
               type: 'error',
               content: args
                 .map((arg) =>
-                  typeof arg === 'object' ? JSON.stringify(arg) : String(arg),
+                  typeof arg === 'object'
+                    ? encodeExtendedJson(arg, 2)
+                    : String(arg),
                 )
                 .join(' '),
             },
@@ -106,7 +120,7 @@
     <script type="module">
       // Execute user code directly at top level to support ES6 imports
       // Error handling is managed by global error handlers above
-        __userCode__;
+      __userCode__;
     </script>
   </body>
 </html>

packages/docs/src/contributing.md

@@ -0,0 +1,2 @@
+<!-- packages/docs/contributing.md -->
+<!--@include: ../../../CONTRIBUTING.md-->

packages/docs/src/index.md

@@ -10,6 +10,9 @@ hero:
     - theme: brand
       text: Tools
       link: /tools/primitives
+    - theme: brand
+      text: Playground
+      link: /playground
 ---
 
 <!--

packages/docs/src/playground.md

@@ -17,14 +17,13 @@ import Playground from '@theme/components/Playground.vue'
 import { BlockchainElectrum } from '@xocash/stack';
 
 // Instantiate and start the Electrum Blockchain Adapter.
-const blockchain = new BlockchainElectrum();
-await blockchain.start();
+const blockchain = await BlockchainElectrum.from();
 
 // Fetch a transaction.
 const tx = await blockchain.fetchTransaction('a23bbd321067fd039da53f007b26f62591e58e6554b0488d83534c032dbca38b');
 
 // Log it to the console.
-console.log('Transaction Hex', tx.toHex());
+console.log('Transaction:', tx);
 ```
 
 </Playground>