Skip to content

Commit

Permalink
fix(demo): upgraded ngx-highlightjs to v3 and added hammerjs to the p…
Browse files Browse the repository at this point in the history 
…roject
  • Loading branch information
@AnthonyNahas
AnthonyNahas committed Dec 14, 2018
1 parent a39784c commit 7c0be48
Show file tree
Hide file tree
Showing 7 changed files with 96 additions and 64 deletions.
10 changes: 10 additions & 0 deletions demo/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions demo/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@
"bootstrap": "^4.1.3",
"core-js": "^2.6.0",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"highlight.js": "^9.13.1",
"include-media": "^1.4.9",
"material-design-icons": "^3.0.1",
"ngx-clipboard": "^11.1.9",
Expand Down
26 changes: 21 additions & 5 deletions demo/src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,28 @@
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ServiceWorkerModule} from '@angular/service-worker';

import {AppRoutingModule} from './app-routing.module';
import {AppSharedModule} from './shared/shared.module';
import {HomeModule} from './home/home.module';
import {AppComponent} from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HttpClientModule} from '@angular/common/http';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';
import {environment} from '../environments/environment';

import {HighlightModule} from 'ngx-highlightjs';
import typescript from 'highlight.js/lib/languages/typescript';
import scss from 'highlight.js/lib/languages/scss';
import xml from 'highlight.js/lib/languages/xml';

export function hljsLanguages() {
return [
{name: 'typescript', func: typescript},
{name: 'scss', func: scss},
{name: 'xml', func: xml}
];
}

@NgModule({
declarations: [
Expand All @@ -26,7 +39,10 @@ import { environment } from '../environments/environment';
AppRoutingModule,
AppSharedModule,
HomeModule,
ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
HighlightModule.forRoot({
languages: hljsLanguages
}),
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production})
],
providers: [],
bootstrap: [AppComponent]
Expand Down
72 changes: 36 additions & 36 deletions demo/src/app/getting-started/getting-started.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h1>Getting Started</h1>
</mat-card-title>
<mat-card>
<mat-card-content fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="'$ node -v'"></code></pre>
<pre><code [highlight]="'$ node -v'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'node -v'"
Expand All @@ -34,7 +34,7 @@ <h1>Getting Started</h1>
</mat-card>
<mat-card>
<mat-card-content fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="'$ npm -v'"></code></pre>
<pre><code [highlight]="'$ npm -v'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'node -v'"
Expand All @@ -56,7 +56,7 @@ <h1>Getting Started</h1>
</mat-card-subtitle>
<mat-card-content>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="'$ ng -v'"></code></pre>
<pre><code [highlight]="'$ ng -v'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'ng -v'"
Expand All @@ -67,13 +67,13 @@ <h1>Getting Started</h1>
</div>
<p>If angular cli is installed on you machine, you should get something like this</p>

<pre><code highlight [code]="ngVersion"></code></pre>
<pre><code [highlight]="ngVersion"></code></pre>

<p>If not please run the following command to install angular cli globally in order to create an angular
project</p>

