Allow demos to be modified

[ilanbiala]

It would be awesome to just modify the demos instead of having to work through CodePen or Plunker and play with the really simple code.

[ThomasBurleson]

@ilanbiala - Perhaps you could help us make CodePens corresponding to each of our demos... ?

[ilanbiala]

@ThomasBurleson instead of keeping CodePens and docs up-to-date, why not just have the code sample be modify-able or just make the demos use a CodePen. Minimize the amount of work necessary to keep docs up-to-date.

[marcysutton]

We do plan to have "runnable examples" like on docs.angularjs.org. I agree that making them dynamic somehow will help keep things up to date. But planning & implementing that is not an easy task.

[ilanbiala]

@marcysutton if you guys want, I can work on a PR for that.

[marcysutton]

By all means, go ahead and work on a PR for the demos. Please just keep the docs information architecture/navigation structure intact.

[gkalpak]

BTW, the runnable examples in docs.angularjs.org (that @marcysutton mentioned above) are creating a new plunkr on the fly (when you click the "Edit in plunkr" button).

If anyone is interested in taking a look at how this is accomplished, the relevant code is here.
(Not sure if CodePen supports something similar.)

[marcysutton]

We chose Codepen primarily because it's more accessible. Looks like you can prefill using their API: http://blog.codepen.io/documentation/api/prefill/

[gkalpak]

All good then :)
👍 on using CodePen (I don't know about accessiblity, but it has the most mobile-friendly design) !

[marcysutton]

@ilanbiala are you still working on a PR for this?

[ilanbiala]

@marcysutton I actually have an instant HTML + CSS + JS editor already on another site that I can port into a PR that renders the results. Is that something you guys are interested in?

[marcysutton]

The request is for automated Codepen demos so that they can be easily forked. Similar to how docs.angularjs.org will allow you to create a Plunker right from the docs, except Codepen has better accessibility and platform features.

[matthewrfindley]

Examples on the documentation site are now editable via codepen. As of 5c37dc8, users will be able to click the 'Edit on Codepen' button to create a copy of the example on Codepen.

[marcysutton]

YAY! Hi-five!