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:
Rasmus Porsager
Isiah Meadows
parent
512eef378e
commit
d257025253
6 changed files with 160 additions and 28 deletions
125
docs/index.md
125
docs/index.md
|
|
@ -67,12 +67,20 @@ Let's create an HTML file to follow along:
|
|||
</body>
|
||||
```
|
||||
|
||||
To make things simpler you can fork this pen which already has the latest version of mithril loaded.
|
||||
To make things simpler you can try out mithril right here. This is a live playground with Mithril preloaded that - by the way - is also built in Mithril.
|
||||
|
||||
<p data-height="265" data-theme-id="light" data-slug-hash="XRrXVR" data-default-tab="js,result" data-user="tivac" data-embed-version="2" data-pen-title="Mithril Scaffold" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/tivac/pen/XRrXVR/">Mithril Scaffold</a> by Pat Cavit (<a href="https://codepen.io/tivac">@tivac</a>) on <a href="https://codepen.io">CodePen</a>.</p>
|
||||
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
|
||||
```js
|
||||
var root = document.body
|
||||
|
||||
Mithril is also loaded onto this page already, so you can start poking at the `m` object in the developer console right away if you'd like!
|
||||
// Your code here
|
||||
|
||||
m.mount(root, {
|
||||
view: function() {
|
||||
return m("h1", "Try me out")
|
||||
}
|
||||
})
|
||||
```
|
||||
> *[Click here to open the sample on flems.io](https://flems.io/mithril@next#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvEAXwvW10QICsEqdBk2J4s+LLQCuDABQATWtSk4G+AEa15ATwoACYAB00e03oBuEGAHdEesDOrEI9WQEoDxs970AnGMRSviZYsgDkhACMYfphACq+2no4etLEYW5eZqzGrG6UIHAwsE4uaAg8ACyIAExsHCCYOHj41HACNPSMzDxsALqsQA)*
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -96,8 +104,11 @@ As you can see, you use the same code to both create and update HTML. Mithril au
|
|||
|
||||
#### Live Example
|
||||
|
||||
<p data-height="265" data-theme-id="light" data-slug-hash="KmPdOO" data-default-tab="js,result" data-user="tivac" data-embed-version="2" data-pen-title="Mithril Hello World" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/tivac/pen/KmPdOO/">Mithril Hello World</a> by Pat Cavit (<a href="https://codepen.io/tivac">@tivac</a>) on <a href="https://codepen.io">CodePen</a>.</p>
|
||||
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
|
||||
```js
|
||||
var root = document.body
|
||||
|
||||
m.render(root, "Hello World")
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -135,8 +146,16 @@ m("main", [
|
|||
|
||||
#### Live Example
|
||||
|
||||
<p data-height="275" data-theme-id="light" data-slug-hash="gWYade" data-default-tab="js,result" data-user="tivac" data-embed-version="2" data-pen-title="Simple Mithril Example" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/tivac/pen/gWYade/">Simple Mithril Example</a> by Pat Cavit (<a href="https://codepen.io/tivac">@tivac</a>) on <a href="https://codepen.io">CodePen</a>.</p>
|
||||
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
|
||||
```js
|
||||
var root = document.body
|
||||
|
||||
m.render(root, [
|
||||
m("main", [
|
||||
m("h1", {class: "title"}, "My first app"),
|
||||
m("button", "A button"),
|
||||
])
|
||||
])
|
||||
```
|
||||
|
||||
Note: If you prefer `<html>` syntax, [it's possible to use it via a Babel plugin](jsx.md).
|
||||
|
||||
|
|
@ -206,8 +225,25 @@ If you're wondering about performance, it turns out Mithril is very fast at rend
|
|||
|
||||
#### Live Example
|
||||
|
||||
<p data-height="300" data-theme-id="light" data-slug-hash="rmBOQV" data-default-tab="js,result" data-user="tivac" data-embed-version="2" data-pen-title="Mithril Component Example" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/tivac/pen/rmBOQV/">Mithril Component Example</a> by Pat Cavit (<a href="https://codepen.io/tivac">@tivac</a>) on <a href="https://codepen.io">CodePen</a>.</p>
|
||||
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
|
||||
```js
|
||||
var root = document.body
|
||||
var count = 0 // added a variable
|
||||
|
||||
var Hello = {
|
||||
view: function() {
|
||||
return m("main", [
|
||||
m("h1", {
|
||||
class: "title"
|
||||
}, "My first app"),
|
||||
m("button", {
|
||||
onclick: function() {count++}
|
||||
}, count + " clicks")
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
m.mount(root, Hello)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -244,8 +280,36 @@ Also, as you would expect, clicking on the link on the splash page takes you to
|
|||
|
||||
#### Live Example
|
||||
|
||||
<p data-height="300" data-theme-id="light" data-slug-hash="qmWOvr" data-default-tab="js,result" data-user="tivac" data-embed-version="2" data-pen-title="Mithril Routing Example" data-preview="true" class="codepen">See the Pen <a href="https://codepen.io/tivac/pen/qmWOvr/">Mithril Routing Example</a> by Pat Cavit (<a href="https://codepen.io/tivac">@tivac</a>) on <a href="https://codepen.io">CodePen</a>.</p>
|
||||
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
|
||||
```js
|
||||
var root = document.body
|
||||
var count = 0
|
||||
|
||||
var Hello = {
|
||||
view: function() {
|
||||
return m("main", [
|
||||
m("h1", {
|
||||
class: "title"
|
||||
}, "My first app"),
|
||||
m("button", {
|
||||
onclick: function() {count++}
|
||||
}, count + " clicks"),
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
var Splash = {
|
||||
view: function() {
|
||||
return m("a", {
|
||||
href: "#!/hello"
|
||||
}, "Enter!")
|
||||
}
|
||||
}
|
||||
|
||||
m.route(root, "/splash", {
|
||||
"/splash": Splash,
|
||||
"/hello": Hello,
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -291,12 +355,37 @@ Clicking the button should now update the count.
|
|||
|
||||
#### Live Example
|
||||
|
||||
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="isiahmeadows" data-slug-hash="aeBZEq" data-preview="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Mithril XHR Example">
|
||||
<span>See the Pen <a href="https://codepen.io/isiahmeadows/pen/aeBZEq/">
|
||||
Mithril XHR Example</a> by Isiah Meadows (<a href="https://codepen.io/isiahmeadows">@isiahmeadows</a>)
|
||||
on <a href="https://codepen.io">CodePen</a>.</span>
|
||||
</p>
|
||||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
||||
```js
|
||||
var root = document.body
|
||||
var count = 0
|
||||
|
||||
var increment = function() {
|
||||
m.request({
|
||||
method: "PUT",
|
||||
url: "//rem-rest-api.herokuapp.com/api/tutorial/1",
|
||||
body: {count: count + 1},
|
||||
withCredentials: true,
|
||||
})
|
||||
.then(function(data) {
|
||||
count = parseInt(data.count)
|
||||
})
|
||||
}
|
||||
|
||||
var Hello = {
|
||||
view: function() {
|
||||
return m("main", [
|
||||
m("h1", {
|
||||
class: "title"
|
||||
}, "My first app"),
|
||||
m("button", {
|
||||
onclick: increment
|
||||
}, count + " clicks"),
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
m.mount(root, Hello)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue