Render snippets as component

[Wolfr]

I have a question about this package.

Is it possible to also render out the snippets as the component itself instead of code? This way I can then use the same file for the "displaying" of the component as the snippet itself.

I have style guides that look like this:

This Panel is then placed under /snippets/panel-with-double-body.hbs. That file contains code like this:

  <Panel as |pl|>
    <pl.Header>
      <h4 class="c-panel__title">Panel header</h4>
    </pl.Header>
    <pl.Body>
      <p>Lorem ipsum dolor sit amet.... </p>
    </pl.Body>
    <pl.Body>
      <p>Lorem ipsum dolor sit amet.... </p>
    </pl.Body>
  </Panel>

I am using this package and ember codeblock to render the code:

{{#let (get-code-snippet @snippet) as |snippet|}}
  <CodeBlock
    class="br-styleguide-code-block"
    @code={{snippet.source}}
    @language="markup"
  />
{{/let}}

Now, can I also use this file to render out the visual example?

[ef4]

I think the easiest way to do this is not to use a standalone "snippets" folder, but instead to use BEGIN-SNIPPET comments as described in the README.

This way, you would place all your examples somewhere under app/components so that you'd be able to render them normally, but you could also have snippet comments inside each one so you could get their source code to show alongside their renderer form.