Flems in docs (#2348) [skip ci]
* Initial addition of flems - fixes #526 * Fix leftover ```js code blocks * Add DOCTYPE * Fix edge & IE11 * Don't show console * Change orientation on mobile * Use mithril@next for playground link * Improve loading and structure * Fix header alignment in IE * Don't rotate logo * Fix conflicts * Allow `js` tags * Fix code block query * Fix Routing section and flems * Fix firefox * Improve flems styling * Improve copy * Fix data -> body in m.request sample * Add flems in docs usage description
This commit is contained in:
parent
512eef378e
commit
d257025253
6 changed files with 160 additions and 28 deletions
|
|
@ -1,3 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
|
@ -32,6 +33,7 @@
|
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-jsx.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-diff.min.js"></script>
|
||||
<script src="https://unpkg.com/mithril@[version]/mithril.js" async></script>
|
||||
<script src="https://flems.io/flems.html" id="flems" defer></script>
|
||||
<script>
|
||||
document.querySelector(".hamburger").onclick = function() {
|
||||
document.body.className = document.body.className === "navigating" ? "" : "navigating"
|
||||
|
|
@ -39,6 +41,40 @@
|
|||
document.body.className = ''
|
||||
}
|
||||
}
|
||||
document.getElementById("flems").onload = function() {
|
||||
var systemFonts = [
|
||||
"body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; }",
|
||||
"body { height: 100%; overflow:hidden; display:flex; justify-content: center; align-items:center; }"
|
||||
].join("")
|
||||
;[].forEach.call(document.querySelectorAll("pre code.language-js"), function(el) {
|
||||
el = el.parentNode
|
||||
|
||||
var div = document.createElement("div")
|
||||
window.Flems(div, {
|
||||
middle : 60,
|
||||
editable : true,
|
||||
toolbar : false,
|
||||
shareButton : true,
|
||||
console : false,
|
||||
autoHeight : true,
|
||||
files: [{
|
||||
name: ".js",
|
||||
content: el.textContent
|
||||
}, {
|
||||
name: ".css",
|
||||
content: systemFonts
|
||||
}],
|
||||
links: [{
|
||||
name: "mithril",
|
||||
type: "script",
|
||||
url: "https://unpkg.com/mithril@[version]/mithril.js"
|
||||
}]
|
||||
}, "https://flems.io/flems.html")
|
||||
|
||||
el.parentNode.insertBefore(div, el)
|
||||
el.parentNode.removeChild(el)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue