updated site Angular version to 11 and redid the routing

native/app/eqMac.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -2,6 +2,6 @@
 <Workspace
    version = "1.0">
    <FileRef
-      location = "self:eqMacAudio.xcodeproj">
+      location = "self:">
    </FileRef>
 </Workspace>

native/app/eqMac.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -0,0 +1,16 @@
+{
+  "object": {
+    "pins": [
+      {
+        "package": "LaunchAtLogin",
+        "repositoryURL": "https://github.com/bitgapp/LaunchAtLogin",
+        "state": {
+          "branch": null,
+          "revision": "3f18355f492993c2fd5c571d97e524697d16d572",
+          "version": "4.0.1"
+        }
+      }
+    ]
+  },
+  "version": 1
+}

site/.browserslistrc

@@ -0,0 +1,10 @@
+# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
+> 0.5%
+last 2 versions
+Firefox ESR
+safari 12.1
+safari 12
+safari 10.1
+safari 10
+not dead
+# IE 9-11

site/angular.json

@@ -49,8 +49,7 @@
               "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
-            "scripts": [],
-            "es5BrowserSupport": true
+            "scripts": []
           },
           "configurations": {
             "production": {

site/package.json

@@ -12,41 +12,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular-devkit/core": "^8.3.8",
-    "@angular/animations": "^8.2.9",
-    "@angular/cdk": "^8.2.2",
-    "@angular/common": "~8.2.9",
-    "@angular/compiler": "~8.2.9",
-    "@angular/core": "~8.2.9",
-    "@angular/flex-layout": "^8.0.0-beta.27",
-    "@angular/forms": "~8.2.9",
-    "@angular/material": "^8.2.2",
-    "@angular/platform-browser": "~8.2.9",
-    "@angular/platform-browser-dynamic": "~8.2.9",
-    "@angular/platform-server": "~8.2.9",
-    "@angular/router": "~8.2.9",
-    "@nguniversal/express-engine": "^8.1.1",
+    "@angular-devkit/core": "^11.2.5",
+    "@angular/animations": "^11.2.6",
+    "@angular/cdk": "^11.2.5",
+    "@angular/common": "~11.2.6",
+    "@angular/compiler": "~11.2.6",
+    "@angular/core": "~11.2.6",
+    "@angular/flex-layout": "^11.0.0-beta.33",
+    "@angular/forms": "~11.2.6",
+    "@angular/material": "^11.2.5",
+    "@angular/platform-browser": "~11.2.6",
+    "@angular/platform-browser-dynamic": "~11.2.6",
+    "@angular/platform-server": "~11.2.6",
+    "@angular/router": "~11.2.6",
+    "@nguniversal/express-engine": "^11.2.1",
     "@nguniversal/module-map-ngfactory-loader": "8.1.1",
-    "core-js": "^2.5.4",
-    "express": "^4.15.2",
+    "core-js": "^3.9.1",
+    "express": "^4.17.1",
     "normalize.css": "^8.0.1",
-    "rxjs": "~6.5.3",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.9.1"
+    "rxjs": "~6.6.6",
+    "tslib": "^2.1.0",
+    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.8",
-    "@angular/cli": "~8.3.8",
-    "@angular/compiler-cli": "~8.2.9",
-    "@angular/language-service": "~8.2.9",
-    "@types/jasmine": "~2.8.8",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "^5.0.1",
-    "ts-loader": "^5.2.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.11.0",
-    "typescript": "3.5.3",
-    "webpack-cli": "^3.1.0"
+    "@angular-devkit/build-angular": "~0.1102.5",
+    "@angular/cli": "~11.2.5",
+    "@angular/compiler-cli": "~11.2.6",
+    "@angular/language-service": "~11.2.6",
+    "@types/jasmine": "~3.6.7",
+    "@types/jasminewd2": "~2.0.8",
+    "@types/node": "~14.14.35",
+    "codelyzer": "^6.0.1",
+    "ts-loader": "^8.0.18",
+    "ts-node": "~9.1.1",
+    "tslint": "~5.20.1",
+    "typescript": "^4.1.5",
+    "webpack-cli": "^4.5.0"
   }
 }

site/src/app/routes/root/faq/faq.component.scss

