feature(docs): Added star count in docs. (#274)

* added star count scaffolding

* href to stargazers and starCount in tooltip

* moved star count to the footer

* only show starCount if > 0

* update(star-button): move to main card

src/app/app.module.ts

@@ -16,6 +16,8 @@ import { CovalentMarkdownModule } from '../platform/markdown';
 import { CovalentChartsModule } from '../platform/charts';
 import { CovalentDynamicFormsModule } from '../platform/dynamic-forms';
 
+import { GitHubService } from './services';
+
 @NgModule({
   declarations: [
     DocsAppComponent,
@@ -37,6 +39,7 @@ import { CovalentDynamicFormsModule } from '../platform/dynamic-forms';
   ], // modules needed to run this module
   providers: [
     appRoutingProviders,
+    GitHubService,
   ], // additional providers needed for this module
   entryComponents: [ ],
   bootstrap: [ DocsAppComponent ],

src/app/components/home/home.component.html

@@ -92,9 +92,14 @@ <h3 md-line> {{item.title}} </h3>
       </template>
     </div>
     <md-divider></md-divider>
-    <md-card-actions>
+    <md-card-actions layout="row">
       <a href="https://gitter.im/Teradata/covalent" target="_blank" md-button color="primary">Gitter Chat</a>
       <a href="https://github.com/teradata/covalent/issues" target="_blank" md-button>Bug or Feature Request</a>
+      <span flex></span>
+      <a md-raised-button mdTooltip="Star us on Github!" mdTooltipPosition="below" href="https://github.com/Teradata/covalent/stargazers" target="_blank">
+        <md-icon svgIcon="assets:github" class="pad-right-xs"></md-icon>
+        <span *ngIf="starCount"><md-icon class="text-md tc-grey-600">star</md-icon> {{starCount}}</span>
+      </a>
     </md-card-actions>
     <div after-card>
       <h3 class="md-title">FAQs</h3>
@@ -104,7 +109,7 @@ <h3 class="md-title">FAQs</h3>
           Covalent gives you a quickstart to build a modern web application UI and ensure consistency across your enterprise products.
           Some of Covalent's most important features include:
           <ul>
-            <li>Angular-Material 2.</li>
+            <li>Angular-Material 2</li>
             <li>Angular 2 Command-line interface (CLI) for builds, deploys, testing & more.</li>
             <li>Drastically simplified interface layouts (for dashboards, lists, etc).</li>
             <li>Custom web components (stepper, file upload, expansion panels & more).</li>
@@ -132,7 +137,7 @@ <h3 class="md-title">FAQs</h3>
             <li>Custom layouts & components in Covalent are developed specifically for enterprise solutions.</li>
             <li>Covalent provides a selection of UI layouts out of the box.</li>
             <li>Our team is continuously adding tools like Syntax Highlighting & Markdown.</li>
-            <li>Our team will always maintain native compatibility with Angular 2 & Material 2.</li>
+            <li>Our team will always maintain native compatibility with Angular 2 & Material  </li>
             <li>Our team will always follow the principles of the official Material Design spec.</li>
           </ul>
         </div>
@@ -247,7 +252,7 @@ <h3 md-line>Feature Requests & Bugs</h3>
   </td-layout-card-over>
   <td-layout-footer>
     <div layout="row" layout-align="start center">
-      <span class="md-caption">Copyright &copy; 2016 Teradata. All rights reserved</span>
+      <span class="md-caption">Copyright &copy; 2016 - 2017 Teradata. All rights reserved</span>
       <span flex></span>
       <md-icon class="md-icon-ux" svgIcon="assets:teradata-ux"></md-icon>
     </div>

src/app/components/home/home.component.ts

@@ -1,4 +1,6 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, OnInit } from '@angular/core';
+
+import { GitHubService } from '../../services';
 
 import { fadeAnimation } from '../../app.animations';
 
@@ -9,11 +11,13 @@ import { fadeAnimation } from '../../app.animations';
   animations: [fadeAnimation],
 })
 
-export class HomeComponent {
+export class HomeComponent implements OnInit {
 
   @HostBinding('@routeAnimation') routeAnimation: boolean = true;
   @HostBinding('class.td-route-animation') classAnimation: boolean = true;
 
+  starCount: number = 0;
+
   items: Object[] = [{
       color: 'purple-700',
       description: 'Your guide to start using the UI platform in your app!',
@@ -41,4 +45,13 @@ export class HomeComponent {
     },
   ];
 
+  constructor(private _gitHubService: GitHubService) {
+  }
+
+  ngOnInit(): void {
+    this._gitHubService.queryStartCount().subscribe((starsCount: number) => {
+      this.starCount = starsCount;
+    });
+  }
+
 }

src/app/services/github.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { Response } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import { Subscriber } from 'rxjs/Subscriber';
+
+import { HttpInterceptorService } from '@covalent/http';
+
+export interface IGithubRepository {
+  stargazers_count: number;
+}
+
+const GITHUB_URL: string = 'https://api.github.com';
+
+@Injectable()
+export class GitHubService {
+
+  constructor(private _http: HttpInterceptorService) {
+
+  }
+
+  queryStartCount(): Observable<number> {
+    return new Observable<number>((subscriber: Subscriber<number>) => {
+      this._http.get(GITHUB_URL + '/search/repositories?q=repo:Teradata/covalent').subscribe((response: Response) => {
+        let data: IGithubRepository[];
+        try {
+          data = response.json().items;
+        } catch (e) {
+          subscriber.error();
+        }
+        if (data.length > 0) {
+          subscriber.next(data[0].stargazers_count);
+        } else {
+          subscriber.next(0);
+        }
+        subscriber.complete();
+      }, (error: any) => {
+        subscriber.error();
+      });
+    });
+  }
+
+}

src/app/services/index.ts

@@ -0,0 +1 @@
+export { GitHubService } from './github.service';