feat(demo): add landing page with docs (#1951)

docs/app/@theme/components/page-toc/page-toc.component.scss

@@ -0,0 +1,50 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  $title-fg: nb-theme(color-fg-heading-light);
+  $item-fg: rgba(102, 110, 128, 0.87);
+  $item-fg-active: #202020;
+  $accent-line-bg: nb-theme(color-fg-highlight);
+
+  padding-left: 1rem;
+  display: block;
+
+  h4 {
+    font-size: 1.25rem;
+    font-weight: normal;
+    margin-bottom: 2.5rem;
+    color: $title-fg;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 3.25rem;
+    font-size: 0.9375rem;
+
+    li {
+      margin-bottom: 0.9375rem;
+    }
+    a {
+      color: $item-fg;
+    }
+
+    li.selected a {
+      font-weight: 500;
+      color: $item-fg-active;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: -3.25rem;
+        top: 50%;
+        transform: translateY(-50%);
+        height: 0.1875rem;
+        width: 2rem;
+        background: $accent-line-bg;
+        border-radius: 1.5px;
+      }
+    }
+  }
+}

docs/app/@theme/components/page-toc/page-toc.component.ts

@@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+} from '@angular/core';
+import { takeWhile,  map } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { of as observableOf,  combineLatest } from 'rxjs';
+
+@Component({
+  selector: 'ngx-page-toc',
+  styleUrls: ['./page-toc.component.scss'],
+  template: `
+    <ng-container *ngIf="items?.length > 0">
+      <h4>Overview</h4>
+      <ul>
+        <li *ngFor="let item of items" [class.selected]="item.selected">
+          <a [routerLink]="item.link" [fragment]="item.fragment">{{ item.title }}</a>
+        </li>
+      </ul>
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxPageTocComponent implements OnDestroy {
+
+  items: any[];
+
+  @Input()
+  set toc(value) {
+    combineLatest(
+      observableOf(value || []),
+      this.activatedRoute.fragment,
+    )
+      .pipe(
+        takeWhile(() => this.alive),
+        map(([toc, fragment]) => {
+          toc = toc.map((item: any) => ({ ...item, selected: fragment === item.fragment }));
+          if (toc.length && !toc.find(item => item.selected)) {
+            toc[0].selected = true;
+          }
+          return toc;
+        }),
+      )
+      .subscribe((toc) => {
+        this.items = toc;
+        this.cd.detectChanges();
+      });
+  }
+
+  private alive = true;
+
+  constructor(private activatedRoute: ActivatedRoute, private cd: ChangeDetectorRef) {
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}