feat: Add support for custom remote javascript files (#751)

Paolo Mainardi

02.22.2023 c3bcde658bfca3a779b7948e5817f19bdc30298c

feat: Add support for custom remote javascript files (#751)

### Prerequisites

Put an `x` into the box(es) that apply:

- [ ] This pull request fixes a bug.
- [X] This pull request adds a feature - #750 
- [ ] This pull request introduces breaking change.

### Description

Add a new configuration item and use resources.GetRemote to gather the
remote asset.

### Checklist

#### General

- [X] Describe what changes are being made
- [X] Explain why and how the changes were necessary and implemented
respectively

#### Resources

- [X] If you have changed any SCSS code, run `make release` to
regenerate all CSS files

#### Contributors

- [X] Add yourself to `CONTRIBUTORS.md` if you aren't on it already

 docs/configurations.md

@@ -130,11 +130,11 @@
| Name                          | Type   | Required | Description                                      | Default                          | Example                                          |
| ----------------------------- | ------ | -------- | ------------------------------------------------ | -------------------------------- | ------------------------------------------------ |
| author                        | string | Yes      | Author name.                                     |                                  | `"John Doe"`                                     |
| info                          | string | Yes      | An headline, job title or similar.               |                                  | `"Full Stack Developer"`                         | 
| info                          | string | Yes      | An headline, job title or similar.               |                                  | `"Full Stack Developer"`                         |
| description                   | string | Yes      | Description of the site.                         |                                  | `"John Doe's personal website"`                  |
| keywords                      | string | Yes      | Site keywords.                                   |                                  | `"blog,developer,personal"`                      |
| avatarURL                     | string | No       | Photo of the author.                             |                                  | `"images/avatar.jpg"`                            | 
| gravatar                      | string | No       | Gravatar photo of the author                     |                                  | `"john.doe@example.com"`                         | 
| avatarURL                     | string | No       | Photo of the author.                             |                                  | `"images/avatar.jpg"`                            |
| gravatar                      | string | No       | Gravatar photo of the author                     |                                  | `"john.doe@example.com"`                         |
| favicon_32                    | string | No       | Custom path to a 32x32 favicon.                  | `"/img/favicon-32x32.png"`       | `"/img/favicon-32x32.png"`                       |
| favicon_16                    | string | No       | Custom path to a 16x16 favicon.                  | `"/img/favicon-16x16.png"`       | `"/img/favicon-16x16.png"`                       |
| touchIcon                     | string | No       | Custom path to a touch-icon                      | `"/images/apple-touch-icon.png"` | `"/images/apple-touch-icon.png"`                 |
@@ -149,13 +149,14 @@
| customCSS                     | list   | No       | Add extra CSS files to the website.              | []                               | `["css/extra-style.css"]`                        |
| customSCSS                    | list   | No       | Add extra SCSS files to the website.             | []                               | `["scss/extra-style.scss"]`                      |
| customJS                      | list   | No       | Add extra JS files to the website.               | []                               | `["js/extra-script.js"]`                         |
| customRemoteJS                | list   | No       | Add extra remote JS files to the website.        | []                               | `["https://www.example.com/file.js"]` |
| enableTwemoji                 | bool   | No       | Adds support for Twemoji                         | `false`                          | `true` or `false`                                |

### Social Icons Configuration

Social Icons are optional. To use them you will need to set at least all the following required parameters for each icon.

| Configuration  | Type   | Required | Description                              | Example                         | 
| Configuration  | Type   | Required | Description                              | Example                         |
| -------------- | ------ | -------- | ---------------------------------------- | ------------------------------- |
| name           | string | Yes      | Icon name.                               | `"Github"`                      |
| icon           | string | Yes      | ForkAwesome icon classes.                | `"fa fa-github"`                |
@@ -186,7 +187,7 @@

Menu Items are optional. To use them you will need to set all the following required parameters for each icon.

| Configuration  | Type   | Required | Description                              | Example                         | 
| Configuration  | Type   | Required | Description                              | Example                         |
| -------------- | ------ | -------- | ---------------------------------------- | ------------------------------- |
| name           | string | Yes      | Menu Item name.                          | `"Posts"`                       |
| weight         | int    | Yes      | Menu Item order.                         | `1`                             |
@@ -212,7 +213,7 @@

CSP stands for [Content Security Policy](https://developers.google.com/web/fundamentals/security/csp). These configurations are optional. To use them you will need to set all the following required parameters. See [here](https://developers.google.com/web/fundamentals/security/csp#policy_applies_to_a_wide_variety_of_resources) for reference.

| Configuration  | Type        | Required | Description | Example                         | 
| Configuration  | Type        | Required | Description | Example                         |
| -------------- | ----------- | -------- | ----------- | ------------------------------- |
| childsrc       | string list | Yes      |             | `["'self'"]`                    |
| fontsrc        | string list | Yes      |             | `["'self'"]`                    |

 exampleSite/config.toml

@@ -39,9 +39,13 @@
customCSS = []
# Custom SCSS, file path is relative to Hugo's asset folder (default: {your project root}/assets)
customSCSS = []

# Custom JS
customJS = []

# Custom remote JS files
customRemoteJS = []

# If you want to use fathom(https://usefathom.com) for analytics, add this section
# [params.fathomAnalytics]
# siteID = "ABCDE"

 layouts/_default/baseof.html

@@ -49,6 +49,17 @@
  {{ end }}
  {{ end }}

  {{ range .Site.Params.customRemoteJS }}
  {{ if $.Site.IsServer }}
  {{ $script := resources.GetRemote . }}
  <script src="{{ $script.RelPermalink }}"></script>
  {{ else }}
  {{ $script := resources.GetRemote . | minify | fingerprint }}
  <script src="{{ $script.RelPermalink }}" integrity="{{ $script.Data.Integrity }}"></script>
  {{ end }}
  {{ end }}


  {{ template "_internal/google_analytics.html" . }}

  {{ if and .Site.Params.fathomAnalytics .Site.Params.fathomAnalytics.siteID }}