doc: update the demo

bohoffi · Dec 28, 2022 · 4f8ca5e · 4f8ca5e
1 parent 59033bf
commit 4f8ca5e
Show file tree

Hide file tree

Showing 19 changed files with 227 additions and 153 deletions.
diff --git a/apps/ngx-doc-gen-demo/src/app/app.component.html b/apps/ngx-doc-gen-demo/src/app/app.component.html
@@ -1,7 +1,5 @@
 <mat-toolbar color="primary">
-  <a mat-button [routerLink]="['/']">
-    ngx-doc-gen
-  </a>
+  <a mat-button [routerLink]="['/']"> ngx-doc-gen </a>
 
   <a mat-raised-button [routerLink]="['single-entrypoint']" color="accent">
     Single entrypoint
@@ -11,12 +9,19 @@
     Multi entrypoint
   </a>
 
+  <a mat-raised-button [routerLink]="['standalone-api']" color="accent">
+    Standalone API
+  </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-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>
 

diff --git a/apps/ngx-doc-gen-demo/src/app/app.module.ts b/apps/ngx-doc-gen-demo/src/app/app.module.ts
@@ -14,39 +14,53 @@ import { MultiEntrypointComponent } from './components/multi-entrypoint/multi-en
 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';
+import { StandaloneApiComponent } from './components/standalone-api/standalone-api.component';
 
 const matModules = [
   MatButtonModule,
   MatExpansionModule,
   MatIconModule,
-  MatToolbarModule
+  MatToolbarModule,
 ];
 
 const ROUTES: Routes = [
   {
     path: '',
-    component: HomeComponent
+    component: HomeComponent,
   },
   {
     path: 'single-entrypoint',
-    component: SingleEntrypointComponent
+    component: SingleEntrypointComponent,
   },
   {
     path: 'multi-entrypoint',
-    component: MultiEntrypointComponent
-  }
+    component: MultiEntrypointComponent,
+  },
+  {
+    path: 'standalone-api',
+    component: StandaloneApiComponent,
+  },
 ];
 
 @NgModule({
-  declarations: [AppComponent, SingleEntrypointComponent, HomeComponent, MultiEntrypointComponent, MultiOneComponent, MultiTwoComponent, MultiThreeComponent],
+  declarations: [
+    AppComponent,
+    SingleEntrypointComponent,
+    HomeComponent,
+    MultiEntrypointComponent,
+    MultiOneComponent,
+    MultiTwoComponent,
+    MultiThreeComponent,
+    StandaloneApiComponent,
+  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     RouterModule.forRoot(ROUTES),
 
-    matModules
+    matModules,
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}
diff --git a/apps/ngx-doc-gen-demo/src/app/components/home/home.component.html b/apps/ngx-doc-gen-demo/src/app/components/home/home.component.html
@@ -1,48 +1,53 @@
 <div class="mat-typography">
-
-  <h2>
-    Welcome to ngx-doc-gen
-  </h2>
+  <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.
+    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.
+    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>
+      <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.
+    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>
+      <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.
+    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.
+    Note: This showcase uses Angular Materials Expansion Panel to visually
+    divide the entrypoints API docs - generation outputs one HTML file per
+    entrypoint.
   </p>
 
+  <a [routerLink]="['standalone-api']" class="content-link">
+    <h3>
+      Standalone API
+      <mat-icon> open_in_new </mat-icon>
+    </h3>
+  </a>
+
+  <p>Showcasing the support for the Angular Standalone API.</p>
 </div>
diff --git a/apps/ngx-doc-gen-demo/src/app/components/multi-one/multi-test-one.html b/apps/ngx-doc-gen-demo/src/app/components/multi-one/multi-test-one.html
@@ -1,36 +1,21 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
 
 <div class="docs-api">
-  <h2>
-    API reference for @multi/test/one
-  </h2><p class="docs-api-module-import">
+  <h2>API reference for @multi/test/one</h2><p class="docs-api-module-import">
     <code>
-        import &#123; OneModule &#125; from '@multi/test/one';
-      </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">
+<h4
+  id="NgDemoDirective"
+  class="docs-header-link docs-api-h4 docs-api-class-name"
+>
   <span header-link="NgDemoDirective"></span>
   <code>NgDemoDirective</code>
 
@@ -39,10 +24,5 @@ <h4 id="NgDemoDirective" class="docs-header-link docs-api-h4 docs-api-class-name
 
   <span class="docs-api-class-selector-name">[ngxDocGenNgDemo]</span>
 
-</p>
-
-
-
-
-
+</p>   
   </div>
diff --git a/apps/ngx-doc-gen-demo/src/app/components/multi-three/multi-test-three.html b/apps/ngx-doc-gen-demo/src/app/components/multi-three/multi-test-three.html
@@ -1,36 +1,21 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
 
 <div class="docs-api">
-  <h2>
-    API reference for @multi/test/three
-  </h2><p class="docs-api-module-import">
+  <h2>API reference for @multi/test/three</h2><p class="docs-api-module-import">
     <code>
-        import &#123; ThreeModule &#125; from '@multi/test/three';
-      </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">
+<h4
+  id="DemoScamDirDirective"
+  class="docs-header-link docs-api-h4 docs-api-class-name"
+>
   <span header-link="DemoScamDirDirective"></span>
   <code>DemoScamDirDirective</code>
 
@@ -39,10 +24,5 @@ <h4 id="DemoScamDirDirective" class="docs-header-link docs-api-h4 docs-api-class
 
   <span class="docs-api-class-selector-name">[ngxDocGenDemoScamDir]</span>
 
-</p>
-
-
-
-
-
+</p>   
   </div>
diff --git a/apps/ngx-doc-gen-demo/src/app/components/multi-two/multi-test-two.html b/apps/ngx-doc-gen-demo/src/app/components/multi-two/multi-test-two.html
@@ -1,26 +1,9 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
 
 <div class="docs-api">
-  <h2>
-    API reference for @multi/test/two
-  </h2><p class="docs-api-module-import">
+  <h2>API reference for @multi/test/two</h2><p class="docs-api-module-import">
     <code>
-        import &#123; TwoModule &#125; from '@multi/test/two';
-      </code>
+      import &#123; TwoModule &#125; from '@multi/test/two';
+    </code>
   </p>
   </div>
diff --git a/apps/ngx-doc-gen-demo/src/app/components/single-entrypoint/single-test.html b/apps/ngx-doc-gen-demo/src/app/components/single-entrypoint/single-test.html
@@ -1,49 +1,31 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
 
 <div class="docs-api">
-  <h2>
-    API reference for @single/test
-  </h2><p class="docs-api-module-import">
+  <h2>API reference for @single/test</h2><p class="docs-api-module-import">
     <code>
-        import &#123; SingleEntrypointModule &#125; from '@single/test';
-      </code>
+      import &#123; SingleEntrypointModule &#125; from '@single/test';
+    </code>
   </p>
   <h3 id="single-test-directives" class="docs-header-link docs-api-h3">
     <span header-link="directives"></span>
     Directives
   </h3>
-
-
+
 
-<h4 id="TestComponent" class="docs-header-link docs-api-h4 docs-api-class-name">
+<h4
+  id="TestComponent"
+  class="docs-header-link docs-api-h4 docs-api-class-name"
+>
   <span header-link="TestComponent"></span>
   <code>TestComponent</code>
 
-</h4><div class="docs-api-class-description"><p>Example component for showcasing API doc generation.</p>
+</h4><div class="docs-api-class-description">
+  <p>Example component for showcasing API doc generation.</p>
+
 </div><p class="docs-api-directive-selectors">
   <span class="docs-api-class-selector-label">Selector:</span>
 
   <span class="docs-api-class-selector-name">ngx-doc-gen-test</span>
 
-</p>
-
-
-
-
-
+</p>   
   </div>
diff --git a/apps/ngx-doc-gen-demo/src/app/components/standalone-api/standalone-api.component.scss b/apps/ngx-doc-gen-demo/src/app/components/standalone-api/standalone-api.component.scss
diff --git a/apps/ngx-doc-gen-demo/src/app/components/standalone-api/standalone-api.component.ts b/apps/ngx-doc-gen-demo/src/app/components/standalone-api/standalone-api.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-doc-gen-standalone-api',
+  templateUrl: './standalone-api.html',
+  styleUrls: ['./standalone-api.component.scss'],
+})
+export class StandaloneApiComponent {}