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

mmistakes · 2017-09-11T17:00:17Z

Common feature request is an easy way to add scripts to <head> or in the footer without modifying any of the theme files.

Currently this can be done by adding custom script elements to _includes/head/custom.html or _includes/footer/custom.html This pull request allows the user to add additional scripts to either <head> or before the closing </body> elements via their _config.yml file.

Simply add the full relative (or absolute) path(s) to relevant array and they will be added to the page.

Examples:

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

In the case of footer_scripts, if used, the default /assets/js/main.min.js file won't be loaded and jQuery and other scripts used by the theme will need to be added to the array or replacements found. Unless you want the collapsible navigation, image lightboxes, smooth scrolling, and other niceties to stay broken ;-)

Note: depending on the size of your site there may be a slight performance hit to build times as each of these config variables introduce for loops.

Ref: #1238

…-mistakes into custom-scripts

ohadschn · 2017-09-11T23:23:00Z

_includes/head.html

+{% if site.head_scripts %}
+  {% for script in site.head_scripts %}
+    {% if script contains "://" %}


Maybe just "//" to allow for protocol-relative URLs (below too): https://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just/27999789

Protocol less URLs are now considered an anti-pattern. It's preferable to use https when available.

https://www.paulirish.com/2010/the-protocol-relative-url/

I know, that's exactly what I answered on that very same SO thread :) Just thought you'd might want to support it, but I suppose there's really no need, any CDN today would have HTTPS...

Exactly. And I'm not sure if // might filter out something it shouldn't be. I doubt anyone would have a path with that, but seems possible.

Yeah I had the same concern, theoretically https://github.com/mmistakes//minimal-mistakes works too. I think even https://github.com/mmistakes://minimal-mistakes could work but since Liquid doesn't contain any startswith method that I can tell, not much can be done anyway.

Sure. Keeping things consistent with the rest of the "external URL" checks in the theme. You may be over thinking things a tad, simple is better.

Overthinking is my middle name 😅

ohadschn · 2017-09-11T23:29:31Z

Good stuff! So a custom footer_scripts with functionality equivalent to the out-of-the-box one would look like this (going by the uglify script)?

footer_scripts:
  - /assets/js/vendor/jquery/jquery-1.12.4.min.js
  - /assets/js/plugins/jquery.fitvids.js
  - /assets/js/plugins/jquery.greedy-navigation.js
  - /assets/js/plugins/jquery.magnific-popup.js
  - /assets/js/plugins/jquery.smooth-scroll.min.js
  - /assets/js/_main.js

mmistakes · 2017-09-11T23:31:56Z

Looks about right. That should be everything.

ohadschn · 2017-09-11T23:52:22Z

Great, so now anyone could do this to get a CDN-equivalent:

footer_scripts:
  - https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
  - https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.min.js
  - /assets/js/plugins/jquery.greedy-navigation.js # didn't see a CDN for this
  - https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.9.9/jquery.magnific-popup.min.js
  - https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.7.2/jquery.smooth-scroll.min.js
#  - insert whatever custom script here to run before main
  - /assets/js/_main.js
#  - insert whatever custom script here to run after main

BTW, regarding the versions:

jQuery - I guess you're using 1.x for IE6-8 support?
jquery.fitvids.js - latest is 1.2.0 (MM is using 1.1)
jquery.greedy-navigation.js - looks like a couple of small updates have been made (I diffed the MM version with the one currently on master)
magnific-popup - latest is 1.1.0 (MM is using 0.9.9)
jquery-smooth-scroll - latest is 2.2.0 (MM is using 1.7.2)

mmistakes · 2017-09-11T23:55:14Z

Some of those scripts are breaking changes if updated. Out of scope for this PR.

ohadschn · 2017-09-12T00:04:48Z

Sure, was just wondering.
Should I open an issue for package update?
If so, one issue or issue per package?

mmistakes · 2017-09-12T00:07:07Z

Don't worry about it. I have it covered. Some of these I may drop or replace with lighter alternatives. Now that scripts can be added easily I don't need to bundle everything and can leave it up to the user to augment if they want.

ohadschn · 2017-09-12T00:08:50Z

Cool! Could you throw me a hint on which of these I should be OK with upgrading in my override?

mmistakes · 2017-09-12T00:12:00Z

