feat: add about page and update footer

src/app/app.module.ts

@@ -7,7 +7,7 @@ import { MarkdownModule } from 'ngx-markdown';
 
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
-import { PageNotFoundComponent } from './core/components';
+import { PageNotFoundComponent, AboutComponent } from './core/components';
 
 @NgModule({
   declarations: [
@@ -20,6 +20,7 @@ import { PageNotFoundComponent } from './core/components';
     RouterModule.forRoot([
       { path: '', redirectTo: '/blog', pathMatch: 'full' },
       { path: 'blog', loadChildren: './blog/blog.module#BlogModule' },
+      { path: 'about', component: AboutComponent },
       { path: '**', component: PageNotFoundComponent }
     ]),
     MarkdownModule.forRoot({

src/app/blog/blog/blog.component.ts

@@ -20,6 +20,10 @@ import { Post } from 'src/app/core/models';
   `,
   styles: [
     `
+    :host {
+      height: 100%;
+    }
+    
     a {
       font-size: 36px;
       color: black;

src/app/blog/post/post.component.ts

@@ -9,8 +9,7 @@ import { PostService } from 'src/app/core/services';
   selector: 'app-post',
   template: `
     <markdown [data]="post$ | async"></markdown>
-  `,
-  styles: []
+  `
 })
 export class PostComponent implements OnInit {
   post$ = this.route.paramMap.pipe(

src/app/core/components/about/about.component.ts

@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  template: `
+    <h2>About Me</h2>
+
+    <div class="pic">
+      <img src="/assets/images/brandonroberts.jpg" width="300" height="300"/>
+    </div>
+
+    <p class="bio">
+      I am an Angular Team member working on guides, tutorials, application development, 
+      and infrastructure for the Angular docs. I enjoys learning new things, helping other 
+      developers solve problems, and contributing to open source. I am also a maintainer of the 
+      NgRx project, building reactive libraries for Angular.
+    </p>
+
+  `,
+  styles: [
+    `
+    :host {
+      width: 100%;
+    }
+    
+    .pic {
+      display: flex;
+      justify-content: space-around;
+    }
+    `
+  ]
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/components/index.ts

@@ -1,2 +1,3 @@
+export * from './about/about.component';
 export * from './layout/layout.component';
 export * from './page-not-found/page-not-found.component';

src/app/core/components/layout/layout.component.ts

@@ -12,7 +12,7 @@ import { map } from 'rxjs/operators';
           mode='over'>
         <mat-toolbar>Menu</mat-toolbar>
         <mat-nav-list>
-          <a mat-list-item routerLink="/">Posts</a>
+          <a mat-list-item routerLink="/" (click)="drawer.close()">Posts</a>
         </mat-nav-list>
       </mat-sidenav>
       <mat-sidenav-content>
@@ -29,7 +29,6 @@ import { map } from 'rxjs/operators';
           <a routerLink="/">Brandon Roberts</a>
 
           <div class="social">
-            <a routerLink="/about" title="About Me">About</a>
 
             <a href="https://twitter.com/brandontroberts" title="Twitter">
               <img src="assets/images/logos/twitter-icon.svg">
@@ -86,10 +85,6 @@ import { map } from 'rxjs/operators';
       z-index: 1;
     }
 
-    .filler {
-      flex: 1 1 auto;
-    }
-
     .social {
       display: flex;
       flex-direction: row;

src/app/core/core.module.ts

@@ -4,13 +4,14 @@ import { LayoutModule } from '@angular/cdk/layout';
 import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 
-import { LayoutComponent, PageNotFoundComponent } from './components';
+import { LayoutComponent, PageNotFoundComponent, AboutComponent } from './components';
 import { FooterModule } from '../shared/footer';
 
 @NgModule({
   declarations: [
     LayoutComponent,
-    PageNotFoundComponent
+    PageNotFoundComponent,
+    AboutComponent
   ],
   imports: [
     CommonModule,

src/app/shared/footer/footer.component.ts

@@ -3,9 +3,39 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-footer',
   template: `
-    <mat-toolbar color="primary"></mat-toolbar>
+    <mat-toolbar color="primary">
+      
+      <div class="links">
+
+      © Copyright 2019  
+
+      </div>
+
+    </mat-toolbar>
   `,
-  styles: []
+  styles: [
+    `
+    :host {
+      width: 100%;
+      justify-content: space-around;
+      color: white;
+    }
+
+    a {
+      color: white;
+    }
+
+    a:after {
+      content: ' ';
+    }
+
+    .links {
+      display: block;
+      text-align: center;
+      width: 100%;
+    }
+    `
+  ]
 })
 export class FooterComponent implements OnInit {
 

src/app/shared/footer/footer.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatToolbarModule } from '@angular/material';
+import { RouterModule } from '@angular/router';
 
 import { FooterComponent } from './footer.component';
 
@@ -10,7 +11,8 @@ import { FooterComponent } from './footer.component';
   ],
   imports: [
     CommonModule,
-    MatToolbarModule
+    MatToolbarModule,
+    RouterModule
   ],
   exports: [
     FooterComponent

src/styles.scss

@@ -1,27 +1,30 @@
 /* You can add global styles to this file, and also import other style files */
 
 html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+body {
+    margin: 0;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+}
 
 // Import library functions for theme creation.
 @import '~@angular/material/theming';
 
 // Theme colors generated using http://mcg.mbitson.com/#!?black=%23eeeff4&blue=%233f51b5&themename=mcgtheme
 $md-blue: (
-    50 : #e8eaf6,
-    100 : #c5cae9,
-    200 : #9fa8da,
-    300 : #7986cb,
-    400 : #5c6bc0,
-    500 : #3f51b5,
-    600 : #3949ab,
-    700 : #303f9f,
-    800 : #283593,
-    900 : #1a237e,
-    A100 : #8c9eff,
-    A200 : #536dfe,
-    A400 : #3d5afe,
-    A700 : #304ffe,
+    50 : #e0e0ff,
+    100 : #b3b3ff,
+    200 : #8080ff,
+    300 : #4d4dff,
+    400 : #2626ff,
+    500 : #0000ff,
+    600 : #0000ff,
+    700 : #0000ff,
+    800 : #0000ff,
+    900 : #0000ff,
+    A100 : #ffffff,
+    A200 : #f2f2ff,
+    A400 : #bfbfff,
+    A700 : #a6a6ff,
     contrast: (
         50 : #000000,
         100 : #000000,
@@ -34,12 +37,14 @@ $md-blue: (
         800 : #ffffff,
         900 : #ffffff,
         A100 : #000000,
-        A200 : #ffffff,
-        A400 : #ffffff,
-        A700 : #ffffff,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
     )
 );
 
+
+
 // Include non-theme styles for core.
 @include mat-core();