Ct/template updates

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.
@@ -216,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.                                                                                                                                                                                                                   |

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",

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

src/app/layout/header.component.ts

@@ -6,15 +6,20 @@ 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
             href="https://github.com/ProAngular/ngx-gist"
             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>

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
+          🔗 Open Gist on GitHub
         </a>
       </mat-card-footer>
 
@@ -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

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],

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";