Enable dynamic themes and caching

CodyTolene · CodyTolene · commit 37669b21d8ff · 2022-07-29T01:51:46.000-05:00
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -9,13 +9,23 @@ import { Component } from '@angular/core';
       <h3 align="center">
         Examples of displaying local and GitHub gists and code snippets.
       </h3>
-      <!-- EXAMPLE: LOCAL GIST -->
-      <!-- EXAMPLE: FETCH GIST FROM GITHUB -->
+      <!-- EXAMPLE: FETCH _NEW_ GIST FROM GITHUB (NOT-SAVED) -->
+      <ngx-gist gistId="d55ea012b585a16a9970878d90106d74"></ngx-gist>
+      <!-- EXAMPLE: FETCH _CACHED_ GIST FROM MEMORY (ON SUBSEQUENT REQUESTS) -->
       <ngx-gist
         gistId="d55ea012b585a16a9970878d90106d74"
+        [useCache]="true"
+      ></ngx-gist>
+      <!-- EXAMPLE: DISPLAYING A SPECIFIC FILE -->
+      <ngx-gist
         displayOnlyFileName="super.js"
+        gistId="d55ea012b585a16a9970878d90106d74"
+        [useCache]="true"
       ></ngx-gist>
-      <!-- EXAMPLE: DISPLAYING SPECIFIC FILES -->
+      <!-- TODO: SUPPORT LOCAL GIST -->
+      <!--
+      <ngx-gist [gist]="localGistObject"></ngx-gist>
+      -->
     </ngx-body>
     <ngx-footer #footer></ngx-footer>
   `,
diff --git a/src/app/public/ngx-gist.component.scss b/src/app/public/ngx-gist.component.scss
@@ -1,3 +1,26 @@
+@import "https://fonts.googleapis.com/icon?family=Material+Icons";
+
+:host.deeppurple-amber ::ng-deep {
+  // https://unpkg.com/@angular/material@latest/prebuilt-themes/deeppurple-amber.css
+  // @import "https://unpkg.com/@angular/material@14.1.0/prebuilt-themes/deeppurple-amber.css";
+  @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+}
+
+:host.indigo-pink {
+  // https://unpkg.com/@angular/material@latest/prebuilt-themes/indigo-pink.css
+  @import "https://unpkg.com/@angular/material@14.1.0/prebuilt-themes/indigo-pink.css";
+}
+
+:host.pink-bluegrey {
+  // https://unpkg.com/@angular/material@latest/prebuilt-themes/pink-bluegrey.css
+  @import "https://unpkg.com/@angular/material@14.1.0/prebuilt-themes/pink-bluegrey.css";
+}
+
+:host.purble-green {
+  // https://unpkg.com/@angular/material@latest/prebuilt-themes/purple-green.css
+  @import "https://unpkg.com/@angular/material@14.1.0/prebuilt-themes/purple-green.css";
+}
+
 pre {
   display: flex;
   margin-top: 0;
diff --git a/src/app/public/ngx-gist.component.ts b/src/app/public/ngx-gist.component.ts
@@ -1,16 +1,18 @@
 import { NgxGistService } from './ngx-gist.service';
 import { isNonEmptyValue } from './ngx-gist.utilities';
 import { NgxGist } from './ngx-gist.model';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, HostBinding, Inject, Input, OnInit } from '@angular/core';
 import { Language, default as hljs } from 'highlight.js';
-import { BehaviorSubject, filter, firstValueFrom } from 'rxjs';
+import { filter, firstValueFrom, ReplaySubject } from 'rxjs';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { DOCUMENT } from '@angular/common';
 
 @UntilDestroy()
 @Component({
   selector: 'ngx-gist',
   template: `
     <mat-card class="code-container">
+      <!-- TODO: LOADING ICON OR MESSAGE -->
       <mat-tab-group *ngIf="gist as g">
         <mat-tab
           *ngFor="
@@ -27,9 +29,9 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
       </mat-tab-group>
       <mat-card-footer>
         <a
-          *ngIf="gistId && gist"
+          *ngIf="gistIdChanges | async as gid"
           target="_blank"
-          [href]="'https://gist.github.com/' + gistId"
+          [href]="'https://gist.github.com/' + gid"
         >
           <mat-icon>link</mat-icon> Open Gist on GitHub
         </a>
