feat(demos): Improvements and move to CLI (#1588)

- Moved demo app to Angular CLI.
- Use `highlight.js` for code snippets
- New and improved examples

related issue #1158

Author: trimox

.gitignore

@@ -7,6 +7,8 @@
 
 # dependencies
 /node_modules
+/demos/node_modules
+/demos/dist
 
 # IDEs and editors
 /.idea

README.md

@@ -50,7 +50,7 @@ Developed using Google Material Components [foundations and adapters](https://gi
 | snackbar | Available | [View](https://trimox.github.io/angular-mdc-web/#/snackbar-demo) |
 | switch | Available | [View](https://trimox.github.io/angular-mdc-web/#/switch-demo) |
 | tabs | Available | [View](https://trimox.github.io/angular-mdc-web/#/tabs-demo) |
-| textfield | Available | [View](https://trimox.github.io/angular-mdc-web/#/textfield-demo) |
+| text-field | Available | [View](https://trimox.github.io/angular-mdc-web/#/text-field-demo) |
 | top-app-bar | Available | [View](https://trimox.github.io/angular-mdc-web/#/top-app-bar-demo) |
 | typography | Available | [View](https://trimox.github.io/angular-mdc-web/#/typography-demo) |
 

demos/angular.json

@@ -0,0 +1,93 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-mdc-demos": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "styleext": "scss"
+        }
+      },
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular-mdc-demos",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-mdc-demos:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-mdc-demos:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-mdc-demos:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular-mdc-demos"
+}

demos/getting-started/getting-started.html

@@ -0,0 +1,36 @@
+{
+  "name": "angular-mdc-demos",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "build:aot": "ng build --prod --aot",
+    "lint": "ng lint"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "~7.1.1",
+    "@angular/compiler": "~7.1.1",
+    "@angular/core": "~7.1.1",
+    "@angular/forms": "~7.1.1",
+    "@angular/platform-browser": "~7.1.1",
+    "@angular/platform-browser-dynamic": "~7.1.1",
+    "@angular/router": "~7.1.1",
+    "core-js": "^2.6.0",
+    "rxjs": "~6.3.3",
+    "tslib": "^1.9.3",
+    "zone.js": "~0.8.26"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.11.2",
+    "@angular/cli": "~7.1.1",
+    "@angular/compiler-cli": "~7.1.1",
+    "@types/node": "^10.12.12",
+    "highlight.js": "^9.13.1",
+    "ngx-highlightjs": "^3.0.0",
+    "ts-node": "~7.0.1",
+    "tslint": "~5.11.0",
+    "typescript": "~3.1.6"
+  }
+}

demos/main.ts

@@ -4,6 +4,7 @@
       <button mdcIconButton mdcTopAppBarNavIcon (click)="appdrawer.open = !appdrawer.open" icon="menu"></button>
     </mdc-top-app-bar-section>
     <mdc-top-app-bar-section align="end">
+      <span>v0.42.0</span>
       <a mdcTopAppBarActionItem href="https://github.com/trimox/angular-mdc-web" alt="GitHub" target="_blank" rel="noopener noreferrer">
         <mdc-icon>
           <img src="https://trimox.github.io/angular-mdc-web/assets/github-circle-white-transparent.svg" height="24" />

demos/package.json

@@ -46,7 +46,7 @@ export class AppLayout implements OnInit, OnDestroy {
     { name: 'Snackbar', route: 'snackbar-demo' },
     { name: 'Switch', route: 'switch-demo' },
     { name: 'Tabs', route: 'tabs-demo' },
-    { name: 'Text Field', route: 'textfield-demo' },
+    { name: 'Text Field', route: 'text-field-demo' },
     { name: 'Top App Bar', route: 'top-app-bar-demo' },
     { name: 'Typography', route: 'typography-demo' }
   ];

demos/polyfills.ts

@@ -1,4 +1,5 @@
-import { Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
 
 import { ButtonDemo } from './components/button-demo/button-demo';
 import { CardDemo } from './components/card-demo/card-demo';
@@ -25,11 +26,11 @@ import { SliderDemo } from './components/slider-demo/slider-demo';
 import { SnackbarDemo } from './components/snackbar-demo/snackbar-demo';
 import { SwitchDemo } from './components/switch-demo/switch-demo';
 import { TabsDemo } from './components/tabs-demo/tabs-demo';
-import { TextFieldDemo } from './components/textfield-demo/textfield-demo';
+import { TextFieldDemo } from './components/text-field-demo/text-field-demo';
 import { TopAppBarDemo } from './components/top-app-bar-demo/top-app-bar-demo';
 import { TypographyDemo } from './components/typography-demo/typography-demo';
 
-export const DEMO_ROUTES = [
+export const DEMO_DECLARATIONS = [
   TopAppBarDemo,
   ButtonDemo,
   CardDemo,
@@ -61,7 +62,7 @@ export const DEMO_ROUTES = [
   TypographyDemo
 ];
 
-export const APP_ROUTES: Routes = [
+const routes: Routes = [
   { path: 'button-demo', component: ButtonDemo },
   { path: 'card-demo', component: CardDemo },
   { path: 'checkbox-demo', component: CheckboxDemo },
@@ -87,8 +88,17 @@ export const APP_ROUTES: Routes = [
   { path: 'snackbar-demo', component: SnackbarDemo },
   { path: 'switch-demo', component: SwitchDemo },
   { path: 'tabs-demo', component: TabsDemo },
-  { path: 'textfield-demo', component: TextFieldDemo },
+  { path: 'text-field-demo', component: TextFieldDemo },
   { path: 'top-app-bar-demo', component: TopAppBarDemo },
   { path: 'typography-demo', component: TypographyDemo },
   { path: '**', redirectTo: 'home' }
 ];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, {
+    useHash: true,
+    scrollPositionRestoration: 'enabled'
+  })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }