From 96fb9a5bbd8fe18c75cfbdd787013d9cf684a430 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Mon, 10 Apr 2017 23:31:44 -0700 Subject: [PATCH 1/3] docs: add examples for tutorial --- docs/index.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/docs/index.md b/docs/index.md index 86aca2cc..504dd2b1 100644 --- a/docs/index.md +++ b/docs/index.md @@ -85,6 +85,11 @@ m.render(root, "My first app") As you can see, you use the same code to both create and update HTML. Mithril automatically figures out the most efficient way of updating the text, rather than blindly recreating it from scratch. +#### Live Example + +

See the Pen Mithril Hello World by Pat Cavit (@tivac) on CodePen.

+ + --- ### DOM elements @@ -119,6 +124,11 @@ m("main", [ ]) ``` +#### Live Example + +

See the Pen Simple Mithril Example by Pat Cavit (@tivac) on CodePen.

+ + Note: If you prefer `` syntax, [it's possible to use it via a Babel plugin](jsx.md). ```jsx @@ -185,6 +195,11 @@ You can now update the label of the button by clicking the button. Since we used If you're wondering about performance, it turns out Mithril is very fast at rendering updates, because it only touches the parts of the DOM it absolutely needs to. So in our example above, when you click the button, the text in it is the only part of the DOM Mithril actually updates. +#### Live Example + +

See the Pen Mithril Component Example by Pat Cavit (@tivac) on CodePen.

+ + --- ### Routing @@ -218,6 +233,11 @@ The `"/splash"` right after `root` means that's the default route, i.e. if the h Also, as you would expect, clicking on the link on the splash page takes you to the click counter screen we created earlier. Notice that now your URL will point to `http://localhost/#!/hello`. You can navigate back and forth to the splash page using the browser's back and next button. +#### Live Example + +

See the Pen Mithril Routing Example by Pat Cavit (@tivac) on CodePen.

+ + --- ### XHR @@ -260,6 +280,11 @@ var Hello = { Clicking the button should now update the count. +#### Live Example + +

See the Pen Mithril XHR Example by Pat Cavit (@tivac) on CodePen.

+ + --- We covered how to create and update HTML, how to create components, routes for a Single Page Application, and interacted with a server via XHR. From 451cf00951ca268e9bedfbe733482d5f59971d61 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Mon, 10 Apr 2017 23:31:56 -0700 Subject: [PATCH 2/3] docs: add incrementing value to repeated anchors --- docs/generate.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/generate.js b/docs/generate.js index 52bc3e70..4bc76499 100644 --- a/docs/generate.js +++ b/docs/generate.js @@ -27,6 +27,7 @@ function generate(pathname) { if (pathname.match(/\.md$/)) { var outputFilename = pathname.replace(/\.md$/, ".html") var markdown = fs.readFileSync(pathname, "utf-8") + var anchors = {} var fixed = markdown .replace(/`((?:\S| -> |, )+)(\|)(\S+)`/gim, function(match, a, b, c) { // fix pipes in code tags return "" + (a + b + c).replace(/\|/g, "|") + "" @@ -53,6 +54,12 @@ function generate(pathname) { .replace(/(.+?)<\/h.>/gim, function(match, n, id, text) { // fix anchors var anchor = text.toLowerCase().replace(/<(\/?)code>/g, "").replace(/.+?<\/a>/g, "").replace(/\.|\[|\]|"|\/|\(|\)/g, "").replace(/\s/g, "-"); + if(anchor in anchors) { + anchor += ++anchors[anchor] + } else { + anchors[anchor] = 0; + } + return `${text}`; }) fs.writeFileSync("./dist/archive/v" + version + "/" + outputFilename.replace(/^docs\//, ""), html, "utf-8") From 94dfc52a987460dbb1faf657960f41aec141924c Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Mon, 10 Apr 2017 23:50:07 -0700 Subject: [PATCH 3/3] docs: add simple scaffolding pen to intro section --- docs/index.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/index.md b/docs/index.md index 504dd2b1..09640b6a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -50,7 +50,7 @@ Mithril supports browsers all the way back to IE9, no polyfills required. ### Getting started -The easiest way to try out Mithril is to include it from a CDN, and follow this tutorial. It'll cover the majority of the API surface (including routing and XHR) but it'll only take 10 minutes. +An easy way to try out Mithril is to include it from a CDN and follow this tutorial. It'll cover the majority of the API surface (including routing and XHR) but it'll only take 10 minutes. Let's create an HTML file to follow along: @@ -65,6 +65,11 @@ Let's create an HTML file to follow along: ``` +To make things simpler you can fork this pen which already has the latest version of mithril loaded. + +

See the Pen Mithril Scaffold by Pat Cavit (@tivac) on CodePen.

+ + --- ### Hello world