How to handle assets in a plugin

1

Hi,

I have created a plugin that creates message boxes like these:

Capture
Capture.PNG1292Ă—258 4 KB 

{% note This is a note box %}
{% warning This is a warning box %}

The plug-in currently uses Bootstrap and FontAwesome. I could create my own CSS and JS, but that would take some more effort. The Bootstrap and FontAwesome files are currently imported in the css file

@import url(bootstrap.min.css);
@import url(font-awesome/all.min.css);

And JavaScript is imported in the existing JavaScript file

var imported_fa = document.createElement('script');
imported_fa.src = 'font-awesome/all.min.js';
document.head.appendChild(imported_fa);

At this moment it is just a Ruby file in my _plugins directory, but I would like to create a Gemfile. I could just put in the user notes that the user should reference these files by themselves, but that doesn’t seem very user friendly to me.

What is the right approach to include these files in the plugin Gemfile?

2

For the generated HTML file in _site to utilize the assets for your plugin, the assets should either be available via a CDN or physically available in the _site directory.

When assets are present at the <source_dir>, they’re automatically copied to _site during the build. But when the assets are bundled within a plugin-gem, the one way to copy those assets to the _site directory is via Generators.

I wont get into the details regarding “how to integrate your Liquid Tags and the Generator” here. That’s upto you to figure out by referring the documentation linked to above. But I’ll give you some tips that might help in the process:

  • If your assets are static (i.e. simply copy assets verbatim to _site), then the asset objects should be pushed into site.static_files otherwise if they need to be processed, then push them into site.pages.
  • Implement another Liquid tag to render the necessary meta markup (<link href="..."/>, <script src="..."/>, etc) to “load” these assets in the browser.
1 Like