Skip to content

Commit 3ff06a4

Browse files
ashish-chopraashish-chopra
committed
demo website code added
1 parent c2184ad commit 3ff06a4

21 files changed

+995
-86
lines changed

‎angular.json

+20-17
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"projects": {
66
"demo": {
77
"root": "",
8-
"sourceRoot": "src",
8+
"sourceRoot": "apps/demo",
99
"projectType": "application",
1010
"prefix": "app",
1111
"schematics": {},
@@ -14,16 +14,19 @@
1414
"builder": "@angular-devkit/build-angular:browser",
1515
"options": {
1616
"outputPath": "dist/demo",
17-
"index": "src/index.html",
18-
"main": "src/main.ts",
19-
"polyfills": "src/polyfills.ts",
20-
"tsConfig": "src/tsconfig.app.json",
17+
"index": "apps/demo/src/index.html",
18+
"main": "apps/demo/src/main.ts",
19+
"polyfills": "apps/demo/src/polyfills.ts",
20+
"tsConfig": "apps/demo/src/tsconfig.app.json",
2121
"assets": [
22-
"src/favicon.ico",
23-
"src/assets"
22+
"apps/demo/src/favicon.ico",
23+
"apps/demo/src/assets"
2424
],
2525
"styles": [
26-
"src/styles.css"
26+
"apps/demo/src/styles.css",
27+
"node_modules/highlight.js/styles/github.css",
28+
"@angular/material/prebuilt-themes/deeppurple-amber.css"
29+
2730
],
2831
"scripts": [],
2932
"vendorChunk": true,
@@ -37,8 +40,8 @@
3740
"production": {
3841
"fileReplacements": [
3942
{
40-
"replace": "src/environments/environment.ts",
41-
"with": "src/environments/environment.prod.ts"
43+
"replace": "apps/demo/src/environments/environment.ts",
44+
"with": "apps/demo/src/environments/environment.prod.ts"
4245
}
4346
],
4447
"optimization": true,
@@ -87,17 +90,17 @@
8790
"test": {
8891
"builder": "@angular-devkit/build-angular:karma",
8992
"options": {
90-
"main": "src/test.ts",
91-
"polyfills": "src/polyfills.ts",
92-
"tsConfig": "src/tsconfig.spec.json",
93-
"karmaConfig": "src/karma.conf.js",
93+
"main": "apps/demo/src/test.ts",
94+
"polyfills": "apps/demo/src/polyfills.ts",
95+
"tsConfig": "apps/demo/src/tsconfig.spec.json",
96+
"karmaConfig": "apps/demo/rc/karma.conf.js",
9497
"styles": [
95-
"src/styles.css"
98+
"apps/demo/src/styles.css"
9699
],
97100
"scripts": [],
98101
"assets": [
99-
"src/favicon.ico",
100-
"src/assets"
102+
"apps/demo/src/favicon.ico",
103+
"apps/demo/src/assets"
101104
]
102105
}
103106
},

‎apps/demo/src/app/app.component.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@
3737
<div class="spacer">
3838
<app-getting-started id="getting-started" class="jumptarget"></app-getting-started>
3939
<app-documentation id="documentation" class="jumptarget"></app-documentation>
40+
<app-demos id="demos" class="jumptarget"></app-demos>
41+
<app-playground id="documentation" class="jumptarget"></app-playground>
4042
<!--<div ng-view autoscroll></div>-->
4143
<!-- <section id="getting-started" class="jumptarget" ng-include="'templates/getting-started.html'"></section>
4244
<section id="documentation" class="jumptarget" ng-include="'templates/documentation.html'"></section>
@@ -46,18 +48,18 @@
4648
<footer>
4749
<div class="container footer-box">
4850
<div>
49-
<div>&copy; copyright 2017 Ashish Chopra. <br> Thanks to <b> GitHub &middot; Angular &middot; Highlightjs &middot; Bootstrap 4 &middot; Font Awesome</b> for giving technologies to build this website.
51+
<div>&copy; copyright 2017-2021 Ashish Chopra. <br> Thanks to <b> GitHub &middot; Angular &middot; Highlightjs &middot; Bootstrap 4 &middot; Font Awesome</b> for giving technologies to build this website.
5052
</div>
5153
<br>
5254
<div>
53-
Made with hands &amp; <i class="fa fa-heart"></i> by <a href="https://ashish-chopra.github.io">Ashish Chopra</a>.
55+
Made with hands &amp; <i class="fa fa-heart"></i> by <a href="https://ashishchopra.co">Ashish Chopra</a>.
5456
<br> Checkout my other <a href="https://github.com/ashish-chopra?tab=repositories">projects</a>.
5557
</div>
5658
</div>
5759
<div>
5860
<b class="hidden-sm-down">Other Links</b>
5961
<ul>
60-
<li><a href="https://ashish-chopra.github.io" target="_blank">Website</a></li>
62+
<li><a href="https://ashishchopra.co" target="_blank">Website</a></li>
6163
<li><a href="https://github.com/ashish-chopra" target="_blank">GitHub</a></li>
6264
<li><a href="https://www.facebook.com/ashish.chopra22" target="_blank">Facebook</a></li>
6365
<li><a href="mailto://[email protected]">Email</a></li>

‎apps/demo/src/app/app.module.ts

+50-6
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,67 @@ import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33

44
import { AppComponent } from './app.component';
5-
import { HighlightJsModule } from 'angular2-highlight-js';
5+
import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
66
import { GettingStartedComponent } from './getting-started/getting-started.component';
77
import { DocumentationComponent } from './documentation/documentation.component';
8-
import { NgxGaugeModule } from '@ngx/ngx-gauge';
8+
import { NgxGaugeModule } from 'ngx-gauge';
9+
import { PlaygroundComponent } from './playground/playground.component';
10+
import { DemosComponent } from './demos/demos.component';
11+
12+
import { MatInputModule } from '@angular/material/input';
13+
import { MatCheckboxModule } from '@angular/material/checkbox';
14+
import { MatButtonModule } from '@angular/material/button';
15+
import { MatSelectModule } from '@angular/material/select';
16+
import { MatToolbarModule } from '@angular/material/toolbar';
17+
import { MatSliderModule } from '@angular/material/slider';
18+
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
19+
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
20+
import { MatCardModule } from '@angular/material/card';
21+
import { FormsModule } from '@angular/forms';
22+
import { MatFormFieldModule } from '@angular/material/form-field';
23+
import {MatTabsModule } from '@angular/material/tabs';
24+
925

1026
@NgModule({
1127
declarations: [
1228
AppComponent,
1329
GettingStartedComponent,
14-
DocumentationComponent
30+
DocumentationComponent,
31+
PlaygroundComponent,
32+
DemosComponent
1533
],
1634
imports: [
1735
BrowserModule,
18-
HighlightJsModule,
19-
NgxGaugeModule
36+
BrowserAnimationsModule,
37+
NgxGaugeModule,
38+
HighlightModule,
39+
FormsModule,
40+
MatFormFieldModule,
41+
MatInputModule,
42+
MatButtonModule,
43+
MatCheckboxModule,
44+
MatToolbarModule,
45+
MatSelectModule,
46+
MatSliderModule,
47+
MatSlideToggleModule,
48+
MatCardModule,
49+
MatTabsModule
50+
],
51+
providers: [
52+
{
53+
provide: HIGHLIGHT_OPTIONS,
54+
useValue: {
55+
coreLibraryLoader: () => import('highlight.js/lib/core'),
56+
lineNumbersLoader: () => import('highlightjs-line-numbers.js'),
57+
languages: {
58+
typescript: () => import('highlight.js/lib/languages/typescript'),
59+
css: () => import('highlight.js/lib/languages/css'),
60+
xml: () => import('highlight.js/lib/languages/xml'),
61+
bash: () => import('highlight.js/lib/languages/bash')
62+
}
63+
}
64+
}
2065
],
21-
providers: [],
2266
bootstrap: [AppComponent]
2367
})
2468
export class AppModule { }

‎apps/demo/src/app/demos/demos.component.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.block {
2+
padding: 2rem;
3+
padding-left: 0;
4+
}
5+
6+
.block h2 {
7+
font-weight: normal;
8+
margin-bottom: 1.3rem;
9+
}
10+
11+
.column-box {
12+
display: flex;
13+
flex-direction: row;
14+
flex-wrap: wrap;
15+
}
16+
17+
.column-item {
18+
width: 50%;
19+
padding: 20px;
20+
margin-bottom: 3rem;
21+
}
22+
23+
.column-item:nth-child(1) {
24+
padding-left: 0;
25+
}
26+
27+
.content {
28+
min-height: 250px;
29+
background-color: rgb(250,250,250);
30+
padding: 1rem;
31+
padding-top: 0;
32+
}
33+
34+
mat-tab code.hljs {
35+
background: none;
36+
}
37+
38+
.output-frame {
39+
border: 1px solid #ddd;
40+
border-radius: 4px 4px;
41+
height: 300px;
42+
display:flex;
43+
align-items: center;
44+
justify-content: space-around;
45+
}

0 commit comments

Comments
 (0)