feat: even better relay

DeFUCC · Feb 25, 2025 · 56c96c9 · 56c96c9
1 parent d609ba5
commit 56c96c9
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
 		"builds": "pnpm --filter composables run build && pnpm --filter components run build && pnpm --filter app run build && pnpm --filter app run build-app && pnpm --filter docs run build",
 		"preview": "pnpm --filter docs run serve",
 		"relay": "pnpm --filter relay run start",
-		"deploy": "cd app && sh deploy.sh",
 		"change": "pnpm changeset",
 		"version": "pnpm changeset version"
 	},

diff --git a/relay/package.json b/relay/package.json
@@ -20,7 +20,8 @@
 	"main": "server.js",
 	"files": [
 		"server.js",
-		"start.js"
+		"start.js",
+		"public/index.html"
 	],
 	"scripts": {
 		"start": "node start.js",

diff --git a/relay/public/index.html b/relay/public/index.html
@@ -2,79 +2,91 @@
 <!-- served from your routes in server.js -->
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="A cool thing made with Glitch" />
 
-    <title>No store GUN peer</title>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="A cool thing made with Glitch" />
 
-    <style>
-      html {
-        font-size: 16px;
-      }
-      .qr svg {
-        max-height: 80vh;
-      }
-    </style>
+  <title>No store GUN peer</title>
 
-    <script defer type="module">
-      import "https://cdn.skypack.dev/gun";
-      import ms from "https://cdn.skypack.dev/ms";
-      import qrcodeSvg from "https://cdn.skypack.dev/@qrcode/svg";
-      import { createApp, reactive } from "https://cdn.skypack.dev/petite-vue";
+  <style>
+    html {
+      font-size: 16px;
+    }
 
-      const gun = GUN([window.location.href + "gun"]);
-      const db = gun.get(window.location.hostname);
+    .qr svg {
+      max-height: 80vh;
+    }
+  </style>
 
-      const relay = reactive({
-        status: "connecting",
-        pulse: 0,
-        started: 0,
-        store: false,
-        host: "",
-        message: "",
-        activeWires: 0,
-        ms,
-        talk(ev) {
-          db.get("message").put(ev.target.value);
-        },
-        listen() {
-          db.map().on((d, k) => {
-            relay[k] = d;
-          });
-        },
-      });
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
 
-      relay.listen();
+  <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
 
-      createApp({ relay, qrcodeSvg }).mount();
-    </script>
-  </head>
-  <body v-scope>
-    <header style="font-size: 1.2rem; line-height: 1rem">
-      <h2>Gun-vue relay peer</h2>
-      <h3><a href="https://gun-vue.js.org/">@gun-vue/relay</a></h3>
+  <script defer type="module">
+    import "https://cdn.skypack.dev/gun";
+    import ms from "https://cdn.skypack.dev/ms";
+    import qrcodeSvg from "https://cdn.skypack.dev/@qrcode/svg";
+    import { createApp, reactive } from "https://cdn.skypack.dev/petite-vue";
+
+    const gun = GUN([window.location.href + "gun"]);
+    const db = gun.get('relays').get(window.location.hostname);
+
+    const relay = reactive({
+      status: "connecting",
+      pulse: 0,
+      started: 0,
+      store: false,
+      host: "",
+      message: "",
+      activeWires: 0,
+      ms,
+      talk(ev) {
+        db.get("message").put(ev.target.value);
+      },
+      listen() {
+        db.map().on((d, k) => {
+          relay[k] = d;
+        });
+      },
+    });
+
+    relay.listen();
+
+    createApp({ relay, qrcodeSvg }).mount();
+  </script>
+</head>
+
+<body class="bg-dark-500 text-light-400" v-scope>
+  <header class="flex flex-wrap gap-2 p-4 bg-dark-200" style="font-size: 1.2rem; line-height: 1rem">
+    <h2 class="">Gun-vue relay peer</h2>
+    <div class="flex-1"></div>
+    <h3><a href="https://gun-vue.js.org/packages/relay">@gun-vue/relay</a></h3>
+  </header>
+  <main>
+    <section>
+      <h4>Data storage: {{relay.store}}</h4>
       <h4>
         Status: {{relay.status}} {{relay.ms(relay.pulse-relay.started)}}
         ({{(relay.pulse-relay.started)/1000}} s)
       </h4>
       <h4>Active wires: {{relay.activeWires}} / {{relay.totalConnections}}</h4>
       <h4>Peer link: <a :href="relay.link + '/gun'">{{relay.link}}/gun</a></h4>
-      <h4>Data storage: {{relay.store}}</h4>
-    </header>
-    <main>
+      <h4>Gun-Vue: <a target="_blank"
+          :href="`https://gun-vue.js.org/app/#/?relay=${relay.link}/gun`">{{`https://gun-vue.js.org/app/#/?relay=${relay.link}/gun`}}</a>
+      </h4>
+
+    </section>
+    <article>
       <h4>Talk box</h4>
-      <textarea
-        cols="35"
-        rows="10"
-        v-model="relay.message"
-        @change="relay.talk"
-        @keyup="relay.talk"
-      ></textarea>
-      <p>{{relay}}</p>
-      <div class="qr" v-if="relay.link" v-html="qrcodeSvg(relay.link)"></div>
-    </main>
-  </body>
-</html>
+      <textarea class="bg-dark-100 shadow-inset p-2 rounded-lg w-full" cols="35" rows="10" v-model="relay.message"
+        @change="relay.talk" @keyup="relay.talk"></textarea>
+    </article>
+
+    <div style="max-width:300px" class="qr" v-if="relay.link" v-html="qrcodeSvg(relay.link)"></div>
+  </main>
+</body>
+
+</html>
diff --git a/relay/sea.config.json b/relay/sea.config.json
@@ -1,4 +1,8 @@
 {
 	"main": "./dist/index.cjs",
-	"output": "./dist/sea-prep.blob"
+	"output": "./dist/sea-prep.blob",
+	"disableExperimentalSEAWarning": true,
+	"assets": {
+		"public": "public/index.html"
+	}
 }
diff --git a/relay/server.js b/relay/server.js
@@ -22,27 +22,39 @@ const testPort = (port) => {
 
 export default {
   initiated: false,
-  async init({
-    host = process.env.RELAY_HOST || ip.address(),
-    store = process.env.RELAY_STORE != 'false' || false,
-    port = process.env.RELAY_PORT || 4200,
-    path = process.env.RELAY_PATH || "public",
-    showQr = process.env.RELAY_QR || false,
-    indexHtml = '<html><body>Gun-Vue Relay</body></html>'
-  } = {}) {
+  async init(config = {}) {
     if (this.initiated) return;
     this.initiated = true;
 
+    let {
+      host = process.env.RELAY_HOST || ip.address(),
+      store = process.env.RELAY_STORE || false,
+      port = process.env.RELAY_PORT || 8765,
+      path = process.env.RELAY_PATH || "public",
+      showQr = process.env.RELAY_QR || false
+    } = config;
+
     console.clear();
     console.log('\x1b[36m=== GUN-VUE RELAY SERVER ===\x1b[0m\n');
 
     var app = express();
 
+    // Explicit root route handling
     app.get('/', (req, res) => {
-      res.send(indexHtml);
+      if (process?.sea?.isSea) {
+        res.sendFile('index.html', { root: process.sea.getAsset(path) });
+      } else {
+        res.sendFile('index.html', { root: path });
+      }
     });
 
-    // Find available port
+    // Serve static files for other routes
+    if (process?.sea?.isSea) {
+      app.use(express.static(process.sea.getAsset(path)));
+    } else {
+      app.use(express.static(path));
+    }
+
     let currentPort = parseInt(port);
     while (!(await testPort(currentPort))) {
       console.log(formatOutput('Port in use', `${currentPort}, trying next...`, '\x1b[33m'));
@@ -90,9 +102,8 @@ export default {
     db.get("status").put("running");
     db.get("started").put(Date.now());
 
-    console.log(formatOutput('Server URL', link + '/#/?relay=' + link + '/gun', '\x1b[32m'));
+    console.log(formatOutput('Stats URL', link + '/', '\x1b[32m'));
     console.log(formatOutput('Gun peer', link + '/gun', '\x1b[32m'));
-    console.log(formatOutput('Stats dashboard', link, '\x1b[32m'));
     console.log(formatOutput('Storage', store ? 'enabled' : 'disabled', store ? '\x1b[32m' : '\x1b[33m'));
 
     if (showQr != false) {