chore: setup showcase

apps/ngx-doc-gen-demo/src/app/app.component.html

@@ -1 +1,25 @@
-<ngx-doc-gen-nx-welcome></ngx-doc-gen-nx-welcome>
+<mat-toolbar color="primary">
+  <a mat-button [routerLink]="['/']">
+    ngx-doc-gen
+  </a>
+
+  <a mat-raised-button [routerLink]="['single-entrypoint']" color="accent">
+    Single entrypoint
+  </a>
+
+  <a mat-raised-button [routerLink]="['multi-entrypoint']" color="accent">
+    Multi entrypoint
+  </a>
+
+  <span class="spacer"></span>
+
+  <a mat-icon-button href="https://github.com/bohoffi/ngx-doc-gen" title="ngx-doc-gen on Github" target="_blank">
+    <mat-icon>
+      code
+    </mat-icon>
+  </a>
+</mat-toolbar>
+
+<div class="content">
+  <router-outlet></router-outlet>
+</div>

apps/ngx-doc-gen-demo/src/app/app.module.ts

@@ -1,13 +1,52 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { RouterModule, Routes } from '@angular/router';
+import { SingleEntrypointComponent } from './components/single-entrypoint/single-entrypoint.component';
+import { HomeComponent } from './components/home/home.component';
+import { MultiEntrypointComponent } from './components/multi-entrypoint/multi-entrypoint.component';
+import { MultiOneComponent } from './components/multi-one/multi-one.component';
+import { MultiTwoComponent } from './components/multi-two/multi-two.component';
+import { MultiThreeComponent } from './components/multi-three/multi-three.component';
+
+const matModules = [
+  MatButtonModule,
+  MatExpansionModule,
+  MatIconModule,
+  MatToolbarModule
+];
+
+const ROUTES: Routes = [
+  {
+    path: '',
+    component: HomeComponent
+  },
+  {
+    path: 'single-entrypoint',
+    component: SingleEntrypointComponent
+  },
+  {
+    path: 'multi-entrypoint',
+    component: MultiEntrypointComponent
+  }
+];
 
 @NgModule({
-  declarations: [AppComponent, NxWelcomeComponent],
-  imports: [BrowserModule],
+  declarations: [AppComponent, SingleEntrypointComponent, HomeComponent, MultiEntrypointComponent, MultiOneComponent, MultiTwoComponent, MultiThreeComponent],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule,
+    RouterModule.forRoot(ROUTES),
+
+    matModules
+  ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }

apps/ngx-doc-gen-demo/src/app/components/home/home.component.html

@@ -0,0 +1,48 @@
+<div class="mat-typography">
+
+  <h2>
+    Welcome to ngx-doc-gen
+  </h2>
+
+  <p>
+    This page is for showcasing the generated API docs for the example libraries contained in the repository.
+  </p>
+
+  <p>
+    Those libraries feature two possible aspects of common library layouts - single and multi entrypoint. All results
+    are used here as component templates.
+  </p>
+
+  <a [routerLink]="['single-entrypoint']" class="content-link">
+    <h3>
+      Single entrypoint
+      <mat-icon>
+        open_in_new
+      </mat-icon>
+    </h3>
+  </a>
+
+  <p>
+    Maybe the most common library layout out there - where there is one single entrypoint exporting your librarys API.
+  </p>
+
+  <a [routerLink]="['multi-entrypoint']" class="content-link">
+    <h3>
+      Multi entrypoint
+      <mat-icon>
+        open_in_new
+      </mat-icon>
+    </h3>
+  </a>
+
+  <p>
+    Known from popular libraries like Angular Material - your library contains multiple entrypoints focussed on specific
+    features.
+  </p>
+
+  <p>
+    Note: This showcase uses Angular Materials Expansion Panel to visually divide the entrypoints API docs - generation
+    outputs one HTML file per entrypoint.
+  </p>
+
+</div>

apps/ngx-doc-gen-demo/src/app/components/home/home.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'ngx-doc-gen-home',
+  templateUrl: './home.component.html',
+  styles: [
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HomeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

apps/ngx-doc-gen-demo/src/app/components/multi-entrypoint/multi-entrypoint.component.html

@@ -0,0 +1,33 @@
+<mat-accordion multi>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        @multi/test/one
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+
+    <ngx-doc-gen-multi-one></ngx-doc-gen-multi-one>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        @multi/test/two
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+
+    <ngx-doc-gen-multi-two></ngx-doc-gen-multi-two>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        @multi/test/three
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+
+    <ngx-doc-gen-multi-three></ngx-doc-gen-multi-three>
+  </mat-expansion-panel>
+
+</mat-accordion>

apps/ngx-doc-gen-demo/src/app/components/multi-entrypoint/multi-entrypoint.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-doc-gen-multi-entrypoint',
+  templateUrl: './multi-entrypoint.component.html',
+  styleUrls: ['./multi-entrypoint.component.scss']
+})
+export class MultiEntrypointComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

