wip

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^11.0.0",
     "@angular/platform-browser-dynamic": "^11.0.0",
     "@angular/router": "^11.0.0",
+    "@fontsource/fira-code": "^4.5.0",
     "@fortawesome/angular-fontawesome": "0.8",
     "@fortawesome/fontawesome-free": "^5.7.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",

src/components/home.component.pug

@@ -23,7 +23,7 @@
 
 .bottom-half
     .container
-        .d-flex.m-auto
+        .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
@@ -48,9 +48,9 @@
     .section.section-a
         .container
             .row
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.window')
-                .col
+                .col-12.col-xl-8
                     h1 The important stuff
                     ul
                         li Runs on #[strong Windows, Mac and Linux]
@@ -68,7 +68,7 @@
     .section.section-b
         .container
             .row
-                .col
+                .col-12.col-xl-8
                     h1 Terminal features
                     ul
                         li Multiple #[strong nested panes]
@@ -78,15 +78,15 @@
                         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
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.tabs')
 
     .section.section-a
         .container
             .row
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.ssh')
-                .col
+                .col-12.col-xl-8
                     h1 SSH Client
                     ul
                         li SSH2 client with a connection manager
@@ -101,7 +101,7 @@
     .section.section-b
         .container
             .row
-                .col
+                .col-12.col-xl-8
                     h1 Windows, but nice
                     ul
                         li Support for #[strong different shells] in the same window
@@ -109,15 +109,15 @@
                         li Explorer menu integration
                         li Optional #[strong portable mode]
                         li Current directory detection that works
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.win')
 
     .section.section-a
         .container
             .row
-                .col
+                .col-12.col-xl-4
                     img.screenshot([src]='screenshots.serial')
-                .col
+                .col-12.col-xl-8
                     h1 Serial Terminal
                     ul
                         li Multiple #[strong connection profiles]
@@ -134,6 +134,7 @@
                 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

src/components/home.component.scss

@@ -1,11 +1,21 @@
 @import "../theme/vars.scss";
+@import "~@fontsource/fira-code/latin.css";
 
 :host {
     font-size: 20px;
+    font-family: 'Fira Code', monospace;
+
+    button, a, .quote {
+        font-family: $font-family-sans-serif;
+    }
 }
 
 .top-half {
     background: linear-gradient(#0c141c, #15202b);
+
+    h1 {
+        font-size: 80px;
+    }
 }
 
 .navbar {
@@ -26,6 +36,7 @@ h1 {
     font-weight: bold;
     font-size: 48px;
     text-shadow: 0 0 1px black;
+    margin: 0 0 25px;
 }
 
 .intro {
@@ -38,15 +49,16 @@ iframe {
     margin: auto;
     position: relative;
     top: 20vw;
-    margin-top: -18vw;
+    margin-top: -16vw;
 
-    width: 60vw;
+    width: calc(min(max(480px, 60vw), 100vw));
-    height: 42vw;
+    height: calc(max(460px, 42vw));
     overflow: hidden;
     border-radius: 5px;
     box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
 }
 
+
 .bottom-half {
     padding-top: 24vw;
 }
@@ -69,13 +81,17 @@ iframe {
             font-size: 14px;
         }
     }
+
+    @media (max-width: 600px) {
+        & { display: none;}
+    }
 }
 
 strong {
-    background: #9400ff57;
+    background: #849dff;
     font-weight: normal;
     padding: 2px 7px;
-    text-shadow: 0 0 2px black;
+    color: black;
 }
 
 .section {

src/components/home.component.ts

@@ -1,4 +1,4 @@
-import * as semverGT from 'semver/functions/gt'
+import * as semverCompare from 'semver/functions/compare-loose'
 import { HttpClient } from '@angular/common/http'
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { InstanceInfo, Version } from '../api'
@@ -86,7 +86,7 @@ export class HomeComponent {
 
     async ngAfterViewInit () {
         const versions = await this.http.get('/api/1/versions').toPromise()
-        versions.sort((a, b) => semverGT(a.version, b.version))
+        versions.sort((a, b) => -semverCompare(a.version, b.version))
         this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, versions[0])
         this.iframe.nativeElement.src = '/terminal'
     }

src/components/main.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, ViewChild } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
+import { Title } from '@angular/platform-browser'
 import { AppConnectorService } from '../services/appConnector.service'
 
 import { faCog, faFile, faPlus, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
@@ -29,6 +30,7 @@ export class MainComponent {
     @ViewChild('iframe') iframe: ElementRef
 
     constructor (
+        titleService: Title,
         public appConnector: AppConnectorService,
         private http: HttpClient,
         public loginService: LoginService,
@@ -36,6 +38,7 @@ export class MainComponent {
         private config: ConfigService,
         private router: Router,
     ) {
+        titleService.setTitle('Tabby')
         window.addEventListener('message', this.connectorRequestHandler)
     }
 

src/index.html

@@ -5,7 +5,21 @@
     <meta name="viewport" content="initial-scale=1, minimal-ui, shrink-to-fit=no">
     <link rel="icon" type="image/png">
     <link rel="shortcut icon" type="image/png" href="./assets/favicon.png">
-    <title>Tabby</title>
+    <title>Tabby - a terminal for a more modern age</title>
+    <meta name="title" content="Tabby - a terminal for a more modern age">
+    <meta name="description" content="Tabby is a free and open source SSH, local and Telnet terminal with everything you'll ever need.">
+
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://tabby.sh/">
+    <meta property="og:title" content="Tabby - a terminal for a more modern age">
+    <meta property="og:description" content="Tabby is a free and open source SSH, local and Telnet terminal with everything you'll ever need.">
+    <meta property="og:image" content="./assets/meta-preview.png">
+
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://tabby.sh/">
+    <meta property="twitter:title" content="Tabby - a terminal for a more modern age">
+    <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="./assets/meta-preview.png">
   </head>
   <body>
     <app></app>

src/services/config.service.ts

@@ -1,4 +1,4 @@
-import * as semverGT from 'semver/functions/gt'
+import * as semverCompare from 'semver/functions/compare-loose'
 import { AsyncSubject, Subject } from 'rxjs'
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
@@ -84,7 +84,7 @@ export class ConfigService {
     private async init () {
         this.configs = await this.http.get('/api/1/configs').toPromise()
         this.versions = await this.http.get('/api/1/versions').toPromise()
-        this.versions.sort((a, b) => semverGT(a.version, b.version))
+        this.versions.sort((a, b) => -semverCompare(a.version, b.version))
 
         if (!this.configs.length) {
             await this.createNewConfig()

yarn.lock

@@ -283,6 +283,11 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
   integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
 
+"@fontsource/fira-code@^4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/fira-code/-/fira-code-4.5.0.tgz#b69a8a70fe54f6e7ef79a65cc5b15c66c7391794"
+  integrity sha512-fxRV3qt0eJaIXZvICXZMhXVR0lSyxZTC0cnM+1Ma/1JShGrIjCQ3yJ0W05rwaEoF3cAbpU2lKMrXfE7Of/zpIA==
+
 "@fortawesome/angular-fontawesome@0.8":
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.8.2.tgz#fe0401c66dd237fd78d3f29d540ef7302bb40e5a"