janosrusiczki / japr

Jekyll Asset Pipeline Reborn - Powerful asset pipeline for Jekyll that collects, converts and compresses JavaScript and CSS assets.
MIT License
51 stars 9 forks source link

Support for gem theme assets #43

Open kylekirkby opened 4 years ago

kylekirkby commented 4 years ago

Hi @janosrusiczki,

Thank you for the awesome asset pipeline! Any idea on what work is needed to fetch assets from a Jekyll theme? I'll happily submit a PR if you can point me in the right direction?

I thought Jekyll pulled assets over from the theme (see - https://jekyllrb.com/docs/themes/#understanding-gem-based-themes). Maybe the plugin is running before these have been synced over? Jekyll doesn't add the assets to the site directory but they must be referenced in Ruby array?

Kind regards,

Kyle

janosrusiczki commented 4 years ago

As you can see from the documentation japr needs the assets that it compiles to be specified between Liquid tags like {% css_asset_tag global %} and {% endcss_asset_tag %} (and the same for javascript).

For example my own site / blog uses a post layout for the posts, which in turn use the default layout. The default layout includes a head file which contains:

{% css_asset_tag global %}
  - /_assets/poole.css
  - /_assets/syntax.css
  - /_assets/hyde.css
  - /_assets/jr.css
{% endcss_asset_tag %}

These css files will be then mashed together into one asset file during compilation.


The feature you are requesting is a very interesting one, and for it to work, from my point of view, it would require for japr to have sort of an automatic mode which would automagically gather local asset files from the layouts and then compile them together. Not sure how to implement it at this point though. :smile: I'll have to think about it.

janosrusiczki commented 4 years ago

OR you could overwrite some of your theme's files as described here and insert the assets between {% xxx_asset_tag %}s. I'll have to test this out though.

kylekirkby commented 4 years ago

Hi @janosrusiczki ,

I've got those bundles here: https://github.com/linaro-marketing/linaro_simply_static_theme/tree/master/_includes/js_bundles

Currently I've got:

{% javascript_asset_tag vendor %}
- assets/js/vendor/modernizr.min.js
- node_modules/foundation-sites/dist/js/foundation.min.js
- assets/js/vendor/fastclick.js
- assets/js/vendor/featherlight.js
- assets/js/vendor/lazysizes.js
- assets/js/vendor/ls.unveilhooks.js
- assets/js/vendor/owl.carousel.js
- assets/js/vendor/what-input.min.js
- assets/js/vendor/clipboard.min.js
{% endjavascript_asset_tag %}
<script>
    $(document).foundation();
</script>

These assets are in the theme gem which you can see the location of with bundle show <theme-name> like:

kyle@gibson  ~/Documents/websites/linaro.org   implementing_new_jekyll_theme ● ? ⍟9  bundle show linaro_simply_static_theme  
/home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0

 kyle@gibson  ~/Documents/websites/linaro.org   implementing_new_jekyll_theme ● ? ⍟9  ls /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0 
assets  _config.yml  _data  _includes  _layouts  LICENSE.txt  README.md  _sass

I tried adding the full path to the theme assets with:

{% javascript_asset_tag vendor %}
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/modernizr.min.js
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/foundation.min.js
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/fastclick.js
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/featherlight.js
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/lazysizes.js
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/ls.unveilhooks.js
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/owl.carousel.js
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/what-input.min.js
- /home/kyle/.rvm/gems/ruby-2.5.2/gems/linaro_simply_static_theme-0.1.0/assets/js/vendor/clipboard.min.js
{% endjavascript_asset_tag %}
<script>
    $(document).foundation();
</script>

Which is all good other than japr only allows for asset paths relative to the project directory. Maybe we could grab the theme path in Ruby from Jekyll and combine those source directories with the local ones?

Many thanks for looking at this!

Cheers!

Kyle

janosrusiczki commented 4 years ago

Way ahead of me I see. :smile: I'll definitely look into it!

kylekirkby commented 4 years ago

Hahaha :D I'm just forking this repo and I'll have a quick poke around to see if I can do anything useful xD :100: