Easy View Components In Jekyll
Jekyll is a famous static site generator. It has over 43k stars on GitHub, but in our current JAMstack world, it’s not the shiniest star anymore.
With web development becoming more complex — some would say too complicated—, Jekyll may feel bare bones when compared with competitor tools. One of the key aspects it lacks is components, which becomes a must with the introduction of utility-first CSS libraries like Tailwind.
I was losing hope, but then I discovered the include tag.
Creating components
Include tags are kinda similar to partials in Rails: they allow us to include
content from another file (stored in the _includes directory).
<!-- This includes the contents of _includes/footer.html into this file -->
{% include footer.html %}
The cool thing is that you can pass parameters to include tags! This is where things start to get interesting. We can create components similar to what we would do with React, for example. But instead of using JS, we use Liquid.
<aside class="max-w-md p-5 rounded bg-gray-50 border-l-4 border-l-blue-500">
<strong class="block mb-4">{{include.title}}</strong>
<p>{{include.content}}</p>
</aside>And we use it in the template like this:
{% include aside.html title="Include tags are cool" content="Keep reading for caviats, tho" %}It’s even possible to have parameters with default values using Liquid’s default filter:
<aside class="max-w-md p-5 rounded bg-gray-50 border-l-4 border-l-blue-500">
<strong class="block mb-4">{{include.title | default: 'Note'}}</strong> <!-- default value here -->
<p>{{include.content}}</p>
</aside>Don’t be greedy!
Include tags are powerful, but they add an overhead on the build time for your site, so don’t use them for every single thing. The docs recommend not using them for every image on your blog, for example.
A different approach would be using custom Liquid tags to create components, but note that they are not supported by GitHub Pages — so automatic build/deploy won’t work.
