Merge pull request #8 from ekkolon/add-playground-pages

Add playground pages

Author: ekkolon

angular.json

@@ -63,7 +63,7 @@
               "projects/ngx-gist-playground/src/assets"
             ],
             "styles": [
-              "@angular/material/prebuilt-themes/pink-bluegrey.css",
+              "@angular/material/prebuilt-themes/indigo-pink.css",
               "projects/ngx-gist-playground/src/styles.scss"
             ],
             "scripts": []

package.json

@@ -20,7 +20,10 @@
     "@angular/platform-browser": "^15.1.0",
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
+    "highlightjs-copy": "^1.0.3",
+    "highlightjs-line-numbers.js": "^2.8.0",
     "iframe-resizer": "^4.3.3",
+    "ngx-highlightjs": "^8.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"
@@ -40,4 +43,4 @@
     "ng-packagr": "^15.1.0",
     "typescript": "~4.9.4"
   }
-}
+}

projects/ngx-gist-playground/src/app/app-routing.module.ts

@@ -0,0 +1,33 @@
+<div class="ngx-gist-playground-wrapper">
+  <nav id="nav">
+    <mat-toolbar>
+      <button mat-icon-button (click)="sidenav.toggle()">
+        <mat-icon fontSet="material-symbols-outlined">menu</mat-icon>
+      </button>
+      <span class="title">NGX Gist Playground</span>
+
+      <div class="flex-fill"></div>
+
+      <div class="code-registry-list">
+        <div class="code-registry-list__item">
+          <a class="code-registry-link" [href]="GITHUB_REPO_URL" target="_blank">
+            <img src="assets/logos/github-mark.svg" alt="">
+          </a>
+        </div>
+      </div>
+    </mat-toolbar>
+  </nav>
+  <mat-sidenav-container id="container">
+    <mat-sidenav id="sidenav" #sidenav mode="side" opened="true" fixedInViewport>
+      <mat-nav-list>
+        <a *ngFor="let link of routerLinks" [routerLink]="link.path" mat-list-item>
+          <mat-icon matListItemIcon fontSet="material-symbols-outlined">{{link.icon}}</mat-icon>
+          <span matListItemTitle>{{link.title}}</span>
+        </a>
+      </mat-nav-list>
+    </mat-sidenav>
+    <mat-sidenav-content id="content">
+      <router-outlet></router-outlet>
+    </mat-sidenav-content>
+  </mat-sidenav-container>
+</div>

projects/ngx-gist-playground/src/app/app.component.html

@@ -0,0 +1,78 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.ngx-gist-playground-wrapper {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.flex-fill {
+  flex: 1 0 auto;
+}
+
+#nav {
+  height: var(--ngx-gist-playground-nav-height);
+  background: var(--ngx-gist-playground-nav-background);
+  color: var(--ngx-gist-playground-nav-color);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
+}
+
+#nav mat-toolbar {
+  background-color: inherit;
+}
+
+#nav .title {
+  margin-left: 16px;
+  font-size: 1.161rem;
+  font-weight: 700;
+  font-family: Poppins, sans-serif;
+  letter-spacing: -0.0314rem;
+}
+
+#nav .code-registry-list {
+  display: flex;
+
+  .code-registry-list__item {
+    display: flex;
+
+    .code-registry-link {
+      img {
+        height: 28px;
+      }
+    }
+  }
+}
+
+#container {
+  height: 100%;
+}
+
+#sidenav {
+  top: var(--ngx-gist-playground-nav-height) !important;
+  width: var(--ngx-gist-playground-sidenav-width) !important;
+  color: var(--ngx-gist-playground-sidenav-color);
+  background: var(--ngx-gist-playground-sidenav-background);
+  border-right: var(--ngx-gist-playground-sidenav-border);
+}
+
+#sidenav a[mat-list-item] {
+  padding-left: 12px;
+}
+
+#sidenav .mat-mdc-list-item .mdc-list-item__primary-text {
+  font-family: Poppins, sans-serif;
+}
+
+#content {
+  padding-top: var(--ngx-gist-playground-nav-height);
+  overflow: hidden;
+}

