Load custom javascript inside styleguide

[felippenardi]

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]

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]

@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]

@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]

Thanks for pointing it out!

[lkodai]

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