Add support for preview.html file that overrides markup.html allowing template languages to be used in the markup file.

NoDivide / astrum

A lightweight pattern library designed to be included with any web project.

http://astrum.nodividestudio.com

1.54k stars 98 forks source link

Add support for preview.html file that overrides markup.html allowing template languages to be used in the markup file. #3

Open jondkinney opened 8 years ago

jondkinney commented 8 years ago

For instance, in a rails app, we'd use ERB, or HAML, or SLIM. I suppose we could just write using the templating language of our choice in the .html file? Not sure what implications that'd have for syntax highlighting though.

matt-west commented 8 years ago

Hi @jondkinney,

For the initial release of Astrum we've focussed on just supporting HTML for component templates.

You can add ERD, HAML, or SLIM into the markup.html file and it will get displayed in the code example, however the preview will not work as Astrum does not currently support these templating languages.

We've previously discussed adding support for a preview.html file that would allow you to specify different markup for the code example and the component preview. This would allow you to use a tempting language in the code example, and then provide plain old HTML for the component preview.

Do you think that this approach would solve your issue?

jondkinney commented 8 years ago

@matt-west thanks for getting back to me and for all your work on Astrum! The situation you describe is a step in the right direction, I think, but my goal would be to have the component source code available to copy/paste in the templating language it's written in so that we wouldn't have to reverse engineer the HTML to SLIM, for example.

matt-west commented 8 years ago

@jondkinney Apologies my explanation was not as clear as it could be. Adding a preview.html file would allow you to display the template language version in the code example to copy and paste, and have the component preview with pure HTML. The example component structure would be.

description.md - The component description.
preview.html - Pure HTML version of the component used for the component preview.
markup.html - The code snippet for the component.

The preview.html file could be optional, with Astrum falling back to using the markup.html file if it's not present.

jondkinney commented 8 years ago

Aaah, gotcha. That's definitely a workable solution! I guess the main downside would be needing to specify the source code in both the templating language and pure HTML, so if something changes you'd have to update it in both places. But yea, definitely that would allow us to start using it now!

matt-west commented 8 years ago

Cool. I've added this to the roadmap. https://github.com/NoDivide/astrum/wiki/Project-Roadmap

RyanHavoc commented 7 years ago

Ref #84