feat(docs): use path-location instead of hash

akveo · Jun 14, 2018 · 61d4139 · 61d4139
1 parent 6af2694
commit 61d4139
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 115 deletions.
diff --git a/angular.json b/angular.json
@@ -258,6 +258,7 @@
             "polyfills": "docs/polyfills.ts",
             "assets": [
               "docs/assets",
+              "docs/404.html",
               "docs/favicon.ico",
               "docs/favicon.png",
               "docs/google46533d2e7a851062.html"
@@ -345,98 +346,6 @@
         }
       }
     },
-    "examples": {
-      "root": "",
-      "sourceRoot": "docs",
-      "projectType": "application",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "docs/dist/run",
-            "index": "docs/index.html",
-            "main": "docs/main.ts",
-            "tsConfig": "docs/tsconfig.app.json",
-            "polyfills": "docs/polyfills.ts",
-            "assets": [
-              "docs/favicon.ico",
-              "docs/favicon.png"
-            ],
-            "styles": [
-              "node_modules/bootstrap/scss/bootstrap-reboot.scss",
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
-              "docs/app/@theme/styles/styles.scss"
-            ]
-          },
-          "configurations": {
-            "production": {
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "extractCss": true,
-              "namedChunks": false,
-              "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "fileReplacements": [
-                {
-                  "replace": "docs/environments/environment.ts",
-                  "with": "docs/environments/environment.prod.ts"
-                }
-              ]
-            }
-          }
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "docs:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "docs:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "docs:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "docs/test.ts",
-            "karmaConfig": "./karma.conf.js",
-            "polyfills": "docs/polyfills.ts",
-            "tsConfig": "docs/tsconfig.spec.json",
-            "scripts": [
-            ],
-            "styles": [
-              "node_modules/bootstrap/scss/bootstrap-reboot.scss",
-              "node_modules/nebular-icons/scss/nebular-icons.scss",
-              "docs/app/@theme/styles/styles.scss"
-            ],
-            "assets": [
-              "docs/favicon.ico",
-              "docs/favicon.png"
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "docs/tsconfig.spec.json",
-              "docs/tsconfig.app.json"
-            ],
-            "exclude": []
-          }
-        }
-      }
-    },
     "docs-e2e": {
       "root": "",
       "sourceRoot": "",

diff --git a/docs/404.html b/docs/404.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>404</title>
+
+  <base href="/nebular/">
+
+  <script type="text/javascript" src="assets/ghspa.js"></script>
+</head>
+
+<body>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+</body>
+
+</html>
diff --git a/docs/app/@theme/components/footer/footer.component.html b/docs/app/@theme/components/footer/footer.component.html
@@ -1,5 +1,5 @@
 <div class="logo">
-  <a href="http://akveo.com" target="_blank"><img src="../../assets/img/akveo-logo.png"></a>
+  <a href="http://akveo.com" target="_blank"><img src="assets/img/akveo-logo.png"></a>
 </div>
 <div>
   <ul>

diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts
@@ -16,8 +16,7 @@ import {
   NbMenuModule,
   NbTabsetModule,
   NbProgressBarModule,
-  NbCheckboxModule, 
-  NbSearchModule,
+  NbCheckboxModule,
 } from '@nebular/theme';
 import { NgdAppComponent } from './app.component';
 import { routes } from './app.routes';
@@ -43,7 +42,7 @@ export const DOCS = new InjectionToken<any>('Docs Structure');
     NbMenuModule.forRoot(),
     NbThemeModule.forRoot({ name: '' }),
     NbSidebarModule.forRoot(),
-    RouterModule.forRoot(routes, { useHash: true }),
+    RouterModule.forRoot(routes, { useHash: false }),
   ],
   declarations: [
     NgdAppComponent,

diff --git a/.../app/blocks/components/components-overview-block/components-overview-block.component.html b/.../app/blocks/components/components-overview-block/components-overview-block.component.html
@@ -7,7 +7,7 @@
     <a class="component-navigate-link" [routerLink]="component.link">
       <nb-card [attr.title]="component.name">
         <nb-card-body>
-          <img class="component-icon" src="/assets/images/components/{{ component.icon }}"
+          <img class="component-icon" src="assets/images/components/{{ component.icon }}"
             [attr.alt]="component.name">
           <label class="component-name">{{ component.name }}</label>
         </nb-card-body>

diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.html b/docs/app/blocks/components/live-example-block/live-example-block.component.html
@@ -20,6 +20,6 @@
   </div>
 </section>
 <div class="iframe-container">
-  <iframe #iframe *ngIf="content.id" [src]="url" [style.height.px]="iframeHeight" [class.loading]="loading"></iframe>
+  <iframe #iframe *ngIf="content.id" [style.height.px]="iframeHeight" [class.loading]="loading"></iframe>
 </div>
 <span class="icon-loading feather-more-vertical" *ngIf="loading"></span>
diff --git a/docs/app/blocks/components/live-example-block/live-example-block.component.ts b/docs/app/blocks/components/live-example-block/live-example-block.component.ts
@@ -10,20 +10,20 @@ import {
   HostBinding,
   Output,
   EventEmitter,
+  AfterViewInit,
 } from '@angular/core';
-import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Location } from '@angular/common';
 import { takeWhile } from 'rxjs/operators';
 import { NgdIframeCommunicatorService } from '../../../@theme/services';
 import { NgdExampleView } from '../../enum.example-view';
