Support for nunjucks in 11ty sites

silveltman commented 2 years ago

I would love to see support for nunjucks. It allows for more freedom in conditional classes, especially with things like tailwind.

Example

passing arguments to the component like size, color etc. Then in in nunjucks we can something like the following:

<div class="c-animals {{ 'bg-blue' if color == blue }}">...</div>

this is a lot cleaner then it would be in liquid.

Also things like this: {% set bg-color= ('bg-blue' if color === 'blue' else 'bg-red') %}

silveltman commented 2 years ago

I ended up using this, which is fine but still a little messy:

component file:

{% if blue %}
    {% assign bg = 'bg-blue' %}
    {% assign border = 'border-blue' %}
    {% assign text = 'text-white' %}
{% else %}
    {% assign bg = 'bg-yellow' %}
    {% assign border = 'border-yellow' %}
    {% assign text = 'text-black' %}
{% endif %}

<a href="{{ url }}" class="relative inline-flex items-center justify-center transition-all border-2 rounded-full {{ border }} group focus:{{ bg }}">
    <div class="absolute transition-all rounded-full {{ bg }} inset-2 group-hover:inset-1"></div>
    <span class="relative p-6 text-center {{ text }} material-icons aspect-1">
        {{ icon }}
    </span>
</a>

template file: {% bookshop 'btn/icon' icon: 'open_in_new'%}

bglw commented 2 years ago

Hi Sil 👋

This is definitely something I'm looking to add support for, but I can't promise any timeline around it. Bookshop has pretty tight integration with the template contents, so I'll need to find a good chunk of time to work through this. Hopefully later this year :)

CloudCannon / bookshop

Support for nunjucks in 11ty sites #116

Example