Code snippets in documentation

[adamturtle]

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.

[JosephusPaye]

Yeah, this is something I have been wanting to add but haven't had the time. Contributions are welcome.

[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

[JosephusPaye]

Hey @rowanwins,

That's a great idea, especially the organization into Examples and API tabs at the top. It's something we could look into for v1.0, which will be soon (at least before Vue 2.0).

However, for now, I think we should add plain snippets or links/embeds for Codepen/JSFiddle demos.

Thanks

[rowanwins]

No worries @JosephusPaye I'll do some initial work in my fork and keep you posted to get some feedback.

In my initial playing around I separated each tab out in to it's own .vue file which worked really nicely. It means we should progressively be able to update the docs adding in new tabs etc as we're ready. And if a particular component needs an extra tab for reason it becomes really easy.

Anyway looking forward to seeing what we can do with it all

Cheers
Rowan

[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

[EmilMoe]

I like it, however the top header thing is too tall since the main focus is the bottom one.