Closed Sayrus closed 4 years ago
I'm against adding more on/off flags in the theme as there are already too many. The theme already allows you to override all of the JavaScripts used by the theme.
{% if site.footer_scripts %}
{% for script in site.footer_scripts %}
{% if script contains "://" %}
{% capture script_path %}{{ script }}{% endcapture %}
{% else %}
{% capture script_path %}{{ script | relative_url }}{% endcapture %}
{% endif %}
<script src="{{ script_path }}"></script>
{% endfor %}
{% else %}
<script src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
<script src="https://kit.fontawesome.com/4eee35f757.js"></script>
{% endif %}
If you set footer_scripts
array in your _config.yml you can use whatever scripts you want. Doing this overrides FontAwesome too so you can drop in local CSS/webfonts and load yourself.
Have a look through some of the closed issues because I believe I've answered this before with a better example.
https://mmistakes.github.io/minimal-mistakes/docs/javascript/#customizing
That makes sense for self-hosting or using a CDN for Javascipt content. However, I do think I cannot include custom stylesheet this way. Am I wrong?
If I actually can, I will close this issue as a workaround exists.
You can load whatever CSS you want. Really depends on how you want to do it and how you've installed the theme.
If you're forking it then you can change whatever you want.
If you're using the theme as a ruby gem or remote_theme
then I would override (the _includes/head/custom.html
include) by copying it to your local repo.
Then copy whatever FA CSS/webfonts they provide, add a <link>
element to custom head include pointing to the FA stylesheet, and disable the FA script in the footer.
You can also customize the CSS by adding rules directly to /assets/css/main.scss
after the @import
lines. This is covered in the theme's docs.
https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/#customizing
Works like a charm, I should have read further the extras section.
Thanks!
Solved this with a little script and removed the references to the CDN from the theme and adding a _includes/head/custom.html
.
# remove the CDN dependency
LAYOUT_DIR=$(bundle show minimal-mistakes)
cp $LAYOUT_DIR/_includes/head.html $LAYOUT_DIR/_includes/head.html.old
sed '/fontawesome/d' $LAYOUT_DIR/_includes/head.html.old > $LAYOUT_DIR/_includes/head.html
Summary
Allow user to self-host or use a privacy oriented CDN for the woff/woff2/ttf/... file instead of using Javascript on Font Awesome CDN. This could take the form of few values in
_config.yml
.Motivation
Font Awesome icons won't load on any devices without Javascript (Tor Browser or Browser using NoScript) Font Awesome does track every websites using minimal-mistakes without users (and often owners) knowing it (no opt-out, and they do NOT respect DNT):
Opt-out using an ad-blocker is kind of a joke ... Do not wait for full page load to replace (Faster rendering, avoid recompiling 1MB of Javascript, avoid executing Javascript, and maybe better caching as extensions offers to cache the woff file if the name match to have your "own CDN" on localhost)
Drawbacks
More traffic on your website? Usually cached anyway, especially if you are using your own CDN or something like Cloudflare.
No drawbacks if you just use a CDN that doesn't track you without consent.
Best regards,