chore: install material, fix serving of static files

Author: ngfelixl

angular.json

@@ -50,7 +50,10 @@
             "polyfills": "apps/web/src/polyfills.ts",
             "tsConfig": "apps/web/tsconfig.app.json",
             "assets": ["apps/web/src/favicon.ico", "apps/web/src/assets"],
-            "styles": ["apps/web/src/styles.css"],
+            "styles": [
+              "apps/web/src/custom-theme.scss",
+              "apps/web/src/styles.css"
+            ],
             "scripts": []
           },
           "configurations": {

apps/web/src/app/app-routing.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { OverviewComponent } from './components/overview/overview.component';
+import { StackComponent } from './components/stack/stack.component';
+import { StacksComponent } from './components/stacks/stacks.component';
+import { TutorialComponent } from './components/tutorial/tutorial.component';
+
+const routes: Route[] = [
+  {
+    path: 'plots',
+    component: StacksComponent,
+    children: [
+      { path: '', component: OverviewComponent },
+      { path: ':id', component: StackComponent },
+    ],
+  },
+  { path: 'tutorial', component: TutorialComponent },
+  { path: '**', redirectTo: 'plots' },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

apps/web/src/app/app.module.ts

@@ -1,19 +1,29 @@
-import { Route, RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './components/app/app.component';
-import { PlotComponent } from './components/plot/plot.component';
-
-const routes: Route[] = [
-  { path: 'plots/:id', component: PlotComponent }
-];
+import { StackComponent } from './components/stack/stack.component';
+import { StacksComponent } from './components/stacks/stacks.component';
+import { TutorialComponent } from './components/tutorial/tutorial.component';
+import { MatButtonModule } from '@angular/material/button';
+import { OverviewComponent } from './components/overview/overview.component';
 
 @NgModule({
-  declarations: [AppComponent, PlotComponent],
+  declarations: [
+    AppComponent,
+    TutorialComponent,
+    StacksComponent,
+    StackComponent,
+    OverviewComponent,
+  ],
   imports: [
+    AppRoutingModule,
+    BrowserAnimationsModule,
     BrowserModule,
-    RouterModule.forRoot(routes)
+    MatButtonModule,
+    MatToolbarModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

apps/web/src/app/components/app/app.component.css

@@ -1,133 +1,4 @@
-/*
-   * Remove template code below
-   */
-:host {
-  display: block;
-  font-family: sans-serif;
-  min-width: 300px;
-  max-width: 600px;
-  margin: 50px auto;
-}
-
-.gutter-left {
-  margin-left: 9px;
-}
-
-.col-span-2 {
-  grid-column: span 2;
-}
-
-.flex {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-header {
-  background-color: #143055;
-  color: white;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-main {
-  padding: 0 36px;
-}
-
-p {
-  text-align: center;
-}
-
-h1 {
-  text-align: center;
-  margin-left: 18px;
-  font-size: 24px;
-}
-
-h2 {
-  text-align: center;
-  font-size: 20px;
-  margin: 40px 0 10px 0;
-}
-
-.resources {
-  text-align: center;
-  list-style: none;
-  padding: 0;
-  display: grid;
-  grid-gap: 9px;
-  grid-template-columns: 1fr 1fr;
-}
-
-.resource {
-  color: #0094ba;
-  height: 36px;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  padding: 3px 9px;
-  text-decoration: none;
-}
-
-.resource:hover {
-  background-color: rgba(68, 138, 255, 0.04);
-}
-
-pre {
-  padding: 9px;
-  border-radius: 4px;
-  background-color: black;
-  color: #eee;
-}
-
-details {
-  border-radius: 4px;
-  color: #333;
-  background-color: rgba(0, 0, 0, 0);
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  padding: 3px 9px;
-  margin-bottom: 9px;
-}
-
-summary {
-  cursor: pointer;
-  outline: none;
-  height: 36px;
-  line-height: 36px;
-}
-
-.github-star-container {
-  margin-top: 12px;
-  line-height: 20px;
-}
-
-.github-star-container a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  color: #333;
-}
-
-.github-star-badge {
-  color: #24292e;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  padding: 3px 10px;
-  border: 1px solid rgba(27, 31, 35, 0.2);
-  border-radius: 3px;
-  background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
-  margin-left: 4px;
-  font-weight: 600;
-}
-
-.github-star-badge:hover {
-  background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-  border-color: rgba(27, 31, 35, 0.35);
-  background-position: -0.5em;
-}
-.github-star-badge .material-icons {
-  height: 16px;
-  width: 16px;
-  margin-right: 4px;
+.toolbar {
+  width: 100%;
+  height: 60px;
 }

apps/web/src/app/components/app/app.component.html

@@ -0,0 +1,4 @@
+<mat-toolbar color="primary">
+  <button mat-flat-button>NodePlotLib</button>
+</mat-toolbar>
+<router-outlet></router-outlet>

apps/web/src/app/components/app/app.component.ts

@@ -4,6 +4,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   selector: 'npl-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {}

apps/web/src/app/components/plot/plot.component.css renamed to apps/web/src/app/components/overview/overview.component.css

@@ -0,0 +1 @@
+<p>overview works!</p>

apps/web/src/app/components/overview/overview.component.html

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'npl-overview',
+  templateUrl: './overview.component.html',
+  styleUrls: ['./overview.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OverviewComponent {}