Add playground pages

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.component.html

@@ -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.scss

@@ -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.ts

@@ -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.module.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/navigation/router-links.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/routes/api-reference/api-reference.component.html

@@ -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.scss

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

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ApiReferenceComponent } from './api-reference.component';
+
+describe('ApiReferenceComponent', () => {
+  let component: ApiReferenceComponent;
+  let fixture: ComponentFixture<ApiReferenceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ApiReferenceComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ApiReferenceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './api-reference.component.html',
+  styleUrls: ['./api-reference.component.scss']
+})
+export class ApiReferenceComponent {
+
+}

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

@@ -0,0 +1,37 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+
+import {ApiReferenceComponent} from './api-reference/api-reference.component';
+import {ExamplesComponent} from './examples/examples.component';
+import {GettingStartedComponent} from './getting-started/getting-started.component';
+import {HomeComponent} from './home/home.component';
+import {SecurityComponent} from './security/security.component';
+
+const routes: Routes = [
+  {
+    path: 'getting-started',
+    component: GettingStartedComponent,
+  },
+  {
+    path: 'examples',
+    component: ExamplesComponent,
+  },
+  {
+    path: 'security',
+    component: SecurityComponent,
+  },
+  {
+    path: 'api-reference',
+    component: ApiReferenceComponent,
+  },
+  {
+    path: '',
+    component: HomeComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}

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

@@ -0,0 +1,33 @@
+<div class="ngx-gist-playground-page">
+  <div class="ngx-gist-playground-page__header">
+    <!-- <small class="ngx-gist-playground-page__rubrik">Library</small> -->
+    <h1 class="ngx-gist-playground-page__title">Examples</h1>
+    <!-- <h3 class="ngx-gist-playground-page__subtitle">A</h3> -->
+    <div class="ngx-gist-playground-page__description">
+      <p class="rich-text">
+        A collection of examples of how to use the library.
+      </p>
+    </div>
+  </div>
+  <div class="ngx-gist-playground-page__content">
+    <div class="ngx-gist-playground-page__content__item">
+      <h2 class="ngx-gist-playground-page__content__item__title">Embed a single gist file</h2>
+      <p class="ngx-gist-playground-page__content__item__description">
+        Template:<br> <code
+          class="inline-code">&lt;ngx-gist [gistId]="'05151ac90b51a5d3a0c3e85cb942a456'" file="ngx_gist_embed_example_2.py"&gt;&lt;/ngx-gist&gt;</code>
+      </p>
+
+      <ngx-gist [gistId]="'05151ac90b51a5d3a0c3e85cb942a456'" file="ngx_gist_embed_example_2.py"></ngx-gist>
+    </div>
+
+    <div class="ngx-gist-playground-page__content__item">
+      <h2 class="ngx-gist-playground-page__content__item__title">Embed all gist files</h2>
+      <p class="ngx-gist-playground-page__content__item__description">
+        Template: <br> <code
+          class="inline-code">&lt;ngx-gist [gistId]="'05151ac90b51a5d3a0c3e85cb942a456'"&gt;&lt;/ngx-gist&gt;</code>
+      </p>
+
+      <ngx-gist [gistId]="'05151ac90b51a5d3a0c3e85cb942a456'"></ngx-gist>
+    </div>
+  </div>
+</div>

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

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