Solvedeleventy Eleventy reusable components shortcode

I'm experimenting with using Eleventy to house some rapid prototypes.

As we continue to make prototypes, we plan to carve off certain shared elements that we can use as includes.

But it would also be nice to show those patterns on a page somewhere so we can visualize all those that are available to us.

In my head, I'd be able to have a file...

<button class="Button{% if class %} {{class}}{% endif %}">
  {% if label %}{{label}}{% else %}Label{% endif %}
</button>

That I could include in prototypes...

<h1>Behold! A button.</h1>

{% include patterns/button with label:'I am a button!' %}

But also iterate over for a simple "style guide" page...

<h1>All Our Patterns</h1>
{% for pattern in collection.patterns %}
  <article>
    <h2>{{ pattern.title }}</h2>
    {{ pattern.templateContent }}
  </article>
{% endfor %}

Possible? Crazy? Better suited for a plugin/shortcode/filter? Unintentional duplicate of #94?

Thanks in advance for your thoughts/assistance! 🙂

15 Answers

✔️Accepted Answer

Thanks for thinking out loud here, this is super helpful feedback to see what you’re trying to do.

Maybe I can offer a bit of additional clarification.

Note that Front matter is a feature that is in Eleventy and is not provided by any templating engine. Front matter is processed by Eleventy separately using the gray-matter plugin before any Liquid/Nunjucks/etc processing takes place. Includes are a separate beast in that they reside solely in the template engine’s world. Eleventy does not do any pre-processing to includes and as such is not able to strip or process front matter.

Using collections to fake components/patterns isn’t really something that is going to work out of the box here, sounds like.

You can't use files in _includes as posts.

I’m not sure how you’re defining posts here but _includes files are not first-class templates (as described above).

You can include posts in other templates as long as the templating language supports relative paths. But any Frontmatter in included files will be retained in the output, since includes are part of the templating language (not Eleventy).

Yes, correct {% include %} will not process front matter.

To me it sounds like Eleventy needs a mechanism for reusable components in _includes. The pieces are pretty much all there already. Eleventy would expose a shortcode to include the component template file (and parse front matter out) and allow you to pass in data to override the front matter stuff.

Reusable component Bikeshed

_includes/components/patterns/button.liquid:

---
title: Button
---
<button class="Button{% if class %} {{class}}{% endif %}"{% if disabled %} disabled{% endif %}>
  {% if label %}{{label}}{% else %}Button Label{% endif %}
</button>
---

and then in a content template, use the shortcode to include:

---
title: Example Prototype 1
---

{% eleventy-component "patterns/button.liquid" "Title Override" %}

More Issues: