feat(docs): add version switcher (#1617)

angular.json

@@ -257,7 +257,8 @@
  "docs/404.html",
  "docs/favicon.ico",
  "docs/favicon.png",
- "docs/google46533d2e7a851062.html"
+ "docs/google46533d2e7a851062.html",
+ { "glob": "versions.json", "input": "docs/", "output": "/" }
  ],
  "styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",

docs/app/@theme/components/header/header.component.scss

@@ -37,22 +37,20 @@
 
  &.middle {
  flex: 1;
+ align-items: center;
+ margin: 0 -0.5rem;
  }
  }
 
  ::ng-deep nb-menu {
- flex: 1;
+ flex: 1 0 auto;
  .menu-items {
  display: flex;
  justify-content: flex-end;
 
  .menu-item {
  border: none;
 
- &:first-child a {
- padding-left: 0;
- }
-
  a {
  color: $menu-item-fg;
  display: block;
@@ -98,6 +96,10 @@
  margin-left: auto;
  }
 
+ .version-select {
+ display: none;
+ }
+
  @include media-breakpoint-up(is) {
  .section {
  padding: 0.875rem 1.125rem;
@@ -116,6 +118,24 @@
  display: inline;
  }
  }
+
+ .version-select {
+ display: block;
+
+ ::ng-deep button {
+ background-color: nb-theme(version-select-highlight);
+ padding: 0.65rem 1.7rem 0.65rem 1.5rem;
+
+ &:active {
+ background-color: nb-theme(version-select-highlight);
+ }
+
+ &::after {
+ top: 47%;
+ right: 0.55rem;
+ }
+ }
+ }
  }
 
  @include media-breakpoint-up(md) {
@@ -180,6 +200,9 @@
  ngd-search {
  display: none;
  }
+ .version-select {
+ margin-left: 1rem;
+ }
 
  @include media-breakpoint-up(is) {
  ::ng-deep nb-menu .menu-items li:first-child {
@@ -191,6 +214,7 @@
  ngd-search {
  display: flex;
  align-items: center;
+ margin-left: auto;
  }
  }
 

docs/app/@theme/components/header/header.component.ts

@@ -1,6 +1,9 @@
-import { ChangeDetectionStrategy, Component, HostBinding, Input, OnInit } from '@angular/core';
-import { NbMenuItem, NbSidebarService } from '@nebular/theme';
-import { NgdVersionService } from '../../services';
+import { ChangeDetectionStrategy, Component, HostBinding, Inject, Input, OnInit } from '@angular/core';
+import { NB_WINDOW, NbMenuItem, NbSidebarService } from '@nebular/theme';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+import { NgdVersionService, VersionInfo } from '../../services';
 
 @Component({
  selector: 'ngd-header',
@@ -12,12 +15,22 @@ import { NgdVersionService } from '../../services';
  </button>
  <div class="logo">
  <a routerLink="/">Nebular</a>
- <span class="version">v{{ currentVersion }}</span>
+ <span class="version" *ngIf="currentVersionName$ | async">
+ v{{ currentVersionName$ | async }}
+ </span>
  </div>
  </div>
  <div class="section middle">
  <nb-menu [items]="mainMenu"></nb-menu>
  <ngd-search *ngIf="showSearch"></ngd-search>
+ <nb-select class="version-select"
+ *ngIf="(showVersionSelect$ | async)"
+ [selected]="currentVersion$ | async"
+ (selectedChange)="redirectToVersion($event)">
+ <nb-option *ngFor="let version of supportedVersions$ | async" [value]="version">
+ {{ version.name }}
+ </nb-option>
+ </nb-select>
  </div>
  <div class="section right">
  <iframe class="stars"
@@ -34,7 +47,11 @@ export class NgdHeaderComponent implements OnInit {
  @Input() showSearch = true;
  @HostBinding('class.docs-page') @Input() isDocs = false;
 
- currentVersion: string;
+ private window: Window;
+ supportedVersions$: Observable<VersionInfo[]>;
+ currentVersion$: Observable<VersionInfo>;
+ currentVersionName$: Observable<string>;
+ showVersionSelect$: Observable<boolean>;
 
  mainMenu: NbMenuItem[] = [
  {
@@ -62,13 +79,24 @@ export class NgdHeaderComponent implements OnInit {
  @Input() sidebarTag: string;
 
  constructor(
- versionService: NgdVersionService,
+ @Inject(NB_WINDOW) window,
+ private versionService: NgdVersionService,
  private sidebarService: NbSidebarService,
  ) {
- this.currentVersion = versionService.getNebularVersion();
+ this.window = window;
  }
 
  ngOnInit() {
+ this.currentVersion$ = this.versionService.getCurrentVersion();
+ this.currentVersionName$ = this.currentVersion$.pipe(map((version: VersionInfo) => version.name));
+ this.supportedVersions$ = this.versionService.getSupportedVersions();
+
+ this.showVersionSelect$ = this.supportedVersions$
+ .pipe(
+ map((versions: VersionInfo[]) => versions.length > 0),
+ startWith(false),
+ );
+
  if (!this.isDocs) {
  this.mainMenu.push({
  title: 'Professional Services',
@@ -80,4 +108,8 @@ export class NgdHeaderComponent implements OnInit {
  toggleSidebar() {
  this.sidebarService.toggle(false, this.sidebarTag);
  }
+
+ redirectToVersion(version: VersionInfo): void {
+ this.window.location.href = version.path;
+ }
 }

docs/app/@theme/services/version.service.ts

@@ -1,9 +1,36 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { map, shareReplay } from 'rxjs/operators';
+
+import { environment } from '../../../environments/environment';
+
+const PACKAGE_JSON_VERSION = require('../../../../package.json').version;
+
+export interface VersionInfo {
+ version: string;
+ name: string;
+ path: string;
+}
 
 @Injectable()
 export class NgdVersionService {
 
- getNebularVersion() {
- return require('../../../../package.json').version;
+ supportedVersions$: Observable<VersionInfo[]>;
+
+ constructor(private http: HttpClient) {
+ this.supportedVersions$ = this.http.get<VersionInfo[]>(environment.versionsUrl)
+ .pipe(shareReplay(1));
+ }
+
+ getCurrentVersion(): Observable<VersionInfo> {
+ return this.supportedVersions$
+ .pipe(
+ map((versions: VersionInfo[]) => versions.find(info => info.version === PACKAGE_JSON_VERSION)),
+ );
+ }
+
+ getSupportedVersions(): Observable<VersionInfo[]> {
+ return this.supportedVersions$;
  }
 }

docs/app/@theme/styles/_common.scss

@@ -30,4 +30,17 @@
  .algolia-docsearch-suggestion--category-header {
  background-color: transparent;
  }
+
+ nb-card.select {
+ border-color: nb-theme(version-select-highlight) !important;
+ }
+
+ nb-option {
+ background-color: #fff;
+
+ &.selected,
+ &:hover {
+ background-color: nb-theme(version-select-highlight) !important;
+ }
+ }
 }

docs/app/@theme/styles/styles.scss

@@ -16,8 +16,14 @@
  @include nb-actions-theme();
  @include nb-search-theme();
  @include nb-bootstrap-global();
+ @include nb-buttons-theme();
+ @include nb-select-theme();
+ @include nb-overlay-theme();
 
  @include nb-typography();
+ @include nb-select-theme();
+ @include nb-overlay-theme();
+ @include nb-buttons-theme();
 
  @include nbd-common();
 };

docs/app/@theme/styles/themes.scss

@@ -53,6 +53,8 @@ $nb-themes: nb-register-theme((
  menu-font-size: 0.95rem,
  menu-font-weight: font-weight-normal,
  footer-fg: color-fg-text,
+
+ version-select-highlight: #4479e7,
 ), docs-home, default);
 /* stylelint-enable foo */
 $nb-themes: nb-register-theme((
@@ -80,6 +82,7 @@ $nb-themes: nb-register-theme((
  sidebar-padding: 2rem,
  sidebar-shadow: none,
  color-fg-highlight: #4479e7,
+ version-select-highlight: color-fg-highlight,
  link-color: color-fg-highlight,
  link-color-hover: color-fg-highlight,
  link-color-visited: color-fg-highlight,

docs/app/@theme/theme.module.ts

@@ -16,6 +16,7 @@ import {
  NbSidebarModule,
  NbCardModule,
  NbCheckboxModule,
+ NbSelectModule,
 } from '@nebular/theme';
 
 import {
@@ -30,7 +31,7 @@ import {
  NgdColorSwatchDirective,
  NgdDescriptionDirective,
  NgdSearchComponent,
-} from './components/';
+} from './components';
 
 import {
  NgdHighlightService,
@@ -57,6 +58,7 @@ import {
  NbCardModule,
  NbMenuModule,
  NbTabsetModule,
+ NbSelectModule,
  RouterModule,
  ],
  declarations: [

docs/assets/ghspa.js

@@ -20,7 +20,7 @@
 
 ;(function(l, projectPages) {
 
- const versions = ['3.5.0'];
+ const versions = ['3.6.0'];
 
  var paths = l.pathname.split('/');
  var repo = projectPages ? '/' + paths[1] : '';

docs/environments/environment.prod.ts

@@ -11,4 +11,5 @@
 
 export const environment = {
  production: true,
+ versionsUrl: '/nebular/versions.json',
 };

docs/environments/environment.ts

@@ -11,4 +11,5 @@
 
 export const environment = {
  production: false,
+ versionsUrl: 'versions.json',
 };

docs/versions.json

@@ -0,0 +1,12 @@
+[
+ {
+ "version": "3.6.0",
+ "name": "3.6.0",
+ "path": "/nebular/3.6.0"
+ },
+ {
+ "version": "4.0.0",
+ "name": "4.0.0",
+ "path": "/nebular"
+ }
+]