added demo iframe page

2026-08-17 06:46:05 +01:00 · 2022-05-14 23:59:06 -07:00
parent 953580a943
commit 3cb20b9300
6 changed files with 122 additions and 1 deletions
--- a/frontend/src/demo.html
+++ b/frontend/src/demo.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="tabby">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+        body { padding: 0; }
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+    </style>
+  </head>
+  <body>
+      <iframe src="/terminal"></iframe>
+  </body>
+</html>
--- a/frontend/src/demo.ts
+++ b/frontend/src/demo.ts
@@ -0,0 +1,85 @@
+import * as semverCompare from 'semver/functions/compare-loose'
+import { Subject } from 'rxjs'
+import { Version } from './api'
+
+class DemoConnector {
+  constructor (
+    window: Window,
+    private version: Version,
+  ) {
+    window['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
+  }
+
+  async loadConfig (): Promise<string> {
+    return `{
+            recoverTabs: false,
+            web: {
+                preventAccidentalTabClosure: false,
+            },
+            terminal: {
+              fontSize: 11,
+            },
+        }`
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async saveConfig (_content: string): Promise<void> { }
+
+  getAppVersion (): string {
+    return this.version.version
+  }
+
+  getDistURL (): string {
+    return 'https://api.tabby.sh/app-dist'
+  }
+
+  getPluginsToLoad (): string[] {
+    return [
+      'tabby-core',
+      'tabby-settings',
+      'tabby-terminal',
+      'tabby-community-color-schemes',
+      'tabby-ssh',
+      'tabby-telnet',
+      'tabby-web',
+      'tabby-web-demo',
+    ]
+  }
+
+  createSocket () {
+    return new DemoSocketProxy()
+  }
+}
+
+export class DemoSocketProxy {
+  connect$ = new Subject<void>()
+  data$ = new Subject<Buffer>()
+  error$ = new Subject<Error>()
+  close$ = new Subject<Buffer>()
+
+  async connect () {
+    this.error$.next(new Error('This web demo can\'t actually access Internet, but feel free to download the release and try it out!'))
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/init-declarations
+let iframe: HTMLIFrameElement
+// eslint-disable-next-line @typescript-eslint/init-declarations
+let version: Version
+
+const connectorRequestHandler = event => {
+  if (event.data === 'request-connector') {
+    iframe.contentWindow!['__connector__'] = new DemoConnector(iframe.contentWindow!, version)
+    iframe.contentWindow!.postMessage('connector-ready', '*')
+  }
+}
+
+window.addEventListener('message', connectorRequestHandler)
+
+document.addEventListener('DOMContentLoaded', async () => {
+  iframe = document.querySelector('iframe')!
+  const versions = (await fetch('https://api.tabby.sh/api/1/versions').then(x => x.json())) as Version[]
+  versions.sort((a, b) => -semverCompare(a.version, b.version))
+  version = versions[0]!
+  iframe.src = '/terminal'
+})
--- a/frontend/src/server.ts
+++ b/frontend/src/server.ts
@@ -67,6 +67,10 @@ function start () {
    res.sendFile(join(DIST_FOLDER, 'terminal.html'))
  })

+  app.get(['/demo'], (req, res) => {
+    res.sendFile(join(DIST_FOLDER, 'demo.html'))
+  })
+
  for (const [key, value] of Object.entries(hardlinks)) {
    app.get(`/go/${key}`, (req, res) => res.redirect(value))
  }