Overriding pattern HTML previews

[tylersticka]

This idea just came to me and it may be a terrible one.

But if our patternSource helper included some bit of data (isSource: true) or whatever, we could theoretically do this with our patterns:

<table class="Table Table--striped">
  {{#if isSource}}
    <!-- etc. -->
  {{else}}
    <tr>
      <td>Some</td>
      <td>Really</td>
      <td>Verbose</td>
      <td>Content</td>
      <td>That</td>
      <td>Seems</td>
      <td>Redundant</td>
      <td>To</td>
      <td>Show</td>
      <td>In</td>
      <td>Its</td>
      <td>Entirety</td>
    </tr>
  {{/if}}
</table>

Not high priority, just something to think about! ¯_(ツ)_/¯

[erikjung]

@tylersticka Is the desire to be able to use customized (truncated, simplified, etc.) HTML for the code example?

[tylersticka]

@erikjung Yes!

I imagine there are probably like fourteen ways of accomplishing that. But for some reason this idea just popped in my head and I figured I'd document it.

[erikjung]

@tylersticka How about this approach:

# pattern.hbs
name: Neat Component
notes: ...
example: |
  <div class="NeatComponent">
  ...
  </div>

And then the helper can check for the presence of example (or whatever we call it) and use that for the output instead of the rendered file contents?

[tylersticka]

@erikjung I'd be fine with either direction, honestly.

I'd say I'll probably only use it maybe 5% of the time. So repeating some source in the YAML is not a concern.

[erikjung]

@tylersticka I imagine use cases where the inner contents of the HTML are needed to present an understandable visual, but noisy to include in the code itself.

For example: http://getbootstrap.com/components/#panels-alternatives

[tylersticka]

@erikjung Yep, that example is spot-on.