Minimal-mistakes: Issue with minifying plugins

[ashmaroli]

• [x] This is probably about a bug in the theme.

Environment

• Minimal Mistakes : v4.4.2 / v4.5.0
• Jekyll : v3.5.1
• OS : Windows 7
• Browser : Google Chrome / Mozilla Firefox
• Additional Plugins : jekyll-minifier or jekyll-tidy

Expected behavior

Expected no visible change between vanilla site and that generated while using the above plugins.

Actual behavior

Illustrated with screenshots below

Steps to reproduce the behavior

1. Set up a new project using jekyll 3.5.1
2. Add a couple of dummy posts
3. Serve and note render in browser
4. Install and add either of the following plugins that minify HTML: jekyll-minifier / jekyll-tidy
5. Restart Jekyll server and note render in browser

Observations

Fresh site setup from jekyll new and some additional dummy posts

• Issue: missing hamburger ?

---

After enabling a HTML minifying / beautifying plugin:

• Issue: clobbered viewport
• Issue: visible hamburger but doesn't respond to my clicks

[mmistakes]

If I had to guess it's likely screwing with assets/js/main.min.js

I've seen minifiers bork it because of the YAML Front Matter block.

---
layout:
---

Should be easy to verify by diffing the file bundled in the gem against what's in _site/assets/js/

[ashmaroli]

Perfect! I sensed it had something to do with main.js because of the associated console error in the browser. But forgot all about the banner text in the template script. :+1:

Removing the banner text in my installed copy of the gem fixes this issue.
Also, the issue that led to the placement of the banner text in the first place has already been fixed in Jekyll 3.5..

So all is good..
N.B.: btw, should the hamburger icon be visible on a laptop? I didn't check the sass files..

[mmistakes]

Was thinking the same thing about the banner text. Since 3.5 fixed the issue, adding the blank front matter doesn't need to happen anymore.

The hamburger should only show when the menu items are wider than what can fit on screen. If you had one menu item that is fairly short you could potential never see a hamburger because it fits comfortability in the viewport.

Anything that overflows outside of it gets placed in the hamburger drop down with this script.

[mmistakes]

@ashmaroli I removed the blank YAML Front Matter --- --- from assets/js/main.min.js if you want to test out what's on master:

gem "minimal-mistakes-jekyll", :github => "mmistakes/minimal-mistakes"

Let me know if the JS is still getting mangled by those minifier plugins.

[ashmaroli]

This issue has been successfully resolved :clap:
:smiley:

[mmistakes]

Sweet! Thanks for identifying the issue. Never felt great adding the blank YAML to that file to make it "overridable", glad it could be removed.

[ashmaroli]

My pleasure. :smiley:

I only did a superficial testing with overriding static asset files. I recommend that you carry out proper tests before releasing the next version to be more than sure it's all proper