feat: add page viewer component and move about to markdown file

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, AboutComponent } from './core/components';
+import { PageNotFoundComponent, PageComponent } from './core/components';
 
 @NgModule({
   declarations: [
@@ -20,9 +20,8 @@ import { PageNotFoundComponent, AboutComponent } from './core/components';
     RouterModule.forRoot([
       { path: '', redirectTo: '/blog', pathMatch: 'full' },
       { path: 'blog', loadChildren: './blog/blog.module#BlogModule' },
-      { path: 'about', component: AboutComponent },
       { path: '404', component: PageNotFoundComponent },
-      { path: '**', component: PageNotFoundComponent }
+      { path: ':pageId', component: PageComponent },
     ]),
     MarkdownModule.forRoot(),
     CoreModule

src/app/core/components/index.ts

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

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

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { tap, switchMap } from 'rxjs/operators';
+
+import { PageService } from 'src/app/core/services';
+
+@Component({
+  selector: 'app-page',
+  template: `
+    <markdown [data]="page$ | async"></markdown>
+  `,
+  styles: [
+    `
+    :host {
+      display: flex;
+      width: 80%;
+    }
+
+    markdown {
+      width: 100%;
+    }
+    `
+  ]
+})
+export class PageComponent implements OnInit {
+  page$ = this.route.paramMap.pipe(
+    switchMap(params => 
+      this.postService.getPageContent(params.get('pageId'))
+        .pipe(tap(() => {}, () => {
+          this.router.navigate(['/404']);
+        }))
+    )
+  );
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private postService: PageService
+  ) { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/core.module.ts

@@ -3,15 +3,16 @@ import { CommonModule } from '@angular/common';
 import { LayoutModule } from '@angular/cdk/layout';
 import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
+import { MarkdownModule } from 'ngx-markdown';
 
-import { LayoutComponent, PageNotFoundComponent, AboutComponent } from './components';
+import { LayoutComponent, PageNotFoundComponent, PageComponent } from './components';
 import { FooterModule } from '../shared/footer';
 
 @NgModule({
   declarations: [
     LayoutComponent,
-    PageNotFoundComponent,
-    AboutComponent
+    PageComponent,
+    PageNotFoundComponent
   ],
   imports: [
     CommonModule,
@@ -22,7 +23,8 @@ import { FooterModule } from '../shared/footer';
     MatSidenavModule,
     MatIconModule,
     MatListModule,
-    FooterModule
+    FooterModule,
+    MarkdownModule.forChild()
   ],
   exports: [
     LayoutComponent

src/app/core/services/index.ts

@@ -1 +1,2 @@
+export * from './page.service';
 export * from './post.service';

src/app/core/services/page.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PageService {
+
+  constructor(private http: HttpClient) { }
+
+  getPageContent(pageId: string) {
+    return this.http.get(`/content/pages/${pageId}.md`, { responseType: 'text' });
+  }
+}

src/content/pages/about.md

@@ -0,0 +1,16 @@
+<div class="page about-page">
+
+## About Me
+
+<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>
+
+</div>

src/styles.scss

@@ -62,4 +62,14 @@ a {
 
 h2 { 
     font-weight: normal;
+}
+
+
+div.page {
+    width: 80%;
+}
+
+div.about-page .pic {
+    display: flex;
+    justify-content: space-around;
 }