imgs

frontend/package.json

@@ -30,6 +30,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@ng-bootstrap/ng-bootstrap": "11.0.0-beta.1",
     "@ngtools/webpack": "^12.0.4",
+    "@nguniversal/express-engine": "^11.1.0",
     "@tabby-gang/to-string-loader": "^1.1.7-beta.1",
     "@types/node": "^11.9.5",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
@@ -40,13 +41,16 @@
     "core-js": "^3.14.0",
     "css-loader": "^2.1.0",
     "deepmerge": "^4.2.2",
+    "domino": "^2.1.6",
     "dotenv": "^10.0.0",
     "eslint": "^7.31.0",
+    "express": "^4.17.1",
     "file-loader": "^1.1.11",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "^5.3.2",
     "js-yaml": "^4.1.0",
     "mini-css-extract-plugin": "^2.1.0",
+    "ngx-image-zoom": "^0.6.0",
     "ngx-toastr": "^14.0.0",
     "node-sass": "^6.0.0",
     "pug": "^3.0.2",
@@ -59,6 +63,7 @@
     "script-loader": "^0.7.2",
     "semver": "^7.3.5",
     "source-code-pro": "^2.30.1",
+    "source-map-support": "^0.5.19",
     "source-sans-pro": "^2.45.0",
     "style-loader": "^0.23.1",
     "throng": "^5.0.0",
@@ -67,10 +72,6 @@
     "webpack": "^5.38.1",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.7.2",
-    "zone.js": "^0.11.4",
-    "@nguniversal/express-engine": "^11.1.0",
-    "domino": "^2.1.6",
-    "express": "^4.17.1",
-    "source-map-support": "^0.5.19"
+    "zone.js": "^0.11.4"
   }
 }

frontend/src/app.module.ts

@@ -9,6 +9,8 @@ import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angu
 import { ClipboardModule } from '@angular/cdk/clipboard'
 import { TransferHttpCacheModule } from '@nguniversal/common'
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { NgxImageZoomModule } from 'ngx-image-zoom'
+
 import { BackendXsrfInterceptor, UniversalInterceptor } from './interceptor'
 import { AppComponent } from './components/app.component'
 import { MainComponent } from './components/main.component'
@@ -59,6 +61,7 @@ const ROUTES = [
         NgbModalModule,
         FontAwesomeModule,
         ClipboardModule,
+        NgxImageZoomModule,
         RouterModule.forRoot(ROUTES),
     ],
     providers: [

frontend/src/components/home.component.pug

@@ -49,7 +49,10 @@
         .container
             .row
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.window', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.window',
+                        [thumbImage]='screenshots.window'
+                    )
                 .col-12.col-xl-6
                     h1 The important stuff
                     ul
@@ -79,13 +82,19 @@
                         li Optional #[strong global hotkey] to focus/hide the terminal
                         li Bracketed paste
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.tabs', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.tabs',
+                        [thumbImage]='screenshots.tabs'
+                    )
 
     .section.section-a
         .container
             .row
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.ssh', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.ssh',
+                        [thumbImage]='screenshots.ssh'
+                    )
                 .col-12.col-xl-6
                     h1 SSH Client
                     ul
@@ -110,13 +119,19 @@
                         li Optional #[strong portable mode]
                         li Current directory detection that works
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.win', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.win',
+                        [thumbImage]='screenshots.win'
+                    )
 
     .section.section-a
         .container
             .row
                 .col-12.col-xl-6
-                    img.screenshot([src]='screenshots.serial', loading='lazy')
+                    lib-ngx-image-zoom(
+                        [fullImage]='screenshots.serial',
+                        [thumbImage]='screenshots.serial'
+                    )
                 .col-12.col-xl-6
                     h1 Serial Terminal
                     ul

frontend/src/components/home.component.scss

@@ -96,11 +96,6 @@ strong {
 
 .section {
     padding: 50px 0;
-
-    .screenshot {
-        min-width: 0;
-        max-width: 100%;
-    }
 }
 
 .section-a {
@@ -109,3 +104,14 @@ strong {
 
 .section-b {
 }
+
+::ng-deep lib-ngx-image-zoom {
+    width: 100%;
+    display: block;
+
+    img {
+        min-width: 100px;
+        max-width: 100%;
+    width: 100%;
+}
+}

frontend/yarn.lock

@@ -3084,6 +3084,11 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+ngx-image-zoom@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/ngx-image-zoom/-/ngx-image-zoom-0.6.0.tgz#643dd775c62cf7b4845033bf4566c21f89c20a37"
+  integrity sha512-XWuC+bHvYr02C7TcnkK7Dv4BgohTt59sJNaaKRJ6p0js8tYuZdO0kiKVYgTBBctMuAd5hzXbbZgCjrmeG1Pmdw==
+
 ngx-toastr@^14.0.0:
   version "14.0.0"
   resolved "https://registry.yarnpkg.com/ngx-toastr/-/ngx-toastr-14.0.0.tgz#20e4737ef330b892a453768cd98b980558aeb286"