build(deps): bump engine.io from 4.1.1 to 4.1.2

.gitignore

@@ -52,3 +52,5 @@ ui-debug.log
 #System Files
 .DS_Store
 Thumbs.db
+
+/material-cn-prebuilt

package.json

@@ -66,6 +66,8 @@
     "@angular-eslint/template-parser": "^13.1.0",
     "@angular/cli": "^14.0.0",
     "@angular/compiler-cli": "^14.0.0",
+    "@awesome-fe/prerender": "^0.0.8",
+    "@awesome-fe/translate": "^1.1.3",
     "@types/imagemin": "^7.0.0",
     "@types/jasmine": "^3.7.7",
     "@types/node": "^14.14.22",
@@ -78,6 +80,7 @@
     "eslint-plugin-jsdoc": "^32.3.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "firebase-tools": "^11.0.1",
+    "http-server-spa": "^1.3.0",
     "imagemin": "^7.0.1",
     "imagemin-pngquant": "^9.0.2",
     "jasmine-core": "^3.7.1",

scenes/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ]
+  }
+}

scripts/ci/deploy-cn.sh

@@ -0,0 +1,30 @@
+#!/usr/bin/env bash
+
+set -e
+set -x
+
+yarn build:content
+
+yarn prod-build
+
+npx nt mark './dist/**/*.html'
+
+commitSha=$(git rev-parse --short HEAD)
+commitMessage=$(git log --oneline -n 1)
+
+if [[ ! -d "./material-cn-prebuilt" ]]; then
+  git clone [email protected]:ng-docs/[email protected]:ng-docs/material-cn-prebuilt.git
+fi
+
+cp -r ./dist/material-angular-io/* ./material-cn-prebuilt
+
+cd ./material-cn-prebuilt
+
+cp index.html 404.html
+
+git add .
+git commit --allow-empty -am "${commitMessage}" || true
+
+git push prebuilt HEAD:master
+
+cd -

src/app/app-module.ts

@@ -1,6 +1,6 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {NgModule} from '@angular/core';
+import {APP_ID, NgModule} from '@angular/core';
 import {LocationStrategy, PathLocationStrategy} from '@angular/common';
 import {RouterModule} from '@angular/router';
 
@@ -14,18 +14,22 @@ const prefersReducedMotion = typeof matchMedia === 'function' ?
 
 @NgModule({
   imports: [
-    BrowserModule,
+    BrowserModule.withServerTransition({appId: 'material-docs'}),
     BrowserAnimationsModule.withConfig({disableAnimations: prefersReducedMotion}),
     RouterModule.forRoot(MATERIAL_DOCS_ROUTES, {
       scrollPositionRestoration: 'enabled',
       anchorScrolling: 'enabled',
-      relativeLinkResolution: 'corrected'
+      relativeLinkResolution: 'corrected',
     }),
     NavBarModule,
     CookiePopupModule,
   ],
   declarations: [MaterialDocsApp],
-  providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],
+  providers: [
+    {provide: LocationStrategy, useClass: PathLocationStrategy},
+    {provide: APP_ID, useFactory: () => 'material-docs'},
+  ],
   bootstrap: [MaterialDocsApp],
 })
-export class AppModule {}
+export class AppModule {
+}

src/app/pages/component-category-list/component-category-list.html

@@ -15,8 +15,8 @@
           alt=""
           role="presentation"
           aria-hidden="true">
-      <div class="docs-component-category-list-card-title">{{component.name}}</div>
-      <div class="docs-component-category-list-card-summary">{{component.summary}}</div>
+      <div class="docs-component-category-list-card-title">{{component.nameCn}}&nbsp;<small>{{component.name}}</small></div>
+      <div class="docs-component-category-list-card-summary">{{component.summaryCn}}</div>
     </div>
   </a>
 </div>

src/app/pages/component-category-list/component-category-list.ts

@@ -39,7 +39,8 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
       const sectionName = params['section'];
       const section = SECTIONS[sectionName];
       this._componentPageTitle.title = section.name;
-      this._categoryListSummary = section.summary;
+      this._componentPageTitle.titleCn = section.nameCn || '';
+      this._categoryListSummary = section.summaryCn || section.summary;
     });
   }
 

src/app/pages/component-page-header/component-page-header.html

@@ -3,5 +3,5 @@
     <mat-icon>menu</mat-icon>
   </button>
 
-  <h1>{{getTitle()}} </h1>
+  <h1>{{getTitleCn()}} <small>{{getTitle()}}</small></h1>
 </header>

src/app/pages/component-page-header/component-page-header.ts

@@ -17,6 +17,10 @@ export class ComponentPageHeader {
   getTitle() {
     return this._componentPageTitle.title;
   }
+
+  getTitleCn() {
+    return this._componentPageTitle.titleCn;
+  }
 }
 
 @NgModule({

src/app/pages/component-sidenav/component-nav.html

@@ -5,7 +5,7 @@
            [routerLink]="'/' + section+ '/' + component.id"
            routerLinkActive="docs-component-viewer-sidenav-item-selected"
            [attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
-          {{component.name}}
+          {{component.nameCn}}&nbsp;<small>{{component.name}}</small>
         </a>
       </mat-nav-list>
   </div>

src/app/pages/component-sidenav/component-nav.scss

@@ -0,0 +1,3 @@
+small {
+  opacity: 0.4;
+}

src/app/pages/component-viewer/component-api.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
   <span class="cdk-visually-hidden" tabindex="-1">
-    API for {{docItem.id}}
+    {{docItem.id}} 的 API
   </span>
 
   <!--
@@ -11,7 +11,7 @@
   <div class="docs-component-api">
     <doc-viewer [documentUrl]="getApiDocumentUrl(docItem)"
       class="docs-component-view-text-content"
-      (contentRendered)="updateTableOfContents(docItem.name, $event)">
+      (contentRendered)="updateTableOfContents(docItem.nameCn + ' API 目录', $event)">
     </doc-viewer>
 
     <doc-viewer *ngFor="let additionalApiDoc of docItem.additionalApiDocs; let index = index"

src/app/pages/component-viewer/component-examples.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
   <span class="cdk-visually-hidden" tabindex="-1">
-    Examples for {{docItem.id}}
+    {{docItem.id}} 的范例
   </span>
   <example-viewer
     *ngFor="let example of docItem.examples"

src/app/pages/component-viewer/component-overview.html

@@ -1,10 +1,10 @@
 <ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
   <h2 class="cdk-visually-hidden" tabindex="-1">
-    Overview for {{docItem.id}}
+    {{docItem.id}} 概览
   </h2>
   <doc-viewer [documentUrl]="getOverviewDocumentUrl(docItem)"
       class="docs-component-view-text-content docs-component-overview"
-      (contentRendered)="updateTableOfContents('Overview Content', $event)">
+      (contentRendered)="updateTableOfContents('概览目录', $event)">
   </doc-viewer>
   <table-of-contents #toc container=".mat-drawer-content" *ngIf="showToc | async"></table-of-contents>
 </ng-container>

src/app/pages/component-viewer/component-viewer.html

@@ -7,7 +7,7 @@
         *ngFor="let section of sections"
         [routerLink]="section.toLowerCase()"
         routerLinkActive #rla="routerLinkActive"
-        [active]="rla.isActive">{{section}}</a>
+        [active]="rla.isActive">{{titleOf(section)}}</a>
   </nav>
 
   <div class="docs-component-viewer-content">

src/app/pages/component-viewer/component-viewer.ts

@@ -54,7 +54,7 @@ export class ComponentViewer implements OnDestroy {
       if (docItemAndSection.doc !== undefined) {
         this.componentDocItem.next(docItemAndSection.doc);
         this._componentPageTitle.title = `${docItemAndSection.doc.name}`;
-
+        this._componentPageTitle.titleCn = `${docItemAndSection.doc.nameCn}`;
         if (docItemAndSection.doc.examples && docItemAndSection.doc.examples.length) {
           this.sections.add('examples');
         } else {
@@ -70,6 +70,19 @@ export class ComponentViewer implements OnDestroy {
     this._destroyed.next();
     this._destroyed.complete();
   }
+
+  titleOf(id: string): string {
+    switch (id) {
+      case 'overview':
+        return '概览';
+      case 'api':
+        return 'API';
+      case 'examples':
+        return '范例';
+      default:
+        return id;
+    }
+  }
 }
 
 /**

src/app/pages/guide-list/guide-list.html

@@ -1,16 +1,16 @@
 <header class="docs-primary-header">
-  <h1>Guides</h1>
+  <h1>指南 <small>Guides</small></h1>
 </header>
 
 <main focusOnNavigation aria-label="Guide list" id="guide-list" class="docs-guide">
   <div class="docs-guide-list">
   <a class='docs-guide-item' *ngFor="let guide of guideItems.getAllItems()"
      routerLink='/guide/{{guide.id}}'>
     <mat-card class="docs-guide-card">
-      <mat-card-title>{{guide.name}}</mat-card-title>
+      <mat-card-title>{{guide.nameCn}}</mat-card-title>
       <div class="docs-guide-card-divider"></div>
       <mat-card-content class="docs-guide-card-summary">
-        {{guide.overview}}
+        {{guide.overviewCn}}
       </mat-card-content>
     </mat-card>
   </a>

src/app/pages/guide-list/guide-list.ts

@@ -20,6 +20,7 @@ export class GuideList implements OnInit {
 
   ngOnInit(): void {
     this._componentPageTitle.title = 'Guides';
+    this._componentPageTitle.titleCn = '使用指南';
   }
 }
 

src/app/pages/guide-viewer/guide-viewer.html

@@ -1,11 +1,11 @@
 <div class="docs-primary-header">
-  <h1>{{guide?.name}}</h1>
+  <h1>{{guide?.nameCn}}&nbsp;<small>{{guide?.name}}</small></h1>
 </div>
 
 <div class="docs-guide-wrapper">
   <div class="docs-guide-toc-and-content">
     <doc-viewer class="docs-guide-content"
-                (contentRendered)="toc.addHeaders('Guide Content', $event); toc.updateScrollPosition()"
+                (contentRendered)="toc.addHeaders('指南目录', $event); toc.updateScrollPosition()"
                 [documentUrl]="guide?.document"
                 focusOnNavigation
                 id="guide-content"

src/app/pages/guide-viewer/guide-viewer.ts

@@ -36,11 +36,12 @@ export class GuideViewer implements OnInit {
   ngOnInit(): void {
     if (this.guide !== undefined) {
       this._componentPageTitle.title = this.guide.name;
+      this._componentPageTitle.titleCn = this.guide.nameCn;
     }
   }
 }
 
-const routes: Routes = [ {path : '', component : GuideViewer} ];
+const routes: Routes = [{path: '', component: GuideViewer}];
 
 // This module needs to include all of the modules required by the examples in the guides.
 // For example, the custom form-field guide requires the ReactiveFormsModule.
@@ -54,4 +55,5 @@ const routes: Routes = [ {path : '', component : GuideViewer} ];
   declarations: [GuideViewer],
   providers: [GuideItems],
 })
-export class GuideViewerModule {}
+export class GuideViewerModule {
+}