Merge pull request #304 from yashints/myfirstpr

docs(home): add content to home page

src/app/app.component.ts

@@ -27,6 +27,11 @@ export class AppComponent implements OnInit {
       link: '/',
       options: { exact: true }
     },
+    {
+      title: 'MENU.INSTALLATION',
+      link: '/installation',
+      options: { exact: true }
+    },
     {
       title: 'MENU.OPERATORS',
       link: '/operators',

src/app/rxjs/components/installation/installation.component.html

@@ -0,0 +1,84 @@
+<div class="installation">
+  <h2>{{'INSTALLATION.TITLE' | translate}}</h2>
+
+  <p>{{'INSTALLATION.INTRO' | translate}}:</p>
+
+  <h3 class="underlined">ES6 via npm</h3>
+
+  <pre><code>npm install rxjs</code></pre>
+
+  <p>{{'INSTALLATION.IMPORT' | translate}}:</p>
+
+  <pre><code>
+import Rx from 'rxjs/Rx';
+
+Rx.Observable.of(1,2,3)
+    </code></pre>
+
+  <p>{{'INSTALLATION.PATCHING' | translate}}:</p>
+
+  <pre><code>import &#10100; Observable &#10101; from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/operator/map';
+
+Observable.of(1,2,3).map(x => x + '!!!'); // etc</code></pre>
+
+  <p [innerHtml]="'INSTALLATION.WITHBIND' | translate"></p>
+
+  <p>{{'INSTALLATION.NOTE' | translate}}</p>
+
+  <pre><code>import &#10100; Observable &#10101; from 'rxjs/Observable';
+import &#10100; of &#10101; from 'rxjs/observable/of';
+import &#10100; map &#10101; from 'rxjs/operator/map';
+
+Observable::of(1,2,3)::map(x => x + '!!!'); // etc</code></pre>
+
+  <h3 class="underlined">
+    CommonJS via npm
+  </h3>
+
+  <p [innerHtml]="'INSTALLATION.ERROR' | translate"></p>
+  <ol>
+    <li>
+      <p [innerHtml]="'INSTALLATION.TYPINGUSERS' | translate"></p>
+      <pre><code>typings install es6-shim --ambient</code></pre>
+    </li>
+    <li>
+      <p [innerHtml]="'INSTALLATION.NOTINTERFACE' | translate"></p>
+    </li>
+    <li>
+      <p [innerHtml]="'INSTALLATION.ADDTYPE' | translate"></p>
+    </li>
+  </ol>
+
+  <h3 class="underlined">
+    {{'INSTALLATION.ALLMODULETYPES' | translate}} (CJS/ES6/AMD/TypeScript) via npm
+  </h3>
+
+  <p>{{'INSTALLATION.VIAV3' | translate}}:</p>
+
+  <pre><code>npm install @reactivex/rxjs</code></pre>
+
+  <p>{{'INSTALLATION.VIAV2' | translate}}:</p>
+
+  <pre><code>npm install @reactivex/[email protected]</code></pre>
+
+  <h3 class="underlined">
+      CDN  
+  </h3>
+
+  <p>
+    {{'INSTALLATION.FORCDN.PART1' | translate}} 
+    <a target="_blank" class="accent" href="https://unpkg.com/">unpkg</a>. 
+    {{'INSTALLATION.FORCDN.PART2' | translate}}:
+  </p>
+  <p>
+    {{'INSTALLATION.FORBETA1' | translate}}: <a class="accent" target="_blank" href="https://unpkg.com/@reactivex/rxjs@version/dist/global/Rx.umd.js">https://unpkg.com/@reactivex/rxjs@version/dist/global/Rx.umd.js</a>
+  </p>
+  <p>
+    {{'INSTALLATION.FORBETA12' | translate}}: <a class="accent" target="_blank" href="https://unpkg.com/@reactivex/rxjs@version/dist/global/Rx.js">https://unpkg.com/@reactivex/rxjs@version/dist/global/Rx.js</a>
+  </p>
+
+  <h4>{{'INSTALLATION.ADDITIONALRESOURCES' | translate}}</h4>
+  <h4><a class="accent" href="#/operators"> <span>{{'INSTALLATION.OPERATORS' | translate}}</span></a></h4>
+</div>

src/app/rxjs/components/installation/installation.component.scss

@@ -0,0 +1,26 @@
+@import '../../../../styles/_colors.scss';
+
+.installation {
+    padding: 40px 20px;
+    .underlined {
+        padding-bottom: 20px;
+        padding-top: 20px;
+        border-bottom: 1px solid $border-color-lightgrey;
+    }
+    code {
+        color: $code-snippet-color;
+        display: block;
+        line-height: 1.5em;
+        margin: 22px 0;
+        padding: 10px;
+        border-radius: 3px;
+        font-size: 0.85em;
+        background-color: $code-snippet-background-color;
+
+        &.inline {
+            display: inline;
+            background-color: inherit;
+            font-size: 90%;
+        }
+    }
+}

src/app/rxjs/components/installation/installation.component.spec.ts

@@ -0,0 +1,63 @@
+import {
+  async,
+  ComponentFixture,
+  TestBed,
+  inject
+} from '@angular/core/testing';
+import {
+  TranslateModule,
+  TranslateLoader,
+  TranslateService
+} from '@ngx-translate/core';
+import { InstallationComponent } from './installation.component';
+import { Observable } from 'rxjs/Observable';
+import { of } from 'rxjs/observable/of';
+
+const translations: any = {
+  INSTALLATION: {
+    TITLE: 'Installation instructions'
+  }
+};
+
+class FakeLoader implements TranslateLoader {
+  getTranslation(lang: string): Observable<any> {
+    return of(translations);
+  }
+}
+
+describe('InstallationComponent', () => {
+  let component: InstallationComponent;
+  let fixture: ComponentFixture<InstallationComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        declarations: [InstallationComponent],
+        providers: [TranslateService],
+        imports: [
+          TranslateModule.forRoot({
+            loader: { provide: TranslateLoader, useClass: FakeLoader }
+          })
+        ]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(
+    inject([TranslateService], (translateService: TranslateService) => {
+      fixture = TestBed.createComponent(InstallationComponent);
+      translateService.setDefaultLang('en');
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('Should show the installation instructions', () => {
+    const header = fixture.nativeElement.querySelector('h2');
+    expect(header.textContent).toMatch('Installation instructions');
+  });
+});

src/app/rxjs/components/installation/installation.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-installation',
+  templateUrl: './installation.component.html',
+  styleUrls: ['./installation.component.scss']
+})
+export class InstallationComponent {
+  constructor() {}
+}

src/app/rxjs/rxjs-routing.module.ts

@@ -1,12 +1,18 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { RxjsComponent } from './rxjs.component';
+import { InstallationComponent } from './components/installation/installation.component';
 
 const routes: Routes = [
   {
     path: '',
     component: RxjsComponent,
     data: { title: [], description: 'The complete RxJS documentation...' }
+  },
+  {
+    path: 'installation',
+    component: InstallationComponent,
+    data: { title: [], description: 'Installation information...' }
   }
 ];
 

src/app/rxjs/rxjs.component.html

@@ -1,3 +1,29 @@
-<p>
-  rxjs works!
-</p>
+<div class="container">
+    <mat-card>
+        <div class="banner">
+            <div class="title accent">RxJS</div>
+            <h1 class="rxjs">{{'HOME.TITLE' | translate}}</h1>
+            <a mat-raised-button color="accent" [routerLink]="['installation']">{{'HOME.GETSTARTED' | translate}}</a>
+        </div>
+    </mat-card>
+
+
+    <div class="tiles">
+        <div class="tile">
+            <h3>{{'HOME.TITLE' | translate}}</h3>
+
+            <p>{{'HOME.DESCRIPTION' | translate}}</p>
+        </div>
+        <div class="tile">
+            <h3>
+                <a class="link accent" [routerLink]="['installation']">{{'HOME.INSTALL.TITLE' | translate}}</a>
+            </h3>
+            <p [innerHTML]="'HOME.INSTALL.DESCRIPTION' | translate"></p>
+
+            <h3>
+                <a class="link accent" [routerLink]="['operators']">{{'HOME.LEARN.TITLE' | translate}}</a>
+            </h3>
+            <p [innerHTML]="'HOME.LEARN.DESCRIPTION' | translate"></p>
+        </div>
+    </div>
+</div>

src/app/rxjs/rxjs.component.scss

@@ -0,0 +1,50 @@
+$break-small: 760px;
+
+.container {
+  padding: 10px 0;
+  height: 100%;
+
+  .banner {
+    margin-top: 20px;     
+    width: 100%;
+    height: 80%;
+    text-align: center;
+
+    .title {
+      font-size: 4rem;
+    }
+
+    .rxjs {
+      margin-bottom: 50px;
+    }    
+  }
+
+  .tiles {
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+
+    .tile {
+      max-width: 30%;
+      margin-right: 50px;
+
+      .link {
+        text-decoration: unset;
+      }
+
+      p {
+        text-align: justify;
+        line-height: 1.5;
+      }
+    }
+
+    @media screen and (max-width: $break-small) {
+      flex-direction: column;
+      align-items: center;
+
+      .tile {
+        max-width: 80%;
+      }
+    }
+  }
+}

src/app/rxjs/rxjs.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-rxjs',

src/app/rxjs/rxjs.module.ts

@@ -1,10 +1,22 @@
 import { NgModule } from '@angular/core';
-
+import { TranslateModule } from '@ngx-translate/core';
 import { RxjsComponent } from './rxjs.component';
 import { RxjsRoutingModule } from './rxjs-routing.module';
+import {
+  MatButtonModule,
+  MatCardModule,
+  MatExpansionModule
+} from '@angular/material';
+import { InstallationComponent } from './components/installation/installation.component';
 
 @NgModule({
-  imports: [RxjsRoutingModule],
-  declarations: [RxjsComponent]
+  imports: [
+    RxjsRoutingModule,
+    MatButtonModule,
+    MatCardModule,
+    MatExpansionModule,
+    TranslateModule
+  ],
+  declarations: [RxjsComponent, InstallationComponent]
 })
 export class RxjsModule {}

src/assets/i18n/en.json

@@ -1,6 +1,7 @@
 {
   "MENU": {
     "HOME": "Home",
+    "INSTALLATION": "Installation",
     "OPERATORS": "Operators",
     "COMPANIES": "Companies",
     "TEAM": "Team"
@@ -27,6 +28,43 @@
     "WALKTHROUGH": {
       "TITLE": "Walkthrough"
     },
-    "NO_TRANSLATION": "Translation not completed. See the description in English"
+    "NO_TRANSLATION": "Translation not completed. See the description in English"    
+  },
+  "HOME": {
+    "TITLE": "Reactive Extensions Library for JavaScript",
+    "GETSTARTED": "Get started",
+    "DESCRIPTION": "RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface",
+    "INSTALL": {
+      "TITLE": "Install it",
+      "DESCRIPTION": " Find information on how to install RxJs from different sources from <i>npm </i>to<i> CDN</i>"
+    },
+    "LEARN": {
+      "TITLE": "Learn it",
+      "DESCRIPTION": "Read the full documentation on <i>Observables</i>, <i>Observer</i>, <i>Subject</i>, etc. In addition, View live examples alongside documentation with diagrams which helps you understand better in action"
+    }
+  },
+  "INSTALLATION": {
+    "TITLE": "Installation instructions",
+    "VIA": "via",
+    "INTRO": "Here are different ways you can install RxJs",    
+    "IMPORT": "To import the entire core set of functionality",
+    "PATCHING": "To import only what you need by patching (this is useful for size-sensitive bundling)",
+    "WITHBIND": "To import what you need and use it with proposed <a href=\"#/operators\">bind operator</a>:",
+    "NOTE": "Note: This additional syntax requires transpiler support and this syntax may be completely withdrawn from TC39 without notice! Use at your own risk.",
+    "ERROR": "If you receive an error like <code class=\"inline\">error TS2304: Cannot find name 'Promise' or error TS2304: Cannot find name 'Iterable'</code> when using RxJS you may need to install a supplemental set of typings.",
+    "TYPINGUSERS": "For <span class=\"accent\">typings</span> users:",
+    "NOTINTERFACE": "If you're not using typings the interfaces can be copied from <span class=\"accent\">/es6-shim/es6-shim.d.ts.</span>",
+    "ADDTYPE": "Add type definition file included in <code class=\"inline\">tsconfig.json</code> or CLI argument.",
+    "ALLMODULETYPES": "All Module Types",
+    "VIAV3": "To install this library via npm version 3, use the following command",
+    "VIAV2": "If you are using npm version 2 before this library has achieved a stable version, you need to specify the library version explicitly",
+    "FORCDN": {
+      "PART1": "For CDN, you can use.",
+      "PART2": "Just replace version with the current version on the link below"
+    },
+    "FORBETA1": "For RxJS 5.0.0-beta.1 through beta.11",
+    "FORBETA12": "For RxJS 5.0.0-beta.12 and higher",
+    "ADDITIONALRESOURCES": "Additional resources",
+    "OPERATORS": "Operators"
   }
 }