Allow <head> and footer scripts to be changed via config (#1241)

* Allow `<head>` and footer scripts to be changed via config * Update JavaScript documentation Close #1238
mmistakes · Sep 12, 2017 · 8fc9bcc · 8fc9bcc
1 parent 93c4fbc
commit 8fc9bcc
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - DRY up button CSS using Sass lists and YIQ Color Contrast mixin.
 - Add `btn--primary` button class. **Note:** elements that were previously using only a `.btn` class will now also need `.btn--primary` (eg. `<a class="btn btn--primary" href="#">my link</a>`).
 - Add `air`, `contrast`, `dark`, `dirt`, `mint`, and `sunrise` skin color options. [#1208](https://github.com/mmistakes/minimal-mistakes/issues/1208)
+- Allow scripts in `<head>` and before `</body>` to be added/overridden with `head_scripts` and `footer_scripts` arrays in `_config.yml`. [#1241](https://github.com/mmistakes/minimal-mistakes/pull/1241)
 
 ## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)
 

diff --git a/_includes/head.html b/_includes/head.html
@@ -29,4 +29,15 @@
       height: 100%;
     }
   </style>
-<![endif]-->
+<![endif]-->
+
+{% if site.head_scripts %}
+  {% for script in site.head_scripts %}
+    {% if script contains "://" %}
+      {% capture script_path %}{{ script }}{% endcapture %}
+    {% else %}
+      {% capture script_path %}{{ script | absolute_url }}{% endcapture %}
+    {% endif %}
+    <script src="{{ script_path }}"></script>
+  {% endfor %}
+{% endif %}
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -1,4 +1,15 @@
-<script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
+{% if site.footer_scripts %}
+  {% for script in site.footer_scripts %}
+    {% if script contains "://" %}
+      {% capture script_path %}{{ script }}{% endcapture %}
+    {% else %}
+      {% capture script_path %}{{ script | absolute_url }}{% endcapture %}
+    {% endif %}
+    <script src="{{ script_path }}"></script>
+  {% endfor %}
+{% else %}
+  <script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
+{% endif %}
 
 {% include analytics.html %}
 {% include /comments-providers/scripts.html %}
diff --git a/docs/_docs/05-configuration.md b/docs/_docs/05-configuration.md
@@ -2,7 +2,7 @@
 title: "Configuration"
 permalink: /docs/configuration/
 excerpt: "Settings for configuring and customizing the theme."
-last_modified_at: 2017-09-12T10:38:09-04:00
+last_modified_at: 2017-09-12T12:25:16-04:00
 ---
 
 Settings that affect your entire site can be changed in [Jekyll's configuration file](https://jekyllrb.com/docs/configuration/): `_config.yml`, found in the root of your project. If you don't have this file you'll need to copy or create one using the theme's [default `_config.yml`](https://github.com/mmistakes/minimal-mistakes/blob/master/_config.yml) as a base.
@@ -167,6 +167,21 @@ If you don't set `repository` correctly you may see the following error when try
 
 For more information on how `site.github` data can be used with Jekyll check out [`github-metadata`'s documentation](https://github.com/jekyll/github-metadata).
 
+### Site Scripts
+
+Add scripts to the `<head>` or closing `</body>` elements by assigning paths to either `head_scripts` and/or `footer_scripts`.
+
+For example, to add a CDN version of jQuery to page's head along with a custom script you'd do the following:
+
+```yaml
+head_scripts:
+  - https://code.jquery.com/jquery-3.2.1.min.js
+  - /assets/js/your-custom-head-script.js
+```
+
+Consult the [JavaScript documentation]({{ site.baseurl }}{% link _docs/17-javascript.md %}) for more information on working with theme scripts.
+{: .notice--info}
+
 ### Site Default Teaser Image
 
 To assign a fallback teaser image used in the "**Related Posts**" module, place a graphic in the `/assets/images/` directory and add the filename to `_config.yml` like so:

diff --git a/docs/_docs/17-javascript.md b/docs/_docs/17-javascript.md
@@ -2,7 +2,7 @@
 title: "JavaScript"
 permalink: /docs/javascript/
 excerpt: "Instructions for customizing and building the theme's scripts."
-last_modified_at: 2016-11-03T11:35:42-04:00
+last_modified_at: 2017-09-12T12:25:08-04:00
 ---
 
 The theme's [`assets/js/main.min.js`] script is built from several vendor, jQuery plugins, and other scripts found in [`assets/js/`](https://github.com/mmistakes/minimal-mistakes/tree/master/assets/js).
@@ -29,6 +29,21 @@ To modify or add your own scripts include them in [`assets/js/_main.js`](https:/
 
 If you add additional scripts to `assets/js/plugins/` and would like them concatenated with the others, be sure to update the `uglify` script in [`package.json`](https://github.com/mmistakes/minimal-mistakes/blob/master/package.json). Same goes for scripts that you remove.
 
+You can also add scripts to the `<head>` or closing `</body>` elements by adding paths to following arrays in `_config.yml`.
+
+**Example:**
+
+```yaml
+head_scripts:
+  - https://code.jquery.com/jquery-3.2.1.min.js
+  - /assets/js/your-custom-head-script.js
+footer_scripts:
+  - /assets/js/your-custom-footer-script.js
+```
+
+**Note:** If you assign `footer_scripts` the theme's `/assets/js/main.min.js` file will be deactivated. This script includes jQuery and various other plugins that you'll need to find replacements for and include separately.
+{: .notice--warning}
+
 ---
 
 ## Build Process

diff --git a/docs/_docs/18-history.md b/docs/_docs/18-history.md
@@ -4,7 +4,7 @@ permalink: /docs/history/
 excerpt: "Change log of enhancements and bug fixes made to the theme."
 sidebar:
   nav: docs
-last_modified_at: 2017-09-12T08:49:12-04:00
+last_modified_at: 2017-09-12T12:06:47-04:00
 ---
 
 ## Unreleased
@@ -17,6 +17,7 @@ last_modified_at: 2017-09-12T08:49:12-04:00
 - DRY up button CSS using Sass lists and YIQ Color Contrast mixin.
 - Add `btn--primary` button class. **Note:** elements that were previously using only a `.btn` class will now also need `.btn--primary` (eg. `<a class="btn btn--primary" href="#">my link</a>`).
 - Add `air`, `contrast`, `dark`, `dirt`, `mint`, and `sunrise` skin color options. [#1208](https://github.com/mmistakes/minimal-mistakes/issues/1208)
+- Allow scripts in `<head>` and before `</body>` to be added/overridden with `head_scripts` and `footer_scripts` arrays in `_config.yml`. [#1241](https://github.com/mmistakes/minimal-mistakes/pull/1241)
 
 ## [4.5.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.2)
 

diff --git a/docs/_includes/head.html b/docs/_includes/head.html
@@ -29,4 +29,15 @@
       height: 100%;
     }
   </style>
-<![endif]-->
+<![endif]-->
+
+{% if site.head_scripts %}
+  {% for script in site.head_scripts %}
+    {% if script contains "://" %}
+      {% capture script_path %}{{ script }}{% endcapture %}
+    {% else %}
+      {% capture script_path %}{{ script | absolute_url }}{% endcapture %}
+    {% endif %}
+    <script src="{{ script_path }}"></script>
+  {% endfor %}
+{% endif %}
diff --git a/docs/_includes/scripts.html b/docs/_includes/scripts.html
@@ -1,4 +1,15 @@
-<script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
+{% if site.footer_scripts %}
+  {% for script in site.footer_scripts %}
+    {% if script contains "://" %}
+      {% capture script_path %}{{ script }}{% endcapture %}
+    {% else %}
+      {% capture script_path %}{{ script | absolute_url }}{% endcapture %}
+    {% endif %}
+    <script src="{{ script_path }}"></script>
+  {% endfor %}
+{% else %}
+  <script src="{{ '/assets/js/main.min.js' | absolute_url }}"></script>
+{% endif %}
 
 {% include analytics.html %}
 {% include /comments-providers/scripts.html %}