Add home page

index.ts

@@ -0,0 +1 @@
+export * from './home';

shared/index.ts

@@ -0,0 +1 @@
+export * from './header';

src/app/app.component.html

@@ -1,3 +1,2 @@
-<h1>
-  {{title}}
-</h1>
+<app-header></app-header>
+<app-home></app-home>

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+
 }

src/app/app.module.ts

@@ -1,12 +1,23 @@
+import { ApplicationRef, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, ApplicationRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
+import { HomeComponent } from './home';
+import { HeaderComponent } from './shared';
+
+// Barrels are not reaching into sub barrels: https://github.com/angular/angular-cli/issues/585
+// import {
+//   AppComponent,
+//   HeaderComponent,
+//   HomeComponent
+// } from './'
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent, 
+    HomeComponent, 
+    HeaderComponent
   ],
   imports: [
     BrowserModule,

src/app/home/home.component.html

@@ -0,0 +1,3 @@
+<h2 class='title'>
+  Welcome to BabelCoder Wiki!
+</h2>

src/app/home/home.component.scss

@@ -0,0 +1,6 @@
+.title {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/app/home/home.component.spec.ts

@@ -0,0 +1,13 @@
+/* tslint:disable:no-unused-variable */
+
+import { By }           from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { addProviders, async, inject } from '@angular/core/testing';
+import { HomeComponent } from './home.component';
+
+describe('Component: Home', () => {
+  it('should create an instance', () => {
+    let component = new HomeComponent();
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/home.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.component.html',
+  styleUrls: ['home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/home/index.ts

@@ -0,0 +1 @@
+export * from './home.component';

src/app/index.ts

@@ -1,3 +1,5 @@
 export * from './environments/environment';
 export * from './app.component';
 export * from './app.module';
+export * from './home';
+export * from './shared';

src/app/shared/header/header.component.html

@@ -0,0 +1,21 @@
+<header class='header'>
+  <nav>
+    <a href='javascript:void(0)' class='brand'>Babel Coder Wiki!</a>
+    <ul class='menu'>
+      <li class='menu__item'>
+        <a 
+          href='javascript:void(0)'
+          class='menu__link'>
+          All Pages
+        </a>
+      </li>
+      <li class='menu__item'>
+        <a 
+          href='javascript:void(0)' 
+          class='menu__link'>
+          About Us
+        </a>
+      </li>
+    </ul>
+  </nav>
+</header>

src/app/shared/header/header.component.scss

@@ -0,0 +1,35 @@
+@import '../../theme/variables';
+
+.header {
+  background: $dark-gray1-color;
+  padding: 1rem;
+  width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+}
+
+.brand {
+  color: $white-color;
+  text-decoration: none;
+}
+
+.menu {
+  float: right;
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  &__item {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &__link {
+    padding: 1rem;
+    color: $green1-color;
+    text-decoration: none;
+  }
+}

src/app/shared/header/header.component.spec.ts

@@ -0,0 +1,13 @@
+/* tslint:disable:no-unused-variable */
+
+import { By }           from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { addProviders, async, inject } from '@angular/core/testing';
+import { HeaderComponent } from './header.component';
+
+describe('Component: Header', () => {
+  it('should create an instance', () => {
+    let component = new HeaderComponent();
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/header/header.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: 'header.component.html',
+  styleUrls: ['header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/shared/header/index.ts

@@ -0,0 +1 @@
+export * from './header.component';

src/app/shared/index.ts

@@ -0,0 +1 @@
+export * from './header';

src/app/theme/_variables.scss

@@ -0,0 +1,11 @@
+$gray1-color: #cbcbcb;
+$gray2-color: #e0e0e0;
+
+$dark-gray1-color: #2d3e50;
+
+$green1-color: #18d8a9;
+
+$red1-color: #da4453;
+
+$white-color: #fff;
+$black-color: #000;