Add first Terminal draft

astro.config.mjs

@@ -1,7 +1,8 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 import mdx from "@astrojs/mdx";
 import a11yEmoji from "@fec/remark-a11y-emoji";
+import wasmPack from 'vite-plugin-wasm-pack';
 
 // https://astro.build/config
 export default defineConfig({
@@ -13,5 +14,11 @@ export default defineConfig({
     shikiConfig: {
       theme: "one-dark-pro"
     }
+  },
+  // Copy wasm-terminal to the build directory
+  vite: {
+    plugins: [
+      wasmPack([],['@c0ntroller/wasm-terminal'])
+    ]
   }
 });

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@astrojs/check": "^0.3.1",
     "@astrojs/mdx": "^1.1.5",
+    "@c0ntroller/wasm-terminal": "^0.1.0",
     "astro": "^3.6.0",
     "astro-icon": "^0.8.1",
     "sass": "^1.69.5",
@@ -20,6 +21,7 @@
   "devDependencies": {
     "@fec/remark-a11y-emoji": "^4.0.2",
     "astro-themes": "^0.2.4",
-    "remark-code-extra": "^1.0.1"
+    "remark-code-extra": "^1.0.1",
+    "vite-plugin-wasm-pack": "0.1.11"
   }
 }

src/pages/terminal.astro

@@ -0,0 +1,57 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Terminal">
+    <div class="screen">
+        <pre data-terminal-output></pre>
+    </div>
+    <input type="text" data-terminal-input />
+</Layout>
+
+<script>
+    (async () => {
+        const wasm = import("@c0ntroller/wasm-terminal");
+        const outputs = document.querySelectorAll("[data-terminal-output]") as NodeListOf<HTMLPreElement>;
+        const inputs = document.querySelectorAll("[data-terminal-input]") as NodeListOf<HTMLInputElement>;
+        const { default: init, Console } = await wasm;
+
+        await init();
+        const c = Console.new();
+
+        inputs.forEach((input) => {
+            input.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") {
+                    const cmd = input.value;
+                    const resp = c.execute(cmd);
+                    outputs.forEach((output) => {
+                        output.innerHTML += `$ ${cmd}${resp ? `\n${resp}` : ""}\n`;
+                    });
+                    input.value = "";
+                }
+            });
+        });
+    })()
+</script>
+
+<style lang="scss">
+    .screen {
+        width: 100%;
+        height: 60em;
+        background: #000;
+        border-radius: 0.2em;
+        box-shadow: 0 0 0.5em #000;
+        color: #fff;
+        font-family: monospace;
+        padding: 10px;
+
+        pre {
+            margin: 0;
+            padding: 0;
+            white-space: pre-wrap;
+            word-wrap: normal;
+            overflow-wrap: break-word;
+        }
+    }
+
+</style>