From 11918dea914c39675d1ac3e11a8945828bf33db6 Mon Sep 17 00:00:00 2001 From: tinayuangao Date: Fri, 9 Mar 2018 16:37:11 -0800 Subject: [PATCH] feat: add version and version picker (#406) --- package.json | 4 +-- src/app/shared/footer/footer.ts | 10 ++---- src/app/shared/navbar/navbar.html | 3 ++ src/app/shared/navbar/navbar.ts | 3 +- .../shared/stackblitz/stackblitz-writer.ts | 3 +- src/app/shared/version-picker/index.ts | 1 + .../shared/version-picker/version-picker.html | 9 ++++++ .../shared/version-picker/version-picker.ts | 31 +++++++++++++++++++ src/app/shared/version/version.ts | 23 ++++++++++++++ tools/deploy.sh | 21 +++++++++++++ 10 files changed, 96 insertions(+), 12 deletions(-) create mode 100644 src/app/shared/version-picker/index.ts create mode 100644 src/app/shared/version-picker/version-picker.html create mode 100644 src/app/shared/version-picker/version-picker.ts create mode 100644 src/app/shared/version/version.ts create mode 100755 tools/deploy.sh diff --git a/package.json b/package.json index 473f05a53..7cc809f50 100644 --- a/package.json +++ b/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": { diff --git a/src/app/shared/footer/footer.ts b/src/app/shared/footer/footer.ts index 45bc625f3..e5d092b05 100644 --- a/src/app/shared/footer/footer.ts +++ b/src/app/shared/footer/footer.ts @@ -1,5 +1,5 @@ import {Component, NgModule} from '@angular/core'; -import {VERSION} from '@angular/material'; +import {materialVersion} from '../version/version' @Component({ selector: 'app-footer', @@ -7,13 +7,7 @@ import {VERSION} from '@angular/material'; styleUrls: ['./footer.scss'] }) export class Footer { - get version() { - const version = VERSION.full.match(/\d+\.\d+\.\d+/); - if (version) { - return version[0]; - } - return ''; - } + version = materialVersion; } diff --git a/src/app/shared/navbar/navbar.html b/src/app/shared/navbar/navbar.html index 2a9aaa4a1..b426bd988 100644 --- a/src/app/shared/navbar/navbar.html +++ b/src/app/shared/navbar/navbar.html @@ -11,6 +11,9 @@ [routerLink]="key">{{sections[key]}} Guides
+ diff --git a/src/app/shared/navbar/navbar.ts b/src/app/shared/navbar/navbar.ts index 4e1b25f24..f909fd8b8 100644 --- a/src/app/shared/navbar/navbar.ts +++ b/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], }) diff --git a/src/app/shared/stackblitz/stackblitz-writer.ts b/src/app/shared/stackblitz/stackblitz-writer.ts index 122516755..4bd09e79b 100644 --- a/src/app/shared/stackblitz/stackblitz-writer.ts +++ b/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, diff --git a/src/app/shared/version-picker/index.ts b/src/app/shared/version-picker/index.ts new file mode 100644 index 000000000..ea77e722c --- /dev/null +++ b/src/app/shared/version-picker/index.ts @@ -0,0 +1 @@ +export * from './version-picker'; diff --git a/src/app/shared/version-picker/version-picker.html b/src/app/shared/version-picker/version-picker.html new file mode 100644 index 000000000..f335fc079 --- /dev/null +++ b/src/app/shared/version-picker/version-picker.html @@ -0,0 +1,9 @@ + + + + diff --git a/src/app/shared/version-picker/version-picker.ts b/src/app/shared/version-picker/version-picker.ts new file mode 100644 index 000000000..084a9d220 --- /dev/null +++ b/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 {} diff --git a/src/app/shared/version/version.ts b/src/app/shared/version/version.ts new file mode 100644 index 000000000..1a9502ccd --- /dev/null +++ b/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' + } +]; diff --git a/tools/deploy.sh b/tools/deploy.sh new file mode 100755 index 000000000..d546e3a6b --- /dev/null +++ b/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 +