make it pretty

Author: philipjscott

audio-context/README.md

@@ -9,15 +9,13 @@ Specifying the `audioTrackCb` option when creating a browser allows you to custo
 ## Usage
 
 ```ts
-
 // Client
 const hb = await Hyperbeam(computer_div, embed_url, {
- audioTrackCb: (track: MediaStreamTrack) => {
-  // Create a Media Stream and more
-  // https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API
- }
+  audioTrackCb: (track: MediaStreamTrack) => {
+    // Create a Media Stream and more
+    // https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API
+  },
 });
-
 ```
 
 ## Steps

audio-visualization/README.md

@@ -3,19 +3,23 @@
 Use the WebAudio API to visualize audio frequency data.
 
 ## Steps
-- Use ``npm i`` to install dependencies
+
+- Use `npm i` to install dependencies
 - Get your API key from [here](https://www.hyperbeam.com/dashboard)
 - Set your API key by running the following commands in your terminal:
+
 ```bash
 # Linux/Mac
 export HB_API_KEY=your-api-key
 
 # Windows
 set HB_API_KEY=your-api-key
 ```
-- Run ``npm start`` to start the server
-- Open ``localhost:8080`` in your browser
+
+- Run `npm start` to start the server
+- Open `localhost:8080` in your browser
 
 ## Need help?
-- Send us an email at founders@hyperbeam.com 
+
+- Send us an email at founders@hyperbeam.com
 - Join our [Discord](https://discord.gg/D78RsGfQjq)

chrome-extension/README.md

@@ -11,7 +11,6 @@ In this example, we'll be loading the "Hello Extensions" extension in the Hyperb
 ## Usage
 
 ```ts
-
 // Server
 
 // Create a form data object with the extension zip file
@@ -24,12 +23,9 @@ const headers = formData.getHeaders();
 headers["Authorization"] = `Bearer ${process.env.HB_API_KEY}`;
 
 // Send a POST request to the Hyperbeam API with the form data
-const response = await post(
- "https://engine.hyperbeam.com/v0/vm",
- formData,
- { headers }
-);
-
+const response = await post("https://engine.hyperbeam.com/v0/vm", formData, {
+  headers,
+});
 ```
 
 ## Steps

multicursor/README.md

@@ -9,14 +9,12 @@ Multi-cursor is a feature that allows multiple users to control the browser simu
 ## Usage
 
 ```ts
-
 // Client
 const hb = await Hyperbeam(container, embedUrl, {
- onCursor({ x, y, userId }) {
-  // Render the cursor on the screen
- },
+  onCursor({ x, y, userId }) {
+    // Render the cursor on the screen
+  },
 });
-
 ```
 
 ## Steps

resize/server.js

@@ -26,7 +26,7 @@ app.get("/computer", async (req, res) => {
     hide_cursor: true,
     width: width ? ~~width : 1280,
     height: height ? ~~height : 720,
-    max_area: 1280*720
+    max_area: 1280 * 720,
   };
   const resp = await axios.post(
     "https://engine.hyperbeam.com/v0/vm",

timeout/README.md

@@ -9,7 +9,6 @@ The Hyperbeam API lets you specify absolute, inactive and offine timeouts for yo
 ## Usage
 
 ```ts
-
 // Server
 const response = await axios.post(
   "https://engine.hyperbeam.com/v0/vm",
@@ -26,8 +25,7 @@ const response = await axios.post(
     },
   },
   { headers }
-  );
-
+);
 ```
 
 ## Steps

troubleshooting/index.html

@@ -7,26 +7,26 @@
     <div style="font-family: sans-serif">
       <button id="reconnect-btn">Reconnect</button>
     </div>
-    <div id="hyperbeam-container" style="height:720px;width:1280px"></div>
+    <div id="hyperbeam-container" style="height: 720px; width: 1280px"></div>
     <div id="logs"></div>
     <script type="module">
-      import Hyperbeam from "https://unpkg.com/@hyperbeam/web@latest/dist/index.js"
-      const container = document.getElementById("hyperbeam-container")
-      const reconnectBtn = document.getElementById("reconnect-btn")
-      const logs = document.getElementById("logs")
+      import Hyperbeam from "https://unpkg.com/@hyperbeam/web@latest/dist/index.js";
+      const container = document.getElementById("hyperbeam-container");
+      const reconnectBtn = document.getElementById("reconnect-btn");
+      const logs = document.getElementById("logs");
 
-      const resp = await fetch("/computer")
-      const data = await resp.json()
+      const resp = await fetch("/computer");
+      const data = await resp.json();
       const hb = await Hyperbeam(container, data.embed_url, {
         onConnectionStateChange({ state }) {
-          const p = document.createElement("p")
-          p.innerText = `CONNECTION STATE: ${state}`
-          logs.appendChild(p)
-        }
-      })
+          const p = document.createElement("p");
+          p.innerText = `CONNECTION STATE: ${state}`;
+          logs.appendChild(p);
+        },
+      });
       reconnectBtn.addEventListener("click", () => {
-        hb.reconnect()
-      })
+        hb.reconnect();
+      });
     </script>
   </body>
 </html>

troubleshooting/server.js

@@ -1,26 +1,30 @@
-const path = require('path')
-const express = require('express')
-const axios = require('axios')
-const app = express()
+const path = require("path");
+const express = require("express");
+const axios = require("axios");
+const app = express();
 
-app.get('/', (req, res) => {
-  res.sendFile(path.join(__dirname, '/index.html'))
-})
+app.get("/", (req, res) => {
+  res.sendFile(path.join(__dirname, "/index.html"));
+});
 
 // Get a cloud computer object. If no object exists, create it.
-let computer
-app.get('/computer', async (req, res) => {
+let computer;
+app.get("/computer", async (req, res) => {
   if (computer) {
-    res.send(computer)
-    return
+    res.send(computer);
+    return;
   }
-  const resp = await axios.post('https://engine.hyperbeam.com/v0/vm', {}, {
-    headers: { 'Authorization': `Bearer ${process.env.HB_API_KEY}` }
-  })
-  computer = resp.data
-  res.send(computer)
-})
+  const resp = await axios.post(
+    "https://engine.hyperbeam.com/v0/vm",
+    {},
+    {
+      headers: { Authorization: `Bearer ${process.env.HB_API_KEY}` },
+    }
+  );
+  computer = resp.data;
+  res.send(computer);
+});
 
 app.listen(8080, () => {
-  console.log('Server start at http://localhost:8080')
-})
+  console.log("Server start at http://localhost:8080");
+});

zoom/index.html

@@ -9,15 +9,14 @@
 
       .toolbar {
         display: flex;
-        
+
         justify-content: center;
         align-items: center;
-        
       }
 
       .toolbar > .group {
         display: flex;
-        
+
         align-items: center;
         margin: 0 10px;
       }