configure for sass, add initial layout and comps

Author: jschwarty

.gitignore

@@ -23,6 +23,7 @@
 /coverage/*
 /libpeerconnection.log
 npm-debug.log
+debug.log
 testem.log
 /typings
 

README.md

@@ -1,31 +1,13 @@
-# Angularair
+# [angularair.com](http://angularair.com)
 
-This project was generated with [angular-cli](https://github.com/angular/angular-cli) version 1.0.0-beta.22-1.
+![AngularAir logo](src/assets/logo.png)
 
-## Development server
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+[@AngularAir](https://twitter.com/AngularAir) is a video podcast all about
+[Angular](https://angular.io/) by
+[AngularClass](https://angularclass.com/) and hosted by [Justin Schwartzenberger](https://twitter.com/schwarty).
 
-## Code scaffolding
+This repo is [the website](http://angularair.github.io) for AngularAir.
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class`.
+Catch AngularAir on [Twitter](https://twitter.com/AngularAir) and
+[Google+](https://plus.google.com/+AngularAirPodcast/)
 
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
-
-## Deploying to Github Pages
-
-Run `ng github-pages:deploy` to deploy to Github Pages.
-
-## Further help
-
-To get more help on the `angular-cli` use `ng --help` or go check out the [Angular-CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular-cli.json

@@ -18,7 +18,7 @@
       "prefix": "app",
       "mobile": false,
       "styles": [
-        "styles.css"
+        "styles.scss"
       ],
       "scripts": [],
       "environments": {
@@ -41,7 +41,8 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "scss",
+    "changeDetection": "OnPush",
     "prefixInterfaces": false,
     "inline": {
       "style": false,

src/app/app.component.html

@@ -1,3 +1,22 @@
-<h1>
-  {{title}}
-</h1>
+<div id="logo" class="center">
+  <img src="assets/logo.png" />
+</div>
+
+<section id="title" class="center">
+  <h1>AngularAir</h1>
+  <h2>
+    A <strong>live</strong> video podcast all about Angular
+  </h2>
+  <p>
+    Brought to you by
+    <a href="https://auth0.com/learn/angular-authentication/?utm_source=angular_air&utm_medium=sponsored_link&utm_campaign=target_angular">Auth0</a>,
+    <a href="http://angularclass.com">AngularClass</a> and <a href="#sponsors">others</a>
+  </p>
+</section>
+<hr />
+<section id="podcast-links" class="center">
+  <app-subscribe-icon icon="apple" network="iTunes" link="https://itunes.apple.com/us/podcast/angular-air/id940806858?mt=2"></app-subscribe-icon>
+  <app-subscribe-icon icon="youtube" network="YouTube" link="https://www.youtube.com/c/AngularAirPodcast"></app-subscribe-icon>
+  <app-subscribe-icon icon="rss" network="RSS" link="http://angularair.podbean.com/feed/"></app-subscribe-icon>
+</section>
+<hr/>

src/app/app.component.css renamed to src/app/app.component.scss

@@ -1,10 +1,9 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 @Component({
   selector: 'app-root',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
-  title = 'app works!';
-}
+export class AppComponent { }

src/app/app.component.ts

@@ -4,10 +4,14 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
+import { LinkIconComponent } from './shared/link-icon/link-icon.component';
+import { SubscribeIconComponent } from './shared/subscribe-icon/subscribe-icon.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    LinkIconComponent,
+    SubscribeIconComponent
   ],
   imports: [
     BrowserModule,

src/app/app.module.ts

@@ -0,0 +1,5 @@
+<div>
+  <a [href]="link" [title]="title">
+    <i class="fa fa-{{icon}}"></i>
+  </a>
+</div>

src/app/shared/link-icon/link-icon.component.html

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { LinkIconComponent } from './link-icon.component';
+
+describe('LinkIconComponent', () => {
+  let component: LinkIconComponent;
+  let fixture: ComponentFixture<LinkIconComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LinkIconComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LinkIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/link-icon/link-icon.component.scss

@@ -0,0 +1,13 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-link-icon',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './link-icon.component.html',
+  styleUrls: ['./link-icon.component.scss']
+})
+export class LinkIconComponent {
+  @Input() icon;
+  @Input() link;
+  @Input() title;
+}

src/app/shared/link-icon/link-icon.component.spec.ts

@@ -0,0 +1 @@
+<app-link-icon [icon]="icon" [link]="link" title="Subscribe on {{network}}"></app-link-icon>

src/app/shared/link-icon/link-icon.component.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { SubscribeIconComponent } from './subscribe-icon.component';
+
+describe('SubscribeIconComponent', () => {
+  let component: SubscribeIconComponent;
+  let fixture: ComponentFixture<SubscribeIconComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SubscribeIconComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubscribeIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/subscribe-icon/subscribe-icon.component.html

@@ -0,0 +1,13 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-subscribe-icon',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './subscribe-icon.component.html',
+  styleUrls: ['./subscribe-icon.component.scss']
+})
+export class SubscribeIconComponent {
+  @Input() icon;
+  @Input() link;
+  @Input() network;
+}

src/app/shared/subscribe-icon/subscribe-icon.component.scss

@@ -2,13 +2,13 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <title>Angularair</title>
+  <title>AngularAir</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root>Loading...</app-root>
+  <app-root>Loading AngularAir...</app-root>
 </body>
 </html>

src/app/shared/subscribe-icon/subscribe-icon.component.spec.ts

@@ -0,0 +1,3 @@
+/* You can add global styles to this file, and also import other style files */
+$fa-font-path: "../node_modules/font-awesome/fonts";
+@import "../node_modules/font-awesome/scss/font-awesome.scss";