Flems in docs (#2348) [skip ci]

[porsager]

Added flems instead of the current codepen samples.

Description

I've added a check for any code boxes which was generated from a ```js markdown tag, and then convert them to Flems live sandboxes. This should be great for keeping the markdown docs pretty, and the website even better.

Motivation and Context

Fixes #526

How Has This Been Tested?

Manually tested on macos & windows in IE11, edge, safari, chrome & firefox

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• [*] Documentation change

Checklist:

• [*] My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• [*] I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have updated docs/change-log.md

[porsager]

The latest version is available here http://porsager.com/mithril-docs so you don't have to build to check it out ;)

[dead-claudia]

LGTM mod a few nits

[porsager]

Awesome points Isiah! Thank you for going through it!

I also fixed this issue with the header in IE

[porsager]

I'm also unsure about the direction of the rings next to the logo (it has a transform 180deg) compared to the favicons?

[dead-claudia]

@porsager Found the line, and I'd say just kill the transform there.

[porsager]

Just realized I never pushed the commit I had made way back then :-( Oh well.. Hopefully we can get it going again now :) Sorry.

[porsager]

@isiahmeadows is there anything more to add here?

[dead-claudia]

Quick question: is http://porsager.com/mithril-docs/ up to date?

Edit: fixed typo

[dead-claudia]

Sorry for the delay - been away from the computer for a while.

[porsager]

I'm not sure it was up to date, but it is now ;)

[dead-claudia]

One last nit, and I'm good with it: could you remove all the "Live Example" headings and just leave their contents (i.e. the flems segments) as-is? It's pretty clear from context they're live examples.

[dead-claudia]

Also, I thought I'd point out your embed is broken: the insertion point isn't showing on the first line. Not something to fix on our end Edit: in this PR, but it'd certainly make them look a bit more editable. 😉

[porsager]

This all appears to be good now. I've merged latest master, and there's a preview available here: http://porsager.com/mithril-docs/index.html

[dead-claudia]

Quick question: is there an escape hatch in case it's like an incomplete snippet or something?

[dead-claudia]

My approval here is tentative. There's a bit more I need to go over before I'm ready to merge this, but it's more about whether an escape hatch is necessary now or if one can be hacked in later.

[porsager]

sorry, I don't think I understand what you mean by escape hatch?

[dead-claudia]

@porsager I mean being able to tell the init script to not wrap the script up in a Flems embed on load.

[porsager]

Hmm, so a quicker way than comment out the initialization part?

[dead-claudia]

@porsager I mean on a per-block basis, like if a single block is this:

view: function(vnode) {
	// code...
}

In that case, it's entirely nonsensical to try to wrap that into Flems. But since ES doesn't offer a parser API and I'd rather avoid executing code blocks (they might be using third-party APIs) in general, an escape hatch would be nice.

[porsager]

Ah now I get what you mean.

Code blocks are only turned into Flemses if you use js as language designation. For a regular non flems code block just use javascript.

[dead-claudia]

@porsager Oh okay. In that case, could you update the contributing document to note that about the documentation, so people know the semantic difference?

[porsager]

Ok.. done

[dead-claudia]

Nice!

[porsager]

Yay! Nice @isiahmeadows .. Sorry my respond cycle on this has been so long! Glad to finally see it merged.

[dead-claudia]

No problem. My response times have been going up lately myself. 😉

[panoply]

Reviving this one cause flems is still not being leveraged in docs.