projects/ngx-gist-playground/src/app/app.component.scss

@@ -8,11 +8,16 @@
 
 import {Component} from '@angular/core';
 
+import {routerLinks} from './navigation/router-links';
+
 @Component({
   selector: 'ngx-gist-playground-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
+  GITHUB_REPO_URL = 'https://github.com/ekkolon/ngx-gist';
   title = 'ngx-gist-playground';
+
+  routerLinks = routerLinks;
 }

projects/ngx-gist-playground/src/app/app.component.ts

@@ -10,15 +10,65 @@ import {NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatToolbarModule} from '@angular/material/toolbar';
+
+import {HighlightModule, HIGHLIGHT_OPTIONS} from 'ngx-highlightjs';
+
 import {NgxGistModule} from '@ekkolon/ngx-gist';
 
-import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
+import {ApiReferenceComponent} from './routes/api-reference/api-reference.component';
+import {AppRoutingModule} from './routes/app-routing.module';
+import {ExamplesComponent} from './routes/examples/examples.component';
+import {GettingStartedComponent} from './routes/getting-started/getting-started.component';
+import {HomeComponent} from './routes/home/home.component';
+import {SecurityComponent} from './routes/security/security.component';
+
+const materialModules = [
+  MatSidenavModule,
+  MatToolbarModule,
+  MatIconModule,
+  MatListModule,
+  MatButtonModule,
+];
 
 @NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, BrowserAnimationsModule, NgxGistModule, AppRoutingModule],
-  providers: [],
+  declarations: [
+    AppComponent,
+    HomeComponent,
+    GettingStartedComponent,
+    ExamplesComponent,
+    SecurityComponent,
+    ApiReferenceComponent,
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    NgxGistModule,
+    AppRoutingModule,
+    NgScrollbarModule,
+    HighlightModule,
+    ...materialModules,
+  ],
+  providers: [
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        coreLibraryLoader: async () => import('highlight.js/lib/core'),
+        lineNumbersLoader: () => import('highlightjs-line-numbers.js' as any), // Optional, only if you want the line numbers
+        languages: {
+          typescript: () => import('highlight.js/lib/languages/typescript'),
+          shell: () => import('highlight.js/lib/languages/shell'),
+          xml: () => import('highlight.js/lib/languages/xml'),
+        },
+        //themePath: 'path-to-theme.css', // Optional, and useful if you want to change the theme dynamically
+      },
+    },
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

projects/ngx-gist-playground/src/app/app.module.ts

@@ -0,0 +1,33 @@
+export interface RouterLink {
+  path: string;
+  title: string;
+  icon: string;
+}
+
+export const routerLinks: RouterLink[] = [
+  {
+    path: '/',
+    title: 'Home',
+    icon: 'home',
+  },
+  {
+    path: '/getting-started',
+    title: 'Getting Started',
+    icon: 'rocket_launch',
+  },
+  {
+    path: '/examples',
+    title: 'Examples',
+    icon: 'view_cozy',
+  },
+  {
+    path: 'security',
+    title: 'Security',
+    icon: 'security',
+  },
+  {
+    path: 'api-reference',
+    title: 'API Reference',
+    icon: 'api',
+  },
+];

projects/ngx-gist-playground/src/app/navigation/router-links.ts

@@ -0,0 +1,6 @@
+<div class="ngx-gist-playground-page">
+  <div class="ngx-gist-playground-page__header">
+    <h1 class="ngx-gist-playground-page__title">API Reference</h1>
+  </div>
+  <div class="ngx-gist-playground-page__content"></div>
+</div>

projects/ngx-gist-playground/src/app/routes/api-reference/api-reference.component.html

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}