From 021452d9cd252ca32c50aa4ce88cca4cda99453f Mon Sep 17 00:00:00 2001
From: Cody Tolene <codyatolene@gmail.com>
Date: Sun, 31 Jul 2022 13:28:36 -0500
Subject: [PATCH 1/3] Update layout and readme

---
 README.md                            | 24 +++++++++++++++++++++---
 package-lock.json                    |  2 +-
 package.json                         |  2 +-
 src/app/layout/footer.component.ts   |  4 +++-
 src/app/layout/header.component.ts   |  9 +++++++--
 src/app/public/ngx-gist.component.ts |  2 +-
 src/app/public/ngx-gist.module.ts    |  7 ++-----
 src/styles.scss                      |  5 +++--
 8 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index ad7fea7..51e13f3 100644
--- a/README.md
+++ b/README.md
@@ -19,10 +19,10 @@
 [![Website Status](https://img.shields.io/website?down_color=lightgrey&down_message=Offline&label=Website&up_color=green&up_message=Online&url=https%3A%2F%2Fwww.proangular.com)](https://www.proangular.com)
 [![Gitter Chat](https://badges.gitter.im/ProAngular/lobby.svg)](https://gitter.im/ProAngular/community)
 [![Discord Chat](https://img.shields.io/discord/1003103094588055552?label=Discord)](https://discord.com/channels/1003103094588055552)
-[![GitHub Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml)
-[![npmjs Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml)
 [![Sponsors](https://img.shields.io/github/sponsors/proangular?label=Sponsors)](https://github.com/sponsors/ProAngular)
 [![License](https://img.shields.io/npm/l/express.svg?maxAge=2592000)](/LICENSE)
+[![GitHub Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-gpr.yml)
+[![npmjs Package Status](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml/badge.svg)](https://github.com/ProAngular/ngx-gist/actions/workflows/on-merge-main-deploy-npmjs.yml)
 
 <!--
 [![StackBlitz](https://badgen.net/badge/StackBlitz/Offline/red)]()
@@ -104,12 +104,30 @@ export class FeatureModule { }
 
 ## Dependencies
 
-### Styling
+### Styling UX - Angular Material
 
  You should have an Angular Material theme set up prior to using this, but it's not strictly neccessary. Disabled by default, you can alternatively use the `materialTheme` component input (see API documentation below) to auto load a pre-defined Angular Material theme from a CDN. I don't recommend depending on the CDN or this approach, but I wanted to make it possible for you. It's also possible to use this without an angular theme and style it yourself entirely!
 
 More information on theming Angular Material: https://material.angular.io/guide/theming
 
+### Styling UX Code Snippets - Highlight.js
+
+You can pass in any theme name (string, excluding the file extension ".css") to the input `codeTheme` on _any_ `ngx-gist` element on a single page which will apply the theme to that pages gists.
+
+You can find the available styles here: https://unpkg.com/browse/highlight.js@11.6.0/styles/
+
+Alternatively if you only want to use one style across the whole project or just apply to specific features, I recommend importing the styles directly. To do this install the `highlight.js` package and apply the style. Example below:
+
+```bash
+npm install highlight.js --save
+```
+
+```diff
+...
++ @import "highlight.js/styles/github.css";
+...
+```
+
 ### Core Packages
 
 Depending on how your project is set up, you may also need the following imports either in your `FeatureModule` for example or your root module (generally these are already imported in `AppModule` or similar, they are common features of Angular). These dependencies are needed for animating the Angular Material tabs click transition and making an HTTP request to GitHub to retrieve the remote gist information.
diff --git a/package-lock.json b/package-lock.json
index 22d4421..9345f20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@proangular/ngx-gist",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index 9130f49..ff4a337 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@proangular/ngx-gist",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "An Angular Material and HighlighJs styled display box for GitHub gist and local code snippets.",
   "author": "Pro Angular <webmaster@proangular.com>",
   "homepage": "https://www.proangular.com",
diff --git a/src/app/layout/footer.component.ts b/src/app/layout/footer.component.ts
index 1f60d58..8dca100 100644
--- a/src/app/layout/footer.component.ts
+++ b/src/app/layout/footer.component.ts
@@ -5,7 +5,9 @@ import { Component } from '@angular/core';
   template: `
     <footer [style.height]="height + 'px'">
       <a href="https://www.ProAngular.com" target="_blank">
-        <img src="assets/images/pro-angular-logo.png" />
+        <img
+          src="https://www.proangular.com/assets/images/pro-angular-logo-large.png"
+        />
       </a>
       <p>
         Copyright &copy; Pro Angular 2022
diff --git a/src/app/layout/header.component.ts b/src/app/layout/header.component.ts
index 184a661..da3fb50 100644
--- a/src/app/layout/header.component.ts
+++ b/src/app/layout/header.component.ts
@@ -6,7 +6,9 @@ import { Component } from '@angular/core';
     <mat-toolbar class="mat-elevation-z6">
       <mat-toolbar-row>
         <a class="logo" href="https://www.ProAngular.com" target="_blank">
-          <img src="assets/images/pro-angular-logo-full.png" />
+          <img
+            src="https://www.proangular.com/assets/images/pro-angular-logo-full.png"
+          />
         </a>
         <div class="github-link-container">
           <a
@@ -14,7 +16,10 @@ import { Component } from '@angular/core';
             aria-label="GitHub Repo"
             target="_blank"
           >
-            <img class="git-hub" src="assets/images/git-hub.svg" />
+            <img
+              class="git-hub"
+              src="https://www.proangular.com/assets/images/git-hub.svg"
+            />
           </a>
         </div>
       </mat-toolbar-row>
diff --git a/src/app/public/ngx-gist.component.ts b/src/app/public/ngx-gist.component.ts
index 8cb0860..2903281 100644
--- a/src/app/public/ngx-gist.component.ts
+++ b/src/app/public/ngx-gist.component.ts
@@ -44,7 +44,7 @@ import {
           target="_blank"
           [href]="'https://gist.github.com/' + gid"
         >
-          <mat-icon>link</mat-icon> Open Gist on GitHub
+          &#128279; Open Gist on GitHub
         </a>
       </mat-card-footer>
 
diff --git a/src/app/public/ngx-gist.module.ts b/src/app/public/ngx-gist.module.ts
index ee63c07..d6f9707 100644
--- a/src/app/public/ngx-gist.module.ts
+++ b/src/app/public/ngx-gist.module.ts
@@ -5,20 +5,17 @@ import { NgxGistService } from './ngx-gist.service';
 import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { GistFileFilterPipe } from './ngx-gist-file-filter.pipe';
-import { MatIconModule } from '@angular/material/icon';
 import { NgxGistLineNumbersService } from './ngx-gist-line-numbers.service';
 import { NgxGistThemeService } from './ngx-gist-theme.service';
 
 @NgModule({
   declarations: [NgxGistComponent, GistFileFilterPipe],
   imports: [
-    // Needs to be imported at root.
+    // Needs to be imported at root. See `README.md` for more info.
     // BrowserAnimationsModule,
-    CommonModule,
-    // Needs to be imported at root.
     // HttpClientModule,
+    CommonModule,
     MatCardModule,
-    MatIconModule,
     MatTabsModule,
   ],
   exports: [NgxGistComponent],
diff --git a/src/styles.scss b/src/styles.scss
index 4316880..962c469 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,7 +3,7 @@
 // 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";
+@import "@angular/material/prebuilt-themes/deeppurple-amber.css";
 
 /* Alternative pre-built themes.
 @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
@@ -18,4 +18,5 @@ body {
   background-color: #faf9f6;
 }
 
-@import "~highlight.js/styles/github.css";
+// Use this to apply a `highlight.js` theme globally
+// @import "highlight.js/styles/github.css";

From 0573a3986bd2b4003793d9eee544e5ef64e55049 Mon Sep 17 00:00:00 2001
From: Cody Tolene <codyatolene@gmail.com>
Date: Sun, 31 Jul 2022 13:33:00 -0500
Subject: [PATCH 2/3] Theme and doc updates

---
 README.md                            | 4 ++--
 src/app/public/ngx-gist.component.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 51e13f3..c109865 100644
--- a/README.md
+++ b/README.md
@@ -234,10 +234,10 @@ Line numbers are enabled by default, but you can turn them off like so.
 
 | Input Name               | Input Typing                         | Default Value | Description                                                                                                                                                                                                                                                                    |
 | ------------------------ | ------------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **codeTheme**            | `HighlightJsTheme` (string)          | `'default'`   | The `highlight.js` code theme to use and display. Note: Only _one_ theme can be loaded on a single page at a time! The first theme to load will apply to all gists on the page.                                                                                                |
+| **codeTheme**            | `HighlightJsTheme \| undefined`      | `undefined`   | The `highlight.js` code theme to use and display. Note: Only _one_ theme can be loaded on a single page at a time! The first theme to load will apply to all gists on the page. Available themes here: https://unpkg.com/browse/highlight.js@11.6.0/styles/                    |
 | **displayOnlyFileNames** | `string \| string[] \| undefined`    | `undefined`   | Display in the DOM only the selected filename(s) from the gists files array. 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.                                              |
 | **gist**                 | `NgxGist \| undefined`               | `undefined`   | 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.                 |
-| **gistId**               | `string`                             | `undefined`   | 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 `TH1515TH3G15T1D` in: https://gist.github.com/YourUserName/TH1515TH3G15T1D. Alternatively, provide a value directly in the sibling input `gist`. |
+| **gistId**               | `string`                             | `undefined`   | 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 `TH1515TH3G15T1D` in: https://gist.github.com/YourUserName/TH1515TH3G15T1D. Alternatively, provide a value directly in the sibling input `gist`.     |
 | **hideGistLink**         | `bool`                               | `false`       | Optionally hide the gist link which opens the gist on GitHub. The gist links automatically display for remote gists, but can be hidden with this feature.                                                                                                                      |
 | **materialTheme**        | `MaterialPrebuiltTheme \| undefined` | `undefined`   | 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 loaded from the CDN: `https://unpkg.com`                                            |
 | **showLineNumbers**      | `bool`                               | `true`        | Display or hide the line numbers in your gist code snippets.                                                                                                                                                                                                                   |
diff --git a/src/app/public/ngx-gist.component.ts b/src/app/public/ngx-gist.component.ts
index 2903281..61a0e4d 100644
--- a/src/app/public/ngx-gist.component.ts
+++ b/src/app/public/ngx-gist.component.ts
@@ -113,12 +113,12 @@ export class NgxGistComponent implements OnInit {
   /**
    * The `highlight.js` code theme to use and display.
    *
-   * Default: `'default'`
+   * Default: `undefined`
    *
    * Note: Only _one_ theme can be loaded on a single page at a time! The first
    * theme to load will apply to all gists on the page.
    */
-  @Input() public codeTheme: HighlightJsTheme = 'default';
+  @Input() public codeTheme?: HighlightJsTheme;
   /**
    * 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

From e6e35b78de04a3524ead51d248a772a936da2fb8 Mon Sep 17 00:00:00 2001
From: Cody Tolene <codyatolene@gmail.com>
Date: Sun, 31 Jul 2022 13:35:50 -0500
Subject: [PATCH 3/3] Update gist link

---
 src/app/public/ngx-gist.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/public/ngx-gist.component.ts b/src/app/public/ngx-gist.component.ts
index 61a0e4d..b1f4a4a 100644
--- a/src/app/public/ngx-gist.component.ts
+++ b/src/app/public/ngx-gist.component.ts
@@ -44,7 +44,7 @@ import {
           target="_blank"
           [href]="'https://gist.github.com/' + gid"
         >
-          &#128279; Open Gist on GitHub
+          🔗 Open Gist on GitHub
         </a>
       </mat-card-footer>