search

bitovi / documentcss

A documentation/guide portal for the Live Style Guide feature of DocumentJS
https://documentcss.com/
MIT License
72 stars 7 forks source link

Load custom javascript inside styleguide #20

Closed felippenardi closed 8 years ago

felippenardi commented 8 years ago

I need to load some javascript into the live styleguide so that I can demonstrate some interactive behaviors of some components.

How can I generate the static site with custom javascript in it?

tomgreever commented 8 years ago

Hi @felippenardi I believe you're referring to the demos, which you include using something like @demo path/demo.html - these demos are loaded into an iframe, so they're not technically part of the style guide theme. They are standalone files. If this is the case, your JavaScript should be included in your demo.html file, not in the style guide / generated site itself.

If you need to use the JavaScript on the style guide / generated site, you can include the JavaScript in the style guide's theme. The default DocumentJS theme is: https://github.com/bitovi/documentjs/blob/master/site/default/templates/layout.mustache and you can modify this by telling your documentjs.json to use your version of layout.mustache

Let me know if this is helpful or not. :)

felippenardi commented 8 years ago

@tomgreever Thanks for explaining both scenarios! What I'm looking for is the first case.

I have two questions:

1- Are both @iframe and @demo iframes? 2- Since I'll be needing quite a few javascripts loaded in every demo, is there a way to automatically add javascript to all demos?

lkodai commented 8 years ago

@felippenardi 1- Yes, the difference between @iframe and @demo is actually whether or not you want the html/js tabs with the demo. But it uses iframes in both cases. In our example the color palette is using @iframe because there's no real useable markup in these color swatches: http://documentcss.com/examples/styles/variables.less.html Whereas on the button page, we're using @demo so both the markup needed for buttons and the result of that markup is accessible: http://documentcss.com/examples/styles/buttons.less.html

2- DocumentCSS doesn't come with a way to auto-add things to demos (yet) but you can use grunt or gulp to wrap your demos in a container template. There's a sample of someone doing that here: https://github.com/brandonreid/documentcss_starter-kit/blob/master/gulpfile.js#L50 You'll need to include your compiled CSS in the head of your demo files as well, so that can take care of both needs at once.

felippenardi commented 8 years ago

Thanks for pointing it out!

lkodai commented 8 years ago

Glad to help! Let us know if you have any more questions