New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from Sep 12, 2017

Conversation

Projects
None yet
2 participants
@mmistakes
Owner

mmistakes commented Sep 11, 2017

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 scriptelements 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

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

This comment has been minimized.

@ohadschn

ohadschn Sep 11, 2017

Contributor

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

@ohadschn

ohadschn Sep 11, 2017

Contributor

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

This comment has been minimized.

@mmistakes

mmistakes Sep 11, 2017

Owner

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/

@mmistakes

mmistakes Sep 11, 2017

Owner

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/

This comment has been minimized.

@ohadschn

ohadschn Sep 11, 2017

Contributor

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...

@ohadschn

ohadschn Sep 11, 2017

Contributor

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...

This comment has been minimized.

@mmistakes

mmistakes Sep 11, 2017

Owner

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.

@mmistakes

mmistakes Sep 11, 2017

Owner

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.

This comment has been minimized.

@ohadschn

ohadschn Sep 11, 2017

Contributor

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.

@ohadschn

ohadschn Sep 11, 2017

Contributor

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.

This comment has been minimized.

@mmistakes

mmistakes Sep 12, 2017

Owner

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.

@mmistakes

mmistakes Sep 12, 2017

Owner

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.

This comment has been minimized.

@ohadschn

ohadschn Sep 12, 2017

Contributor

Overthinking is my middle name 😅

@ohadschn

ohadschn Sep 12, 2017

Contributor

Overthinking is my middle name 😅

@ohadschn

This comment has been minimized.

Show comment
Hide comment
@ohadschn

ohadschn Sep 11, 2017

Contributor

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
Contributor

ohadschn commented Sep 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 11, 2017

Owner

Looks about right. That should be everything.

Owner

mmistakes commented Sep 11, 2017

Looks about right. That should be everything.

@ohadschn

This comment has been minimized.

Show comment
Hide comment
@ohadschn

ohadschn Sep 11, 2017

Contributor

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)
Contributor

ohadschn commented Sep 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 11, 2017

Owner

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

Owner

mmistakes commented Sep 11, 2017

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

@ohadschn

This comment has been minimized.

Show comment
Hide comment
@ohadschn

ohadschn Sep 12, 2017

Contributor

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

Contributor

ohadschn commented Sep 12, 2017

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

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 12, 2017

Owner

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.

Owner

mmistakes commented Sep 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ohadschn

ohadschn Sep 12, 2017

Contributor

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

Contributor

ohadschn commented Sep 12, 2017

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

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Sep 12, 2017

Owner

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.

Owner

mmistakes commented Sep 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ohadschn

ohadschn Sep 12, 2017

Contributor

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).

Contributor

ohadschn commented Sep 12, 2017

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

This comment has been minimized.

Show comment
Hide comment
@ohadschn

ohadschn Sep 12, 2017

Contributor

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?

Contributor

ohadschn commented Sep 12, 2017

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?

@mmistakes mmistakes merged commit 8fc9bcc into master Sep 12, 2017

@mmistakes mmistakes deleted the custom-scripts branch Sep 12, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment