Code snippets in documentation

Could we maybe get the code required under the examples in the docs. Would really help to get up and running with this library quickly. For example <ui-alert>Hi everybody! This is the default alert</ui-alert> under the alerts section.

[rowanwins]

Gday @JosephusPaye

Well I’ve had an initial first shot at putting this together for a single component - http://rowanwins.github.io/keenUIdocs/

I had a brief go with the idea of a playground/code snippet area just because I was a bit intrigued as to how hard it would be, short answer is it’s certainly not too tricky especially once we get one or two set up, they’ll provide nice templates to cut and paste. I found a neat syntax highlighting thing called prism.js (used on the getmdl.io site hence how I found it!) which is pretty cool for whacking classes for presentation around html syntax.

Github was being a bit weird so I have seperate repos at the moment but you can see here my approach that I’ve used for the src-docs https://github.com/rowanwins/Keen-UI/tree/master/src-docs/components/UiAlert , basically I have one main vue file and then a vue file for each tab. It’s not super tidy at the moment and lots of the css could be moved in the app.styl but I figured I’d just start the ball rolling.

Cheers Rowan

PS Let me know if you want to continue this discussion outside of github and I can ping you my email via twitter or something

[rowanwins]

Gday @JosephusPaye (cc @adamturtle )

I took a bit of a look at this and while the code snippets are fairly simple it started me thinking about how to best structure the docs. Some of the pages are already quite long so I wondered if it was worth considering a bit of an overhaul of the docs so they are a bit easier to navigate…

I did up a rough mockup to create something inline with the material design approach, basically the primary change is introducing a navbar/tab thingy for each component, the three tabs being ‘examples’, ‘API’ and ‘playground’ (or some other name). The playground area would contain the code snippet builder similar to what vue mdl offers.

Anyway this was just an quick photoshop mockup of an idea, if people like the idea I’m happy to pursue it (of course feedback welcome). Or if it stinks I’m happy to add some plain snippets to the existing pages 😃

Regards, Rowan