build: change iframe to local deploy (NG-ZORRO#2932)

* build: change iframe to local deploy

* fix: fix ci

close NG-ZORRO#2929

angular.json

@@ -5,30 +5,30 @@
   "projects": {
     "ng-zorro-antd-doc": {
       "root": "",
-      "sourceRoot": "site/src",
+      "sourceRoot": "site/doc",
       "projectType": "application",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist",
-            "index": "./site/src/index.html",
-            "main": "./site/src/main.ts",
-            "tsConfig": "./site/src/tsconfig.app.json",
-            "polyfills": "./site/src/polyfills.ts",
+            "index": "./site/doc/index.html",
+            "main": "./site/doc/main.ts",
+            "tsConfig": "./site/doc/tsconfig.app.json",
+            "polyfills": "./site/doc/polyfills.ts",
             "assets": [
-              "site/src/assets",
-              "site/src/favicon.ico",
-              "site/src/404.html",
+              "site/doc/assets",
+              "site/doc/favicon.ico",
+              "site/doc/404.html",
               {
                 "glob": "**/*",
                 "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
               },
-              "site/src/manifest.json"
+              "site/doc/manifest.json"
             ],
             "styles": [
-              "site/src/styles.less"
+              "site/doc/styles.less"
             ],
             "scripts": [
               "node_modules/hammerjs/hammer.min.js"
@@ -39,8 +39,8 @@
             "production": {
               "fileReplacements": [
                 {
-                  "replace": "./site/src/environments/environment.ts",
-                  "with": "./site/src/environments/environment.prod.ts"
+                  "replace": "./site/doc/environments/environment.ts",
+                  "with": "./site/doc/environments/environment.prod.ts"
                 }
               ],
               "optimization": true,
@@ -71,7 +71,77 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "site/src/tsconfig.app.json"
+              "site/doc/tsconfig.app.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "ng-zorro-antd-iframe": {
+      "root": "",
+      "sourceRoot": "site/iframe",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/iframe",
+            "index": "./site/iframe/index.html",
+            "main": "./site/iframe/main.ts",
+            "tsConfig": "./site/iframe/tsconfig.app.json",
+            "polyfills": "./site/iframe/polyfills.ts",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+                "output": "/assets/"
+              }
+            ],
+            "styles": [
+              "components/ng-zorro-antd.less"
+            ],
+            "es5BrowserSupport": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "./site/iframe/environments/environment.ts",
+                  "with": "./site/iframe/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "serviceWorker": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ng-zorro-antd-iframe:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ng-zorro-antd-iframe:build:production"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "site/iframe/tsconfig.app.json"
             ],
             "exclude": [
               "**/node_modules/**"

components/alert/demo/banner.md

@@ -1,6 +1,7 @@
 ---
 order: 6
-iframe: 250
+iframe:
+  height: 220
 title:
   zh-CN: 顶部公告
   en-US: Banner

components/layout/demo/fixed-sider.md

@@ -1,7 +1,6 @@
 ---
 order: 7
 iframe:
-  source: https://stackblitz.com/edit/ng-zorro-layout-fixed-sider?embed=1&file=src/main.ts&hideExplorer=1&hideNavigation=1&view=preview
   height: 360
 title:
   zh-CN: 固定侧边栏

components/layout/demo/fixed.md

@@ -1,7 +1,6 @@
 ---
 order: 6
 iframe:
-  source: https://stackblitz.com/edit/ng-zorro-layout-fixed?embed=1&file=src/main.ts&hideExplorer=1&hideNavigation=1&view=preview
   height: 360
 title:
   zh-CN: 固定头部

components/layout/demo/responsive.md

@@ -1,7 +1,6 @@
 ---
 order: 5
 iframe:
-  source: https://stackblitz.com/edit/ng-zorro-layout-responsive?embed=1&file=src/app/app.component.ts&hideExplorer=1&hideNavigation=1&view=preview
   height: 360
 title:
   zh-CN: 响应式布局

components/layout/demo/side.md

@@ -1,7 +1,6 @@
 ---
 order: 3
 iframe:
-  source: https://stackblitz.com/edit/ng-zorro-layout-sider?embed=1&file=src/main.ts&hideExplorer=1&hideNavigation=1&view=preview
   height: 360
 title:
   zh-CN: 侧边布局

components/layout/doc/index.en-US.md

@@ -83,6 +83,7 @@ The sidebar.
 | `[nzReverseArrow]` | reverse direction of arrow, for a sider that expands from the right | `boolean` | `false` |
 | `[nzTrigger]` | specify the customized trigger, set to null to hide the trigger | `string｜TemplateRef<void>` | - |
 | `[nzWidth]` | width of the sidebar | `number｜string` | `200` |
+| `[nzTheme]` | color theme of the sidebar | `'light'｜'dark'` | `dark` |
 | `(nzCollapsedChange)` | the callback function | `EventEmitter<boolean>` | - |
 
 #### breakpoint width

components/layout/doc/index.zh-CN.md

@@ -84,6 +84,7 @@ title: Layout
 | `[nzReverseArrow]` | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | `boolean` | `false` |
 | `[nzTrigger]` | 自定义 trigger，设置为 null 时隐藏 trigger | `string｜TemplateRef<void>` | - |
 | `[nzWidth]` | 宽度 | `number｜string` | `200` |
+| `[nzTheme]` | 主题颜色 | `'light'｜'dark'` | `dark` |
 | `(nzCollapsedChange)` | 展开-收起时的回调函数 | `EventEmitter<boolean>` | - |
 
 #### breakpoint width

components/layout/nz-sider.component.ts

@@ -2,7 +2,8 @@ import {
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Component, ElementRef,
+  Component,
+  ElementRef,
   EventEmitter,
   Host,
   HostBinding,
@@ -11,7 +12,8 @@ import {
   OnDestroy,
   OnInit,
   Optional,
-  Output, Renderer2,
+  Output,
+  Renderer2,
   TemplateRef,
   ViewChild,
   ViewEncapsulation
@@ -33,7 +35,8 @@ export type NzBreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
   changeDetection    : ChangeDetectionStrategy.OnPush,
   templateUrl        : './nz-sider.component.html',
   host               : {
-    '[class.ant-layout-sider-zero-width]': 'nzCollapsed && (nzCollapsedWidth===0)',
+    '[class.ant-layout-sider-zero-width]': 'nzCollapsed && nzCollapsedWidth === 0',
+    '[class.ant-layout-sider-light]'     : `nzTheme === 'light'`,
     '[style.flex]'                       : 'flexSetting',
     '[style.max-width.px]'               : 'widthSetting',
     '[style.min-width.px]'               : 'widthSetting',
@@ -52,6 +55,7 @@ export class NzSiderComponent implements OnInit, AfterViewInit, OnDestroy {
     xxl: '1600px'
   };
   @Input() nzWidth = 200;
+  @Input() nzTheme: 'light' | 'dark' = 'dark';
   @Input() nzCollapsedWidth = 80;
   @Input() nzBreakpoint: NzBreakPoint;
   @Input() @InputBoolean() nzReverseArrow = false;

package.json

@@ -8,7 +8,8 @@
   },
   "scripts": {
     "start": "ng serve --port 0",
-    "build": "node ./scripts/site/generate-site init && ng build",
+    "build-site": "node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod",
+    "build-iframe": "node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --project=ng-zorro-antd-iframe --prod --base-href ./",
     "test": "ng test --watch=false --code-coverage",
     "lint": "tslint -c tslint.json 'components/*/*.ts'",
     "release": "node ./scripts/publish/publish.js",
@@ -30,7 +31,7 @@
     "integration-rollup": "npm run generate && cd integration/rollup && npm run integration",
     "postgenerate": "node ./scripts/build/generate-less.js && cp README.md publish/README.md && npm run migration-styles && npm run schematic:generate",
     "generate": "ng build ng-zorro-antd-lib",
-    "pre-release": "npm run site:init && bash ./scripts/build/replace-publish.sh && npm run generate && node --max_old_space_size=5120 ./node_modules/@angular/cli/bin/ng build --prod && npm run helper"
+    "pre-release": "npm run site:init && bash ./scripts/build/replace-publish.sh && npm run generate && npm run build-site && npm run build-iframe && npm run helper"
   },
   "dependencies": {
     "@angular/cdk": "^7.3.0",

scripts/build/replace-publish.sh

@@ -1,2 +1,2 @@
-sed 's/components\/ng-zorro-antd.module.ts/publish/g' site/src/tsconfig.app.json > site/src/tsconfig.app.json_back
-mv site/src/tsconfig.app.json_back site/src/tsconfig.app.json
+sed 's/components\/ng-zorro-antd.module.ts/publish/g' site/tsconfig.app.json > site/tsconfig.app.json_back
+mv site/tsconfig.app.json_back site/tsconfig.app.json

scripts/publish/publish.js

@@ -43,8 +43,8 @@ function changeVersion() {
   log.info('Updating version number...');
 
   const packageJsonPath = path.join(__dirname, '../../components/package.json');
-  const appComponentPath = path.join(__dirname, '../site/_site/src/app/app.component.ts');
-  const codeBoxPath = path.join(__dirname, '../site/_site/src/app/share/nz-codebox/nz-codebox.component.ts');
+  const appComponentPath = path.join(__dirname, '../site/_site/doc/app/app.component.ts');
+  const codeBoxPath = path.join(__dirname, '../site/_site/doc/app/share/nz-codebox/nz-codebox.component.ts');
   const zorroVersionPath = path.join(__dirname, '../../components/version.ts');
 
   const packageJson = fs.readJsonSync(packageJsonPath);

scripts/schematics/set-theme.js

@@ -1,7 +1,7 @@
 const fs = require('fs-extra');
 const path = require('path');
 
-const theme = fs.readFileSync(path.resolve(__dirname, `../site/_site/src/theme.less`), 'utf8');
+const theme = fs.readFileSync(path.resolve(__dirname, `../site/_site/doc/theme.less`), 'utf8');
 fs.outputFileSync(
   path.resolve(__dirname, `../../schematics/utils/create-custom-theme.ts`),
 `export function createCustomTheme(): string {

scripts/site/_site/src/app/share/nz-codebox/nz-codebox.component.ts → scripts/site/_site/doc/app/share/nz-codebox/nz-codebox.component.ts

@@ -1,7 +1,6 @@
 import { DOCUMENT } from '@angular/common';
-import { Component, ElementRef, Inject, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, Input, ViewEncapsulation } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
-import { ActivatedRoute, Router } from '@angular/router';
 import sdk from '@stackblitz/sdk';
 import { environment } from '../../../environments/environment';
 
@@ -41,13 +40,13 @@ import { environment } from '../../../environments/environment';
         <div class="highlight">
           <div class="code-box-actions">
             <i [nzTitle]="'Edit On StackBlitz'" nz-tooltip nz-icon type="form" class="code-box-code-copy" (click)="openOnStackBlitz()"></i>
-            <i [nzTitle]="'Copy Code'" nz-tooltip nz-icon [type]="_copied?'check':'copy'" class="code-box-code-copy" [class.ant-tooltip-open]="_copied"
+            <i [nzTitle]="'Copy Code'" nz-tooltip nz-icon [type]="copied?'check':'copy'" class="code-box-code-copy" [class.ant-tooltip-open]="copied"
               (click)="copyCode(nzRawCode)"></i>
-            <i [nzTitle]="'Copy Generate Command'" *ngIf="nzGenerateCommand" nz-tooltip nz-icon [type]="_commandCopied?'check':'code'"
-              class="code-box-code-copy" [class.ant-tooltip-open]="_commandCopied" (click)="copyGenerateCommand(nzGenerateCommand)"></i>
+            <i [nzTitle]="'Copy Generate Command'" *ngIf="nzGenerateCommand" nz-tooltip nz-icon [type]="commandCopied?'check':'code'"
+              class="code-box-code-copy" [class.ant-tooltip-open]="commandCopied" (click)="copyGenerateCommand(nzGenerateCommand)"></i>
           </div>
           <ng-content select="[code]"></ng-content>
-          <nz-highlight [nzCode]="_code" [nzLanguage]="'typescript'"></nz-highlight>
+          <nz-highlight [nzCode]="nzCode" [nzLanguage]="'typescript'"></nz-highlight>
         </div>
       </section>
     </section>
@@ -56,14 +55,14 @@ import { environment } from '../../../environments/environment';
     './nz-codebox.less'
   ]
 })
-export class NzCodeBoxComponent implements OnInit {
-  _code: string;
-  _rawCode: string;
-  _copied = false;
-  _commandCopied = false;
+export class NzCodeBoxComponent {
+  rawCode: string;
+  copied = false;
+  commandCopied = false;
   showIframe: boolean;
   simulateIFrame: boolean;
   iframe: SafeUrl;
+  @Input() nzCode: string;
   @Input() nzTitle: string;
   @Input() nzExpanded = false;
   @Input() nzHref: string;
@@ -74,48 +73,40 @@ export class NzCodeBoxComponent implements OnInit {
   @Input() nzSelector = '';
   @Input() nzGenerateCommand = '';
 
-  @Input() set nzIframeSource(value: string) {
+  @Input()
+  set nzIframeSource(value: string) {
     this.showIframe = (value !== 'null') && environment.production;
     this.simulateIFrame = (value !== 'null') && !environment.production;
     this.iframe = this.sanitizer.bypassSecurityTrustResourceUrl(value);
   }
 
   @Input()
   get nzRawCode(): string {
-    return this._rawCode;
+    return this.rawCode;
   }
 
   set nzRawCode(value: string) {
-    this._rawCode = decodeURIComponent(value).trim();
+    this.rawCode = decodeURIComponent(value).trim();
   }
 
-  @Input()
-  get nzCode(): string {
-    return this._code;
-  }
-
-  set nzCode(value: string) {
-    this._code = value;
-  }
-
-  navigateToFragment() {
+  navigateToFragment(): void {
     window.location.hash = this.nzLink;
   }
 
-  copyCode(code) {
+  copyCode(code: string): void {
     this.copy(code).then(() => {
-      this._copied = true;
+      this.copied = true;
       setTimeout(() => {
-        this._copied = false;
+        this.copied = false;
       }, 1000);
     });
   }
 
   copyGenerateCommand(command) {
     this.copy(command).then(() => {
-      this._commandCopied = true;
+      this.commandCopied = true;
       setTimeout(() => {
-        this._commandCopied = false;
+        this.commandCopied = false;
       }, 1000);
     });
   }
@@ -416,10 +407,6 @@ export class AppModule { }
     });
   }
 
-  constructor(@Inject(DOCUMENT) private dom: any, private sanitizer: DomSanitizer, private _el: ElementRef, private activatedRoute: ActivatedRoute, private router: Router) {
-
-  }
-
-  ngOnInit() {
+  constructor(@Inject(DOCUMENT) private dom: any, private sanitizer: DomSanitizer) {
   }
 }

scripts/site/_site/doc/tsconfig.app.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.app.json",
+  "include": [
+    "../doc/**/*"
+  ]
+}

scripts/site/_site/iframe/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>