From 533749092a430e90b7362e07312e54c8f1593956 Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Wed, 15 Sep 2021 20:54:44 +0200 Subject: [PATCH] wip --- frontend/src/app.module.ts | 27 +-------- .../src/components/homeFeatures.component.ts | 23 -------- .../components/demoTerminal.component.scss | 2 +- .../components/demoTerminal.component.ts | 4 +- .../components/home.component.pug | 0 .../components/home.component.scss | 2 +- .../components/home.component.ts | 7 +-- .../components/homeFeatures.component.pug | 0 .../components/homeFeatures.component.scss | 0 .../components/homeFeatures.component.ts | 23 ++++++++ .../components/homeIndex.component.pug | 0 .../components/homeIndex.component.scss | 2 +- .../components/homeIndex.component.ts | 10 ++-- frontend/src/homepage/index.ts | 55 +++++++++++++++++++ frontend/tsconfig.json | 2 +- frontend/webpack.config.base.js | 4 ++ 16 files changed, 98 insertions(+), 63 deletions(-) delete mode 100644 frontend/src/components/homeFeatures.component.ts rename frontend/src/{ => homepage}/components/demoTerminal.component.scss (89%) rename frontend/src/{ => homepage}/components/demoTerminal.component.ts (96%) rename frontend/src/{ => homepage}/components/home.component.pug (100%) rename frontend/src/{ => homepage}/components/home.component.scss (96%) rename frontend/src/{ => homepage}/components/home.component.ts (85%) rename frontend/src/{ => homepage}/components/homeFeatures.component.pug (100%) rename frontend/src/{ => homepage}/components/homeFeatures.component.scss (100%) create mode 100644 frontend/src/homepage/components/homeFeatures.component.ts rename frontend/src/{ => homepage}/components/homeIndex.component.pug (100%) rename frontend/src/{ => homepage}/components/homeIndex.component.scss (96%) rename frontend/src/{ => homepage}/components/homeIndex.component.ts (63%) create mode 100644 frontend/src/homepage/index.ts diff --git a/frontend/src/app.module.ts b/frontend/src/app.module.ts index 42e459a..22d4e3a 100644 --- a/frontend/src/app.module.ts +++ b/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, - resolve: { - instanceInfo: InstanceInfoResolver, - }, - children: [ - { - path: '', - component: HomeIndexComponent, - }, - { - path: 'features', - component: HomeFeaturesComponent, - }, - ], + loadChildren: () => import(/* webpackChunkName: "homepage" */'./homepage').then(m => m.HomepageModule), }, { 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], }) diff --git a/frontend/src/components/homeFeatures.component.ts b/frontend/src/components/homeFeatures.component.ts deleted file mode 100644 index 2162bd9..0000000 --- a/frontend/src/components/homeFeatures.component.ts +++ /dev/null @@ -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'), - } -} diff --git a/frontend/src/components/demoTerminal.component.scss b/frontend/src/homepage/components/demoTerminal.component.scss similarity index 89% rename from frontend/src/components/demoTerminal.component.scss rename to frontend/src/homepage/components/demoTerminal.component.scss index 293c847..9e20365 100644 --- a/frontend/src/components/demoTerminal.component.scss +++ b/frontend/src/homepage/components/demoTerminal.component.scss @@ -1,4 +1,4 @@ -@import "../theme/vars.scss"; +@import "../../theme/vars.scss"; :host { display: flex; diff --git a/frontend/src/components/demoTerminal.component.ts b/frontend/src/homepage/components/demoTerminal.component.ts similarity index 96% rename from frontend/src/components/demoTerminal.component.ts rename to frontend/src/homepage/components/demoTerminal.component.ts index 299662b..8bef375 100644 --- a/frontend/src/components/demoTerminal.component.ts +++ b/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 { CommonService } from '../services/common.service' +import { Version } from '../../api' +import { CommonService } from '../../services/common.service' class DemoConnector { constructor ( diff --git a/frontend/src/components/home.component.pug b/frontend/src/homepage/components/home.component.pug similarity index 100% rename from frontend/src/components/home.component.pug rename to frontend/src/homepage/components/home.component.pug diff --git a/frontend/src/components/home.component.scss b/frontend/src/homepage/components/home.component.scss similarity index 96% rename from frontend/src/components/home.component.scss rename to frontend/src/homepage/components/home.component.scss index b4f20a6..5fa3ba7 100644 --- a/frontend/src/components/home.component.scss +++ b/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 { diff --git a/frontend/src/components/home.component.ts b/frontend/src/homepage/components/home.component.ts similarity index 85% rename from frontend/src/components/home.component.ts rename to frontend/src/homepage/components/home.component.ts index c8e00d9..c9bc41a 100644 --- a/frontend/src/components/home.component.ts +++ b/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 { InstanceInfo } from '../api' +import { Waves } from '../vanta/vanta.waves.js' +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 { - const { Waves } = await import(/* webpackChunkName: "gfx" */ '../homepage/vanta/vanta.waves.js') this.background = new Waves({ el: 'body', mouseControls: true, diff --git a/frontend/src/components/homeFeatures.component.pug b/frontend/src/homepage/components/homeFeatures.component.pug similarity index 100% rename from frontend/src/components/homeFeatures.component.pug rename to frontend/src/homepage/components/homeFeatures.component.pug diff --git a/frontend/src/components/homeFeatures.component.scss b/frontend/src/homepage/components/homeFeatures.component.scss similarity index 100% rename from frontend/src/components/homeFeatures.component.scss rename to frontend/src/homepage/components/homeFeatures.component.scss diff --git a/frontend/src/homepage/components/homeFeatures.component.ts b/frontend/src/homepage/components/homeFeatures.component.ts new file mode 100644 index 0000000..0e2c08c --- /dev/null +++ b/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'), + } +} diff --git a/frontend/src/components/homeIndex.component.pug b/frontend/src/homepage/components/homeIndex.component.pug similarity index 100% rename from frontend/src/components/homeIndex.component.pug rename to frontend/src/homepage/components/homeIndex.component.pug diff --git a/frontend/src/components/homeIndex.component.scss b/frontend/src/homepage/components/homeIndex.component.scss similarity index 96% rename from frontend/src/components/homeIndex.component.scss rename to frontend/src/homepage/components/homeIndex.component.scss index f760751..973d68f 100644 --- a/frontend/src/components/homeIndex.component.scss +++ b/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; diff --git a/frontend/src/components/homeIndex.component.ts b/frontend/src/homepage/components/homeIndex.component.ts similarity index 63% rename from frontend/src/components/homeIndex.component.ts rename to frontend/src/homepage/components/homeIndex.component.ts index 0baa38b..4678be0 100644 --- a/frontend/src/components/homeIndex.component.ts +++ b/frontend/src/homepage/components/homeIndex.component.ts @@ -15,10 +15,10 @@ export class HomeIndexComponent { _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'), + 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'), } } diff --git a/frontend/src/homepage/index.ts b/frontend/src/homepage/index.ts new file mode 100644 index 0000000..75f2a56 --- /dev/null +++ b/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 { } diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 3f74b27..8231bb8 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -24,7 +24,7 @@ "es7" ], "paths": { - "*": ["src/*"] + "src/*": ["./src/*"] } }, "include": ["src"] diff --git a/frontend/webpack.config.base.js b/frontend/webpack.config.base.js index c934be8..c449b24 100644 --- a/frontend/webpack.config.base.js +++ b/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: [