wip

frontend/src/homepage/components/demoTerminal.component.scss

@@ -0,0 +1,16 @@
+@import "../../theme/vars.scss";
+
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: 5px;
+    background: $body-bg;
+    box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
+}
+
+iframe {
+    flex: auto;
+    display: block;
+    overflow: hidden;
+}

frontend/src/homepage/components/demoTerminal.component.ts

@@ -0,0 +1,102 @@
+import { Subject } from 'rxjs'
+import * as semverCompare from 'semver/functions/compare-loose'
+import { HttpClient } from '@angular/common/http'
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Version } from '../../api'
+import { CommonService } from '../../services/common.service'
+
+class DemoConnector {
+    constructor (
+        targetWindow: Window,
+        private commonService: CommonService,
+        private version: Version,
+    ) {
+        targetWindow['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
+    }
+
+    async loadConfig (): Promise<string> {
+        return `{
+            recoverTabs: false,
+            web: {
+                preventAccidentalTabClosure: false,
+            },
+        }`
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    async saveConfig (_content: string): Promise<void> { }
+
+    getAppVersion (): string {
+        return this.version.version
+    }
+
+    getDistURL (): string {
+        return this.commonService.backendURL + '/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<Buffer>()
+    close$ = new Subject<Buffer>()
+
+    async connect (options) {
+        this.error$.next(new Error('This web demo can\'t actually access Internet, but feel free to download the release and try it out!'))
+    }
+}
+
+@Component({
+    selector: 'demo-terminal',
+    template: '<iframe #iframe></iframe>',
+    styleUrls: ['./demoTerminal.component.scss'],
+})
+export class DemoTerminalComponent {
+    @ViewChild('iframe') iframe: ElementRef
+    connector: DemoConnector
+
+
+    constructor (
+        private http: HttpClient,
+        private commonService: CommonService,
+    ) {
+        window.addEventListener('message', this.connectorRequestHandler)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    connectorRequestHandler = event => {
+        if (event.data === 'request-connector') {
+            this.iframe.nativeElement.contentWindow['__connector__'] = this.connector
+            this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
+        }
+    }
+
+    async ngAfterViewInit (): Promise<void> {
+        const versions = await this.http.get('/api/1/versions').toPromise()
+        versions.sort((a, b) => -semverCompare(a.version, b.version))
+        this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0])
+        this.iframe.nativeElement.src = '/terminal'
+    }
+
+    ngOnDestroy (): void {
+        window.removeEventListener('message', this.connectorRequestHandler)
+    }
+}

frontend/src/homepage/components/home.component.pug

@@ -0,0 +1,32 @@
+.top-half
+    .container.overflow-hidden
+        .navbar
+            img.brand(src='{{_logo}}')
+            .me-auto
+            a.btn.btn-primary([href]='releaseURL', target='_blank')
+                fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+                span Download
+            a.btn.btn-secondary([href]='donationURL', target='_blank')
+                fa-icon([icon]='_donateIcon', [fixedWidth]='true')
+                span Donate
+            a.btn.btn-secondary(routerLink='/login', *ngIf='instanceInfo.login_enabled')
+                fa-icon([icon]='_loginIcon', [fixedWidth]='true')
+                span Login
+
+        ul.nav-pills.mb-4(ngbNav, [activeId]='router.url')
+            li([ngbNavItem]='link.link', *ngFor='let link of navLinks')
+                a(ngbNavLink, routerLink='.', [routerLink]='link.link') {{ link.title }}
+
+    .container
+        div(*ngIf='router.url == "/"')
+            .intro
+                h1 Hey.
+                div My name is Eugene and I've built a nice terminal app, #[em.ms-1 just for you].
+                div Crossplatform, local, SSH, serial, Telnet - it's all there.
+                div Here's a demo 👇
+
+            demo-terminal
+
+.bottom-half
+    .demo-offset(*ngIf='router.url == "/"')
+    router-outlet

frontend/src/homepage/components/home.component.scss

@@ -0,0 +1,56 @@
+@import "../../theme/vars.scss";
+@import "~@fontsource/fira-code/latin.css";
+
+:host {
+    font-size: 20px;
+    font-family: 'Fira Code', monospace;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+}
+
+.top-half {
+    background: linear-gradient(#0c141c00, #15202b);
+
+    h1 {
+        font-size: 80px;
+    }
+
+    .nav {
+        font-size: 14px;
+        padding: 0 35px;
+    }
+}
+
+.demo-offset {
+    padding-top: 24vw;
+}
+
+.bottom-half {
+    background: $body-bg;
+    overflow: hidden;
+    min-height: 100vh;
+}
+
+.navbar {
+    display: flex;
+    padding: 15px 30px;
+
+    a, button {
+        margin-left: 10px;
+    }
+}
+
+.brand {
+    width: 32px;
+}
+
+demo-terminal {
+    margin: auto;
+    width: calc(min(max(480px, 60vw), 100vw));
+    height: calc(max(460px, 42vw));
+    position: relative;
+    top: 20vw;
+    margin-top: -16vw;
+}

frontend/src/homepage/components/home.component.ts

@@ -0,0 +1,65 @@
+import { Component } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { faCoffee, faDownload, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
+import { Waves } from '../vanta/vanta.waves.js'
+import { InstanceInfo } from '../../api'
+
+
+@Component({
+    selector: 'home',
+    templateUrl: './home.component.pug',
+    styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent {
+    githubURL = 'https://github.com/Eugeny/tabby'
+    releaseURL = `${this.githubURL}/releases/latest`
+    donationURL = 'https://ko-fi.com/eugeny'
+
+    _logo = require('../../assets/logo.svg')
+    _downloadIcon = faDownload
+    _loginIcon = faSignInAlt
+    _donateIcon = faCoffee
+
+    navLinks = [
+        {
+            title: 'About Tabby',
+            link: '/'
+        },
+        {
+            title: 'Features',
+            link: '/features'
+        },
+    ]
+
+    instanceInfo: InstanceInfo
+
+    background: Waves|undefined
+
+    constructor (
+        public route: ActivatedRoute,
+        public router: Router,
+    ) {
+        this.instanceInfo = route.snapshot.data.instanceInfo
+        if (!this.instanceInfo.homepage_enabled) {
+            router.navigate(['/app'])
+        }
+    }
+
+    async ngAfterViewInit (): Promise<void> {
+        this.background = new Waves({
+            el: 'body',
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x70f
+        })
+    }
+
+    ngOnDestroy () {
+        this.background?.destroy()
+    }
+}

frontend/src/homepage/components/homeFeatures.component.pug

@@ -0,0 +1,90 @@
+.container.mt-5.mb-5
+    h1 Features
+
+    .row.mb-5
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.progress')
+                .card-body
+                    h5.card-title Smart tabs
+                    .card-text Tabs that detect progress and can notify you when a process is done.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.colors')
+                .card-body
+                    h5.card-title 24-bit color
+                    .card-text Support for True Color and base16 infrastructure, as well as over 150 community ANSI color schemes.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.hotkeys')
+                .card-body
+                    h5.card-title Customizable hotkeys
+                    .card-text Freely customizable single and multi-chord shortcuts.
+
+    .row.mb-5
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.ssh2')
+                .card-body
+                    h5.card-title SSH and the kitchen sink
+                    .card-text A built-in SSH client with profiles, SFTP, key management, jump hosts, X11 and the rest.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.ports')
+                .card-body
+                    h5.card-title Persistent port forwards
+                    .card-text Preconfigure often-used port forwarding setups.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.zmodem')
+                .card-body
+                    h5.card-title Zmodem transfers
+                    .card-text Send and receive files directly form the prompt in SSH, telnet and serial session.
+
+    .row.mb-5
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.quake')
+                .card-body
+                    h5.card-title Quake mode
+                    .card-text Dock on the side of the screen? Check. Spawn with a key? Sure. Tabs on bottom? No problem.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.split')
+                .card-body
+                    h5.card-title Split tabs
+                    .card-text Freely rearrangeable split panes which you can also save as a profile.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.profiles')
+                .card-body
+                    h5.card-title Profile manager
+                    .card-text Every option configurable combined in a profile startable a hotkey.
+
+    .row.mb-5
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.fonts')
+                .card-body
+                    h5.card-title Delicate fontwork
+                    .card-text Ligature support, Powerline and Nerd Fonts, emoji, pixel-perfect boxes.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.history')
+                .card-body
+                    h5.card-title Persistent history and tabs
+                    .card-text Tabby remembers your open tabs, and when you accidentally close them, restores the complete terminal state.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.paste')
+                .card-body
+                    h5.card-title Careful pasting
+                    .card-text Multi-line paste warnings and bracketed paste support prevent accidentaly executing stuff when pasting multiple lines.

frontend/src/homepage/components/homeFeatures.component.scss

@@ -0,0 +1,8 @@
+:host {
+    font-size: 14px;
+}
+
+.card-img-top {
+    aspect-ratio: 2;
+    object-fit: cover;
+}

frontend/src/homepage/components/homeFeatures.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core'
+
+@Component({
+    selector: 'home-features',
+    templateUrl: './homeFeatures.component.pug',
+    styleUrls: ['./homeFeatures.component.scss'],
+})
+export class HomeFeaturesComponent {
+    screenshots = {
+        progress: require('../../assets/screenshots/progress.png'),
+        zmodem: require('../../assets/screenshots/zmodem.png'),
+        colors: require('../../assets/screenshots/colors.png'),
+        hotkeys: require('../../assets/screenshots/hotkeys.png'),
+        ports: require('../../assets/screenshots/ports.png'),
+        ssh2: require('../../assets/screenshots/ssh2.png'),
+        fonts: require('../../assets/screenshots/fonts.png'),
+        history: require('../../assets/screenshots/history.png'),
+        paste: require('../../assets/screenshots/paste.png'),
+        quake: require('../../assets/screenshots/quake.png'),
+        split: require('../../assets/screenshots/split.png'),
+        profiles: require('../../assets/screenshots/profiles.png'),
+    }
+}

frontend/src/homepage/components/homeIndex.component.pug

@@ -0,0 +1,135 @@
+.container
+    .d-flex.m-auto.mb-5
+        a.btn.btn-lg.btn-primary.ms-auto.me-3([href]='releaseURL', target='_blank')
+            fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+            span Latest release
+
+        a.btn.btn-lg.btn-secondary.me-auto([href]='githubURL', target='_blank')
+            fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+            span GitHub
+
+    .quotes
+        .quote
+            .text "reasonable"
+            .author — Michael
+
+        .quote
+            .text "cool"
+            .author — some dude on my ko-fi
+
+        .quote
+            .text "very cool"
+            .author — datsukan
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.window',
+                    [thumbImage]='screenshots.window'
+                )
+            .col-12.col-xl-6
+                h1 The important stuff
+                ul
+                    li Runs on #[strong Windows, Mac and Linux]
+                    li Integrated #[strong SSH client] with a connection manager
+                    li Integrated #[strong serial terminal]
+                    li PowerShell, PS Core, WSL, Git-Bash, Cygwin, Cmder and CMD support
+                    li Full #[strong Unicode support] including double-width characters
+                    li File transfer from/to SSH sessions via #[strong SFTP and Zmodem]
+                    li Theming and color schemes
+                    li Fully #[strong configurable shortcuts] and multi-chord shortcuts
+                    li #[strong Remembers your tabs] and split panes
+                    li Proper shell experience on Windows including #[strong tab completion]
+                    li Integrated #[strong encrypted container] for SSH secrets and configuration
+
+.section.section-b
+    .container
+        .row
+            .col-12.col-xl-6
+                h1 Terminal features
+                ul
+                    li Multiple #[strong nested panes]
+                    li #[strong Progress bars] and activity notifications for tabs
+                    li Tabby remembers open tabs and panes where you left off
+                    li Tabs on #[strong any side of the window]
+                    li Optional #[strong quake mode] (terminal docked to a side of the screen)
+                    li Optional #[strong global hotkey] to focus/hide the terminal
+                    li Bracketed paste
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.tabs',
+                    [thumbImage]='screenshots.tabs'
+                )
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.ssh',
+                    [thumbImage]='screenshots.ssh'
+                )
+            .col-12.col-xl-6
+                h1 SSH Client
+                ul
+                    li SSH2 client with a connection manager
+                    li #[strong SFTP and Zmodem] file transfers
+                    li #[strong X11] and #[strong port forwarding]
+                    li Jump hosts
+                    li #[strong Agent forwarding] - including Pageant and Windows native OpenSSH Agent
+                    li Login scripts
+                    li Optional built-in #[strong password manager] with a master passphrase
+                    li #[strong Proxy command] support
+
+.section.section-b
+    .container
+        .row
+            .col-12.col-xl-6
+                h1 Windows, but nice
+                ul
+                    li Support for #[strong different shells] in the same window
+                    li Better tab completion #[strong cmd.exe] thanks to Clink.
+                    li Explorer menu integration
+                    li Optional #[strong portable mode]
+                    li Current directory detection that works
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.win',
+                    [thumbImage]='screenshots.win'
+                )
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.serial',
+                    [thumbImage]='screenshots.serial'
+                )
+            .col-12.col-xl-6
+                h1 Serial Terminal
+                ul
+                    li Multiple #[strong connection profiles]
+                    li Newline conversion
+                    li Text, #[strong readline] and #[strong byte-by-byte] input modes
+                    li Text and #[strong hexdump] output modes
+                    li Zmodem
+                    li Non-standard baud rates
+
+.section.section-a
+    .container
+        h1 And just too much stuff to mention here:
+        ul
+            li Themes #[strong customizable with CSS]
+            li Extensible via #[strong plugins] (in JS)
+            li A bunch of color schemes already included
+            li Telnet client
+            li #[strong Font ligatures] and font fallback
+            li #[strong Clickable URLs], IPs and paths
+            li #[strong WinSCP] integration
+            li Shell #[strong profiles]
+            li Simultaneous #[strong multi-pane input]
+            li Optional PuTTY style #[strong right-click paste] and #[strong copy on select]
+            li macOS vibrancy and Win 10 fluent background support

frontend/src/homepage/components/homeIndex.component.scss

@@ -0,0 +1,71 @@
+@import "../../theme/vars.scss";
+
+h1 {
+    font-family: $font-family-monospace;
+    font-weight: bold;
+    font-size: 48px;
+    text-shadow: 0 0 1px black;
+    margin: 0 0 25px;
+}
+
+button, a, .quote {
+    font-family: $font-family-sans-serif;
+}
+
+.intro {
+    width: 60vw;
+    margin: auto;
+}
+
+.quotes {
+    margin: 50px 0;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+
+    .quote {
+        margin: 0 30px;
+
+        .text {
+            font-size: 50px;
+            font-style: italic;
+        }
+
+        .author {
+            font-size: 14px;
+        }
+    }
+
+    @media (max-width: 600px) {
+        & { display: none;}
+    }
+}
+
+strong {
+    background: #849dff;
+    font-weight: normal;
+    padding: 2px 7px;
+    color: black;
+}
+
+.section {
+    padding: 50px 0;
+}
+
+.section-a {
+    background: rgba(0, 0, 0, .5);
+}
+
+.section-b {
+}
+
+::ng-deep lib-ngx-image-zoom {
+    width: 100%;
+    display: block;
+
+    img {
+        min-width: 100px;
+        max-width: 100%;
+        width: 100%;
+    }
+}

frontend/src/homepage/components/homeIndex.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core'
+import { faDownload } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+
+@Component({
+    selector: 'home-index',
+    templateUrl: './homeIndex.component.pug',
+    styleUrls: ['./homeIndex.component.scss'],
+})
+export class HomeIndexComponent {
+    githubURL = 'https://github.com/Eugeny/tabby'
+    releaseURL = `${this.githubURL}/releases/latest`
+
+    _downloadIcon = faDownload
+    _githubIcon = faGithub
+
+    screenshots = {
+        window: require('../../assets/screenshots/window.png'),
+        tabs: require('../../assets/screenshots/tabs.png'),
+        ssh: require('../../assets/screenshots/ssh.png'),
+        serial: require('../../assets/screenshots/serial.png'),
+        win: require('../../assets/screenshots/win.png'),
+    }
+}