feat: add version and version picker (#406)

Author: tinayuangao

package.json

@@ -14,8 +14,8 @@
     "build-themes": "bash ./tools/build-themes.sh",
     "prod-build": "npm run build-themes && ng build --aot --prod",
     "postinstall": "webdriver-manager update && bash ./tools/fetch-assets.sh",
-    "publish-prod": "npm run build-themes && ng build --aot --prod && firebase use material-angular-io && firebase deploy",
-    "publish-dev": "npm run build-themes && ng build --aot --prod && firebase use material2-docs-dev && firebase deploy"
+    "publish-prod": "bash ./tools/deploy.sh stable prod",
+    "publish-dev": "bash ./tools/deploy.sh"
   },
   "private": true,
   "dependencies": {

src/app/shared/footer/footer.ts

@@ -1,19 +1,13 @@
 import {Component, NgModule} from '@angular/core';
-import {VERSION} from '@angular/material';
+import {materialVersion} from '../version/version'
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.html',
   styleUrls: ['./footer.scss']
 })
 export class Footer {
-  get version() {
-    const version = VERSION.full.match(/\d+\.\d+\.\d+/);
-    if (version) {
-      return version[0];
-    }
-    return '';
-  }
+  version = materialVersion;
 }
 
 

src/app/shared/navbar/navbar.html

@@ -11,6 +11,9 @@
      [routerLink]="key">{{sections[key]}}</a>
   <a mat-button class="docs-navbar-hide-small docs-button" routerLink="guides">Guides</a>
   <div class="flex-spacer"></div>
+  <!-- TODO(tinayuangao): Uncomment this when we are ready for v6
+    <version-picker></version-picker>
+  -->
   <theme-picker></theme-picker>
   <a mat-button class="docs-button docs-navbar-hide-small" href="https://github.com/angular/material2"
      aria-label="GitHub Repository">

src/app/shared/navbar/navbar.ts

@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common';
 import {MatButtonModule, MatMenuModule} from '@angular/material';
 import {RouterModule} from '@angular/router';
 import {ThemePickerModule} from '../theme-picker/theme-picker';
+import {VersionPickerModule} from '../version-picker';
 import {SECTIONS} from '../documentation-items/documentation-items';
 
 const SECTIONS_KEYS = Object.keys(SECTIONS);
@@ -23,7 +24,7 @@ export class NavBar {
 }
 
 @NgModule({
-  imports: [MatButtonModule, MatMenuModule, RouterModule, ThemePickerModule, CommonModule],
+  imports: [MatButtonModule, MatMenuModule, RouterModule, ThemePickerModule, VersionPickerModule, CommonModule],
   exports: [NavBar],
   declarations: [NavBar],
 })

src/app/shared/stackblitz/stackblitz-writer.ts

@@ -3,6 +3,8 @@ import {Http} from '@angular/http';
 import {ExampleData} from '@angular/material-examples';
 import {VERSION} from '@angular/material';
 
+import {materialVersion} from '../version/version';
+
 const STACKBLITZ_URL = 'https://run.stackblitz.com/api/angular/v1';
 
 const COPYRIGHT =
@@ -21,7 +23,6 @@ const TEMPLATE_FILES = [
 
 const TAGS: string[] = ['angular', 'material', 'example'];
 const angularVersion = '^5.0.0';
-const materialVersion = '5.2.4';
 
 const dependencies = {
   '@angular/cdk': materialVersion,

src/app/shared/version-picker/index.ts

@@ -0,0 +1 @@
+export * from './version-picker';

src/app/shared/version-picker/version-picker.html

@@ -0,0 +1,9 @@
+<button mat-button [matMenuTriggerFor]="versionPicker">
+  {{materialVersion}}
+</button>
+<mat-menu #versionPicker="matMenu">
+  <button mat-menu-item *ngFor="let version of docVersions"
+          (click)="onVersionChanged(version)">
+    {{version.title}}
+  </button>
+</mat-menu>

src/app/shared/version-picker/version-picker.ts

@@ -0,0 +1,31 @@
+import {Component, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatButtonModule, MatMenuModule} from '@angular/material';
+import {docVersions, materialVersion, VersionInfo} from '../version/version'
+
+@Component({
+  selector: 'version-picker',
+  templateUrl: './version-picker.html'
+})
+export class VersionPicker {
+
+  _versionRegex = /\d+.\d+.\d+/;
+  docVersions = docVersions;
+
+  materialVersion = materialVersion;
+
+  displayVersion = materialVersion.match(this._versionRegex)[0];
+
+  onVersionChanged(version: VersionInfo) {
+    if (version.title.match(this._versionRegex)[0] !== this.displayVersion) {
+      window.location.assign(version.url);
+    }
+  }
+}
+
+@NgModule({
+  imports: [MatButtonModule, MatMenuModule, CommonModule],
+  exports: [VersionPicker],
+  declarations: [VersionPicker]
+})
+export class VersionPickerModule {}

src/app/shared/version/version.ts

@@ -0,0 +1,23 @@
+import {VERSION} from '@angular/material';
+
+/** This material version will be used in footer and stackblitz. */
+export const materialVersion = VERSION.full;
+
+/** Version information with title and redirect url */
+export interface VersionInfo {
+  url: string;
+  title: string;
+}
+
+/** Doc site versions. We update the urls and titles manually */
+// TODO(tinayuangao): Update the title with actual versions
+export const docVersions: VersionInfo[] = [
+  {
+    url: 'https://material.angular.io/',
+    title: '5.2.4'
+  },
+  {
+    url: `http://v5.material.angular.io`,
+    title: '6.0.0-beta.4'
+  }
+];

tools/deploy.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+set -eu -o pipefail
+
+declare -A PROJECT_ID
+
+#Firebase project Ids
+PROJECT_ID["stable", "dev"]="material2-docs-dev"
+PROJECT_ID["stable", "prod"]="material-angular-io"
+PROJECT_ID["v5", "dev"]="material2-docs-5"
+PROJECT_ID["v5", "prod"]="v5-material-angular-io"
+
+version=${1:-stable}
+mode=${2:-dev}
+projectId=${PROJECT_ID[$version, $mode]}
+
+npm run build-themes
+ng build --aot --prod
+firebase use $projectId
+firebase deploy
+