@@ -39,70 +41,140 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
   styleUrls: ['./ngx-gist.component.scss'],
 })
 export class NgxGistComponent implements OnInit {
-  public constructor(public readonly ngxGistService: NgxGistService) {}
+  public constructor(
+    @Inject(DOCUMENT)
+    private readonly document: Document,
+    private readonly ngxGistService: NgxGistService,
+  ) {}
 
   public codeSnippet: string | null = null;
+  private htmlLinkElement: HTMLLinkElement | null = null;
 
   /**
-   * Cache the GitHub gist request in local memory. GitHub has a request
-   * limit so using this is wise in making sure users always get the content,
-   * especially on quick refreshes or having multiple gist snippets on page.
-   */
-  @Input() public cacheForMin?: number;
-
-  /**
-   * Display in the DOM only the selected filename.
+   * Display in the DOM only the selected filename from the gists files array.
+   *
+   * TODO: Make this possible for string array input.
+   *
+   * Default: `undefined`
    */
   @Input() public displayOnlyFileName?: string;
-
   /**
    * Provide a static gist model here directly which will be displayed if
    * no `gistId` is provided for remote fetching. Also this model will be
    * displayed should a fetch fail when retrieving `gistId`, or overwritten
    * once the pertaining `gistId` data is fetched.
+   *
+   * Default: `undefined`
    */
   @Input() public gist?: NgxGist;
-
   // We want reactive behavior for `gistId` so we can update gists asynchronously
-  private readonly gistIdSubject = new BehaviorSubject<
+  private readonly gistIdSubject = new ReplaySubject<
     NgxGistComponent['gistId']
-  >(null);
-
+  >(1);
+  public readonly gistIdChanges = this.gistIdSubject.asObservable();
   /**
    * Provide the GitHub gist id to be fetched and loaded. This can be found in
    * 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`.
    */
-  @Input() public set gistId(value: string | null) {
+  @Input() public set gistId(value: string) {
     this.gistIdSubject.next(value);
   }
-
+  /**
+   * 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`
+   */
   @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.
+   *
+   * See theming Angular Material: https://material.angular.io/guide/theming
+   *
+   * CDN used: `https://unpkg.com`
+   *
+   * Default: `undefined`
+   */
+  @Input() @HostBinding('class') public materialTheme:
+    | 'deeppurple-amber'
+    | 'indigo-pink'
+    | 'pink-bluegrey'
+    | 'purple-green'
+    | undefined = undefined;
+  /**
+   * 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.
+   *
+   * Default: `true`
+   */
+  @Input() public useCache = true;
 
   public async ngOnInit(): Promise<void> {
-    this.gistIdSubject
+    this.setTheme();
+
+    this.gistIdChanges
       .pipe(filter(isNonEmptyValue), untilDestroyed(this))
       .subscribe(async (gistId) => {
-        // Use the initial gist model as a fallback for a failed fetch. This
-        // enables us to have a fallback gist snippet should we be offline or
-        // the data is unavailable for some reason.
-        const initialGist = this.gist ? { ...this.gist } : undefined;
-        // Fetch and hydrate model or fallback to initial gist.
-        this.gist =
-          (await firstValueFrom(this.ngxGistService.get(gistId))) ??
-          initialGist;
+        if (this.useCache) {
+          const cachedValue = this.ngxGistService.getFromCache(gistId);
+          if (cachedValue) {
+            // Value is cached and not previously expired, use it.
+            this.gist = cachedValue;
+            return;
+          }
+        }
+
+        await this.fetchAndSetGist(gistId);
       });
   }
 
+  // TODO: Work on speeding this call up. Or possibly pre-render instead.
   public getHighlightJsContent(value: string): string {
     const userSpecifiedLanguage = this.languageName;
-
     if (userSpecifiedLanguage) {
       return hljs.highlight(value, { language: userSpecifiedLanguage }).value;
     }
 
     return hljs.highlightAuto(value).value;
   }
+
+  private async fetchAndSetGist(gistId: string): Promise<void> {
+    // Use the initial gist model as a fallback for a failed fetch. This
+    // enables us to have a fallback gist snippet should we be offline or
+    // the data is unavailable for some reason.
+    const initialGist = this.gist ? { ...this.gist } : undefined;
+
+    // Fetch and hydrate model or fallback to initial gist.
+    this.gist =
+      (await firstValueFrom(this.ngxGistService.get(gistId))) ?? initialGist;
+
+    if (this.useCache && this.gist) {
+      // Set value in cache for reuse saving on the amount of HTTP requests.
+      // Set refresh time to be a hard coded 24 hours. This was once configurable
+      // but I decided against it for simplicities sake on ease of use.
+      this.ngxGistService.setToCache(this.gist, 1440);
+    }
+  }
+
+  private setTheme(): void {
+    if (!this.materialTheme) {
+      return;
+    }
+
+    this.htmlLinkElement = this.document.createElement('link');
+    this.htmlLinkElement.href = `https://unpkg.com/@angular/material@14.1.0/prebuilt-themes/${this.materialTheme}.css`;
+    this.htmlLinkElement.media = 'screen,print';
+    this.htmlLinkElement.rel = 'stylesheet';
+    this.htmlLinkElement.type = 'text/css';
+    this.document.head.appendChild(this.htmlLinkElement);
+  }
 }
diff --git a/src/app/public/ngx-gist.model.ts b/src/app/public/ngx-gist.model.ts
@@ -171,7 +171,7 @@ const gistFilesCodec = io.readonly(
   'GistFiles',
 );
 
-const gistCodec = io.readonly(
+export const gistCodec = io.readonly(
   io.intersection([
     io.type({
       comments: io.number,
diff --git a/src/app/public/ngx-gist.service.ts b/src/app/public/ngx-gist.service.ts
@@ -1,12 +1,20 @@
-import { NgxGist } from './ngx-gist.model';
+import { gistCodec, NgxGist } from './ngx-gist.model';
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { catchError, map, Observable, of } from 'rxjs';
+import {
+  decodeValueElseNull,
+  isNonEmptyString,
+  parsedJsonFromStringCodec,
+} from './ngx-gist.utilities';
+import * as io from 'io-ts';
 
 @Injectable()
 export class NgxGistService {
   public constructor(private readonly httpClient: HttpClient) {}
 
+  private readonly delimiter = '||';
+
   /**
    * Fetch gist data from GitHub.
    *
@@ -26,4 +34,64 @@ export class NgxGistService {
         map((response) => NgxGist.deserialize(response) ?? null),
       );
   }
+
+  public getFromCache(gistId: string): NgxGist | null {
+    const key = `gist${this.delimiter + gistId}`;
+    const value = localStorage.getItem(key);
+    if (value === null || !isNonEmptyString(value)) {
+      // Doesn't exist in memory
+      return null;
+    }
+
+    const storedGist = decodeValueElseNull(storedGistFromJsonStringCodec)(
+      value,
+    );
+    if (!storedGist) {
+      // Failed to deserialize stored data (corruption?). Remote it and return.
+      localStorage.removeItem(key);
+      return null;
+    }
+
+    const now = new Date();
+    if (now.getTime() > storedGist.expiration) {
+      // Stored value has since expired, remove it and return.
+      localStorage.removeItem(key);
+      return null;
+    }
+
+    const gist = storedGist.value;
+    // All is good, return unexpired gist
+    return {
+      ...gist,
+      created_at: new Date(gist.created_at),
+      updated_at: new Date(gist.updated_at),
+    };
+  }
+
+  public setToCache(gist: NgxGist, expiresInMin?: number): void {
+    const key = `gist${this.delimiter + gist.id}`;
+    const now = new Date();
+    const expiresInMs = expiresInMin ? expiresInMin * 60000 : 0;
+    const value: StoredGist = {
+      expiration: now.getTime() + expiresInMs,
+      value: gist,
+    };
+    const stringValue = JSON.stringify(value);
+    localStorage.setItem(key, stringValue);
+  }
 }
+
+const storedGistCodec = io.readonly(
+  io.type({
+    expiration: io.number,
+    value: gistCodec,
+  }),
+  'StoredGist',
+);
+
+const storedGistFromJsonStringCodec = parsedJsonFromStringCodec.pipe(
+  storedGistCodec,
+  'StoredGistFromJsonString',
+);
+
+type StoredGist = io.TypeOf<typeof storedGistCodec>;
diff --git a/src/app/public/public.ts b/src/app/public/public.ts
@@ -1,9 +1,9 @@
 /** Public API Exports for Node Package */
 
-export * from './ngx-gist.component';
 export * from './ngx-gist-content.pipe';
+export * from './ngx-gist-file-filter.pipe';
+export * from './ngx-gist.component';
 export * from './ngx-gist.model';
 export * from './ngx-gist.module';
-export * from './ngx-gist-file-filter.pipe';
 export * from './ngx-gist.service';
 export * from './ngx-gist.utilities';
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,5 +1,16 @@
 /* You can add global styles to this file, and also import other style files */
+
+// It's wise to import a prebuilt Material theme or custom theme at the root of
+// your project when using `@proangular/ngx-gist`.
+
+@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+
+/* Alternative pre-built themes.
 @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
+@import "~@angular/material/prebuilt-themes/purple-green.css";
+*/
 
 body {
   padding: 0;
