Template option in component

[legoheld]

I really like the template system in aigis. It allows quickly to adjust almost everything. For my usecase I like to comment colors, mixins, variables that i use in my css setup. And because these types of comments are a little different than I introduced a template option in the config:

/*

---
name: Colors
template: colors
category: Meta/Main Colors
colors:
 - variable: "@test"
   value: "#123456"

---

A color list
*/

With the help of the template config I could render the corresponding template based this config. So my components.ejs looks like this:

<% if(components.length) { %>
<nav>
  <h2 class="aigis-module__heading">Components</h2>
  <ul class="aigis-moduleList"><% components.forEach(function(component) { %>
    <li class="aigis-moduleList__item">
      <a href="#<%- component.config.name %>"><%- component.config.name %></a>
    </li><% }) %>
  </ul>
</nav>
<div><% components.forEach(function(component) { %>
  <div class="aigis-module">
    <% var template = ( component.config.template ) ? 'components/' + component.config.template : 'components/default' %>
    <%- include( template, { component:component } ) %>
  </div><% }) %>
</div>
<% } else { %>
  <%- html %>
<% } %>

And an example colors.ejs template renders all the color variables:

<%- include( 'default-header', { component:component } ) %>
<% component.config.colors.forEach(function(color) { %>
<div class="aigis-colors">
    <div class="blop" style="background-color: <%- color.value %>;"></div>
    <div class="font" style="color: <%- color.value %>;">Aa</div>
    <div class="variable"><%- color.variable %></div>
    <div class="value"><%- color.value %></div>
</div>
<% })%>
<%- component.html %>

I think this approach allows to quickly add new types of components and or allows to setup more default components that have special render capabilities.

Just as an idea what could be done some outputs quickly stolen from https://holidaypirates.github.io/nucleus/index.html: Color listing: Mixin

What do you think of this Idea? should I provide a MR?

[estaples]

Good ideas here. Thanks for sharing!

I was wondering how to easily document color variables, and this seems like a resourceful approach.

[nakajmg]

Thanks for a good idea! ( also sorry for response delay 🙇

I was also thinking about a method to easily output the list of colors.

I think that template options is good. If template: 'colors' is defined in component configs, Aigis will be output component's html using colors(.ejs|.jade|.hbs) instead of marked render.

It's just example code:

---
name: Colors
template: colors
category: Meta/Main Colors
colors:
 - variable: "@test"
   value: "#123456"
---

A color list

inside renderer:

if (component.config.template) {
  template = ejs.compile(fs.readFileSync(component.config.template+'.ejs')) // load `colors.ejs`
  html = template(component)
}
else {
  html = marked(component.md)
}

👆 Is it ok ? or any better idea ?

[legoheld]

Hi,

I dont know if I understand you correctly. My approach was only on the template side. I changed the code at: https://github.com/pxgrid/aigis/blob/master/examples/template_ejs/components.ejs#L23 to something like:

<% var template = ( component.config.template ) ? 'components/' + component.config.template : 'components/default' %>
    <%- include( template, { component:component } ) %>

Then the component/default returned the component.html. But when the component.config.template is defined it looks for other template files that render colors and so on.

I dont know if that works on other template languages. But this way ist transparent for the styleguide creator why and how it works.

If I get you right, you would implement the template lookup inside your renderer, not in the template.

[nakajmg]

Sorry, I misunderstood "special render capabilities". It means you would like me to implement switch template function inside renderer. I got it 🙆

I think, We have two way to render collections of colors.

1. Replace a defaults template like this:

(it's just example)

<% if(component.config.template) { %>
  <%- include(component.config.template, {component: component}) %>
<% } else { %>
  <%- component.html %>
<% } %>

I feel it's easy to implement (just replace).

However, maybe it's may not be able to implement on all of template engines (ejs, hbs, jade). I never know until i try.

2. Implement renderByTemplate function

It's similar to helper.renderCollectionTree examples/template_ejs/sidemenu.ejs

Probably, I can implement. However it will be like a blackbox what happened inside helper function. Transparency will be lost. But it's helpful for users to switch template easily.

Which way we should go?

[legoheld]

For me the first approach would be easier because its obvious what happens and I can pass in the data I need. But if its not working in all three template languages it would be a killer.

By the way, why are you supporting three different template languages? They are exchangeable and I think you could simple choose one that works best for the task. But thats a bit off topic ;)

The second approach would work to. It is a little bit more hardcoded but would work if not all of the template languages support the dynamic include.

If you add the template option we should provide already some basic templates for colors and mixins. So anybody can quickly use them for a pretty styleguide. Just let me know if I should provide you some template & css code.

[nakajmg]

By the way, why are you supporting three different template languages? They are exchangeable and I think you could simple choose one that works best for the task. But thats a bit off topic ;)

The reason is that the template engine used in each project is different.

If aigis only use ejs. a user using Jade in the project, user only need to remember the different template engine notation just for creating style guides. It's such a hassle 😩

I want many people to use it as easily as possible 😃

[jarodtaylor]

Was this feature ever added? I love your templating system but would love to have control over how I display the color palette.

[airtonix]

@jarodtaylor There's really no need.

In my handlebars template: /config/styleguide/components.html

  ...
  {{#each components}}
    {{#if this.config.template }}
        {{include this.config.template}}
    {{else}}
        {{include "./component"}}
    {{/if}}
  {{/each}}
  ...