feat(website) live example (#36) (#37)

* add demo page

* merge frontend and website into 1 project

* implement demo page

* add firebase db rules

* implement demo diagram load

* fix demo diagram load

* demo page & deploy

Author: EvAlex

.gitignore

@@ -1 +1,2 @@
 EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams/wwwroot/
+EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/dist

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/.angular-cli.json

@@ -3,31 +3,59 @@
     "project": {
         "name": "db-diagrams"
     },
-    "apps": [{
-        "root": "src",
-        "outDir": "../EntityFrameworkCore.Diagrams/wwwroot/db-diagrams",
-        "assets": [
-            "assets",
-            "favicon.ico"
-        ],
-        "index": "index.html",
-        "main": "main.ts",
-        "polyfills": "polyfills.ts",
-        "test": "test.ts",
-        "tsconfig": "tsconfig.app.json",
-        "testTsconfig": "tsconfig.spec.json",
-        "prefix": "efd",
-        "styles": [
-            "../node_modules/material-design-icons/iconfont/material-icons.css",
-            "styles.scss"
-        ],
-        "scripts": [],
-        "environmentSource": "environments/environment.ts",
-        "environments": {
-            "dev": "environments/environment.ts",
-            "prod": "environments/environment.prod.ts"
+    "apps": [
+        {
+            "name": "efd",
+            "root": "src",
+            "outDir": "../EntityFrameworkCore.Diagrams/wwwroot/db-diagrams",
+            "assets": [
+                "assets",
+                "favicon.ico"
+            ],
+            "index": "index.html",
+            "main": "main.ts",
+            "polyfills": "polyfills.ts",
+            "test": "test.ts",
+            "tsconfig": "tsconfig.app.json",
+            "testTsconfig": "tsconfig.spec.json",
+            "prefix": "efd",
+            "styles": [
+                "../node_modules/material-design-icons/iconfont/material-icons.css",
+                "styles.scss"
+            ],
+            "scripts": [],
+            "environmentSource": "environments/environment.ts",
+            "environments": {
+                "dev": "environments/environment.ts",
+                "prod": "environments/environment.prod.ts"
+            }
+        },
+        {
+            "name": "efd-website",
+            "root": "src-website",
+            "outDir": "dist",
+            "assets": [
+                "assets",
+                "favicon.ico"
+            ],
+            "index": "index.html",
+            "main": "main.ts",
+            "polyfills": "polyfills.ts",
+            "test": "test.ts",
+            "tsconfig": "tsconfig.app.json",
+            "testTsconfig": "tsconfig.spec.json",
+            "prefix": "efd",
+            "styles": [
+                "styles.scss"
+            ],
+            "scripts": [],
+            "environmentSource": "environments/environment.ts",
+            "environments": {
+                "dev": "environments/environment.ts",
+                "prod": "environments/environment.prod.ts"
+            }
         }
-    }],
+    ],
     "e2e": {
         "protractor": {
             "config": "./protractor.conf.js"

website/.firebaserc renamed to EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/.firebaserc

@@ -0,0 +1,17 @@
+{
+    "rules": {
+        ".read": "auth != null",
+        ".write": "auth != null",
+        "diagrams": {
+            ".read": true,
+            ".write": "auth != null",
+            "$diagram_id": {
+                ".validate": "newData.hasChildren(['diagram', 'authorUid', 'timestamp']) && newData.child('authorUid').isString() && newData.child('timestamp').isNumber()",
+
+                "diagram": { ".validate": "newData.exists()" },
+                "authorUid": { ".validate": "newData.val() === auth.uid" },
+                "timestamp": { ".validate": "newData.val() <= now" }
+            }
+        }
+    }
+}

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/database.rules.json

@@ -0,0 +1,52 @@
+import fs = require('fs');
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/combineLatest';
+
+const exec = require('child_process').exec;
+
+const revision = new Observable<string>(s => {
+    exec('git rev-parse --short HEAD',
+        function (error: Error, stdout: Buffer, stderr: Buffer) {
+            if (error !== null) {
+                console.log('git error: ' + error + stderr);
+            }
+            s.next(stdout.toString().trim());
+            s.complete();
+        });
+});
+
+const branch = new Observable<string>(s => {
+    exec('git rev-parse --abbrev-ref HEAD',
+        function (error: Error, stdout: Buffer, stderr: Buffer) {
+            if (error !== null) {
+                console.log('git error: ' + error + stderr);
+            }
+            s.next(stdout.toString().trim());
+            s.complete();
+        });
+});
+
+Observable
+    .combineLatest(revision, branch)
+    .subscribe(([revision, branch]) => {
+        const fields = [
+            `version: '${process.env.npm_package_version}'`,
+            `revision: '${revision}'`,
+            `branch: '${branch}'`,
+            `repository: '${process.env.npm_package_repository_url}'`
+        ];
+        const indent = '    ';
+        const versionsObj = '{\n' + indent + fields.join(',\n' + indent) + '\n}';
+        console.log(versionsObj);
+
+        const content =
+`// this file is automatically generated by git-version.ts script
+export const versions = ${versionsObj};
+`;
+
+        fs.writeFileSync(
+            'src/environments/versions.ts',
+            content,
+            { encoding: 'utf8' }
+        );
+    });

website/firebase.json renamed to EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/firebase.json

@@ -1,14 +1,20 @@
 {
   "name": "db-diagrams",
   "version": "0.0.0",
+  "repository": {
+    "url": "https://github.com/EvAlex/ef-db-diagrams/",
+    "type": "git"
+  },
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve --app efd --port 4200",
+    "start-website": "ng serve --app efd-website --port 4201",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "deploy-website": "ts-node git-version.ts && ng build --app efd-website && firebase deploy"
   },
   "private": true,
   "dependencies": {
@@ -23,14 +29,17 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "angularfire2": "^4.0.0-rc.1",
     "core-js": "^2.4.1",
+    "firebase": "^4.2.0",
     "hammerjs": "^2.0.8",
     "material-design-icons": "^3.0.1",
     "rxjs": "^5.1.0",
+    "showdown": "^1.7.1",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.2.1",
+    "@angular/cli": "1.3.0-rc.5",
     "@angular/compiler-cli": "^4.0.0",
     "@angular/language-service": "^4.0.0",
     "@types/jasmine": "~2.5.53",

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/git-version.ts

@@ -3,13 +3,19 @@ import { Routes, RouterModule } from '@angular/router';
 import { HomepageComponent } from './components/homepage/homepage.component';
 import { GuidesComponent } from './components/guides/guides.component';
 import { GettingStartedComponent } from './components/getting-started/getting-started.component';
+import { DemoComponent } from './components/demo/demo.component';
 
 const routes: Routes = [
     {
         path: '',
         component: HomepageComponent,
         children: []
     },
+    {
+        path: 'demo',
+        component: DemoComponent,
+        children: []
+    },
     {
         path: 'guides',
         component: GuidesComponent,