-import { environment } from '../../../../environments/environment';
 
 @Component({
   selector: 'ngd-live-example-block',
   styleUrls: ['./live-example-block.component.scss'],
   templateUrl: './live-example-block.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NgdLiveExampleBlockComponent implements OnInit, OnDestroy {
+export class NgdLiveExampleBlockComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @ViewChild('iframe') iframe: ElementRef;
   @Input() content: any;
@@ -51,22 +51,20 @@ export class NgdLiveExampleBlockComponent implements OnInit, OnDestroy {
   currentTheme: string = 'default';
   loading = true;
 
-  get url(): SafeUrl {
-    return this.sanitizer
-      .bypassSecurityTrustResourceUrl(`${environment.examplesUrl}#/example/${this.content.id}`);
+  get url(): string {
+    return this.location.prepareExternalUrl(`example/${this.content.id}`);
   }
 
   get iframeWindow(): Window {
     return this.iframe.nativeElement.contentWindow;
   }
 
   constructor(private changeDetection: ChangeDetectorRef,
-              private sanitizer: DomSanitizer,
-              private communicator: NgdIframeCommunicatorService,
-  ) {
+              private location: Location,
+              private communicator: NgdIframeCommunicatorService) {
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
     this.communicator.receive(this.content.id)
       .pipe(takeWhile(() => this.alive))
       .subscribe(it => {
@@ -76,7 +74,16 @@ export class NgdLiveExampleBlockComponent implements OnInit, OnDestroy {
       });
   }
 
-  ngOnDestroy(): void {
+  ngAfterViewInit() {
+    // we cannot set src using angular binding
+    // as it will trigger change detection and reload iframe
+    // which in its turn will send a new height
+    // and we would need to set the height and trigger change detection again
+    // resulting in infinite loop
+    this.iframe.nativeElement.src = this.url;
+  }
+
+  ngOnDestroy() {
     this.alive = false;
   }
 

diff --git a/docs/assets/ghspa.js b/docs/assets/ghspa.js
@@ -0,0 +1,54 @@
+/**
+ *
+ *  ____ _ ___ _  _ _  _ ___     ___  ____ ____ ____ ____    ____ ___  ____
+ *  | __ |  |  |__| |  | |__]    |__] |__| | __ |___ [__     [__  |__] |__|
+ *  |__] |  |  |  | |__| |__]    |    |  | |__] |___ ___]    ___] |    |  |
+ *
+ *  Easy way to enable Single Page Applications for GitHub Pages
+ *
+ *  This project was released under MIT license.
+ *
+ *  @link      https://github.com/rafrex/spa-github-pages
+ *  @author    Rafael Pedicini <code@rafrex.com>
+ *  @link      http://websemantics.ca
+ *  @author    Adnan M.Sagar, PhD. <adnan@websemantics.ca>
+ *
+ *  @param {Object} l, the document current location
+ *  @param {Boolean} projectPages, true by default, https://help.github.com/articles/user-organization-and-project-pages
+ *
+ */
+
+;(function(l, projectPages) {
+
+  var repo = projectPages ? '/' + l.pathname.split('/')[1] : '';
+
+  /* redirect all 404 trafic to index.html */
+  function redirect() {
+    l.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + repo + '/?' +
+      (l.pathname ? 'p=' + l.pathname.replace(/&/g, '~and~').replace(repo, '') : '') +
+      (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+      (l.hash))
+  }
+
+  /* resolve 404 redirects into internal routes */
+  function resolve() {
+    if (l.search) {
+      var q = {};
+      l.search.slice(1).split('&').forEach(function(v) {
+        var a = v.split('=');
+        q[a[0]] = a.slice(1).join('=').replace(/~and~/g, '&')
+      });
+      if (q.p !== undefined) {
+        window.history.replaceState(null, null,
+          repo + (q.p || '') +
+          (q.q ? ('?' + q.q) : '') +
+          l.hash
+        )
+      }
+    }
+  }
+
+  /* if current document is 404 page page, redirect to index.html otherwise resolve */
+  document.title === '404' ? redirect() : resolve()
+
+}(window.location, window.projectPages || true ));
diff --git a/docs/environments/environment.prod.ts b/docs/environments/environment.prod.ts
@@ -11,5 +11,4 @@
 
 export const environment = {
   production: true,
-  examplesUrl: 'run/',
 };
diff --git a/docs/environments/environment.ts b/docs/environments/environment.ts
@@ -11,5 +11,4 @@
 
 export const environment = {
   production: false,
-  examplesUrl: '',
 };
diff --git a/docs/index.html b/docs/index.html
@@ -12,7 +12,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="favicon.png">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-
+  <script type="text/javascript" src="assets/ghspa.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

diff --git a/package.json b/package.json
@@ -26,9 +26,8 @@
     "docs:prepare": "npm-run-all docs:parse",
     "docs:start": "npm start -- docs --port 4100",
     "docs:serve": "npm-run-all docs:prepare docs:start",
-    "docs:examples:build": "npm run build:prod -- examples --base-href '/run/'",
-    "docs:build": "npm run docs:prepare && npm run build:prod -- docs --base-href '' && npm run docs:examples:build",
-    "docs:gh-pages": "npm run docs:prepare && npm run docs:build && npm run ngh -- --dir ./docs/dist",
+    "docs:build": "npm run docs:prepare && npm run build:prod -- docs --base-href '/nebular/'",
+    "docs:gh-pages": "npm run docs:build && npm run ngh -- --dir ./docs/dist",
     "build": "ng build",
     "build:prod": "npm run build -- --prod --aot",
     "build:wp": "npm run build:prod -- playground-wp",