Mithril.js: Embed Flems.io code samples in the docs

[lhorie]

It'd be nice to have runnable samples for the code presented in the docs, especially the longer snippets

[roundand]

yes please, as a client-side newbie there's a many areas that I'd like to be able to step through in order to properly understand them.

[a-s-o]

Created one for the velocity.js example: https://jsfiddle.net/sh230y2j/
Also ctx.retain example in m.route's documentation: https://jsfiddle.net/LxbwhxsL/

[glebcha]

Created fiddle with extended todo app example (used moment.js for pretty timestamps, double-click to edit etc.).
http://jsfiddle.net/glebcha/q7tvLxsa/

Also you can fork repo https://github.com/glebcha/reminder-mithril/

And play width demo http://glebcha.github.io/reminder-mithril/ (sorry, only Russian)

[Masquerade-Circus]

Hi, Leo.

I made a list of examples from the simplest, like a "hello world" to the resolution of components, in this way, the evolution and understanding of Mitrhil is more progressive and simple.

All examples are in Codepen: http://codepen.io/MasqueradeCircus/pen/gLwZXZ?editors=0010.

[lhorie]

@Masquerade-Circus wow this looks pretty awesome

[Bondifrench]

@Masquerade-Circus Nice examples, I noticed in 3.2 Components - Lifecycle methods that the number of Redraws so far are incrementing in a weird way: 0,1,3,5,7...bug?

[Masquerade-Circus]

@Bondifrench Thanks for noticing this. It was for the onclick function, it performed the natural update for the onclick event and also made a second update by calling the m.redraw method. I just put an empty function and now it's all right.

Thanks.

[isiahmeadows]

Closing as the 0.2.x docs are no longer live.

[tivac]

IMO this still applies to the 1.0 docs

[isiahmeadows]

Reopened and removed the misleading 0.2.x label.

[porsager]

I'd love to make all the examples live using flems core. Would a pull request for this be welcomed?

[tivac]

I did this already for the guides using codepen, assuming flems has a nice embed I'm 100% in favor of expanding it to the API docs and converting the guide to use flems as well.

[pygy]

There!

I'm all for it as well!

@tivac, flems was made to be embedded as a one file solution (it is a HTML/JS chimera).

[mike-ward]

I found embedding flems.io directly in the doc/text/article a bit jarring and instead list the code statically with a flems.io link. See https://mike-ward.net/2018/05/09/mithril-rising/ for examples.

Also, I'm willing to give this a go if it's something we still want for 2.0.

[isiahmeadows]

@mike-ward It's a nice-to-have, not a blocker for anything. We're just waiting for someone to just put forth the effort.

I'm okay with us not directly embedding Flems snippets, but I'm personally okay either way.

[mike-ward]

@isiahmeadows OK, I'll start with the home page and generate something for comment and feedback.

[porsager]

@mike-ward Sorry I hadn't noted inhere that I was working on this, I only mentioned it in gitter I think.. I've got the initial setup ready, I just got sidetracked by work and other stuff, so it was stuck in a local branch with me :-(

If you want to you're very welcome to pick it up from here. I think now that we have actual live flems running we can remove some of the code boxes as well, but I thought it might be better to make that part of a larger docs overhaul / cleanup.

I've made a simple change to the code boxes such that any code boxes starting with ```js will be converted to flems boxes, while the ones with ```javascript will not.. This will keep the markdown docs nice and clean while the website gets to have flems..

This is how it looks so far (I've only replaced codepens by flems): http://porsager.com/mithril-docs/

The branch is here: https://github.com/porsager/mithril.js/tree/flems-in-docs

If you want to get set up quickly I found it quick to use wright like this:

npm install wright@next -g
wright -e 'npm run gendocs;docs/**/*' dist/index.html

[mike-ward]

@porsager Your call. Maybe it would be easier if the core contributors choose another project/issue for me? I'm not fussy, Just want to contribute.

[porsager]

I guess I could wrap this up fairly quickly from where it is now, so now that it's current I might as well do that.

I'm not core, but a quick glance, and maybe
https://github.com/MithrilJS/mithril.js/issues/2334 would be a good start?

[mike-ward]

OK, I own #2334