Support for self contained components - with CSS and JS assets

1

I am currently using Jekyll for a medium size company website with a mix of static content and content imported from an external CMS. We build up pages from a number of reusable blocks/sections - not very unusual at all.

However, currently to add a new “component” we need to:

  • Create a new include with the HTML
  • (In a different place) create a new stylesheet
  • Include the stylesheet in the master one (we use jekyll assets)
  • (In a different place, if required) create a new Javascript file
  • Include the javascript filr in the master one

This works, but has two drawbacks:

  1. Adding a new reusable component requires a large number of files to be added, all in different locations
  2. Either every page needs to include all CSS and JavaScript, or we need to manually keep track of which sections are supported with what type of pages.

What I’d love to see ideally is a mechanism where you can create and include a component that brings with it dependencies from JavaScript and CSS. If such a component had been included at least once, then it’s matching assets would automatically be included in the master ones (stylesheet or JavaScript files).

I’ve seen https://github.com/rustygeldmacher/jekyll-contentblocks which goes some way towards accomplishing the above, but I’m not sure if it’s possible to combine with jekyll-assets so that you get a single minified CSS and JavaScript file included per page.

Has anyone done something like the above, and if so using what tools? Are there any plans on supporting it natively in Jekyll?

2

Not sure how similar it is to what you’re after, but there’s a way to do per-page / per-post CSS/JS:

https://jreel.github.io/per-page-custom-css-in-jekyll/ (which was based on http://mattgemmell.com/page-specific-assets-with-jekyll/)

1 Like
3

Hi and thank you,

We do in fact use something like that already, but the problem is that the page still needs to be aware of all the dependencies of the components on the page, and all the includes for CSS and JavaScript need to be updated to match the collection of components used on the page (or in reality, the collection of components used across a family of pages).

I’d like to be able to simply include components, and have a single custom CSS file generated for me that contains the concatenation of all the CSS dependencies of all the components used (directly or indirectly) on the page.

4

Hmm, could you try to describe how does a component look like and how do you include a component into a page or post?

An example code snippet would be the best in that case (even though there is nothing at this point to cover what you’re looking for)… Just to give the idea discussion a bit more technical shape :slight_smile: