feat(docs): Added installation guide

Airblader · Airblader · commit 8037a3944702 · 2018-12-27T03:56:59.000+01:00
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
         "add": "^2.0.6",
         "bootstrap": "^4.1.3",
         "core-js": "^2.5.4",
+        "prismjs": "^1.15.0",
         "rxjs": "~6.3.3",
         "tslib": "^1.9.0",
         "yarn": "^1.12.3",
@@ -50,6 +51,7 @@
         "@types/jasmine": "~2.8.8",
         "@types/jasminewd2": "~2.0.3",
         "@types/node": "~8.9.4",
+        "@types/prismjs": "^1.9.0",
         "angular-cli-ghpages": "^0.5.3",
         "codelyzer": "~4.5.0",
         "jasmine-core": "~2.99.1",
diff --git a/projects/ngqp-demo/src/app/demo-routing.module.ts b/projects/ngqp-demo/src/app/demo-routing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
 
 const routes: Routes = [
     {
@@ -9,8 +10,8 @@ const routes: Routes = [
         component: HomeComponent,
     },
     {
-        path: 'guide',
-        component: HomeComponent,
+        path: 'getting-started',
+        component: GettingStartedComponent,
     },
     {
         path: '**',
diff --git a/projects/ngqp-demo/src/app/demo.component.html b/projects/ngqp-demo/src/app/demo.component.html
@@ -9,17 +9,17 @@
         <span>ngqp</span>
     </a>
     <div class="navbar-collapse" [class.collapse]="!isNavbarExpanded">
-        <ul class="navbar-nav mr-auto">
-            <li class="nav-item">
-                <a class="nav-link" routerLink="/guide">Getting started</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" routerLink="/">Tutorial</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" routerLink="/">API Documentation</a>
-            </li>
-        </ul>
+        <div class="navbar-nav mr-auto">
+            <a class="nav-item" routerLink="/getting-started" routerLinkActive="active">
+                <span class="nav-link">Getting started</span>
+            </a>
+            <a class="nav-item" routerLink="/tutorial" routerLinkActive="active">
+                <span class="nav-link">Tutorial</span>
+            </a>
+            <a class="nav-item" href="#">
+                <span class="nav-link">API Documentation</span>
+            </a>
+        </div>
     </div>
     <a href="https://ngqp.io" rel="nofollow noopener" [class.collapse]="isNavbarExpanded">
         <fa-icon [icon]="faGithub" size="2x" class="text-light"></fa-icon>
diff --git a/projects/ngqp-demo/src/app/demo.component.scss b/projects/ngqp-demo/src/app/demo.component.scss
@@ -2,4 +2,8 @@
     background-color: white;
     border-radius: 50%;
     margin-right: 8px;
+}
+
+.navbar-nav a {
+    text-decoration: none;
 }
diff --git a/projects/ngqp-demo/src/app/demo.module.ts b/projects/ngqp-demo/src/app/demo.module.ts
@@ -9,13 +9,17 @@ import { DemoComponent } from './demo.component';
 import { DemoBrowserComponent } from './shared/demo-browser/demo-browser.component';
 import { DemoPaginationComponent } from './shared/demo-pagination/demo-pagination.component';
 import { HomeComponent } from './home/home.component';
+import { GettingStartedComponent } from './getting-started/getting-started.component';
+import { DemoSnippetComponent } from './shared/demo-snippet/demo-snippet.component';
 
 @NgModule({
     declarations: [
         DemoComponent,
         DemoBrowserComponent,
         DemoPaginationComponent,
         HomeComponent,
+        GettingStartedComponent,
+        DemoSnippetComponent,
     ],
     imports: [
         BrowserModule,
diff --git a/projects/ngqp-demo/src/app/getting-started/getting-started.component.html b/projects/ngqp-demo/src/app/getting-started/getting-started.component.html
@@ -0,0 +1,13 @@
+<main class="container mt-5">
+    <h1>Installation</h1>
+    ngqp supports schematics, so simply run the following command in your project:
+    <demo-snippet type="bash" code="ng add @ngqp/core"></demo-snippet>
+
+    <hr />
+
+    You can also install it manually using
+    <demo-snippet type="bash" code="yarn add @ngqp/core"></demo-snippet>
+
+    and then importing it to your app's root module:
+    <demo-snippet type="typescript" [code]="snippets['MODULE_IMPORT']"></demo-snippet>
+</main>
diff --git a/projects/ngqp-demo/src/app/getting-started/getting-started.component.scss b/projects/ngqp-demo/src/app/getting-started/getting-started.component.scss
diff --git a/projects/ngqp-demo/src/app/getting-started/getting-started.component.ts b/projects/ngqp-demo/src/app/getting-started/getting-started.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+const SNIPPETS: { [ key: string ]: string } = {
+    MODULE_IMPORT: `
+        @NgModule({
+            imports: [
+                QueryParamModule.forRoot(),
+            ],
+        })
+        export class AppModule {}`,
+};
+
+@Component({
+    selector: 'demo-getting-started',
+    templateUrl: './getting-started.component.html',
+    styleUrls: [ './getting-started.component.scss' ]
+})
+export class GettingStartedComponent {
+
+    public snippets = SNIPPETS;
+
+}
diff --git a/projects/ngqp-demo/src/app/home/home.component.html b/projects/ngqp-demo/src/app/home/home.component.html
@@ -6,7 +6,7 @@
         <h1>ngqp</h1>
         <p>Declaratively synchronize form controls with the URL</p>
         <div class="btn-block">
-            <a class="btn btn-lg btn-primary" routerLink="/guide">Get started</a>
+            <a class="btn btn-lg btn-primary" routerLink="/getting-started">Get started</a>
             <a class="btn btn-lg btn-outline-secondary" href="https://www.github.com/Airblader/ngqp">Github</a>
         </div>
     </section>
diff --git a/projects/ngqp-demo/src/app/shared/demo-snippet/demo-snippet.component.html b/projects/ngqp-demo/src/app/shared/demo-snippet/demo-snippet.component.html
@@ -0,0 +1,2 @@
+<!-- It's important to keep this on one line due to whitespaces -->
+<pre class="demo-snippet__pre language-{{ type }}"><code #code class="language-{{ type }}"></code></pre>
diff --git a/projects/ngqp-demo/src/app/shared/demo-snippet/demo-snippet.component.scss b/projects/ngqp-demo/src/app/shared/demo-snippet/demo-snippet.component.scss
@@ -0,0 +1,11 @@
+.demo-snippet__pre {
+    padding: 8px;
+
+    font-family: Roboto, Droid Sans, Helvetica Neue, Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    background-color: #f0f0f0;
+
+    max-height: 240px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
diff --git a/projects/ngqp-demo/src/app/shared/demo-snippet/demo-snippet.component.ts b/projects/ngqp-demo/src/app/shared/demo-snippet/demo-snippet.component.ts
@@ -0,0 +1,42 @@
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { PrismService } from './prism.service';
+
+@Component({
+    selector: 'demo-snippet',
+    templateUrl: './demo-snippet.component.html',
+    styleUrls: [ './demo-snippet.component.scss' ],
+})
+export class DemoSnippetComponent implements AfterViewInit {
+
+    @ViewChild('code', { read: ElementRef })
+    private container: ElementRef<HTMLElement>;
+
+    @Input()
+    public code: string;
+
+    @Input()
+    public type: 'typescript' | 'html' | 'bash' = 'typescript';
+
+    constructor(private prism: PrismService) {
+    }
+
+    public ngAfterViewInit() {
+        const code = this.normalizeIndentation(this.code).trim();
+        console.log(this.code);
+        console.log(code);
+        this.container.nativeElement.innerHTML = this.prism.highlight(code, this.type);
+    }
+
+    private normalizeIndentation(text: string): string {
+        const lines = text.split('\n');
+
+        const indents = lines
+            .filter(line => line.trim().length !== 0)
+            .map(line => line.search(/\S/))
+            .map(lineIndent => lineIndent === -1 ? Number.MAX_VALUE : lineIndent);
+        const indent = Math.min(...indents);
+
+        return lines.map(line => line.substr(indent)).join('\n').trim();
+    }
+
+}
diff --git a/projects/ngqp-demo/src/app/shared/demo-snippet/prism.service.ts b/projects/ngqp-demo/src/app/shared/demo-snippet/prism.service.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+
+import * as prism from 'prismjs';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-bash';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PrismService {
+
+    public highlight(code: string, language: string): string {
+        return prism.highlight(code, prism.languages[ language ]);
+    }
+
+}
diff --git a/projects/ngqp-demo/src/styles.scss b/projects/ngqp-demo/src/styles.scss
@@ -3,4 +3,5 @@ $theme-colors: (
     "secondary":  #7c4dff,
 );
 
-@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap/scss/bootstrap";
+@import '~prismjs/themes/prism.css';
diff --git a/yarn.lock b/yarn.lock
@@ -409,6 +409,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.9.5.tgz#162b864bc70be077e6db212b322754917929e976"
   integrity sha512-jRHfWsvyMtXdbhnz5CVHxaBgnV6duZnPlQuRSo/dm/GnmikNcmZhxIES4E9OZjUmQ8C+HCl4KJux+cXN/ErGDQ==
 
+"@types/prismjs@^1.9.0":
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.9.0.tgz#38af9491e2f105079a443703ee675fb27371ec94"
+  integrity sha512-zeh+xd2pcCvWm1XtWLR4v5pzZMybKeq6X8Q4cIZMMx8GmyKDUfJaOtw+JaONHUQt5ncKFXezl8QGIDQsSF5YfA==
+
 "@types/q@^0.0.32":
   version "0.0.32"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-0.0.32.tgz#bd284e57c84f1325da702babfc82a5328190c0c5"
@@ -1654,6 +1659,15 @@ cli-width@^2.0.0:
   resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
   integrity sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -2433,6 +2447,11 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
 delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -3561,6 +3580,13 @@ globule@^1.0.0:
     lodash "~4.17.10"
     minimatch "~3.0.2"
 
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -6307,6 +6333,13 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
   integrity sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=
 
+prismjs@^1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9"
+  integrity sha512-Lf2JrFYx8FanHrjoV5oL8YHCclLQgbJcVZR+gikGGMqz6ub5QVWDTM6YIwm3BuPxM/LOV+rKns3LssXNLIf+DA==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
 process-nextick-args@~1.0.6:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
@@ -7067,6 +7100,11 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
 selenium-webdriver@3.6.0, selenium-webdriver@^3.0.1:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-3.6.0.tgz#2ba87a1662c020b8988c981ae62cb2a01298eafc"
@@ -7902,6 +7940,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-emitter@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+  integrity sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==
+
 tmp@0.0.30:
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.30.tgz#72419d4a8be7d6ce75148fd8b324e593a711c2ed"

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`import { NgModule } from '@angular/core';`
`2`	`2`	`import { RouterModule, Routes } from '@angular/router';`
`3`	`3`	`import { HomeComponent } from './home/home.component';`
	`4`	`+import { GettingStartedComponent } from './getting-started/getting-started.component';`
`4`	`5`
`5`	`6`	`const routes: Routes = [`
`6`	`7`	`{`
`@@ -9,8 +10,8 @@ const routes: Routes = [`
`9`	`10`	`component: HomeComponent,`
`10`	`11`	`},`
`11`	`12`	`{`
`12`		`- path: 'guide',`
`13`		`- component: HomeComponent,`
	`13`	`+ path: 'getting-started',`
	`14`	`+ component: GettingStartedComponent,`
`14`	`15`	`},`
`15`	`16`	`{`
`16`	`17`	`path: '**',`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,8 @@`
`2`	`2`	`background-color: white;`
`3`	`3`	`border-radius: 50%;`
`4`	`4`	`margin-right: 8px;`
	`5`	`+}`
	`6`	`+`
	`7`	`+.navbar-nav a {`
	`8`	`+ text-decoration: none;`
`5`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<!-- It's important to keep this on one line due to whitespaces -->`
	`2`	`+<pre class="demo-snippet__pre language-{{ type }}"><code #code class="language-{{ type }}"></code></pre>`