apps/ngx-doc-gen-demo/src/app/components/multi-one/multi-one.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-doc-gen-multi-one',
+  templateUrl: './multi-test-one.html',
+  styleUrls: ['./multi-one.component.scss']
+})
+export class MultiOneComponent { }

apps/ngx-doc-gen-demo/src/app/components/multi-one/multi-test-one.html

@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<div class="docs-api">
+  <h2>
+    API reference for @multi/test/one
+  </h2><p class="docs-api-module-import">
+    <code>
+        import &#123; OneModule &#125; from '@multi/test/one';
+      </code>
+  </p>
+  <h3 id="multi-test-one-directives" class="docs-header-link docs-api-h3">
+    <span header-link="directives"></span>
+    Directives
+  </h3>
+
+
+
+<h4 id="NgDemoDirective" class="docs-header-link docs-api-h4 docs-api-class-name">
+  <span header-link="NgDemoDirective"></span>
+  <code>NgDemoDirective</code>
+
+</h4><p class="docs-api-directive-selectors">
+  <span class="docs-api-class-selector-label">Selector:</span>
+
+  <span class="docs-api-class-selector-name">[ngxDocGenNgDemo]</span>
+
+</p>
+
+
+
+
+
+  </div>

apps/ngx-doc-gen-demo/src/app/components/multi-three/multi-test-three.html

@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<div class="docs-api">
+  <h2>
+    API reference for @multi/test/three
+  </h2><p class="docs-api-module-import">
+    <code>
+        import &#123; ThreeModule &#125; from '@multi/test/three';
+      </code>
+  </p>
+  <h3 id="multi-test-three-directives" class="docs-header-link docs-api-h3">
+    <span header-link="directives"></span>
+    Directives
+  </h3>
+
+
+
+<h4 id="DemoScamDirDirective" class="docs-header-link docs-api-h4 docs-api-class-name">
+  <span header-link="DemoScamDirDirective"></span>
+  <code>DemoScamDirDirective</code>
+
+</h4><p class="docs-api-directive-selectors">
+  <span class="docs-api-class-selector-label">Selector:</span>
+
+  <span class="docs-api-class-selector-name">[ngxDocGenDemoScamDir]</span>
+
+</p>
+
+
+
+
+
+  </div>

apps/ngx-doc-gen-demo/src/app/components/multi-three/multi-three.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-doc-gen-multi-three',
+  templateUrl: './multi-test-three.html',
+  styleUrls: ['./multi-three.component.scss']
+})
+export class MultiThreeComponent { }

apps/ngx-doc-gen-demo/src/app/components/multi-two/multi-test-two.html

@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<div class="docs-api">
+  <h2>
+    API reference for @multi/test/two
+  </h2><p class="docs-api-module-import">
+    <code>
+        import &#123; TwoModule &#125; from '@multi/test/two';
+      </code>
+  </p>
+  </div>

apps/ngx-doc-gen-demo/src/app/components/multi-two/multi-two.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-doc-gen-multi-two',
+  templateUrl: './multi-test-two.html',
+  styleUrls: ['./multi-two.component.scss']
+})
+export class MultiTwoComponent { }

apps/ngx-doc-gen-demo/src/app/components/single-entrypoint/single-entrypoint.component.ts

@@ -0,0 +1,9 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'ngx-doc-gen-single-entrypoint',
+  templateUrl: './single-test.html',
+  styleUrls: ['./single-entrypoint.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SingleEntrypointComponent { }