Wrap up additional features

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://www.ProAngular.com" target="_blank">
-    <img src="src/assets/images/pro-angular-logo.png" />
+    <img src="https://github.com/ProAngular/ngx-gist/raw/main/src/assets/images/pro-angular-logo.png" />
   </a>
   <h1 align="center">
     <a href="https://www.ProAngular.com" target="_blank">

src/app/app.component.ts

@@ -1,3 +1,4 @@
+import { NgxGist } from './public/ngx-gist.model';
 import { Component } from '@angular/core';
 
 @Component({
@@ -9,26 +10,82 @@ import { Component } from '@angular/core';
       <h3 align="center">
         Examples of displaying local and GitHub gists and code snippets.
       </h3>
-      <!-- EXAMPLE: FETCH _NEW_ GIST FROM GITHUB (NOT-SAVED) -->
+
+      <hr />
+
+      <h4>FETCHED GIST (AUTO CACHED FOR 24 HOURS)</h4>
       <ngx-gist gistId="d55ea012b585a16a9970878d90106d74"></ngx-gist>
-      <!-- EXAMPLE: FETCH _CACHED_ GIST FROM MEMORY (ON SUBSEQUENT REQUESTS) -->
+
+      <h4>FETCHED GIST (FORCED NO CACHE)</h4>
       <ngx-gist
         gistId="d55ea012b585a16a9970878d90106d74"
-        [useCache]="true"
+        [useCache]="false"
       ></ngx-gist>
-      <!-- EXAMPLE: DISPLAYING A SPECIFIC FILE -->
+
+      <h4>DISPLAYING ONE SPECIFIC FILE</h4>
+      <p>Display only one specific file when your gist has many.</p>
       <ngx-gist
-        displayOnlyFileName="super.js"
+        displayOnlyFileNames="super.js"
         gistId="d55ea012b585a16a9970878d90106d74"
-        [useCache]="true"
       ></ngx-gist>
-      <!-- TODO: SUPPORT LOCAL GIST -->
-      <!--
+
+      <h4>DISPLAYING MULTIPLE, SPECIFIC FILES</h4>
+      <p>You can also display any number of specific files by name.</p>
+      <ngx-gist
+        [displayOnlyFileNames]="['csstest.css', 'main.ts']"
+        gistId="d55ea012b585a16a9970878d90106d74"
+      ></ngx-gist>
+
+      <h4>DISPLAYING A BASIC CODE SNIPPET (WITHOUT A REMOTE GIST)</h4>
+      <p>
+        These are not fetched from GitHub and are brought in elsewhere from your
+        application (seperate HTTP request, or statically for example). With
+        this method you can display code snippets without having to create a
+        remote gist. Also, please notice here that no "Open Gist on GitHub" link
+        is displayed here.
+      </p>
       <ngx-gist [gist]="localGistObject"></ngx-gist>
-      -->
     </ngx-body>
     <ngx-footer #footer></ngx-footer>
   `,
-  styles: [],
+  styles: [
+    `
+      h2 {
+        margin-top: 2rem;
+      }
+      h3 {
+        margin-bottom: 3rem;
+      }
+    `,
+  ],
 })
-export class AppComponent {}
+export class AppComponent {
+  public readonly localGistObject = NgxGist.create({
+    // Required
+    files: [
+      {
+        content: getTimeSnippet,
+        filename: 'get-time.ts',
+      },
+      {
+        content: printHelloWorldSnippet,
+        filename: 'print-hello-world.js',
+      },
+    ],
+    // Optional
+    created_at: undefined,
+    languageOverride: undefined,
+  });
+}
+
+const getTimeSnippet = `
+function getTime(): number {
+  return new Date().getTime();
+}
+`.trimStart();
+
+const printHelloWorldSnippet = `
+function printHelloWorld() {
+  console.log('Hello world!');
+}
+`.trimStart();

src/app/public/ngx-gist-file-filter.pipe.ts

@@ -13,6 +13,8 @@ export class GistFileFilterPipe implements PipeTransform {
       return [];
     }
 
+    console.log(displayOnlyFileNames);
+
     if (!displayOnlyFileNames || displayOnlyFileNames === '') {
       return files;
     }

src/app/public/ngx-gist.component.ts

@@ -16,7 +16,7 @@ import { DOCUMENT } from '@angular/common';
         <mat-tab
           *ngFor="
             let file of gist.highlightedFiles
-              | gistFileFilter: displayOnlyFileName
+              | gistFileFilter: displayOnlyFileNames
           "
           [label]="file.filename"
         >
@@ -25,16 +25,18 @@ import { DOCUMENT } from '@angular/common';
           </pre>
         </mat-tab>
       </mat-tab-group>
-      <mat-card-footer>
+
+      <mat-card-footer *ngIf="gistIdChanges | async as gid">
         <a
-          *ngIf="gistIdChanges | async as gid"
+          *ngIf="!hideGistLink"
           target="_blank"
           [href]="'https://gist.github.com/' + gid"
         >
           <mat-icon>link</mat-icon> Open Gist on GitHub
         </a>
       </mat-card-footer>
-      <ng-template #loading> Loading Code Snippet... </ng-template>
+
+      <ng-template #loading>Loading Code Snippet...</ng-template>
     </mat-card>
   `,
   styleUrls: ['./ngx-gist.component.scss'],
@@ -50,13 +52,23 @@ export class NgxGistComponent implements OnInit {
   private htmlLinkElement: HTMLLinkElement | null = null;
 
   /**
-   * Display in the DOM only the selected filename from the gists files array.
-   *
-   * TODO: Make this possible for string array input.
+   * Display in the DOM only the selected filename(s) from the gists files array.
    *
    * Default: `undefined`
+   *
+   * Example: `'my-styles.scss'` or `'super-feature.ts'`
+   *
+   * Tip: Can be either a string or string array. File names much match exactly,
+   * be sure to remove any leading or trailing whitespace in the provided strings.
+   */
+  @Input() public displayOnlyFileNames?: string | readonly string[];
+  /**
+   * Optionally hide the gist link which opens the gist on GitHub. The gist links
+   * automatically dispaly for remote gists, but can be hidden with this feature.
+   *
+   * Default: `false`
    */
-  @Input() public displayOnlyFileName?: string;
+  @Input() public hideGistLink = false;
   /**
    * Provide a static gist model here directly which will be displayed if
    * no `gistId` is provided for remote fetching. Also this model will be
@@ -77,12 +89,13 @@ export class NgxGistComponent implements OnInit {
    * URL of the gists you create. For example the id `TH1515th31DT0C0PY` in:
    * https://gist.github.com/FakeUserName/TH1515th31DT0C0PY
    *
-   * Alternatively, provide a value directly in the sibling input `gist`.
+   * Default: `undefined`
+   *
+   * Tip: Alternatively, provide a value directly in the sibling input `gist`.
    */
   @Input() public set gistId(value: string) {
     this.gistIdSubject.next(value);
   }
-  // We want reactive behavior for `gistId` so we can update gists asynchronously
   private readonly gistIdSubject = new ReplaySubject<
     NgxGistComponent['gistId']
   >(1);
@@ -91,22 +104,23 @@ export class NgxGistComponent implements OnInit {
    * When defined, override automatic language detection [and styling] and
    * treat all gists as this lanuage.
    *
-   * See supported languages here:
-   * https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
-   *
    * Default: `undefined`
+   *
+   * Tip: See supported language strings here:
+   * https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
    */
   @Input() public languageName?: Language['name'];
   /**
    * Define a material core theme to apply. Ideally, you should already have
    * your global material theme set at the root of your project so try to
-   * avoid using this if possible. Note: These are also loaded from a CDN.
+   * avoid using this if possible.
    *
-   * See theming Angular Material: https://material.angular.io/guide/theming
-   *
-   * CDN used: `https://unpkg.com`
+   * Note: These are loaded from the CDN: `https://unpkg.com`
    *
    * Default: `undefined`
+   *
+   * Tip: See theming Angular Material: https://material.angular.io/guide/theming
+   * if you need help applying a global material theme.
    */
   @Input() public materialTheme:
     | 'deeppurple-amber'
@@ -117,7 +131,7 @@ export class NgxGistComponent implements OnInit {
   /**
    * Cache the GitHub gist request in local memory for 24 hours. GitHub has a
    * request limit, so this helps in reducing bandwidth. Loads previously
-   * fetched gist content from the users machine.
+   * fetched gist content from the users machine on refresh and page re-visits.
    *
    * Default: `true`
    */

src/app/public/ngx-gist.model.ts

@@ -70,9 +70,7 @@ export class NgxGist implements Gist {
   /* eslint-enable @typescript-eslint/naming-convention */
 
   /** Additional properties */
-  public readonly highlightedFiles: Array<
-    io.TypeOf<typeof gistFilesContent> & HighlightedContent
-  >;
+  public readonly highlightedFiles: HighlightedFiles;
   public readonly languageOverride?: string;
 
   /**
@@ -85,15 +83,32 @@ export class NgxGist implements Gist {
    * @returns A 'partial' model in which unnecessary fields are dummny data.
    */
   public static create(
-    args: Pick<Gist, 'files' | 'created_at' | 'description'> &
-      Pick<NgxGist, 'languageOverride'>,
+    args: { files: Files } & Partial<Pick<Gist, 'created_at' | 'description'>> & // Required // Optional
+      Pick<NgxGist, 'languageOverride'>, // Optional
   ): NgxGist {
+    const files: NgxGist['files'] = args.files.reduce((prev, curr) => {
+      const file: GistFilesContent = {
+        // Passed in values, use these.
+        content: curr.content,
+        filename: curr.filename,
+        // Leave these empty, not needed for a local, static model.
+        language: '',
+        raw_url: '',
+        size: 0,
+        truncated: false,
+        type: '',
+      };
+      return {
+        ...prev,
+        [curr.filename]: file,
+      };
+    }, {});
     return new NgxGist({
       // Properties with settable values. These are the mimimum values needed
       // for displaying non "remote".
-      created_at: new Date(args.created_at),
-      description: args.description,
-      files: args.files,
+      created_at: args.created_at ? new Date(args.created_at) : new Date(),
+      description: args.description ?? '',
+      files,
       languageOverride: args.languageOverride,
       // Empty properties that aren't needed for displaying non "remote" gists
       comments: 0,
@@ -140,6 +155,10 @@ export class NgxGist implements Gist {
   }
 }
 
+type Files = Array<Pick<GistFilesContent, 'content' | 'filename'>>;
+
+type HighlightedFiles = Array<GistFilesContent & HighlightedContent>;
+
 interface HighlightedContent {
   highlightedContent: string;
 }
@@ -208,6 +227,7 @@ const gistFilesContent = io.type({
   truncated: io.boolean,
   type: io.string,
 });
+type GistFilesContent = io.TypeOf<typeof gistFilesContent>;
 
 const gistFilesCodec = io.record(io.string, gistFilesContent);