<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="'$ npm install -g @angular/cli'"></code></pre>
<pre><code [highlight]="'$ npm install -g @angular/cli'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'npm install -g @angular/cli'"
Expand All @@ -96,7 +96,7 @@ <h1>Getting Started</h1>
<p>If you have already a setup angular project, you can skip this step, otherwise you can generate a project
via the angular cli by running the following</p>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="'$ ng new yourappname'"></code></pre>
<pre><code [highlight]="'$ ng new yourappname'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'ng new yourappname'"
Expand Down Expand Up @@ -163,7 +163,7 @@ <h1>Getting Started</h1>
</p>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="'$ npm i -s @angular/material @angular/cdk'"></code></pre>
<pre><code [highlight]="'$ npm i -s @angular/material @angular/cdk'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'npm i -s @angular/material @angular/cdk'"
Expand All @@ -189,7 +189,7 @@ <h1>Getting Started</h1>
</p>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="'$ npm i -s @angular/animations'"></code></pre>
<pre><code [highlight]="'$ npm i -s @angular/animations'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'npm i -s @angular/animations'"
Expand All @@ -210,7 +210,7 @@ <h1>Getting Started</h1>
</div>
<mat-card>
<mat-card-content>
<pre><code highlight [code]="importBrowserAnimationsModule"></code></pre>
<pre><code [highlight]="importBrowserAnimationsModule"></code></pre>
</mat-card-content>
</mat-card>
<mat-card-footer fxLayoutAlign="center">
Expand All @@ -232,7 +232,7 @@ <h1>Getting Started</h1>
in your style.css file.</p>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="importMaterialThemeSCSS"></code></pre>
<pre><code [highlight]="importMaterialThemeSCSS"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="importMaterialThemeSCSS"
Expand Down Expand Up @@ -262,7 +262,7 @@ <h1>Getting Started</h1>
<mat-card-subtitle>Custom material theme</mat-card-subtitle>
<mat-card-content>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="customMaterialTheme"></code></pre>
<pre><code [highlight]="customMaterialTheme"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="customMaterialTheme"
Expand Down Expand Up @@ -290,11 +290,11 @@ <h1>Getting Started</h1>
<p>The easiest way to load the material design icons is to provide the
following link in your
<p>
<pre><code highlight [code]="'index.html '"></code></pre>
<pre><code [highlight]="'index.html '"></code></pre>
<p>file </p>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="materialIconsLink"></code></pre>
<pre><code [highlight]="materialIconsLink"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="materialIconsLink"
Expand All @@ -319,7 +319,7 @@ <h1>Getting Started</h1>
mat-button color="primary">material design icons' npm module</a></p>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight [code]="'$ npm i -s material-design-icons'"></code></pre>
<pre><code [highlight]="'$ npm i -s material-design-icons'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'npm i -s material-design-icons'"
Expand All @@ -331,7 +331,7 @@ <h1>Getting Started</h1>
<div class="comment-container">
<p>After that, you need to update you
<p>
<pre><code highlight [code]="'angular-cli.json'"></code></pre>
<pre><code [highlight]="'angular-cli.json'"></code></pre>
<p>files. Under the styles sections, add
the path of the material design icons in order to be imported to your distribution files
when you build your app. <i>See below</i></p>
Expand All @@ -341,7 +341,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="'../node_modules/material-design-icons/iconfont/material-icons.css'"></code></pre>
[highlight]="'../node_modules/material-design-icons/iconfont/material-icons.css'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'../node_modules/material-design-icons/iconfont/material-icons.css'"
Expand All @@ -356,7 +356,7 @@ <h1>Getting Started</h1>
<mat-card-subtitle>Before</mat-card-subtitle>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="stylesBeforeImportMDI"></code></pre>
[highlight]="stylesBeforeImportMDI"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="stylesBeforeImportMDI"
Expand All @@ -368,7 +368,7 @@ <h1>Getting Started</h1>
<mat-card-subtitle>After</mat-card-subtitle>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="stylesAfterImportMDI"></code></pre>
[highlight]="stylesAfterImportMDI"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="stylesAfterImportMDI"
Expand Down Expand Up @@ -408,7 +408,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="'$ npm i -s ngx-material-faq'"></code></pre>
[highlight]="'$ npm i -s ngx-material-faq'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'npm i -s ngx-material-faq'"
Expand All @@ -418,11 +418,11 @@ <h1>Getting Started</h1>
</button>
</div>
<!--<div fxLayoutAlign="center">-->
<!--<video *ngIf="true" controls autoplay loop>-->
<!--<source-->
<!--src="assets/tutorials/npm_i_ngx_material_password_strength.mp4"-->
<!--type="video/mp4">-->
<!--</video>-->
<!--<video *ngIf="true" controls autoplay loop>-->
<!--<source-->
<!--src="assets/tutorials/npm_i_ngx_material_password_strength.mp4"-->
<!--type="video/mp4">-->
<!--</video>-->
<!--</div>-->
<div class="comment-container">
<p>Now you just need to import the library </p>
Expand All @@ -437,7 +437,7 @@ <h1>Getting Started</h1>
<mat-card-content>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="systemJSModuleImport"></code></pre>
[highlight]="systemJSModuleImport"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="systemJSModuleImport"
Expand All @@ -453,7 +453,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="importNgxMaterialFaqModule"></code></pre>
[highlight]="importNgxMaterialFaqModule"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="importNgxMaterialFaqModule"
Expand All @@ -472,7 +472,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="importNgxMaterialFaqModuleInAppModule"></code></pre>
[highlight]="importNgxMaterialFaqModuleInAppModule"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="importNgxMaterialFaqModuleInAppModule"
Expand All @@ -486,7 +486,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="importNgxMaterialFaqModuleInOtherModule"></code></pre>
[highlight]="importNgxMaterialFaqModuleInOtherModule"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="importNgxMaterialFaqModuleInOtherModule"
Expand All @@ -512,15 +512,15 @@ <h1>Getting Started</h1>
<p>Add the following to your template</p>

<pre><code highlight
[code]="componentExample"></code></pre>
[highlight]="componentExample"></code></pre>

</div>

<div class="comment-container">
<p>and the following to your component</p>

<pre><code highlight
[code]="componentExampleInComponent"></code></pre>
[highlight]="componentExampleInComponent"></code></pre>

</div>
</mat-card-content>
Expand All @@ -533,7 +533,7 @@ <h1>Getting Started</h1>
<p>and the following to your component</p>

<pre><code highlight
[code]="adminComponentExampleInComponent"></code></pre>
[highlight]="adminComponentExampleInComponent"></code></pre>

</div>
</mat-card-content>
Expand All @@ -543,7 +543,7 @@ <h1>Getting Started</h1>
<p>Add the following to your template as admin</p>

<pre><code highlight
[code]="adminComponentExample"></code></pre>
[highlight]="adminComponentExample"></code></pre>

</div>

Expand Down Expand Up @@ -577,7 +577,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="'git clone https://github.com/AnthonyNahas/ngx-material-faq.git'"></code></pre>
[highlight]="'git clone https://github.com/AnthonyNahas/ngx-material-faq.git'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'git clone https://github.com/AnthonyNahas/ngx-material-faq.git'"
Expand All @@ -591,7 +591,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="'$ cd demo'"></code></pre>
[highlight]="'$ cd demo'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'cd demo'"
Expand All @@ -605,7 +605,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="'$ npm i'"></code></pre>
[highlight]="'$ npm i'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'npm i'"
Expand All @@ -619,7 +619,7 @@ <h1>Getting Started</h1>
</div>
<div fxLayout="row" fxLayoutAlign="space-between">
<pre><code highlight
[code]="'$ ng serve --open'"></code></pre>
[highlight]="'$ ng serve --open'"></code></pre>
<button mat-icon-button
ngxClipboard
[cbContent]="'ng serve --open'"
Expand Down
2 changes: 1 addition & 1 deletion demo/src/app/shared/shared.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {NgxMaterialPagesModule} from 'ngx-material-pages';
NgbCollapseModule.forRoot(),
MatFaqModule.forRoot(),
NgxMaterialPagesModule.forRoot(),
HighlightModule.forRoot(),
HighlightModule,
FormsModule,
ReactiveFormsModule,
FlexLayoutModule,
Expand Down
Loading

0 comments on commit 7c0be48

Please sign in to comment.