.

backend/tabby/app/urls.py

@@ -7,7 +7,7 @@ from . import views
 urlpatterns = [
     *[
         path(p, views.IndexView.as_view())
-        for p in ['', 'login', 'app', 'about', 'features']
+        for p in ['', 'login', 'app', 'about', 'about/features']
     ],
 
     path('app-dist/<version>/<path:path>', views.AppDistView.as_view()),

frontend/package.json

@@ -12,17 +12,17 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular/animations": "^11.2.14",
+    "@angular/animations": "^12.2.11",
-    "@angular/cdk": "^12.1.3",
+    "@angular/cdk": "^12.2.11",
-    "@angular/common": "^11.2.14",
+    "@angular/common": "^12.2.11",
-    "@angular/compiler": "^11.2.14",
+    "@angular/compiler": "^12.2.11",
-    "@angular/compiler-cli": "^11.2.14",
+    "@angular/compiler-cli": "^12.2.11",
-    "@angular/core": "^11.2.14",
+    "@angular/core": "^12.2.11",
-    "@angular/forms": "^11.2.14",
+    "@angular/forms": "^12.2.11",
-    "@angular/platform-browser": "^11.2.14",
+    "@angular/platform-browser": "^12.2.11",
-    "@angular/platform-browser-dynamic": "^11.2.14",
+    "@angular/platform-browser-dynamic": "^12.2.11",
-    "@angular/platform-server": "^11.2.14",
+    "@angular/platform-server": "^12.2.11",
-    "@angular/router": "^11.2.14",
+    "@angular/router": "^12.2.11",
     "@fontsource/fira-code": "^4.5.0",
     "@fortawesome/angular-fontawesome": "0.8",
     "@fortawesome/fontawesome-free": "^5.7.2",
@@ -30,8 +30,8 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@ng-bootstrap/ng-bootstrap": "11.0.0-beta.1",
-    "@ngtools/webpack": "^12.0.4",
+    "@ngtools/webpack": "^12.2.11",
-    "@nguniversal/express-engine": "^11.1.0",
+    "@nguniversal/express-engine": "^12.1.2",
     "@tabby-gang/to-string-loader": "^1.1.7-beta.1",
     "@types/node": "^11.9.5",
     "@typescript-eslint/eslint-plugin": "^5.1.0",
@@ -69,12 +69,12 @@
     "style-loader": "^0.23.1",
     "three": "^0.119.0",
     "throng": "^5.0.0",
-    "typescript": "~4.1",
+    "typescript": "~4.3.2",
     "val-loader": "^4.0.0",
     "vanta": "^0.5.21",
-    "webpack": "^5.38.1",
+    "webpack": "^5.59.1",
-    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.7.2",
+    "webpack-cli": "^4.9.1",
     "zone.js": "^0.11.4"
   }
 }

frontend/src/api.ts

@@ -1,7 +1,6 @@
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Resolve } from '@angular/router'
-import { Observable } from 'rxjs'
 
 export interface User {
   id: number
@@ -41,10 +40,10 @@ export interface Gateway {
 }
 
 @Injectable({ providedIn: 'root' })
-export class InstanceInfoResolver implements Resolve<Observable<InstanceInfo>> {
+export class InstanceInfoResolver implements Resolve<Promise<InstanceInfo>> {
   constructor (private http: HttpClient) { }
 
-  resolve (): Observable<InstanceInfo> {
+  resolve (): Promise<InstanceInfo> {
-    return this.http.get('/api/1/instance-info').toPromise()
+    return this.http.get('/api/1/instance-info').toPromise() as Promise<InstanceInfo>
   }
 }

frontend/src/app/components/main.component.ts

@@ -85,7 +85,6 @@ export class MainComponent {
 
   reloadApp (config: Config, version: Version) {
     // TODO check config incompatibility
-    this.unloadApp()
     setTimeout(() => {
       this.appConnector.setState(config, version)
       this.loadApp(config, version)

frontend/src/app/services/appConnector.service.ts

@@ -222,7 +222,7 @@ export class AppConnectorService {
 
   async chooseConnectionGateway (): Promise<Gateway> {
     try {
-      return this.http.post('/api/1/gateways/choose', {}).toPromise()
+      return await this.http.post('/api/1/gateways/choose', {}).toPromise() as Gateway
     } catch (err){
       if (err.status === 503) {
         throw new Error('All connections gateway are unavailable right now')

frontend/src/common/services/config.service.ts

@@ -52,7 +52,7 @@ export class ConfigService {
       this.configs.push(config)
       return config
     }
-    const config = await this.http.post('/api/1/configs', configData).toPromise()
+    const config = (await this.http.post('/api/1/configs', configData).toPromise()) as Config
     this.configs.push(config)
     return config
   }
@@ -62,11 +62,11 @@ export class ConfigService {
   }
 
   async duplicateActiveConfig (): Promise<void> {
-    let copy = { ...this._activeConfig, pk: undefined, id: undefined }
+    let copy: any = { ...this._activeConfig, id: undefined }
     if (this.loginService.user) {
-      copy = await this.http.post('/api/1/configs', copy).toPromise()
+      copy = (await this.http.post('/api/1/configs', copy).toPromise()) as Config
     }
-    this.configs.push(copy as any)
+    this.configs.push(copy)
   }
 
   async selectVersion (version: Version): Promise<void> {
@@ -105,9 +105,9 @@ export class ConfigService {
 
   private async init () {
     if (this.loginService.user) {
-      this.configs = await this.http.get('/api/1/configs').toPromise()
+      this.configs = (await this.http.get('/api/1/configs').toPromise()) as Config[]
     }
-    this.versions = await this.http.get('/api/1/versions').toPromise()
+    this.versions = (await this.http.get('/api/1/versions').toPromise()) as Version[]
     this.versions.sort((a, b) => -semverCompare(a.version, b.version))
 
     if (!this.configs.length) {

frontend/src/common/services/login.service.ts

@@ -22,7 +22,7 @@ export class LoginService {
 
   private async init () {
     try {
-      this.user = await this.http.get('/api/1/user').toPromise()
+      this.user = (await this.http.get('/api/1/user').toPromise()) as User
     } catch {
       this.user = null
     }

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

@@ -56,7 +56,7 @@ class DemoConnector {
 export class DemoSocketProxy {
   connect$ = new Subject<void>()
   data$ = new Subject<Buffer>()
-  error$ = new Subject<Buffer>()
+  error$ = new Subject<Error>()
   close$ = new Subject<Buffer>()
 
   async connect () {
@@ -90,9 +90,9 @@ export class DemoTerminalComponent {
   }
 
   async ngAfterViewInit (): Promise<void> {
-    const versions = await this.http.get('/api/1/versions').toPromise()
+    const versions = (await this.http.get('/api/1/versions').toPromise()) as Version[]
     versions.sort((a, b) => -semverCompare(a.version, b.version))
-    this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0])
+    this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0]!)
     this.iframe.nativeElement.src = '/terminal'
   }
 

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

@@ -27,7 +27,7 @@ export class HomeComponent {
     },
     {
       title: 'Features',
-      link: '/features',
+      link: '/about/features',
     },
   ]
 

frontend/src/homepage/index.ts

@@ -27,7 +27,7 @@ const ROUTES = [
         component: HomeIndexComponent,
       },
       {
-        path: 'features',
+        path: 'about/features',
         component: HomeFeaturesComponent,
       },
     ],

frontend/src/index.html

@@ -22,6 +22,8 @@
     <meta property="twitter:description" content="Tabby is a free and open source SSH, local and Telnet terminal with everything you'll ever need.">
     <meta property="twitter:image" content="https://user-images.githubusercontent.com/161476/126016449-a053012a-e322-48ed-a2ab-3ed4f3281465.png">
 
+    <meta property="theme-color" content="#0c131b">
+
     <meta property="x-tabby-web-backend-url" content="{{backendURL}}">
   </head>
   <body>

frontend/src/server.ts

@@ -42,7 +42,7 @@ function start () {
     maxAge: '1y',
   }))
 
-  app.get(['/', '/app', '/login', '/features'], (req, res) => {
+  app.get(['/', '/app', '/login', '/about', '/about/:_'], (req, res) => {
     res.render(
       'index',
       {