Feature request: Components for Common HTML

• Maizzle Version: 0.1.1
• Node.js Version: 11.11.0

Description:

Hi there! Please excuse me if this is in the wrong format.

I want to say thank you for all your hard work in putting this together. I love the speed & ease I can pump out email templates using Maizzle + Tailwind.

I wanted to suggest giving users the option to use prebuilt Nunjucks components to avoid wewriting out painfully tedious HTML table markup (and similar elements).

I’ve created a some basic prop-based components while using the {{ cotnent }} slot for reusability (as per the docs) but also to allow for nesting components.

Table Component Examples

Single <tr> and <td>

<!-- src/components/table-singletd.njk -->

<table class="{{ data.classTb }}">
  <tr class="{{ data.classTr }}">
    <td class="{{ data.classTd }}">
      {{ content }}
    </td>
  </tr>
</table>

Multiple nested <tr> inside of {{ content }}

<!-- src/components/table-multitr.njk -->

<table class="{{ data.classTb }}">
  {{ content }}
</table>

Single <tr> with multiple nested <td> inside of {{ content }}

<!-- src/components/table-multitd.njk -->

<table class="{{ data.classTb }}">
  <tr class="{{ data.classTr }}">
    {{ content }}
  </tr>
</table>

Other Exmples

Simple anchor tag with conditional check to see if href is empty.

<!-- src/components/anchor.njk -->

<a {% if data.href %} href="{{data.href}}"{% endif %}>
  {{ content }}
</a>

Using Components in Templates

In our Templates we can now use the component as we like using the instructions to the Maizzle docs.

However I chose to set each component to a variable for sake of not repeating the path multiple times (should the components folder be moved, etc).

This markup…

<!-- src/templates/my-template.njk -->

{% set multiTd = "src/components/table-multitd.njk" %}
{% set a = "src/components/anchor.njk" %}

{% component multiTd, { classTb: 'w-full' }% }
  <td class="w-1-2">
    { %component a, { class: 'btn-link', href: 'http://www.maizzle.com'} %}
      Maizzle Home
    {%endcomponent%}
  </td>
  <td class="w-1-2">
    {% component a, { class: 'btn-link', href: '#'} %}
      Product
    {% endcomponent %}
  </td>
{% endcomponent %}

Will output this when compiled…

<table class="w-full bg-gray-900" cellpadding="0" cellspacing="0" role="presentation">
  <tbody>
    <tr>
      <td class="w-1-2">
        <a class="text-orange-100" href="http://www.maizzle.com">
          Maizzle Home
        </a>
      </td>
      <td class="w-1-2">
        <a class="text-orange-100">
          Other Anchor (No href prop specified)
        </a>
      </td>
    </tr>
  </tbody>
</table>

I figure this could be explanded into much more such as a columned artciles, hero areas, reusable buttons, social media buttons, etc, etc.

Let me know if this is something you’d worth considering into the framework and I will happily make a PR with a few different reusable components.

Thanks!

[cossssmin]

Hi, and thanks for the kind words! 😃

I completely agree it would be cool to have ready-made components, and the good news is I’m already working on something for this. It will be separate from the framework though, but still easy to pull in. And you will be able to contribute your own components, of course 😉

It’s still in its early stages, I’ll announce on Twitter once I have a basic working version.

[cossssmin]

Since migrating to PostHTML, I’ve been thinking about a PostHTML plugin that would let you define mappings containing custom tags and what they would expand to.

This isn’t a priority right now and would definitely be a PostHTML plugin if used in Maizzle, but otherwise I’m open to the idea. What I really don’t want is to make a HEML/MJML clone, so it would probably not be that complex anyway.