@@ -1,4 +1,4 @@
-@import "../../styles/colors.scss";
+@import "../../../styles/colors.scss";
 
 :host {
   margin-top: 50px;

site/src/app/routes/root/home/home.component.html

@@ -0,0 +1,3 @@
+<eqm-overview class="overview" (downloadPressed)="download($event)" (takeATourPressed)="scrollTo(features)"></eqm-overview>
+<div #features id="features"><eqm-features></eqm-features></div>
+<eqm-faq></eqm-faq>

site/src/app/routes/root/home/home.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core'
+import { GithubService } from '../../../services/github.service'
+
+@Component({
+  selector: 'eqm-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {
+  constructor (private github: GithubService) { }
+
+  scrollTo (elem: HTMLElement) {
+    return elem.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  async download (urlPresent) {
+    if (urlPresent) return
+    const url = await this.github.getLatestDownloadUrl()
+    const link = document.createElement('a')
+    link.download = 'eqmac.dmg'
+    link.href = url
+    link.click()
+  }
+
+  takeATour () {
+    // TODO: Implement
+  }
+  
+}

site/src/app/routes/root/home/sections/features/features.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/colors.scss";
+@import "../../../../../styles/colors.scss";
 
 :host {
   background-color: $dark;

site/src/app/routes/root/home/sections/help/help.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/colors.scss";
+@import "../../../../../styles/colors.scss";
 
 :host {
   background-color: $gradient-end;

site/src/app/routes/root/home/sections/overview/overview.component.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/colors.scss";
+@import "../../../../../styles/colors.scss";
 
 :host {
   background-color: $gradient-end;

site/src/app/routes/root/root.component.html

@@ -1,4 +1,4 @@
-<eqm-overview class="overview" (downloadPressed)="download($event)" (takeATourPressed)="scrollTo(features)"></eqm-overview>
-<div #features id="features"><eqm-features></eqm-features></div>
-<eqm-faq></eqm-faq>
-<!-- <eqm-help></eqm-help> -->
+<eqm-header (sectionClicked)="scrollTo($event)"></eqm-header>
+<router-outlet></router-outlet>
+<eqm-footer></eqm-footer>
+

site/src/app/routes/root/root.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit, ElementRef } from '@angular/core'
-import { GithubService } from 'src/app/services/github.service'
 
 @Component({
   selector: 'eqm-root',
@@ -8,25 +7,14 @@ import { GithubService } from 'src/app/services/github.service'
 })
 export class RootComponent implements OnInit {
 
-  constructor (private github: GithubService) { }
-
   ngOnInit () {
   }
 
-  async download (urlPresent) {
-    if (urlPresent) return
-    const url = await this.github.getLatestDownloadUrl()
-    const link = document.createElement('a')
-    link.download = 'eqmac.dmg'
-    link.href = url
-    link.click()
-  }
-
-  takeATour () {
-    // TODO: Implement
-  }
-  scrollTo (elem: HTMLElement) {
+  scrollTo (id: string) {
+    const elem = document.getElementById(id)
     elem.scrollIntoView({ behavior: 'smooth' })
   }
 
+
+
 }

site/src/app/site.component.html

@@ -1,3 +0,0 @@
-<eqm-header (sectionClicked)="scrollTo($event)"></eqm-header>
-<router-outlet></router-outlet>
-<eqm-footer></eqm-footer>

site/src/app/site.component.ts

@@ -2,13 +2,6 @@ import { Component } from '@angular/core'
 
 @Component({
   selector: 'eqm-site',
-  templateUrl: './site.component.html',
-  styleUrls: ['./site.component.scss']
+  template: `<router-outlet></router-outlet>`
 })
-export class SiteComponent {
-
-  scrollTo (sectionId: string) {
-    const elem = document.getElementById(sectionId)
-    elem.scrollIntoView({ behavior: 'smooth' })
-  }
-}
+export class SiteComponent {}

site/src/app/site.module.ts

@@ -2,36 +2,42 @@ import { BrowserModule } from '@angular/platform-browser'
 import { NgModule } from '@angular/core'
 
 import { HttpClientModule } from '@angular/common/http'
-import { SiteComponent } from './site.component'
+import { HomeComponent } from './routes/root/home/home.component'
 import { ButtonComponent } from './components/button/button.component'
 import { RootComponent } from './routes/root/root.component'
 import { FlexLayoutModule } from '@angular/flex-layout'
-import { OverviewComponent } from './routes/root/sections/overview/overview.component'
-import { FeaturesComponent } from './routes/root/sections/features/features.component'
+import { OverviewComponent } from './routes/root/home/sections/overview/overview.component'
+import { FeaturesComponent } from './routes/root/home/sections/features/features.component'
 import { HeaderComponent } from './components/header/header.component'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
-import { HelpComponent } from './routes/root/sections/help/help.component'
+import { HelpComponent } from './routes/root/home/sections/help/help.component'
 import { FooterComponent } from './components/footer/footer.component'
 import { Routes, RouterModule } from '@angular/router'
-import { TermsAndConditionsComponent } from './routes/terms/terms.component'
-import { FAQComponent } from './routes/faq/faq.component'
+import { TermsAndConditionsComponent } from './routes/root/terms/terms.component'
+import { FAQComponent } from './routes/root/faq/faq.component'
 import { MatExpansionModule } from '@angular/material/expansion'
 import { GithubStatsComponent } from './components/github-stats/github-stats.component'
+import { SiteComponent } from './site.component'
 
 const routes: Routes = [{
   path: '',
-  component: RootComponent
-}, {
-  path: 'terms',
-  component: TermsAndConditionsComponent
-}, {
-  path: 'faq',
-  component: FAQComponent
+  component: RootComponent,
+  children: [{
+    path: '',
+    component: HomeComponent
+  }, {
+    path: 'terms',
+    component: TermsAndConditionsComponent
+  }, {
+    path: 'faq',
+    component: FAQComponent
+  }]
 }]
 
 @NgModule({
   declarations: [
     SiteComponent,
+    HomeComponent,
     ButtonComponent,
     RootComponent,
     OverviewComponent,

site/src/app/site.server.module.ts

@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core'
 import { ServerModule } from '@angular/platform-server'
 
 import { SiteModule } from './site.module'
-import { SiteComponent } from './site.component'
 import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader'
+import { SiteComponent } from './site.component'
 
 @NgModule({
   imports: [
@@ -13,4 +13,4 @@ import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader'
   ],
   bootstrap: [SiteComponent],
 })
-export class AppServerModule {}
+export class SiteServerModule {}

site/src/index.html

@@ -7,6 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
+
   <!-- SEO Stuff -->
   <!-- Google Tag Manager -->
   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
@@ -25,6 +26,7 @@
   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NWJZ8G2"
   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   <!-- End Google Tag Manager (noscript) -->
+  
   <eqm-site></eqm-site>
 </body>
 </html>

site/src/main.server.ts

@@ -6,7 +6,7 @@ if (environment.production) {
   enableProdMode()
 }
 
-export { AppServerModule } from './app/app.server.module'
+export { SiteServerModule as AppServerModule } from './app/site.server.module'
 export { ngExpressEngine } from '@nguniversal/express-engine'
 export { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader'