Support for paired shortcodes

[mmatuzovic]

Hi!

Is it possible to pass multiline HTML content to a component in Nunjucks? Something like:

{% component "Foo", "name", 42 %}
  <h2>My heading</h2>
  <p>My custom paragraph</p>
{% endcomponent %}

Because I keep getting the error “unknown block tag: endcomponent (via Template render error)” when I try that.

Thank you!

[j-f1]

There’s not a way to do that at the moment. It would have to be under a different shortcode name, because otherwise the template language wouldn't be able to differentiate between paired and nonpaired short codes. I'd be happy to accept a PR for this, but I would also be willing to work on it when I get the chance.

[mmatuzovic]

Thanks a lot for the quick reply! So this means If I want to use the Nunjucks component and I need to pass HTML, I would have to do something like this:

{% set myContent %}
    <h2>My heading</h2>
    <p>My custom paragraph</p>
{% endset %}

{% component "Card", name="name", age=42, html=myContent%}

const { Raw } = require("eleventy-hast-jsx");
exports.default = (data) => (
  <div>
    <h1>Hello, {data.name} , {data.age}!</h1>

    <Raw html={data.html} />
  </div>
)

Or is there another, more convinient way?

[j-f1]

That’s the most general approach. However, if you only have a few components that you want to use, you could wrap them in shortcodes:

eleventyConfig.addPairedShortcode("card", function (content, props) {
  return this.component("Card", { ...props, children: { type: "raw", value: content } });
})

(I haven’t personally tested that, but hopefully it gives you a good starting point!)

[mmatuzovic]

Thanks a lot! We can close the issue, if you want.

[j-f1]

Yay! I’m leaving it open as something to add to the docs for future users.