added demo iframe page

This commit is contained in:
Eugene Pankov 2022-05-14 23:59:06 -07:00
parent 953580a943
commit 3cb20b9300
No known key found for this signature in database
GPG Key ID: 5896FCBBDD1CF4F4
6 changed files with 122 additions and 1 deletions

View File

@ -12,6 +12,7 @@ urlpatterns = [
path('app-dist/<version>/<path:path>', views.AppDistView.as_view()),
path('terminal', views.TerminalView.as_view()),
path('demo', views.DemoView.as_view()),
path('', include(api.urlpatterns)),
]

View File

@ -22,6 +22,13 @@ class TerminalView(APIView):
return response
class DemoView(APIView):
def get(self, request, format=None):
response = static.serve(request, 'demo.html', document_root=str(settings.STATIC_ROOT))
response['X-Frame-Options'] = 'ALLOW-FROM https://tabby.sh'
return response
class AppDistView(APIView):
def get(self, request, version=None, path=None, format=None):
fs = fsspec.filesystem(urlparse(settings.APP_DIST_STORAGE).scheme)

17
frontend/src/demo.html Normal file
View File

@ -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>

85
frontend/src/demo.ts Normal file
View File

@ -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'
})

View File

@ -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))
}

View File

@ -19,6 +19,7 @@ module.exports = {
entry: {
index: path.resolve(__dirname, 'src/index.ts'),
terminal: path.resolve(__dirname, 'src/terminal.ts'),
demo: path.resolve(__dirname, 'src/demo.ts'),
},
plugins: [
...baseConfig.plugins,
@ -39,7 +40,13 @@ module.exports = {
chunks: ['terminal'],
...htmlPluginOptions,
}),
],
new HtmlWebpackPlugin({
template: './src/demo.html',
filename: 'demo.html',
chunks: ['demo'],
...htmlPluginOptions,
}),
],
output: {
path: outputPath,
pathinfo: true,