feat(landing): new landing page [ci skip]

demo/src/app/app.module.ts

@@ -13,9 +13,8 @@ import { AppComponent } from './app.component';
 import { routes } from './app.routing';
 import { LandingComponent } from './common/landing/landing.component';
 import { DocumentationComponent } from './common/documentation/documentation.component';
-import { SearchFilterPipe } from './common/sidebar/search-filter.pipe';
 import { TopMenuComponent } from './common/top-menu/top-menu.component';
-import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { GettingStartedComponent } from './common/getting-started/getting-started.component';
 import { ThemeStorage } from './theme/theme-storage';
 import { StyleManager } from './theme/style-manager';
 import { SharedModule } from './shared/shared.module';

demo/src/app/app.routing.ts

@@ -1,11 +1,10 @@
-import { GettingStartedComponent } from './getting-started/getting-started.component';
-import { DocumentationComponent } from './common/documentation/documentation.component';
 import { LandingComponent } from './common/landing/landing.component';
+import { GettingStartedComponent } from './common/getting-started/getting-started.component';
 
 export const routes = [
   {
     path: '',
-    data: ['DIE BICH DIE'],
+    data: ['Landing page'],
     component: LandingComponent
   },
   {
@@ -53,11 +52,6 @@ export const routes = [
     loadChildren:
       './components/+datepicker/demo-datepicker.module#DemoDatepickerModule'
   },
-  {
-    path: 'docs',
-    data: ['Docs'],
-    component: DocumentationComponent
-  },
   {
     path: 'dropdowns',
     data: ['Dropdowns'],

demo/src/app/common/getting-started/getting-started.component.html

@@ -0,0 +1,44 @@
+<demo-section>
+  <div id="content" class="content-box">
+
+    <div class="image-responsive img-fluid">
+      <img class="mx-auto center-block d-block" src="assets/images/logos/angular.svg"
+           alt="angular logo" width="250" height="250">
+    </div>
+
+    <h1 align="center">
+      <a href="https://github.com/valor-software/ngx-bootstrap">ngx-bootstrap</a>
+    </h1>
+
+    <p align="center">
+      The best way to quickly integrate <a href="https://getbootstrap.com/">Bootstrap 3</a> or <a
+      href="https://getbootstrap.com/docs/4.0">Bootstrap 4</a> Components with <a href="https://angular.io/">Angular</a>
+    </p>
+
+    <p align="center">
+      <span style="margin-top: 10px;display: inline-block;width: 120px;">
+        <iframe frameborder="0" scrolling="0" style="height: 20px;width: 120px;"
+                title="github stars count"
+                src="https://ghbtns.com/github-btn.html?user=valor-software&repo=ngx-bootstrap&type=star&count=true"></iframe></span>
+      <br/>
+
+      <a href="https://badge.fury.io/js/ngx-bootstrap">
+        <img src="https://badge.fury.io/js/ngx-bootstrap.svg" alt="npm version">
+      </a>
+
+      <a href="https://npmjs.org/ngx-bootstrap">
+        <img src="https://img.shields.io/npm/dm/ngx-bootstrap.svg" alt="npm downloads">
+      </a>
+
+      <br/>
+      <a href="https://travis-ci.org/valor-software/ngx-bootstrap">
+        <img alt="build status" src="https://travis-ci.org/valor-software/ngx-bootstrap.svg?branch=development">
+      </a>
+      <a href="https://ngx-slack.herokuapp.com">
+        <img src="https://ngx-slack.herokuapp.com/badge.svg" alt="slack">
+      </a>
+    </p>
+
+    <div class="section" [innerHTML]="doc"></div>
+  </div>
+</demo-section>

demo/src/app/getting-started/getting-started.component.ts → demo/src/app/common/getting-started/getting-started.component.ts

@@ -4,9 +4,10 @@ let doc = require('html-loader!markdown-loader!./getting-started.md');
 
 @Component({
   selector: 'getting-started',
-  templateUrl: './getting-started.template.html'
+  templateUrl: './getting-started.component.html'
 })
 export class GettingStartedComponent {
-  public name = `Native Angular widgets for Bootstrap 3 and Bootstrap 4`;
-  public doc: string = doc;
+  name = `Native Angular widgets for Bootstrap 3 and Bootstrap 4`;
+  src = 'https://github.com/valor-software/ngx-bootstrap';
+  doc: string = doc;
 }

demo/src/app/common/landing/landing.component.html

@@ -7,8 +7,8 @@
     <h1 class="slogan">Develop better. Faster.</h1>
     <p class="descr">Bootstrap components, powered by Angular</p>
     <div class="btn-block">
-      <button class="btn btn-primary">Get started</button>
-      <button class="btn btn-outline-secondary">Docs</button>
+      <a class="btn btn-primary" href="#/getting-started">Get started</a>
+      <a class="btn btn-outline-secondary" href="#/https://github.com/valor-software/ngx-bootstrap">Github</a>
     </div>
     <p class="version">{{currentVersion}}</p>
   </section>

demo/src/app/common/landing/landing.component.ts

@@ -1,14 +1,30 @@
 import { Component, AfterViewInit } from '@angular/core';
 import { Http } from '@angular/http';
 
+import { setTheme } from 'ngx-bootstrap/utils';
+import { StyleManager } from '../../theme/style-manager';
+import { ThemeStorage } from '../../theme/theme-storage';
+
+const _bs4Css = 'assets/css/bootstrap-4.0.0-beta/css/bootstrap.min.css';
+
 @Component({
   selector: 'landing',
   templateUrl: './landing.component.html'
 })
 export class LandingComponent implements AfterViewInit {
   currentVersion: string;
+  currentTheme: 'bs3' | 'bs4';
 
-  constructor(private http: Http) { }
+  constructor(
+    private http: Http,
+    public styleManager: StyleManager,
+    private _themeStorage: ThemeStorage
+  ) {
+    const currentTheme = this._themeStorage.getStoredTheme();
+    if (currentTheme && currentTheme === 'bs3') {
+      this.installTheme('bs4');
+    }
+  }
 
   ngAfterViewInit(): any {
     this.http
@@ -18,4 +34,13 @@ export class LandingComponent implements AfterViewInit {
         this.currentVersion = data.version;
       });
   }
+
+  installTheme(theme: 'bs3' | 'bs4') {
+    setTheme(theme);
+    this.styleManager.setStyle('theme', _bs4Css);
+
+    if (this.currentTheme) {
+      this._themeStorage.storeTheme(this.currentTheme);
+    }
+  }
 }

demo/src/app/common/sidebar/sidebar.component.html

@@ -16,13 +16,13 @@
     <ul class="sidebar-list">
       <li [routerLinkActive]="['active']"
           [routerLinkActiveOptions]="{exact: true}">
-        <a [routerLink]="[routes[0].path]">{{routes[0].data}}</a>
+        <a routerLink="/{{routes[1].path}}">{{routes[1].data}}</a>
       </li>
     </ul>
 
     <h4 class="sidebar-title">Components</h4>
     <ul class="sidebar-list">
-      <li *ngFor="let route of routes | slice:1 | SearchFilter:search.text"
+      <li *ngFor="let route of routes | slice:2 | SearchFilter:search.text"
           [routerLinkActive]="['active']"
           [routerLinkActiveOptions]="{exact: true}">
         <a routerLink="/{{route.path}}">{{route.data[0]}}</a>