wip

frontend/src/app.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { NgbDropdownModule, NgbModalModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CommonModule } from '@angular/common'
@@ -9,20 +9,15 @@ 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'
 import { ConfigModalComponent } from './components/configModal.component'
 import { SettingsModalComponent } from './components/settingsModal.component'
-import { HomeComponent } from './components/home.component'
 import { LoginComponent } from './components/login.component'
 import { ConnectionListComponent } from './components/connectionList.component'
 import { UpgradeModalComponent } from './components/upgradeModal.component'
-import { HomeIndexComponent } from './components/homeIndex.component'
-import { DemoTerminalComponent } from './components/demoTerminal.component'
-import { HomeFeaturesComponent } from './components/homeFeatures.component'
 import { InstanceInfoResolver } from './api'
 
 import '@fortawesome/fontawesome-svg-core/styles.css'
@@ -30,20 +25,7 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
 const ROUTES = [
     {
         path: '',
-        component: HomeComponent,
+        loadChildren: () => import(/* webpackChunkName: "homepage" */'./homepage').then(m => m.HomepageModule),
-        resolve: {
-            instanceInfo: InstanceInfoResolver,
-        },
-        children: [
-            {
-                path: '',
-                component: HomeIndexComponent,
-            },
-            {
-                path: 'features',
-                component: HomeFeaturesComponent,
-            },
-        ],
     },
     {
         path: 'app',
@@ -74,10 +56,8 @@ const ROUTES = [
         HttpClientXsrfModule,
         NgbDropdownModule,
         NgbModalModule,
-        NgbNavModule,
         FontAwesomeModule,
         ClipboardModule,
-        NgxImageZoomModule,
         RouterModule.forRoot(ROUTES),
     ],
     providers: [
@@ -87,14 +67,11 @@ const ROUTES = [
     declarations: [
         AppComponent,
         MainComponent,
-        HomeComponent,
-        HomeIndexComponent,
         LoginComponent,
         ConfigModalComponent,
         SettingsModalComponent,
         ConnectionListComponent,
         UpgradeModalComponent,
-        DemoTerminalComponent,
     ],
     bootstrap: [AppComponent],
 })

frontend/src/components/homeFeatures.component.ts

@@ -1,23 +0,0 @@
-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/demoTerminal.component.scss

@@ -1,4 +1,4 @@
-@import "../theme/vars.scss";
+@import "../../theme/vars.scss";
 
 :host {
     display: flex;

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

@@ -2,8 +2,8 @@ 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 { Version } from '../../api'
-import { CommonService } from '../services/common.service'
+import { CommonService } from '../../services/common.service'
 
 class DemoConnector {
     constructor (

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

@@ -1,4 +1,4 @@
-@import "../theme/vars.scss";
+@import "../../theme/vars.scss";
 @import "~@fontsource/fira-code/latin.css";
 
 :host {

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

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { faCoffee, faDownload, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
-import type { Waves } from '../homepage/vanta/vanta.waves.js'
+import { Waves } from '../vanta/vanta.waves.js'
-import { InstanceInfo } from '../api'
+import { InstanceInfo } from '../../api'
 
 
 @Component({
@@ -15,7 +15,7 @@ export class HomeComponent {
     releaseURL = `${this.githubURL}/releases/latest`
     donationURL = 'https://ko-fi.com/eugeny'
 
-    _logo = require('../assets/logo.svg')
+    _logo = require('../../assets/logo.svg')
     _downloadIcon = faDownload
     _loginIcon = faSignInAlt
     _donateIcon = faCoffee
@@ -46,7 +46,6 @@ export class HomeComponent {
     }
 
     async ngAfterViewInit (): Promise<void> {
-        const { Waves } = await import(/* webpackChunkName: "gfx" */ '../homepage/vanta/vanta.waves.js')
         this.background = new Waves({
             el: 'body',
             mouseControls: true,

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.scss

@@ -1,4 +1,4 @@
-@import "../theme/vars.scss";
+@import "../../theme/vars.scss";
 
 h1 {
     font-family: $font-family-monospace;

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

@@ -15,10 +15,10 @@ export class HomeIndexComponent {
     _githubIcon = faGithub
 
     screenshots = {
-        window: require('../assets/screenshots/window.png'),
+        window: require('../../assets/screenshots/window.png'),
-        tabs: require('../assets/screenshots/tabs.png'),
+        tabs: require('../../assets/screenshots/tabs.png'),
-        ssh: require('../assets/screenshots/ssh.png'),
+        ssh: require('../../assets/screenshots/ssh.png'),
-        serial: require('../assets/screenshots/serial.png'),
+        serial: require('../../assets/screenshots/serial.png'),
-        win: require('../assets/screenshots/win.png'),
+        win: require('../../assets/screenshots/win.png'),
     }
 }

frontend/src/homepage/index.ts

@@ -0,0 +1,55 @@
+import { NgModule } from '@angular/core'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { HttpClientModule } from '@angular/common/http'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { NgxImageZoomModule } from 'ngx-image-zoom'
+
+import { HomeComponent } from './components/home.component'
+import { HomeIndexComponent } from './components/homeIndex.component'
+import { DemoTerminalComponent } from './components/demoTerminal.component'
+import { HomeFeaturesComponent } from './components/homeFeatures.component'
+import { InstanceInfoResolver } from '../api'
+
+import '@fortawesome/fontawesome-svg-core/styles.css'
+
+const ROUTES = [
+    {
+        path: '',
+        component: HomeComponent,
+        resolve: {
+            instanceInfo: InstanceInfoResolver,
+        },
+        children: [
+            {
+                path: '',
+                component: HomeIndexComponent,
+            },
+            {
+                path: 'features',
+                component: HomeFeaturesComponent,
+            },
+        ],
+    },
+]
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        HttpClientModule,
+        NgbNavModule,
+        FontAwesomeModule,
+        NgxImageZoomModule,
+        RouterModule.forChild(ROUTES),
+    ],
+    declarations: [
+        HomeComponent,
+        HomeIndexComponent,
+        HomeFeaturesComponent,
+        DemoTerminalComponent,
+    ],
+})
+export class HomepageModule { }

frontend/tsconfig.json

@@ -24,7 +24,7 @@
       "es7"
     ],
     "paths": {
-      "*": ["src/*"]
+      "src/*": ["./src/*"]
     }
   },
   "include": ["src"]

frontend/webpack.config.base.js

@@ -1,5 +1,6 @@
 require('dotenv').config({path: '../.env'})
 const webpack = require('webpack')
+const path = require('path')
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 
 module.exports  = {
@@ -16,6 +17,9 @@ module.exports  = {
       'node_modules/',
     ],
     extensions: ['.ts', '.js'],
+    alias: {
+        src: path.resolve(__dirname, 'src'),
+    },
   },
   module: {
     rules: [