Add about page

Author: wnodom

src/app/about/about.component.html

@@ -0,0 +1,24 @@
+<h2>About this app</h2>
+
+<p>
+  This is a set of simple CSS Grid examples
+  <a href="http://billodom.com/">I</a>
+  originally created for a talk at the 2018
+  <a href="https://craft-conf.com/">Craft Conference</a>
+  called "CSS Grid: Get ready to fall in love" (although
+  I've added a few things since then).
+</p>
+
+<p>
+  Note: The examples are hosted in an Angular app that uses Sass, but that's
+  just to make some things easier to build or demonstrate. None of the CSS Grid
+  concepts are specific to Angular or Sass.
+</p>
+
+<p>
+  You can find the latest version here:
+  <a target="_blank" href="https://github.com/wnodom/css-grid-playground">
+    CSS Grid Playground on Github
+  </a>
+</p>
+

src/app/about/about.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  padding: 20px;
+}
+

src/app/about/about.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cgp-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss']
+})
+export class AboutComponent { }

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { WelcomeComponent } from './welcome/welcome.component';
 import { IllustrationsComponent } from './illustrations/illustrations.component';
 import { ResourcesComponent } from './resources/resources.component';
+import { AboutComponent } from './about/about.component';
 
 import { examples } from './examples';
 
@@ -12,6 +13,7 @@ const routes: Routes = [
   ...examples,
   { path: 'illustrations', component: IllustrationsComponent },
   { path: 'resources', component: ResourcesComponent },
+  { path: 'about', component: AboutComponent },
   { path: '**', redirectTo: '' },
 ];
 

src/app/app.component.html

@@ -14,6 +14,7 @@
 
   <a routerLink="illustrations" routerLinkActive="currentExample">Illustrations</a>
   <a routerLink="resources"     routerLinkActive="currentExample">Resources</a>
+  <a routerLink="about"         routerLinkActive="currentExample">About</a>
 </nav>
 
 <main>

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { WelcomeComponent } from './welcome/welcome.component';
 import { ChessboardExampleComponent } from './chessboard-example/chessboard-example.component';
 import { ResourcesComponent } from './resources/resources.component';
 import { IllustrationsComponent } from './illustrations/illustrations.component';
+import { AboutComponent } from './about/about.component';
 
 
 @NgModule({
@@ -29,6 +30,7 @@ import { IllustrationsComponent } from './illustrations/illustrations.component'
     ChessboardExampleComponent,
     IllustrationsComponent,
     ResourcesComponent,
+    AboutComponent,
   ],
   imports: [
     BrowserModule,