mirror of
https://github.com/Eugeny/tabby-web.git
synced 2025-06-08 13:39:56 +00:00
removed homepage
This commit is contained in:
Eugene Pankov
parent
86a3210a75
commit
99f68e1202
@ -1,7 +1,7 @@
|
|||||||
parser: '@typescript-eslint/parser'
|
parser: '@typescript-eslint/parser'
|
||||||
parserOptions:
|
parserOptions:
|
||||||
project:
|
project:
|
||||||
- tsconfig.json
|
- frontend/tsconfig.json
|
||||||
extends:
|
extends:
|
||||||
- 'plugin:@typescript-eslint/all'
|
- 'plugin:@typescript-eslint/all'
|
||||||
plugins:
|
plugins:
|
||||||
15
backend/node_modules/.yarn-integrity
generated
vendored
Normal file
15
backend/node_modules/.yarn-integrity
generated
vendored
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"systemParams": "darwin-x64-83",
|
||||||
|
"modulesFolders": [],
|
||||||
|
"flags": [],
|
||||||
|
"linkedModules": [
|
||||||
|
"elements-sdk",
|
||||||
|
"elements-sdk-angular",
|
||||||
|
"node-pty",
|
||||||
|
"shift-protocol"
|
||||||
|
],
|
||||||
|
"topLevelPatterns": [],
|
||||||
|
"lockfileEntries": {},
|
||||||
|
"files": [],
|
||||||
|
"artifacts": {}
|
||||||
|
}
|
||||||
@ -1,6 +1,6 @@
|
|||||||
from django.urls import path, include
|
from django.urls import path, include
|
||||||
from rest_framework import routers
|
from rest_framework import routers
|
||||||
from . import app_version, auth, config, gateway, info, user
|
from . import app_version, auth, config, gateway, user
|
||||||
|
|
||||||
|
|
||||||
router = routers.DefaultRouter(trailing_slash=False)
|
router = routers.DefaultRouter(trailing_slash=False)
|
||||||
@ -10,7 +10,6 @@ router.register('api/1/versions', app_version.AppVersionViewSet, basename='app-v
|
|||||||
urlpatterns = [
|
urlpatterns = [
|
||||||
path('api/1/auth/logout', auth.LogoutView.as_view()),
|
path('api/1/auth/logout', auth.LogoutView.as_view()),
|
||||||
path('api/1/user', user.UserViewSet.as_view({'get': 'retrieve', 'put': 'update'})),
|
path('api/1/user', user.UserViewSet.as_view({'get': 'retrieve', 'put': 'update'})),
|
||||||
path('api/1/instance-info', info.InstanceInfoViewSet.as_view({'get': 'retrieve'})),
|
|
||||||
path('api/1/gateways/choose', gateway.ChooseGatewayViewSet.as_view({'post': 'retrieve'})),
|
path('api/1/gateways/choose', gateway.ChooseGatewayViewSet.as_view({'post': 'retrieve'})),
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,21 +0,0 @@
|
|||||||
from django.conf import settings
|
|
||||||
from rest_framework import fields
|
|
||||||
from rest_framework.mixins import RetrieveModelMixin
|
|
||||||
from rest_framework.viewsets import GenericViewSet
|
|
||||||
from rest_framework.serializers import Serializer
|
|
||||||
|
|
||||||
|
|
||||||
class InstanceInfoSerializer(Serializer):
|
|
||||||
login_enabled = fields.BooleanField()
|
|
||||||
homepage_enabled = fields.BooleanField()
|
|
||||||
|
|
||||||
|
|
||||||
class InstanceInfoViewSet(RetrieveModelMixin, GenericViewSet):
|
|
||||||
queryset = '' # type: ignore
|
|
||||||
serializer_class = InstanceInfoSerializer
|
|
||||||
|
|
||||||
def get_object(self):
|
|
||||||
return {
|
|
||||||
'login_enabled': settings.ENABLE_LOGIN,
|
|
||||||
'homepage_enabled': settings.ENABLE_HOMEPAGE,
|
|
||||||
}
|
|
||||||
@ -190,7 +190,6 @@ for key in [
|
|||||||
'GA_ID',
|
'GA_ID',
|
||||||
'GA_DOMAIN',
|
'GA_DOMAIN',
|
||||||
'ENABLE_LOGIN',
|
'ENABLE_LOGIN',
|
||||||
'ENABLE_HOMEPAGE',
|
|
||||||
]:
|
]:
|
||||||
globals()[key] = os.getenv(key)
|
globals()[key] = os.getenv(key)
|
||||||
|
|
||||||
@ -201,13 +200,6 @@ for key in [
|
|||||||
globals()[key] = int(globals()[key]) if globals()[key] else None
|
globals()[key] = int(globals()[key]) if globals()[key] else None
|
||||||
|
|
||||||
|
|
||||||
for key in [
|
|
||||||
'ENABLE_LOGIN',
|
|
||||||
'ENABLE_HOMEPAGE',
|
|
||||||
]:
|
|
||||||
globals()[key] = globals()[key] == 'True'
|
|
||||||
|
|
||||||
|
|
||||||
for key in [
|
for key in [
|
||||||
'CONNECTION_GATEWAY_AUTH_CA',
|
'CONNECTION_GATEWAY_AUTH_CA',
|
||||||
'CONNECTION_GATEWAY_AUTH_CERTIFICATE',
|
'CONNECTION_GATEWAY_AUTH_CERTIFICATE',
|
||||||
|
|||||||
4
backend/yarn.lock
Normal file
4
backend/yarn.lock
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||||
|
# yarn lockfile v1
|
||||||
|
|
||||||
|
|
||||||
@ -11,7 +11,6 @@ services:
|
|||||||
environment:
|
environment:
|
||||||
- DATABASE_URL=mysql://root:123@db/tabby
|
- DATABASE_URL=mysql://root:123@db/tabby
|
||||||
- PORT=80
|
- PORT=80
|
||||||
- ENABLE_HOMEPAGE=False
|
|
||||||
- DEBUG=False
|
- DEBUG=False
|
||||||
- APP_DIST_STORAGE=file:///app-dist
|
- APP_DIST_STORAGE=file:///app-dist
|
||||||
- DOCKERIZE_ARGS="-wait tcp://db:3306 -timeout 60s"
|
- DOCKERIZE_ARGS="-wait tcp://db:3306 -timeout 60s"
|
||||||
|
|||||||
@ -1,7 +1,3 @@
|
|||||||
import { HttpClient } from '@angular/common/http'
|
|
||||||
import { Injectable } from '@angular/core'
|
|
||||||
import { Resolve } from '@angular/router'
|
|
||||||
|
|
||||||
export interface User {
|
export interface User {
|
||||||
id: number
|
id: number
|
||||||
active_config: number
|
active_config: number
|
||||||
@ -27,23 +23,9 @@ export interface Version {
|
|||||||
plugins: string[]
|
plugins: string[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface InstanceInfo {
|
|
||||||
login_enabled: boolean
|
|
||||||
homepage_enabled: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Gateway {
|
export interface Gateway {
|
||||||
host: string
|
host: string
|
||||||
port: number
|
port: number
|
||||||
url: string
|
url: string
|
||||||
auth_token: string
|
auth_token: string
|
||||||
}
|
}
|
||||||
|
|
||||||
@Injectable({ providedIn: 'root' })
|
|
||||||
export class InstanceInfoResolver implements Resolve<Promise<InstanceInfo>> {
|
|
||||||
constructor (private http: HttpClient) { }
|
|
||||||
|
|
||||||
resolve (): Promise<InstanceInfo> {
|
|
||||||
return this.http.get('/api/1/instance-info').toPromise() as Promise<InstanceInfo>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -18,11 +18,11 @@ import '@fortawesome/fontawesome-svg-core/styles.css'
|
|||||||
const ROUTES = [
|
const ROUTES = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
loadChildren: () => import(/* webpackChunkName: "homepage" */'./homepage').then(m => m.HomepageModule),
|
loadChildren: () => import(/* webpackChunkName: "app" */'./app').then(m => m.ApplicationModule),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'app',
|
path: 'app',
|
||||||
loadChildren: () => import(/* webpackChunkName: "app" */'./app').then(m => m.ApplicationModule),
|
redirectTo: '/',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'login',
|
path: 'login',
|
||||||
|
|||||||
@ -12,16 +12,12 @@ import { ConfigModalComponent } from './components/configModal.component'
|
|||||||
import { SettingsModalComponent } from './components/settingsModal.component'
|
import { SettingsModalComponent } from './components/settingsModal.component'
|
||||||
import { ConnectionListComponent } from './components/connectionList.component'
|
import { ConnectionListComponent } from './components/connectionList.component'
|
||||||
import { UpgradeModalComponent } from './components/upgradeModal.component'
|
import { UpgradeModalComponent } from './components/upgradeModal.component'
|
||||||
import { InstanceInfoResolver } from 'src/api'
|
|
||||||
import { CommonAppModule } from 'src/common'
|
import { CommonAppModule } from 'src/common'
|
||||||
|
|
||||||
const ROUTES = [
|
const ROUTES = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: MainComponent,
|
component: MainComponent,
|
||||||
resolve: {
|
|
||||||
instanceInfo: InstanceInfoResolver,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +0,0 @@
|
|||||||
iframe(#iframe)
|
|
||||||
img(*ngIf='!running', [src]='_demoScreenshot')
|
|
||||||
.overlay(*ngIf='!running', (click)='start()')
|
|
||||||
fa-icon.mb-3([icon]='_playIcon', size='2x')
|
|
||||||
strong.mb-2 Start interactive demo
|
|
||||||
small.text-muted 25 MB, CPU intensive
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
@import "~theme/vars";
|
|
||||||
|
|
||||||
:host {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 5px;
|
|
||||||
background: $body-bg;
|
|
||||||
box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
flex: auto;
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
img, .overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
object-fit: contain;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overlay {
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
transition: background-color 0.25s ease-out;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
strong, small {
|
|
||||||
background: rgba(0, 0, 0, .5);
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,110 +0,0 @@
|
|||||||
import { Subject } from 'rxjs'
|
|
||||||
import * as semverCompare from 'semver/functions/compare-loose'
|
|
||||||
import { faPlay } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { HttpClient } from '@angular/common/http'
|
|
||||||
import { Component, ElementRef, ViewChild } from '@angular/core'
|
|
||||||
import { Version } from 'src/api'
|
|
||||||
import { CommonService } from 'src/common'
|
|
||||||
|
|
||||||
class DemoConnector {
|
|
||||||
constructor (
|
|
||||||
targetWindow: Window,
|
|
||||||
private commonService: CommonService,
|
|
||||||
private version: Version,
|
|
||||||
) {
|
|
||||||
targetWindow['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
|
|
||||||
}
|
|
||||||
|
|
||||||
async loadConfig (): Promise<string> {
|
|
||||||
return `{
|
|
||||||
recoverTabs: false,
|
|
||||||
web: {
|
|
||||||
preventAccidentalTabClosure: false,
|
|
||||||
},
|
|
||||||
terminal: {
|
|
||||||
fontSize: 11,
|
|
||||||
},
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
||||||
async saveConfig (_content: string): Promise<void> { }
|
|
||||||
|
|
||||||
getAppVersion (): string {
|
|
||||||
return this.version.version
|
|
||||||
}
|
|
||||||
|
|
||||||
getDistURL (): string {
|
|
||||||
return this.commonService.backendURL + '/app-dist'
|
|
||||||
}
|
|
||||||
|
|
||||||
getPluginsToLoad (): string[] {
|
|
||||||
return [
|
|
||||||
'tabby-core',
|
|
||||||
'tabby-settings',
|
|
||||||
'tabby-terminal',
|
|
||||||
'tabby-community-color-schemes',
|
|
||||||
'tabby-ssh',
|
|
||||||
'tabby-telnet',
|
|
||||||
'tabby-web',
|
|
||||||
'tabby-web-demo',
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
createSocket () {
|
|
||||||
return new DemoSocketProxy()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
export class DemoSocketProxy {
|
|
||||||
connect$ = new Subject<void>()
|
|
||||||
data$ = new Subject<Buffer>()
|
|
||||||
error$ = new Subject<Error>()
|
|
||||||
close$ = new Subject<Buffer>()
|
|
||||||
|
|
||||||
async connect () {
|
|
||||||
this.error$.next(new Error('This web demo can\'t actually access Internet, but feel free to download the release and try it out!'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'demo-terminal',
|
|
||||||
templateUrl: './demoTerminal.component.pug',
|
|
||||||
styleUrls: ['./demoTerminal.component.scss'],
|
|
||||||
})
|
|
||||||
export class DemoTerminalComponent {
|
|
||||||
@ViewChild('iframe') iframe: ElementRef
|
|
||||||
connector: DemoConnector
|
|
||||||
running = false
|
|
||||||
|
|
||||||
_demoScreenshot = require('../../../assets/demo.jpeg')
|
|
||||||
_playIcon = faPlay
|
|
||||||
|
|
||||||
constructor (
|
|
||||||
private http: HttpClient,
|
|
||||||
private commonService: CommonService,
|
|
||||||
) {
|
|
||||||
window.addEventListener('message', this.connectorRequestHandler)
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
||||||
connectorRequestHandler = event => {
|
|
||||||
if (event.data === 'request-connector') {
|
|
||||||
this.iframe.nativeElement.contentWindow['__connector__'] = this.connector
|
|
||||||
this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async start (): Promise<void> {
|
|
||||||
this.running = true
|
|
||||||
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.iframe.nativeElement.src = '/terminal'
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy (): void {
|
|
||||||
window.removeEventListener('message', this.connectorRequestHandler)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
.top-half
|
|
||||||
.container.overflow-hidden
|
|
||||||
.navbar
|
|
||||||
img.brand(src='{{_logo}}')
|
|
||||||
.me-auto
|
|
||||||
a.btn.btn-primary([href]='releaseURL', target='_blank')
|
|
||||||
fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
|
|
||||||
span Download
|
|
||||||
a.btn.btn-secondary([href]='donationURL', target='_blank')
|
|
||||||
fa-icon([icon]='_donateIcon', [fixedWidth]='true')
|
|
||||||
span Donate
|
|
||||||
a.btn.btn-secondary(routerLink='/app', *ngIf='instanceInfo.login_enabled')
|
|
||||||
fa-icon([icon]='_loginIcon', [fixedWidth]='true')
|
|
||||||
span Web app
|
|
||||||
|
|
||||||
ul.nav-pills.mb-4(ngbNav, [activeId]='router.url')
|
|
||||||
li([ngbNavItem]='link.link', *ngFor='let link of navLinks')
|
|
||||||
a(ngbNavLink, routerLink='.', [routerLink]='link.link') {{ link.title }}
|
|
||||||
li.nav-item
|
|
||||||
a.nav-link(href='https://github.com/eugeny/tabby', target='_blank') GitHub
|
|
||||||
|
|
||||||
.container
|
|
||||||
div(*ngIf='router.url == "/"')
|
|
||||||
.intro
|
|
||||||
h1 A terminal for the modern age
|
|
||||||
.cursor █
|
|
||||||
div Tabby is an infinitely customizable cross-platform terminal app for local shells, serial, SSH and Telnet connections.
|
|
||||||
div Here's a demo 👇
|
|
||||||
|
|
||||||
demo-terminal
|
|
||||||
|
|
||||||
.bottom-half
|
|
||||||
.demo-offset(*ngIf='router.url == "/"')
|
|
||||||
router-outlet
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
@import "~theme/vars";
|
|
||||||
@import "~@fontsource/fira-code/latin.css";
|
|
||||||
|
|
||||||
:host {
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: 'Fira Code', monospace;
|
|
||||||
position: absolute;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-half {
|
|
||||||
background: linear-gradient(#0c141c00, #15202b);
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 70px;
|
|
||||||
margin: 40px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
font-size: 14px;
|
|
||||||
padding: 0 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.intro {
|
|
||||||
font-size: 20px;
|
|
||||||
width: 60vw;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.demo-offset {
|
|
||||||
padding-top: 24vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-half {
|
|
||||||
background: $body-bg;
|
|
||||||
overflow: hidden;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar {
|
|
||||||
display: flex;
|
|
||||||
padding: 15px 30px;
|
|
||||||
|
|
||||||
a, button {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand {
|
|
||||||
width: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
demo-terminal {
|
|
||||||
margin: auto;
|
|
||||||
width: calc(min(max(480px, 60vw), 100vw));
|
|
||||||
height: calc(max(360px, 38vw));
|
|
||||||
position: relative;
|
|
||||||
top: 20vw;
|
|
||||||
margin-top: -16vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes blink {
|
|
||||||
50% {
|
|
||||||
opacity: 0.0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cursor {
|
|
||||||
display: inline;
|
|
||||||
animation: blink 1s step-start 0s infinite;
|
|
||||||
}
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import { Component } from '@angular/core'
|
|
||||||
import { ActivatedRoute, Router } from '@angular/router'
|
|
||||||
import { faCoffee, faDownload, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { Waves } from '../vanta/vanta.waves.js'
|
|
||||||
import { InstanceInfo } from 'src/api'
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'home',
|
|
||||||
templateUrl: './home.component.pug',
|
|
||||||
styleUrls: ['./home.component.scss'],
|
|
||||||
})
|
|
||||||
export class HomeComponent {
|
|
||||||
githubURL = 'https://github.com/Eugeny/tabby'
|
|
||||||
releaseURL = `${this.githubURL}/releases/latest`
|
|
||||||
donationURL = 'https://ko-fi.com/eugeny'
|
|
||||||
|
|
||||||
_logo = require('../../../assets/logo.svg')
|
|
||||||
_downloadIcon = faDownload
|
|
||||||
_loginIcon = faSignInAlt
|
|
||||||
_donateIcon = faCoffee
|
|
||||||
|
|
||||||
navLinks = [
|
|
||||||
{
|
|
||||||
title: 'About Tabby',
|
|
||||||
link: '/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Features',
|
|
||||||
link: '/about/features',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
instanceInfo: InstanceInfo
|
|
||||||
|
|
||||||
background: Waves|undefined
|
|
||||||
|
|
||||||
constructor (
|
|
||||||
public route: ActivatedRoute,
|
|
||||||
public router: Router,
|
|
||||||
) {
|
|
||||||
this.instanceInfo = route.snapshot.data.instanceInfo
|
|
||||||
if (!this.instanceInfo.homepage_enabled) {
|
|
||||||
router.navigate(['/app'])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async ngAfterViewInit (): Promise<void> {
|
|
||||||
this.background = new Waves({
|
|
||||||
el: 'body',
|
|
||||||
mouseControls: true,
|
|
||||||
touchControls: true,
|
|
||||||
gyroControls: false,
|
|
||||||
minHeight: 200.00,
|
|
||||||
minWidth: 200.00,
|
|
||||||
scale: 1.00,
|
|
||||||
scaleMobile: 1.00,
|
|
||||||
color: 0x70f,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnDestroy () {
|
|
||||||
this.background?.destroy()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,90 +0,0 @@
|
|||||||
.container.mt-5.mb-5
|
|
||||||
h1 Features
|
|
||||||
|
|
||||||
.row
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.progress')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Smart tabs
|
|
||||||
.card-text Tabs that detect progress and can notify you when a process is done.
|
|
||||||
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.colors')
|
|
||||||
.card-body
|
|
||||||
h5.card-title 24-bit color
|
|
||||||
.card-text Support for True Color and base16 infrastructure, as well as over 150 community ANSI color schemes.
|
|
||||||
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.hotkeys')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Customizable hotkeys
|
|
||||||
.card-text Freely customizable single and multi-chord shortcuts.
|
|
||||||
|
|
||||||
.row
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.ssh2')
|
|
||||||
.card-body
|
|
||||||
h5.card-title SSH and the kitchen sink
|
|
||||||
.card-text A built-in SSH client with profiles, SFTP, key management, jump hosts, X11 and the rest.
|
|
||||||
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.ports')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Persistent port forwards
|
|
||||||
.card-text Preconfigure often-used port forwarding setups.
|
|
||||||
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.zmodem')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Zmodem transfers
|
|
||||||
.card-text Send and receive files directly from the prompt in SSH, telnet and serial session.
|
|
||||||
|
|
||||||
.row
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.quake')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Quake mode
|
|
||||||
.card-text Dock on the side of the screen? Check. Spawn with a key? Sure. Tabs on bottom? No problem.
|
|
||||||
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.split')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Split tabs
|
|
||||||
.card-text Freely rearrangeable split panes which you can also save as a profile.
|
|
||||||
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.profiles')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Profile manager
|
|
||||||
.card-text Save all your configured options into hotkey-assignable profiles.
|
|
||||||
|
|
||||||
.row
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.fonts')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Delicate fontwork
|
|
||||||
.card-text Ligature support, Powerline and Nerd Fonts, emoji, pixel-perfect boxes.
|
|
||||||
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.history')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Persistent history and tabs
|
|
||||||
.card-text Tabby remembers your open tabs, and when you accidentally close them, restores the complete terminal state.
|
|
||||||
|
|
||||||
.col-12.col-md-4
|
|
||||||
.card.bg-dark
|
|
||||||
img.card-img-top([src]='screenshots.paste')
|
|
||||||
.card-body
|
|
||||||
h5.card-title Careful pasting
|
|
||||||
.card-text Multi-line paste warnings and bracketed paste support prevent accidentaly executing stuff when pasting multiple lines.
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
:host {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-img-top {
|
|
||||||
aspect-ratio: 2;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
margin: 10px 20px 20px;
|
|
||||||
}
|
|
||||||
@ -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'),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,132 +0,0 @@
|
|||||||
.container
|
|
||||||
.d-flex.m-auto.mb-5
|
|
||||||
a.btn.btn-lg.btn-success.ms-auto.me-3([href]='releaseURL', target='_blank')
|
|
||||||
fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
|
|
||||||
.me-2
|
|
||||||
span.d-block Download
|
|
||||||
small Latest app release
|
|
||||||
|
|
||||||
a.btn.btn-lg.btn-rare.me-3(href='/app', target='_blank')
|
|
||||||
fa-icon([icon]='_webIcon', [fixedWidth]='true')
|
|
||||||
div
|
|
||||||
span.d-block Web version
|
|
||||||
small Experimental
|
|
||||||
|
|
||||||
a.btn.btn-lg.btn-secondary.me-auto([href]='githubURL', target='_blank')
|
|
||||||
fa-icon([icon]='_githubIcon', [fixedWidth]='true')
|
|
||||||
.me-2
|
|
||||||
span.d-block Code
|
|
||||||
small Forever FOSS
|
|
||||||
|
|
||||||
.section.section-a
|
|
||||||
.container
|
|
||||||
.row
|
|
||||||
.col-12.col-xl-6
|
|
||||||
lib-ngx-image-zoom(
|
|
||||||
[fullImage]='screenshots.window',
|
|
||||||
[thumbImage]='screenshots.window'
|
|
||||||
)
|
|
||||||
.col-12.col-xl-6
|
|
||||||
h1 The important stuff
|
|
||||||
ul
|
|
||||||
li Runs on #[strong Windows, Mac and Linux]
|
|
||||||
li Integrated #[strong SSH client] with a connection manager
|
|
||||||
li Integrated #[strong serial terminal]
|
|
||||||
li PowerShell, PS Core, WSL, Git-Bash, Cygwin, Cmder and CMD support
|
|
||||||
li Full #[strong Unicode support] including double-width characters
|
|
||||||
li File transfer from/to SSH sessions via #[strong SFTP and Zmodem]
|
|
||||||
li Theming and color schemes
|
|
||||||
li Fully #[strong configurable shortcuts] and multi-chord shortcuts
|
|
||||||
li #[strong Remembers your tabs] and split panes
|
|
||||||
li Proper shell experience on Windows including #[strong tab completion]
|
|
||||||
li Integrated #[strong encrypted container] for SSH secrets and configuration
|
|
||||||
|
|
||||||
.section.section-b
|
|
||||||
.container
|
|
||||||
.row
|
|
||||||
.col-12.col-xl-6
|
|
||||||
h1 Terminal features
|
|
||||||
ul
|
|
||||||
li Multiple #[strong nested panes]
|
|
||||||
li #[strong Progress bars] and activity notifications for tabs
|
|
||||||
li Tabby remembers open tabs and panes where you left off
|
|
||||||
li Tabs on #[strong any side of the window]
|
|
||||||
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-12.col-xl-6
|
|
||||||
lib-ngx-image-zoom(
|
|
||||||
[fullImage]='screenshots.tabs',
|
|
||||||
[thumbImage]='screenshots.tabs'
|
|
||||||
)
|
|
||||||
|
|
||||||
.section.section-a
|
|
||||||
.container
|
|
||||||
.row
|
|
||||||
.col-12.col-xl-6
|
|
||||||
lib-ngx-image-zoom(
|
|
||||||
[fullImage]='screenshots.ssh',
|
|
||||||
[thumbImage]='screenshots.ssh'
|
|
||||||
)
|
|
||||||
.col-12.col-xl-6
|
|
||||||
h1 SSH Client
|
|
||||||
ul
|
|
||||||
li SSH2 client with a connection manager
|
|
||||||
li #[strong SFTP and Zmodem] file transfers
|
|
||||||
li #[strong X11] and #[strong port forwarding]
|
|
||||||
li Jump hosts
|
|
||||||
li #[strong Agent forwarding] - including Pageant and Windows native OpenSSH Agent
|
|
||||||
li Login scripts
|
|
||||||
li Optional built-in #[strong password manager] with a master passphrase
|
|
||||||
li #[strong Proxy command] support
|
|
||||||
|
|
||||||
.section.section-b
|
|
||||||
.container
|
|
||||||
.row
|
|
||||||
.col-12.col-xl-6
|
|
||||||
h1 Windows, but nice
|
|
||||||
ul
|
|
||||||
li Support for #[strong different shells] in the same window
|
|
||||||
li Better tab completion #[strong cmd.exe] thanks to Clink.
|
|
||||||
li Explorer menu integration
|
|
||||||
li Optional #[strong portable mode]
|
|
||||||
li Current directory detection that works
|
|
||||||
.col-12.col-xl-6
|
|
||||||
lib-ngx-image-zoom(
|
|
||||||
[fullImage]='screenshots.win',
|
|
||||||
[thumbImage]='screenshots.win'
|
|
||||||
)
|
|
||||||
|
|
||||||
.section.section-a
|
|
||||||
.container
|
|
||||||
.row
|
|
||||||
.col-12.col-xl-6
|
|
||||||
lib-ngx-image-zoom(
|
|
||||||
[fullImage]='screenshots.serial',
|
|
||||||
[thumbImage]='screenshots.serial'
|
|
||||||
)
|
|
||||||
.col-12.col-xl-6
|
|
||||||
h1 Serial Terminal
|
|
||||||
ul
|
|
||||||
li Multiple #[strong connection profiles]
|
|
||||||
li Newline conversion
|
|
||||||
li Text, #[strong readline] and #[strong byte-by-byte] input modes
|
|
||||||
li Text and #[strong hexdump] output modes
|
|
||||||
li Zmodem
|
|
||||||
li Non-standard baud rates
|
|
||||||
|
|
||||||
.section.section-a
|
|
||||||
.container
|
|
||||||
h1 And just too much stuff to mention here:
|
|
||||||
ul
|
|
||||||
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
|
|
||||||
li Shell #[strong profiles]
|
|
||||||
li Simultaneous #[strong multi-pane input]
|
|
||||||
li Optional PuTTY style #[strong right-click paste] and #[strong copy on select]
|
|
||||||
li macOS vibrancy and Win 10 fluent background support
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
@import "~theme/vars";
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-family: $font-family-monospace;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 32px;
|
|
||||||
color: #9cb8f9;
|
|
||||||
text-shadow: 0 0 1px black;
|
|
||||||
margin: 0 0 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, a, .quote {
|
|
||||||
font-family: $font-family-sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quotes {
|
|
||||||
margin: 50px 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.quote {
|
|
||||||
margin: 0 30px;
|
|
||||||
|
|
||||||
.text {
|
|
||||||
font-size: 40px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
& { display: none;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
background: #849dff;
|
|
||||||
font-weight: normal;
|
|
||||||
padding: 2px 7px;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
padding: 50px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-a {
|
|
||||||
background: rgba(0, 0, 0, .5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-b {
|
|
||||||
}
|
|
||||||
|
|
||||||
::ng-deep lib-ngx-image-zoom {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
img {
|
|
||||||
min-width: 100px;
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-lg {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
text-align: left;
|
|
||||||
line-height: 0.9;
|
|
||||||
padding: 0.7rem 1.2rem;
|
|
||||||
|
|
||||||
fa-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 14px;
|
|
||||||
opacity: .5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,25 +0,0 @@
|
|||||||
import { Component } from '@angular/core'
|
|
||||||
import { faArrowDown, faFlask } from '@fortawesome/free-solid-svg-icons'
|
|
||||||
import { faGithub } from '@fortawesome/free-brands-svg-icons'
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'home-index',
|
|
||||||
templateUrl: './homeIndex.component.pug',
|
|
||||||
styleUrls: ['./homeIndex.component.scss'],
|
|
||||||
})
|
|
||||||
export class HomeIndexComponent {
|
|
||||||
githubURL = 'https://github.com/Eugeny/tabby'
|
|
||||||
releaseURL = `${this.githubURL}/releases/latest`
|
|
||||||
|
|
||||||
_downloadIcon = faArrowDown
|
|
||||||
_githubIcon = faGithub
|
|
||||||
_webIcon = faFlask
|
|
||||||
|
|
||||||
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'),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-extraneous-class */
|
|
||||||
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 { 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 'src/api'
|
|
||||||
import { CommonAppModule } from 'src/common'
|
|
||||||
|
|
||||||
const ROUTES = [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
component: HomeComponent,
|
|
||||||
resolve: {
|
|
||||||
instanceInfo: InstanceInfoResolver,
|
|
||||||
},
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
component: HomeIndexComponent,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: 'about/features',
|
|
||||||
component: HomeFeaturesComponent,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
@NgModule({
|
|
||||||
imports: [
|
|
||||||
CommonAppModule,
|
|
||||||
CommonModule,
|
|
||||||
FormsModule,
|
|
||||||
NgbNavModule,
|
|
||||||
FontAwesomeModule,
|
|
||||||
NgxImageZoomModule,
|
|
||||||
RouterModule.forChild(ROUTES),
|
|
||||||
],
|
|
||||||
declarations: [
|
|
||||||
HomeComponent,
|
|
||||||
HomeIndexComponent,
|
|
||||||
HomeFeaturesComponent,
|
|
||||||
DemoTerminalComponent,
|
|
||||||
],
|
|
||||||
})
|
|
||||||
export class HomepageModule { }
|
|
||||||
@ -1,401 +0,0 @@
|
|||||||
/* eslint-disable */
|
|
||||||
import { extend, mobileCheck, q, color2Hex } from 'vanta/src/helpers.js'
|
|
||||||
// const DEBUGMODE = window.location.toString().indexOf('VANTADEBUG') !== -1
|
|
||||||
|
|
||||||
const win = typeof window == 'object'
|
|
||||||
if (win && !window.VANTA) {window.VANTA = {}}
|
|
||||||
const VANTA = win && window.VANTA || {}
|
|
||||||
VANTA.register = (name, Effect) => {
|
|
||||||
return VANTA[name] = (opts) => new Effect(opts)
|
|
||||||
}
|
|
||||||
VANTA.version = '0.5.21'
|
|
||||||
|
|
||||||
export { VANTA }
|
|
||||||
|
|
||||||
import { Scene, WebGLRenderer } from 'three/src/Three'
|
|
||||||
// const ORBITCONTROLS = {
|
|
||||||
// enableZoom: false,
|
|
||||||
// userPanSpeed: 3,
|
|
||||||
// userRotateSpeed: 2.0,
|
|
||||||
// maxPolarAngle: Math.PI * 0.8, // (pi/2 is pure horizontal)
|
|
||||||
// mouseButtons: {
|
|
||||||
// ORBIT: MOUSE.LEFT,
|
|
||||||
// ZOOM: null,
|
|
||||||
// PAN: null
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// if (DEBUGMODE) {
|
|
||||||
// extend(ORBITCONTROLS, {
|
|
||||||
// enableZoom: true,
|
|
||||||
// zoomSpeed: 4,
|
|
||||||
// minDistance: 100,
|
|
||||||
// maxDistance: 4500
|
|
||||||
// })
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Namespace for errors
|
|
||||||
const error = function () {
|
|
||||||
Array.prototype.unshift.call(arguments, '[VANTA]')
|
|
||||||
return console.error.apply(this, arguments)
|
|
||||||
}
|
|
||||||
|
|
||||||
VANTA.VantaBase = class VantaBase {
|
|
||||||
constructor (userOptions = {}) {
|
|
||||||
if (!win) {return false}
|
|
||||||
VANTA.current = this
|
|
||||||
this.windowMouseMoveWrapper = this.windowMouseMoveWrapper.bind(this)
|
|
||||||
this.windowTouchWrapper = this.windowTouchWrapper.bind(this)
|
|
||||||
this.windowGyroWrapper = this.windowGyroWrapper.bind(this)
|
|
||||||
this.resize = this.resize.bind(this)
|
|
||||||
this.animationLoop = this.animationLoop.bind(this)
|
|
||||||
this.restart = this.restart.bind(this)
|
|
||||||
|
|
||||||
const defaultOptions = typeof this.getDefaultOptions === 'function' ? this.getDefaultOptions() : this.defaultOptions
|
|
||||||
this.options = extend({
|
|
||||||
mouseControls: true,
|
|
||||||
touchControls: true,
|
|
||||||
gyroControls: false,
|
|
||||||
minHeight: 200,
|
|
||||||
minWidth: 200,
|
|
||||||
scale: 1,
|
|
||||||
scaleMobile: 1,
|
|
||||||
}, defaultOptions)
|
|
||||||
|
|
||||||
if (userOptions instanceof HTMLElement || typeof userOptions === 'string') {
|
|
||||||
userOptions = { el: userOptions }
|
|
||||||
}
|
|
||||||
extend(this.options, userOptions)
|
|
||||||
|
|
||||||
// Set element
|
|
||||||
this.el = this.options.el
|
|
||||||
if (this.el == null) {
|
|
||||||
error('Instance needs "el" param!')
|
|
||||||
} else if (!(this.options.el instanceof HTMLElement)) {
|
|
||||||
const selector = this.el
|
|
||||||
this.el = q(selector)
|
|
||||||
if (!this.el) {
|
|
||||||
error('Cannot find element', selector)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.prepareEl()
|
|
||||||
this.initThree()
|
|
||||||
this.setSize() // Init needs size
|
|
||||||
|
|
||||||
try {
|
|
||||||
this.init()
|
|
||||||
} catch (e) {
|
|
||||||
// FALLBACK - just use color
|
|
||||||
error('Init error', e)
|
|
||||||
if (this.renderer && this.renderer.domElement) {
|
|
||||||
this.el.removeChild(this.renderer.domElement)
|
|
||||||
}
|
|
||||||
if (this.options.backgroundColor) {
|
|
||||||
console.log('[VANTA] Falling back to backgroundColor')
|
|
||||||
this.el.style.background = color2Hex(this.options.backgroundColor)
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// After init
|
|
||||||
this.initMouse() // Triggers mouse, which needs to be called after init
|
|
||||||
this.resize()
|
|
||||||
this.animationLoop()
|
|
||||||
|
|
||||||
// Event listeners
|
|
||||||
const ad = window.addEventListener
|
|
||||||
ad('resize', this.resize)
|
|
||||||
window.requestAnimationFrame(this.resize) // Force a resize after the first frame
|
|
||||||
|
|
||||||
// Add event listeners on window, because this element may be below other elements, which would block the element's own mousemove event
|
|
||||||
if (this.options.mouseControls) {
|
|
||||||
ad('scroll', this.windowMouseMoveWrapper)
|
|
||||||
ad('mousemove', this.windowMouseMoveWrapper)
|
|
||||||
}
|
|
||||||
if (this.options.touchControls) {
|
|
||||||
ad('touchstart', this.windowTouchWrapper)
|
|
||||||
ad('touchmove', this.windowTouchWrapper)
|
|
||||||
}
|
|
||||||
if (this.options.gyroControls) {
|
|
||||||
ad('deviceorientation', this.windowGyroWrapper)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setOptions (userOptions={}){
|
|
||||||
extend(this.options, userOptions)
|
|
||||||
this.triggerMouseMove()
|
|
||||||
}
|
|
||||||
|
|
||||||
prepareEl () {
|
|
||||||
let i, child
|
|
||||||
// wrapInner for text nodes, so text nodes can be put into foreground
|
|
||||||
if (typeof Node !== 'undefined' && Node.TEXT_NODE) {
|
|
||||||
for (i = 0; i < this.el.childNodes.length; i++) {
|
|
||||||
const n = this.el.childNodes[i]
|
|
||||||
if (n.nodeType === Node.TEXT_NODE) {
|
|
||||||
const s = document.createElement('span')
|
|
||||||
s.textContent = n.textContent
|
|
||||||
n.parentElement.insertBefore(s, n)
|
|
||||||
n.remove()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Set foreground elements
|
|
||||||
for (i = 0; i < this.el.children.length; i++) {
|
|
||||||
child = this.el.children[i]
|
|
||||||
if (getComputedStyle(child).position === 'static') {
|
|
||||||
child.style.position = 'relative'
|
|
||||||
}
|
|
||||||
if (getComputedStyle(child).zIndex === 'auto') {
|
|
||||||
child.style.zIndex = 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Set canvas and container style
|
|
||||||
if (getComputedStyle(this.el).position === 'static') {
|
|
||||||
this.el.style.position = 'relative'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
applyCanvasStyles (canvasEl, opts={}){
|
|
||||||
extend(canvasEl.style, {
|
|
||||||
position: 'absolute',
|
|
||||||
zIndex: 0,
|
|
||||||
top: 0,
|
|
||||||
left: 0,
|
|
||||||
background: '',
|
|
||||||
})
|
|
||||||
extend(canvasEl.style, opts)
|
|
||||||
canvasEl.classList.add('vanta-canvas')
|
|
||||||
}
|
|
||||||
|
|
||||||
initThree () {
|
|
||||||
if (!WebGLRenderer) {
|
|
||||||
console.warn('[VANTA] No THREE defined on window')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// Set renderer
|
|
||||||
this.renderer = new WebGLRenderer({
|
|
||||||
alpha: true,
|
|
||||||
antialias: true,
|
|
||||||
})
|
|
||||||
this.el.appendChild(this.renderer.domElement)
|
|
||||||
this.applyCanvasStyles(this.renderer.domElement)
|
|
||||||
if (isNaN(this.options.backgroundAlpha)) {
|
|
||||||
this.options.backgroundAlpha = 1
|
|
||||||
}
|
|
||||||
|
|
||||||
this.scene = new Scene()
|
|
||||||
}
|
|
||||||
|
|
||||||
getCanvasElement () {
|
|
||||||
if (this.renderer) {
|
|
||||||
return this.renderer.domElement // js
|
|
||||||
}
|
|
||||||
if (this.p5renderer) {
|
|
||||||
return this.p5renderer.canvas // p5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
getCanvasRect () {
|
|
||||||
const canvas = this.getCanvasElement()
|
|
||||||
if (!canvas) {return false}
|
|
||||||
return canvas.getBoundingClientRect()
|
|
||||||
}
|
|
||||||
|
|
||||||
windowMouseMoveWrapper (e){
|
|
||||||
const rect = this.getCanvasRect()
|
|
||||||
if (!rect) {return false}
|
|
||||||
const x = e.clientX - rect.left
|
|
||||||
const y = e.clientY - rect.top
|
|
||||||
if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
|
|
||||||
this.mouseX = x
|
|
||||||
this.mouseY = y
|
|
||||||
if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
windowTouchWrapper (e){
|
|
||||||
const rect = this.getCanvasRect()
|
|
||||||
if (!rect) {return false}
|
|
||||||
if (e.touches.length === 1) {
|
|
||||||
const x = e.touches[0].clientX - rect.left
|
|
||||||
const y = e.touches[0].clientY - rect.top
|
|
||||||
if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
|
|
||||||
this.mouseX = x
|
|
||||||
this.mouseY = y
|
|
||||||
if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
windowGyroWrapper (e){
|
|
||||||
const rect = this.getCanvasRect()
|
|
||||||
if (!rect) {return false}
|
|
||||||
const x = Math.round(e.alpha * 2) - rect.left
|
|
||||||
const y = Math.round(e.beta * 2) - rect.top
|
|
||||||
if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
|
|
||||||
this.mouseX = x
|
|
||||||
this.mouseY = y
|
|
||||||
if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
triggerMouseMove (x, y) {
|
|
||||||
if (x === undefined && y === undefined) { // trigger at current position
|
|
||||||
if (this.options.mouseEase) {
|
|
||||||
x = this.mouseEaseX
|
|
||||||
y = this.mouseEaseY
|
|
||||||
} else {
|
|
||||||
x = this.mouseX
|
|
||||||
y = this.mouseY
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.uniforms) {
|
|
||||||
this.uniforms.iMouse.value.x = x / this.scale // pixel values
|
|
||||||
this.uniforms.iMouse.value.y = y / this.scale // pixel values
|
|
||||||
}
|
|
||||||
const xNorm = x / this.width // 0 to 1
|
|
||||||
const yNorm = y / this.height // 0 to 1
|
|
||||||
typeof this.onMouseMove === 'function' ? this.onMouseMove(xNorm, yNorm) : void 0
|
|
||||||
}
|
|
||||||
|
|
||||||
setSize () {
|
|
||||||
this.scale || (this.scale = 1)
|
|
||||||
if (mobileCheck() && this.options.scaleMobile) {
|
|
||||||
this.scale = this.options.scaleMobile
|
|
||||||
} else if (this.options.scale) {
|
|
||||||
this.scale = this.options.scale
|
|
||||||
}
|
|
||||||
this.width = Math.max(this.el.offsetWidth, this.options.minWidth)
|
|
||||||
this.height = Math.max(this.el.offsetHeight, this.options.minHeight)
|
|
||||||
}
|
|
||||||
initMouse () {
|
|
||||||
// Init mouseX and mouseY
|
|
||||||
if (!this.mouseX && !this.mouseY ||
|
|
||||||
this.mouseX === this.options.minWidth/2 && this.mouseY === this.options.minHeight/2) {
|
|
||||||
this.mouseX = this.width/2
|
|
||||||
this.mouseY = this.height/2
|
|
||||||
this.triggerMouseMove(this.mouseX, this.mouseY)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
resize () {
|
|
||||||
this.setSize()
|
|
||||||
if (this.camera) {
|
|
||||||
this.camera.aspect = this.width / this.height
|
|
||||||
if (typeof this.camera.updateProjectionMatrix === 'function') {
|
|
||||||
this.camera.updateProjectionMatrix()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (this.renderer) {
|
|
||||||
this.renderer.setSize(this.width, this.height)
|
|
||||||
this.renderer.setPixelRatio(window.devicePixelRatio / this.scale)
|
|
||||||
}
|
|
||||||
typeof this.onResize === 'function' ? this.onResize() : void 0
|
|
||||||
}
|
|
||||||
|
|
||||||
isOnScreen () {
|
|
||||||
const elHeight = this.el.offsetHeight
|
|
||||||
const elRect = this.el.getBoundingClientRect()
|
|
||||||
const scrollTop = window.pageYOffset ||
|
|
||||||
(document.documentElement || document.body.parentNode || document.body).scrollTop
|
|
||||||
|
|
||||||
const offsetTop = elRect.top + scrollTop
|
|
||||||
const minScrollTop = offsetTop - window.innerHeight
|
|
||||||
const maxScrollTop = offsetTop + elHeight
|
|
||||||
return minScrollTop <= scrollTop && scrollTop <= maxScrollTop
|
|
||||||
}
|
|
||||||
|
|
||||||
animationLoop () {
|
|
||||||
// Step time
|
|
||||||
this.t || (this.t = 0)
|
|
||||||
this.t += 1
|
|
||||||
// Uniform time
|
|
||||||
this.t2 || (this.t2 = 0)
|
|
||||||
this.t2 += this.options.speed || 1
|
|
||||||
if (this.uniforms) {
|
|
||||||
this.uniforms.iTime.value = this.t2 * 0.016667 // iTime is in seconds
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.options.mouseEase) {
|
|
||||||
this.mouseEaseX = this.mouseEaseX || this.mouseX || 0
|
|
||||||
this.mouseEaseY = this.mouseEaseY || this.mouseY || 0
|
|
||||||
if (Math.abs(this.mouseEaseX-this.mouseX) + Math.abs(this.mouseEaseY-this.mouseY) > 0.1) {
|
|
||||||
this.mouseEaseX += (this.mouseX - this.mouseEaseX) * 0.05
|
|
||||||
this.mouseEaseY += (this.mouseY - this.mouseEaseY) * 0.05
|
|
||||||
this.triggerMouseMove(this.mouseEaseX, this.mouseEaseY)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Only animate if element is within view
|
|
||||||
if (this.isOnScreen() || this.options.forceAnimate) {
|
|
||||||
if (typeof this.onUpdate === 'function') {
|
|
||||||
this.onUpdate()
|
|
||||||
}
|
|
||||||
if (this.scene && this.camera) {
|
|
||||||
this.renderer.render(this.scene, this.camera)
|
|
||||||
this.renderer.setClearColor(this.options.backgroundColor, this.options.backgroundAlpha)
|
|
||||||
}
|
|
||||||
// if (this.stats) this.stats.update()
|
|
||||||
// if (this.renderStats) this.renderStats.update(this.renderer)
|
|
||||||
if (this.fps && this.fps.update) {this.fps.update()}
|
|
||||||
if (typeof this.afterRender === 'function') {this.afterRender()}
|
|
||||||
}
|
|
||||||
return this.req = window.requestAnimationFrame(this.animationLoop)
|
|
||||||
}
|
|
||||||
|
|
||||||
// setupControls() {
|
|
||||||
// if (DEBUGMODE && OrbitControls) {
|
|
||||||
// this.controls = new OrbitControls(this.camera, this.renderer.domElement)
|
|
||||||
// extend(this.controls, ORBITCONTROLS)
|
|
||||||
// return this.scene.add(new AxisHelper(100))
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
restart () {
|
|
||||||
// Restart the effect without destroying the renderer
|
|
||||||
if (this.scene) {
|
|
||||||
while (this.scene.children.length) {
|
|
||||||
this.scene.remove(this.scene.children[0])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (typeof this.onRestart === 'function') {
|
|
||||||
this.onRestart()
|
|
||||||
}
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
|
|
||||||
init () {
|
|
||||||
if (typeof this.onInit === 'function') {
|
|
||||||
this.onInit()
|
|
||||||
}
|
|
||||||
// this.setupControls()
|
|
||||||
}
|
|
||||||
|
|
||||||
destroy () {
|
|
||||||
if (typeof this.onDestroy === 'function') {
|
|
||||||
this.onDestroy()
|
|
||||||
}
|
|
||||||
const rm = window.removeEventListener
|
|
||||||
rm('touchstart', this.windowTouchWrapper)
|
|
||||||
rm('touchmove', this.windowTouchWrapper)
|
|
||||||
rm('scroll', this.windowMouseMoveWrapper)
|
|
||||||
rm('mousemove', this.windowMouseMoveWrapper)
|
|
||||||
rm('deviceorientation', this.windowGyroWrapper)
|
|
||||||
rm('resize', this.resize)
|
|
||||||
|
|
||||||
window.cancelAnimationFrame(this.req)
|
|
||||||
if (this.renderer) {
|
|
||||||
if (this.renderer.domElement) {
|
|
||||||
this.el.removeChild(this.renderer.domElement)
|
|
||||||
}
|
|
||||||
this.renderer = null
|
|
||||||
this.scene = null
|
|
||||||
}
|
|
||||||
|
|
||||||
if (VANTA.current === this) {
|
|
||||||
VANTA.current = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default VANTA.VantaBase
|
|
||||||
@ -1,193 +0,0 @@
|
|||||||
/* eslint-disable @typescript-eslint/init-declarations */
|
|
||||||
/* eslint-disable @typescript-eslint/prefer-for-of */
|
|
||||||
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
|
|
||||||
import VantaBase, { VANTA } from './_base'
|
|
||||||
import { rn, ri } from 'vanta/src/helpers.js'
|
|
||||||
import { Geometry, MeshPhongMaterial, Vector3, Face3, Mesh, AmbientLight, PerspectiveCamera, PointLight, DoubleSide } from 'three/src/Three'
|
|
||||||
import { FaceColors } from 'three/src/Three.Legacy'
|
|
||||||
|
|
||||||
const defaultOptions = {
|
|
||||||
color: 0x005588,
|
|
||||||
shininess: 30,
|
|
||||||
waveHeight: 15,
|
|
||||||
waveSpeed: 1,
|
|
||||||
zoom: 1,
|
|
||||||
}
|
|
||||||
|
|
||||||
export class Waves extends VantaBase {
|
|
||||||
static initClass () {
|
|
||||||
this.prototype.ww = 100
|
|
||||||
this.prototype.hh = 80
|
|
||||||
this.prototype.waveNoise = 4 // Choppiness of water
|
|
||||||
}
|
|
||||||
|
|
||||||
getMaterial () {
|
|
||||||
const options = {
|
|
||||||
color: this.options.color,
|
|
||||||
shininess: this.options.shininess,
|
|
||||||
flatShading: true,
|
|
||||||
vertexColors: FaceColors, // Allow coloring individual faces
|
|
||||||
side: DoubleSide,
|
|
||||||
}
|
|
||||||
return new MeshPhongMaterial(options)
|
|
||||||
}
|
|
||||||
|
|
||||||
onInit () {
|
|
||||||
let i, j
|
|
||||||
const CELLSIZE = 18
|
|
||||||
const material = this.getMaterial()
|
|
||||||
const geometry = new Geometry()
|
|
||||||
|
|
||||||
// Add vertices
|
|
||||||
this.gg = []
|
|
||||||
for (i=0; i<=this.ww; i++){
|
|
||||||
this.gg[i] = []
|
|
||||||
for (j=0; j<=this.hh; j++){
|
|
||||||
const id = geometry.vertices.length
|
|
||||||
const newVertex = new Vector3(
|
|
||||||
(i - this.ww * 0.5) * CELLSIZE,
|
|
||||||
rn(0, this.waveNoise) - 10,
|
|
||||||
(this.hh * 0.5 - j) * CELLSIZE
|
|
||||||
)
|
|
||||||
geometry.vertices.push(newVertex)
|
|
||||||
this.gg[i][j] = id
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add faces
|
|
||||||
// a b
|
|
||||||
// c d <-- Looking from the bottom right point
|
|
||||||
for (i=1; i<=this.ww; i++){
|
|
||||||
for (j=1; j<=this.hh; j++){
|
|
||||||
let face1, face2
|
|
||||||
const d = this.gg[i][j]
|
|
||||||
const b = this.gg[i][j-1]
|
|
||||||
const c = this.gg[i-1][j]
|
|
||||||
const a = this.gg[i-1][j-1]
|
|
||||||
if (ri(0, 1)) {
|
|
||||||
face1 = new Face3( a, b, c )
|
|
||||||
face2 = new Face3( b, c, d )
|
|
||||||
} else {
|
|
||||||
face1 = new Face3( a, b, d )
|
|
||||||
face2 = new Face3( a, c, d )
|
|
||||||
}
|
|
||||||
geometry.faces.push( face1, face2 )
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.plane = new Mesh(geometry, material)
|
|
||||||
this.scene.add(this.plane)
|
|
||||||
|
|
||||||
// WIREFRAME
|
|
||||||
// lightColor = 0x55aaee
|
|
||||||
// darkColor = 0x225577
|
|
||||||
// thresholdAngle = 2
|
|
||||||
// geo = new EdgesGeometry(geometry, thresholdAngle)
|
|
||||||
// mat = new LineBasicMaterial( { color: lightColor, linewidth: 2 } )
|
|
||||||
// @wireframe = new LineSegments( geo, mat )
|
|
||||||
// @scene.add( @wireframe )
|
|
||||||
|
|
||||||
// LIGHTS
|
|
||||||
const ambience = new AmbientLight( 0xffffff, 0.9 )
|
|
||||||
this.scene.add(ambience)
|
|
||||||
|
|
||||||
const pointLight = new PointLight( 0xffffff, 0.9 )
|
|
||||||
pointLight.position.set(-100, 250, -100)
|
|
||||||
this.scene.add(pointLight)
|
|
||||||
|
|
||||||
// CAMERA
|
|
||||||
this.camera = new PerspectiveCamera(
|
|
||||||
35,
|
|
||||||
this.width / this.height,
|
|
||||||
50, 10000)
|
|
||||||
|
|
||||||
const xOffset = -10
|
|
||||||
const zOffset = -10
|
|
||||||
this.cameraPosition = new Vector3( 250+xOffset, 200, 400+zOffset )
|
|
||||||
this.cameraTarget = new Vector3( 150+xOffset, -30, 200+zOffset )
|
|
||||||
this.camera.position.copy(this.cameraPosition)
|
|
||||||
this.scene.add(this.camera)
|
|
||||||
}
|
|
||||||
|
|
||||||
onUpdate () {
|
|
||||||
// Update options
|
|
||||||
let diff
|
|
||||||
this.plane.material.color.set(this.options.color)
|
|
||||||
this.plane.material.shininess = this.options.shininess
|
|
||||||
this.camera.ox = this.cameraPosition.x / this.options.zoom
|
|
||||||
this.camera.oy = this.cameraPosition.y / this.options.zoom
|
|
||||||
this.camera.oz = this.cameraPosition.z / this.options.zoom
|
|
||||||
|
|
||||||
if (this.controls != null) {
|
|
||||||
this.controls.update()
|
|
||||||
}
|
|
||||||
|
|
||||||
const c = this.camera
|
|
||||||
if (Math.abs(c.tx - c.position.x) > 0.01) {
|
|
||||||
diff = c.tx - c.position.x
|
|
||||||
c.position.x += diff * 0.02
|
|
||||||
}
|
|
||||||
if (Math.abs(c.ty - c.position.y) > 0.01) {
|
|
||||||
diff = c.ty - c.position.y
|
|
||||||
c.position.y += diff * 0.02
|
|
||||||
}
|
|
||||||
if (Math.abs(c.tz - c.position.z) > 0.01) {
|
|
||||||
diff = c.tz - c.position.z
|
|
||||||
c.position.z += diff * 0.02
|
|
||||||
}
|
|
||||||
|
|
||||||
c.lookAt( this.cameraTarget )
|
|
||||||
|
|
||||||
// Fix flickering problems
|
|
||||||
// c.near = Math.max((c.position.y * 0.5) - 20, 1);
|
|
||||||
// c.updateMatrix();
|
|
||||||
|
|
||||||
// WAVES
|
|
||||||
for (let i = 0; i < this.plane.geometry.vertices.length; i++) {
|
|
||||||
const v = this.plane.geometry.vertices[i]
|
|
||||||
if (!v.oy) { // INIT
|
|
||||||
v.oy = v.y
|
|
||||||
} else {
|
|
||||||
const s = this.options.waveSpeed
|
|
||||||
const crossChop = Math.sqrt(s) * Math.cos(-v.x - v.z*0.7) // + s * (i % 229) / 229 * 5
|
|
||||||
const delta = Math.sin(s*this.t*0.02 - s*v.x*0.025 + s*v.z*0.015 + crossChop)
|
|
||||||
const trochoidDelta = Math.pow(delta + 1, 2) / 4
|
|
||||||
v.y = v.oy + trochoidDelta * this.options.waveHeight
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// @wireframe.geometry.vertices[i].y = v.y
|
|
||||||
|
|
||||||
this.plane.geometry.dynamic = true
|
|
||||||
this.plane.geometry.computeFaceNormals()
|
|
||||||
this.plane.geometry.verticesNeedUpdate = true
|
|
||||||
this.plane.geometry.normalsNeedUpdate = true
|
|
||||||
|
|
||||||
// @scene.remove( @wireframe )
|
|
||||||
// geo = new EdgesGeometry(@plane.geometry)
|
|
||||||
// mat = new LineBasicMaterial( { color: 0x55aaee, linewidth: 2} )
|
|
||||||
// @wireframe = new LineSegments( geo, mat )
|
|
||||||
// @scene.add( @wireframe )
|
|
||||||
|
|
||||||
if (this.wireframe) {
|
|
||||||
this.wireframe.geometry.fromGeometry(this.plane.geometry)
|
|
||||||
this.wireframe.geometry.computeFaceNormals()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMouseMove (x, y) {
|
|
||||||
const c = this.camera
|
|
||||||
if (!c.oy) {
|
|
||||||
c.oy = c.position.y
|
|
||||||
c.ox = c.position.x
|
|
||||||
c.oz = c.position.z
|
|
||||||
}
|
|
||||||
c.tx = c.ox + (x-0.5) * 100 / this.options.zoom
|
|
||||||
c.ty = c.oy + (y-0.5) * -100 / this.options.zoom
|
|
||||||
return c.tz = c.oz + (x-0.5) * -50 / this.options.zoom
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Waves.prototype.defaultOptions = defaultOptions
|
|
||||||
Waves.initClass()
|
|
||||||
export const WavesEffect = VANTA.register('WAVES', Waves)
|
|
||||||
@ -8,16 +8,12 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
|
|||||||
import { NgxImageZoomModule } from 'ngx-image-zoom'
|
import { NgxImageZoomModule } from 'ngx-image-zoom'
|
||||||
|
|
||||||
import { LoginComponent } from './components/login.component'
|
import { LoginComponent } from './components/login.component'
|
||||||
import { InstanceInfoResolver } from 'src/api'
|
|
||||||
import { CommonAppModule } from 'src/common'
|
import { CommonAppModule } from 'src/common'
|
||||||
|
|
||||||
const ROUTES = [
|
const ROUTES = [
|
||||||
{
|
{
|
||||||
path: '',
|
path: '',
|
||||||
component: LoginComponent,
|
component: LoginComponent,
|
||||||
resolve: {
|
|
||||||
instanceInfo: InstanceInfoResolver,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user