chore: site update

docs/010-020-changes.md

@@ -6,7 +6,7 @@ type: Advance
 
 `0.2` 最大的改变是将部分原本在 ng-alain 项目中文件进行独立拆分，这样对 ng-alain 在复用、更友好的升级问题上得到很好的解决。
 
-本次的变化对项目的改动其实不是很大，在开始阅读指引之前我建议先阅读入门指南序列文章（至少阅读 [关于 Delon](http://ng-alain.com/#/docs/delon) 文章），这样会更好的理解为何我要这么做。
+本次的变化对项目的改动其实不是很大，在开始阅读指引之前我建议先阅读入门指南序列文章（至少阅读 [关于 Delon](/docs/delon) 文章），这样会更好的理解为何我要这么做。
 
 当前 `0.2` 是以[独立分支](https://github.com/cipchk/ng-alain/tree/0.2.0)在存在，而 [ng-alain](https://cipchk.github.io/ng-alain/) github预览已经是 `0.2` 版本了。
 
@@ -89,7 +89,7 @@ export class CoreModule { }
 
 | 原组件名 | 新组件名 | 描述 |
 | ------- | ------ | ---- |
-| `fixed-btns` | `footer-toolbar` | [api](http://ng-alain.com/#/components/footer-toolbar) |
+| `fixed-btns` | `footer-toolbar` | [api](/components/footer-toolbar) |
 
 **g2升级至3.0**
 

docs/changelog.md

@@ -20,4 +20,4 @@ type: Other
 `2017-12-04`
 
 - 脚手架
-    - 引入 `@delon/*` 系列类库，极大简化 `core`、`shared`、`styles` 的使用方式；若 `0.1` 则请参考[升级指引](http://ng-alain.com/#/docs/010-020-changes)。
+    - 引入 `@delon/*` 系列类库，极大简化 `core`、`shared`、`styles` 的使用方式；若 `0.1` 则请参考[升级指引](/docs/010-020-changes)。

docs/graph.md

@@ -22,7 +22,7 @@ type: Advance
 - 带有时间轴的折线图（timeline）
 - 图表卡片（chart-card）
 
-[查看图表组件API文档](//ng-alain.com/#/components/charts)
+[查看图表组件API文档](//ng-alain.com/components/charts)
 
 ## 如何使用？
 

docs/how-dev.md

@@ -11,16 +11,16 @@ type: Basic
 当你开始着手在 ng-alain 基础上进行业务开发时，我建议你先了解一下以下文档，这对于亦或是团队每个成员都非常有帮助。
 
 + [Ant Desig 指引文章](https://ant.design/docs/spec/introduce-cn)
-+ [Ant Deisng for Angular](https://ng.ant.design/#/docs/angular/introduce)
++ [Ant Deisng for Angular](https://ng.ant.design/docs/angular/introduce)
 + [Antv 图表](https://antv.alipay.com/zh-cn/index.html)
 
-ng-alain 的基础组件库来自 ng-zorro-antd，因此对于这类组件的使用方式你可以通过其官网得到很细说 [API](https://ng.ant.design/) 文档说明，而对于 ng-alain 提供的组件则通过[组件页](http://ng-alain.com/#/components)获取。
+ng-alain 的基础组件库来自 ng-zorro-antd，因此对于这类组件的使用方式你可以通过其官网得到很细说 [API](https://ng.ant.design/) 文档说明，而对于 ng-alain 提供的组件则通过[组件页](/components)获取。
 
 > ng-alain 依赖了一个 [ng-zorro-antd-extra](https://cipchk.github.io/ng-zorro-antd-extra/) 类库，这是它和 ng-zorro-antd 一样，只是提供了一些 3.0 才会有的组件临时解决方案。
 
 ## 如何开始？
 
-ng-alain 的目录非常简单，只有简单几个文件；默认情况下，包含了 [i18n](http://ng-alain.com/#/docs/i18n)、[acl](http://ng-alain.com/#/docs/acl)、[页面模板](http://ng-alain.com/#/docs/template)等文件。
+ng-alain 的目录非常简单，只有简单几个文件；默认情况下，包含了 [i18n](/docs/i18n)、[acl](/docs/acl)、[页面模板](/docs/template)等文件。
 
 > 很多情况下，可能你不需要这些功能，上述每个链接中都包含着如何去删除它们的方法。
 

docs/layout.md

@@ -6,7 +6,7 @@ title:
 type: Basic
 ---
 
-页面整体布局是指包含导航、侧边栏、内容区域、页脚等最外层的框架结构。在页面之中，也有很多区块的布局结构，目前 ng-zorro-antd 有两套布局方案：[Layout](https://ng.ant.design/#/components/layout) 和 [Grid](https://ng.ant.design/#/components/grid)；而后者是日常都需要的，诸如：表单、列表页、明细页等多多少少都会涉及。
+页面整体布局是指包含导航、侧边栏、内容区域、页脚等最外层的框架结构。在页面之中，也有很多区块的布局结构，目前 ng-zorro-antd 有两套布局方案：[Layout](https://ng.ant.design/components/layout) 和 [Grid](https://ng.ant.design/components/grid)；而后者是日常都需要的，诸如：表单、列表页、明细页等多多少少都会涉及。
 
 ## 根据不同场景区分抽离布局组件
 

docs/service.md

@@ -10,11 +10,11 @@ type: Theme
 
 ## _HttpClient
 
-见[网络请求](http://localhost:4200/#/docs/net)章节。
+见[网络请求](http://localhost:4200/docs/net)章节。
 
 ## MenuService
 
-菜单服务的数据格式是一个 [Menu](https://github.com/cipchk/delon/blob/master/src/core/theme/services/menu/menu.service.ts#L4) 数组，其中 `text` 属性表示菜单文本为必填项，而且本身并不受外部组件的影响（例如[sidebar-nav](http://ng-alain.com/#/components/sidebar-nav)组件），这是因为菜单是贯穿整个项目必不可少的组成部分，而将其独立成一个服务可以更有效被使用，例如：动态生成导航、标题等。
+菜单服务的数据格式是一个 [Menu](https://github.com/cipchk/delon/blob/master/src/core/theme/services/menu/menu.service.ts#L4) 数组，其中 `text` 属性表示菜单文本为必填项，而且本身并不受外部组件的影响（例如[sidebar-nav](/components/sidebar-nav)组件），这是因为菜单是贯穿整个项目必不可少的组成部分，而将其独立成一个服务可以更有效被使用，例如：动态生成导航、标题等。
 
 **建议：** 在 Angular 启动服务（[startup.service.ts](https://github.com/cipchk/ng-alain/blob/0.2.0/src/app/core/services/startup.service.ts)）从远程获取到菜单数据后，调用 `add()` 方法。
 

docs/use-components-alone.md

@@ -14,7 +14,7 @@ ng-alain 脚手架内用到的组件分为三种：
 
 - [ng-zorro-antd](https://ng-zorro.github.io) 组件
 - [ng-zorro-antd-extra](https://cipchk.github.io/ng-zorro-antd-extra/#/) 组件
-- [@delon/abc](http://ng-alain.com/#/components) 组件
+- [@delon/abc](/components) 组件
 
 这三种组件都是独立发布在 Npm 上面，因此你都可以单独去使用它们：
 
@@ -28,7 +28,7 @@ import { AlainABCModule } from '@delon/abc';
 
 ## 文档和反馈
 
-你可以在 [组件页面](http://ng-alain.com/#/components) 找到所有的业务组件，以及相关的演示和 API 文档。
+你可以在 [组件页面](/components) 找到所有的业务组件，以及相关的演示和 API 文档。
 
 组件会随着脚手架的更新而不断迭代，有任何问题和需求可以反馈到 [这里](https://github.com/cipchk/ng-alain/issues)。
 

package.json

@@ -32,13 +32,14 @@
 		"e2e": "ng e2e",
 		"site:clean": "rimraf site/app/routes/gen",
 		"site:gen": "gulp site:build",
-		"site:serve:cli": "ng serve --app site -o",
+		"site:serve:cli": "ng serve --app site -o --bh /",
 		"site:serve": "npm-run-all -s site:clean site:gen site:serve:cli",
-		"site:ts": "ng build --app site --prod --build-optimizer --bh ./",
+		"site:ts": "ng build --app site --prod --build-optimizer --bh /",
 		"site:build": "npm-run-all -s site:clean site:gen site:ts site:cname",
 		"site:cname": "cname site/dist",
+		"site:404": "cd ./site/dist && cpy index.html --rename=404.html ./",
 		"site:deploy": "gh-pages -d site/dist",
-		"site:release": "npm-run-all -s site:build site:deploy",
+		"site:release": "npm-run-all -s site:build site:404 site:deploy",
 		"build:package": "npm-run-all -s clean:tmp:lib build:copy-sources build:ts build:inline-resources build:bundle clean:tmp",
 		"build:ts": "tsc -p tsconfig.publish.json && ngc -p tsconfig.publish.json",
 		"build:prod": "npm run build -- --prod",

site/app/app.component.ts

@@ -11,6 +11,7 @@ import { I18NService } from './i18n/service';
 })
 export class AppComponent implements OnInit {
     @HostBinding('class.layout-fixed') isHome = false;
+    private prevUrl: string;
 
     constructor(
         private i18n: I18NService,
@@ -21,11 +22,16 @@ export class AppComponent implements OnInit {
     ngOnInit() {
         this.router.events.pipe(
             filter(evt => evt instanceof NavigationEnd),
-            map(() => this.router.url)
+            map(() => this.router.url.split('#')[0])
         ).subscribe(url => {
-            // update i18n
             const urlLang = this.router.parseUrl(url).queryParams['lang'];
-            if (typeof urlLang !== 'undefined') {
+            const hasLang = typeof urlLang !== 'undefined';
+
+            if (!hasLang && url === this.prevUrl) return;
+            this.prevUrl = url;
+
+            // update i18n
+            if (hasLang) {
                 const lang = urlLang || this.i18n.defaultLang;
                 if (this.i18n.lang !== lang) {
                     this.i18n.use(<any>lang);

site/app/core/meta.service.ts

@@ -80,7 +80,7 @@ export class MetaService {
 
     genMenus(url: string): void {
         const arr = url.split('?')[0].split('/');
-        if (arr.length <= 2) return ;
+        if (arr.length <= 1) return ;
 
         const categoryName = arr[1].toLowerCase();
         const category = META.types.find(w => w.name === categoryName);

site/app/i18n/service.ts

@@ -42,4 +42,8 @@ export class I18NService {
     fanyi(key: string) {
         return this.translate.instant(key);
     }
+
+    get(i: any) {
+        return typeof i === 'string' ? i : i[this.lang] || i[this.defaultLang] || '';
+    }
 }

site/app/layout/footer/footer.component.html

@@ -37,7 +37,7 @@ <h2>{{'app.footer.resources' | translate}}</h2>
         <div nz-col nzXs="24" nzSm="24" nzLg="6">
             <div class="footer-center">
                 <h2>{{'app.footer.community' | translate}}</h2>
-                <div><a href="//ng-alain.com/#/docs/changelog" target="_blank">{{ 'app.footer.change-log' | translate}}</a></div>
+                <div><a href="/docs/changelog" target="_blank">{{ 'app.footer.change-log' | translate}}</a></div>
                 <div><a routerLink="/docs/faq">{{ 'app.footer.faq' | translate}}</a></div>
                 <div><a href="//github.com/cipchk/ng-alain/issues" target="_blank">{{ 'app.footer.issues' | translate}}</a></div>
             </div>

site/app/layout/footer/footer.component.ts

@@ -15,7 +15,7 @@ export class FooterComponent {
     constructor(public i18n: I18NService, private router: Router) {}
 
     langChange() {
-        let url = this.router.url.split('?')[0];
+        let url = this.router.url.split('#')[0];
         url += `?lang=${this.i18n.isZh ? 'en-US' : 'zh-CN'}`;
 
         this.router.navigateByUrl(url);

site/app/routes/404/404.component.html

@@ -0,0 +1,8 @@
+<div id="page-404">
+    <section>
+        <h1>404</h1>
+        <p>你要找的页面不存在
+            <a routerLink="/">返回首页</a>
+        </p>
+    </section>
+</div>

site/app/routes/404/404.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'not-found',
+    templateUrl: './404.component.html'
+})
+export class NotFoundComponent {}

site/app/routes/routes.module.ts

@@ -3,9 +3,11 @@ import { RouterModule } from '@angular/router';
 import { SharedModule } from '../shared/shared.module';
 import { LayoutComponent } from '../layout/layout.component';
 import { HomeComponent } from './home/home.component';
+import { NotFoundComponent } from './404/404.component';
 
 const COMPONENTS = [
-    HomeComponent
+    HomeComponent,
+    NotFoundComponent
 ];
 
 const routes = [
@@ -20,13 +22,14 @@ const routes = [
             // endregion
         ]
     },
-    { path: '**', redirectTo: 'home' }
+    { path: '404', component: NotFoundComponent },
+    { path: '**', redirectTo: '404' }
 ];
 
 @NgModule({
     imports: [
         SharedModule,
-        RouterModule.forRoot(routes, { useHash: true })
+        RouterModule.forRoot(routes)
     ],
     declarations: [
         ...COMPONENTS

site/app/shared/components/code-box/code-box.component.html

@@ -7,13 +7,12 @@
 </section>
 <section class="code-box-meta markdown">
     <div class="code-box-title">
-        {{get(item.meta.title)}}
+        {{i18n.get(item.meta.title)}}
         <edit-button [url]="item.source"></edit-button>
     </div>
-    <div [innerHTML]="get(item.summary)"></div>
+    <div [innerHTML]="i18n.get(item.summary)"></div>
     <nz-tooltip [nzTitle]="expand ? 'Hide Code' : 'Show Code'">
         <span class="code-expand-icon" nz-tooltip>
-
             <img
                 alt="expand code"
                 src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"

site/app/shared/components/code-box/code-box.component.ts

@@ -28,11 +28,7 @@ export class CodeBoxComponent implements OnInit, OnDestroy {
 
     @Input() expand: boolean = false;
 
-    get(i: any) {
-        return i ? i[this.i18n.lang] || i[this.i18n.defaultLang] || i : '';
-    }
-
-    constructor(private i18n: I18NService) {}
+    constructor(public i18n: I18NService) {}
 
     handle() {
         this.expand = !this.expand;

site/app/shared/components/content/content.component.html

@@ -18,8 +18,8 @@
 <div nz-row *ngIf="meta.next || meta.prev">
     <div nz-col nzXs="24" nzSm="24" nzMd="20" nzOffset="4">
         <section class="prev-next-nav">
-            <a class="prev-page" *ngIf="meta.prev" routerLink="{{meta.prev.url}}"><span>{{get(meta.prev.title)}}</span><span class="chinese">{{meta.prev.subtitle}}</span></a>
-            <a class="next-page" *ngIf="meta.next" routerLink="{{meta.next.url}}"><span>{{get(meta.next.title)}}</span><span class="chinese">{{meta.next.subtitle}}</span></a>
+            <a class="prev-page" *ngIf="meta.prev" routerLink="{{meta.prev.url}}"><span>{{i18n.get(meta.prev.title)}}</span><span class="chinese">{{meta.prev.subtitle}}</span></a>
+            <a class="next-page" *ngIf="meta.next" routerLink="{{meta.next.url}}"><span>{{i18n.get(meta.next.title)}}</span><span class="chinese">{{meta.next.subtitle}}</span></a>
         </section>
     </div>
 </div>

site/app/shared/components/content/content.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { SettingsService } from '@delon/theme';
 import { I18NService } from '../../../i18n/service';
 import { MetaService } from '../../../core/meta.service';
@@ -11,18 +11,10 @@ import { MetaService } from '../../../core/meta.service';
         '[class.main-wrapper]': 'true'
     }
 })
-export class ContentComponent implements OnInit {
-
+export class ContentComponent {
     constructor(
         public meta: MetaService,
         public i18n: I18NService,
         public settings: SettingsService
     ) {}
-
-    ngOnInit() {
-    }
-
-    get(i: any) {
-        return i ? i[this.i18n.lang] || i[this.i18n.defaultLang] || i : '';
-    }
 }

site/app/shared/components/docs/docs.component.html

@@ -1,6 +1,6 @@
-<div class="toc-affix" *ngIf="get(item.toc)?.length">
+<div class="toc-affix" *ngIf="i18n.get(item.toc)?.length">
     <ul class="toc">
-        <li *ngFor="let item of get(item.toc)" class="depth-{{item.h}}">
+        <li *ngFor="let item of i18n.get(item.toc)" class="depth-{{item.h}}">
             <a (click)="goTo(item)" title="{{item.title}}">{{item.title}}</a>
         </li>
     </ul>
@@ -15,9 +15,9 @@
     <h1>
         {{meta.item.title}}
         <span *ngIf="meta.item.subtitle" class="subtitle">{{meta.item.subtitle}}</span>
-        <edit-button [url]="get(item.source)"></edit-button>
+        <edit-button [url]="i18n.get(item.source)"></edit-button>
     </h1>
-    <div *ngIf="get(item.content).content" [innerHTML]="get(item.content).content"></div>
+    <div *ngIf="i18n.get(item.content).content" [innerHTML]="safeHtml(i18n.get(item.content).content)"></div>
     <ng-container *ngIf="meta.item.module">
         <p>{{'app.component.refer.title' | translate}}</p>
         <pre class="typescript hljs"><span class="hljs-section">import</span> &#123; <span class="hljs-attribute">{{meta.item.module}}</span> &#125; from <span class="hljs-string">'{{meta.item.module_name}}'</span>;</pre>
@@ -27,8 +27,10 @@ <h1>
                 {{'app.component.refer.link' | translate}}
             </a>
         </p>
-        <h2 *ngIf="item.demo" style="margin-bottom: 32px;">{{'app.component.examples' | translate}}</h2>
     </ng-container>
+    <h2 *ngIf="item.demo" id="{{'app.component.examples' | translate}}" style="margin-bottom: 32px;">
+        {{'app.component.examples' | translate}}
+    </h2>
 </section>
 <ng-container *ngIf="item.demo"><ng-content></ng-content></ng-container>
-<div class="markdown api-container" *ngIf="get(item.content).api" [innerHTML]="get(item.content).api"></div>
+<div class="markdown api-container" *ngIf="i18n.get(item.content).api" [innerHTML]="safeHtml(i18n.get(item.content).api)"></div>