Not sure. You'll have to test.

If memory serves Magnific Popup had some CSS changes that I didn't want to mess with so I didn't bother updating.

Greedy nav had something I needed to override to fix a styling inconsistency.

The others I haven't looked at in a while.

ohadschn · 2017-09-12T00:14:46Z

Understood. Thanks again for this. I guess I'll just follow the versions in the theme for now (simple enough to diff and update when a new release is out).

ohadschn · 2017-09-12T00:28:08Z

Just a thought, maybe you could include something like main-only.min.js (a minified version of _main.js only without jQuery and plugins) which could be used in the custom footer scripts approach rather than the "development-flavor" _main.js ?

…#1241) * Allow `<head>` and footer scripts to be changed via config * Update JavaScript documentation Close mmistakes#1238

mmistakes added 5 commits September 11, 2017 12:43

All <head> and footer scripts to be changed via config

d92e273

Allow <head> and footer scripts to be changed via config

56acb7e

Merge branch 'custom-scripts' of https://github.com/mmistakes/minimal…

55a840a

…-mistakes into custom-scripts

Fix typo

3c3c2f2

Add link to PR

e1ddd48

mmistakes self-assigned this Sep 11, 2017

mmistakes added Status: In Progress Type: Enhancement Type: Feature labels Sep 11, 2017

mmistakes mentioned this pull request Sep 11, 2017

Include jQuery above page__footer to allow for upgrade-safe custom JavaScript #1238

Closed

ohadschn reviewed Sep 11, 2017

View reviewed changes

mmistakes added 2 commits September 12, 2017 12:07

Fix merge conflicts

c17235c

Update JavaScript documentation

d8b108f

mmistakes removed the Status: In Progress label Sep 12, 2017

mmistakes merged commit 8fc9bcc into master Sep 12, 2017

mmistakes deleted the custom-scripts branch September 12, 2017 16:27

This was referenced Sep 12, 2017

Add main-noplugins.min.js #1245

Closed

Using CDN for dependencies by default #1260

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mmistakes commented Sep 11, 2017 •

edited

Loading

ohadschn Sep 11, 2017

mmistakes Sep 11, 2017

ohadschn Sep 11, 2017 •

edited

Loading

mmistakes Sep 11, 2017

ohadschn Sep 11, 2017 •

edited

Loading

mmistakes Sep 12, 2017

ohadschn Sep 12, 2017

ohadschn commented Sep 11, 2017

mmistakes commented Sep 11, 2017

ohadschn commented Sep 11, 2017 •

edited

Loading

mmistakes commented Sep 11, 2017

ohadschn commented Sep 12, 2017

mmistakes commented Sep 12, 2017

ohadschn commented Sep 12, 2017

mmistakes commented Sep 12, 2017

ohadschn commented Sep 12, 2017

ohadschn commented Sep 12, 2017 •

edited

Loading

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

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

Conversation

mmistakes commented Sep 11, 2017 • edited Loading

ohadschn Sep 11, 2017

Choose a reason for hiding this comment

mmistakes Sep 11, 2017

Choose a reason for hiding this comment

ohadschn Sep 11, 2017 • edited Loading

Choose a reason for hiding this comment

mmistakes Sep 11, 2017

Choose a reason for hiding this comment

ohadschn Sep 11, 2017 • edited Loading

Choose a reason for hiding this comment

mmistakes Sep 12, 2017

Choose a reason for hiding this comment

ohadschn Sep 12, 2017

Choose a reason for hiding this comment

ohadschn commented Sep 11, 2017

mmistakes commented Sep 11, 2017

ohadschn commented Sep 11, 2017 • edited Loading

mmistakes commented Sep 11, 2017

ohadschn commented Sep 12, 2017

mmistakes commented Sep 12, 2017

ohadschn commented Sep 12, 2017

mmistakes commented Sep 12, 2017

ohadschn commented Sep 12, 2017

ohadschn commented Sep 12, 2017 • edited Loading

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

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

mmistakes commented Sep 11, 2017 •

edited

Loading

ohadschn Sep 11, 2017 •

edited

Loading

ohadschn Sep 11, 2017 •

edited

Loading

ohadschn commented Sep 11, 2017 •

edited

Loading

ohadschn commented Sep 12, 2017 •

edited

Loading