nicer demo

konsumer · Oct 30, 2024 · 2adac11 · 2adac11
1 parent 261a2ad
commit 2adac11
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/docs/index.html b/docs/index.html
@@ -1,5 +1,25 @@
 <head>
     <title>easywasi example</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            maring: 20px;
+            min-height: 90%;
+            background: #000;
+            color: #fff;
+        }
+        #stdio {
+            height: 200px;
+            display: flex;
+            gap: 10px;
+            min-height: 90%;
+        }
+        #stdio textarea {
+            flex-grow: 1;
+            background: #000;
+            color: #fff;
+        }
+    </style>
 </head>
 <body>
     <script type="importmap">
@@ -13,7 +33,15 @@
         }
     </script>
 
-    View the console, to see it working.
+    <p>
+        This is an example page for
+        <a href="https://github.com/konsumer/easywasi/">easywasi</a>.
+    </p>
+
+    <div id="stdio">
+        <textarea id="out"></textarea>
+        <textarea id="err"></textarea>
+    </div>
 
     <script type="module">
         import { WasiPreview1 } from "easywasi";
@@ -57,6 +85,23 @@
             },
         );
 
+        function addText(t, text) {
+            t.value += text;
+            t.selectionStart = t.selectionEnd = t.value.length;
+            t.blur();
+            t.focus();
+            t.blur();
+        }
+
+        // Here I implement custom stdio. In yours you don't have to do this, and it will just log
+        const d = new TextDecoder();
+        const out = document.getElementById("out");
+        const err = document.getElementById("err");
+        wasi_snapshot_preview1.stdout = (buffer) =>
+            addText(out, d.decode(buffer));
+        wasi_snapshot_preview1.stderr = (buffer) =>
+            addText(err, d.decode(buffer));
+
         const exitCode = wasi_snapshot_preview1.start(instance.exports);
         console.log(`Test run: ${exitCode}`);
     </script>

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "WASM",
     "browser"
   ],
+  "homepage": "https://konsumer.js.org/easywasi",
   "author": "David Konsumer <[email protected]>",
   "license": "MIT"
 }