From c335aa70ca0e415a3a129569eebd1ad9b0434f81 Mon Sep 17 00:00:00 2001 From: Pat Cavit Date: Fri, 20 Apr 2018 08:36:08 -0700 Subject: [PATCH] docs: latest site updates (#2126) --- docs/installation.md | 29 ++++++++++++++--------------- docs/integrating-libs.md | 10 +++++----- docs/learning-mithril.md | 2 +- docs/nav-guides.md | 9 +++++---- docs/route.md | 2 +- docs/support.md | 2 +- 6 files changed, 27 insertions(+), 27 deletions(-) diff --git a/docs/installation.md b/docs/installation.md index 2ce6bccbc..5689bc257 100644 --- a/docs/installation.md +++ b/docs/installation.md @@ -18,7 +18,7 @@ If you're new to Javascript or just want a very simple setup to get your feet we ### NPM ```bash -$> npm install mithril --save +$ npm install mithril --save ``` --- @@ -27,33 +27,32 @@ $> npm install mithril --save 1. Initialize the directory as an npm package ```bash -$> npm init --yes +$ npm init --yes ``` 2. install required tools ```bash -$> npm install mithril --save -$> npm install webpack webpack-cli --save-dev +$ npm install mithril --save +$ npm install webpack webpack-cli --save-dev ``` 3. Add a "start" entry to the scripts section in `package.json`. ```js { - // ... - "scripts": { - "start": "webpack src/index.js --output bin/app.js -d --watch" - } + // ... + "scripts": { + "start": "webpack src/index.js --output bin/app.js -d --watch" + } } ``` -3. Create `src/index.js` +4. Create `src/index.js` file. ```js import m from "mithril"; - m.render(document.body, "hello world"); ``` -4. create `index.html` +5. create `index.html` ```html @@ -61,12 +60,12 @@ m.render(document.body, "hello world"); ``` -5. run bundler +6. run bundler ```bash -$> npm start +$ npm start ``` -6. open `index.html` in a browser +7. open `index.html` in a browser #### Step by step @@ -268,7 +267,7 @@ m.render(document.body, "hello world") TypeScript type definitions are available from DefinitelyTyped. They can be installed with: ```bash -$> npm install @types/mithril --save-dev +$ npm install @types/mithril --save-dev ``` For example usage, to file issues or to discuss TypeScript related topics visit: https://github.com/MithrilJS/mithril.d.ts diff --git a/docs/integrating-libs.md b/docs/integrating-libs.md index 42b72bee0..cf0753de8 100644 --- a/docs/integrating-libs.md +++ b/docs/integrating-libs.md @@ -1,9 +1,9 @@ -# Integrating with Other Libraries +# 3rd Party Integration + Integration with third party libraries or vanilla javascript code can be achieved via [lifecycle methods](lifecycle-methods.md). -- [Usage](#usage) +## Example -### Usage ```javascript var FullCalendar = { @@ -19,7 +19,7 @@ var FullCalendar = { // Consider that the lib will modify this parent element in the DOM (e.g. add dependent class attribute and values). // As long as you return the same view results here, mithril will not // overwrite the actual DOM because it's always comparing old and new VDOM - // before applying DOM updates. + // before applying DOM updates. view: function (vnode) { return m('div') }, @@ -54,4 +54,4 @@ m.mount(document.body, { ``` -Running example [flems: FullCalendar](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHigjQGsACAJxigBeADog4xAJ6w4hGDGKjuhfmBEgSxAA5xEAel3UAJmgBWcfNSi0ArobBQM-C7Sy6MJjAA9d7AEZxdMGsoKGoMWDRDR10AZnwAdnwABkDg0PCmKN58LA4LODhRAD4QAF8KdGxcRAIzShp6RmYagDdHbgAxNIBhDMj2wW5gYTQR4WJ6an4MRkRuILRqYgh6bgAKFrRaQxgASiGxhWI6NDhaWHwrAHM1gHIukN6oft5EREnpxlvdw-GAEg2Wx2+EMLl2+CCjz6WTWw1GR3G+m4mmsxG4EhsvG4HAgy3C3FommW9Dg3AwkW4YRCvgw1E4pNk-F+xFKP1G8PGAHlfCYYEt8BgChArmhAdsYALiMReOZNI4mMQAMrEGYwChDSFQJ6ZRwAUSgc024pBLlZh3KY3hLQgMAA7nMFksVmh1kadvs4eNxvxiNZeC6sHdDBAWt9zRRLeN6L4YGBaPx+FhaC0YA7rItiS6xe6DhziEiAErpsloCTcHbiXi0Mu6SmwcnWTTcHDEQjbBkwJzM-QAt0S8SqiE9aF6qDgzXal5B+DS6th+GlEaL9lYHI2BhrUHUaw4Bj4XzbCTqz3Ea12tMZ52uoF7XNe6XyP0u5DM8aB26EACMt3Vt0nWW+CM8zfNYHi1EdeGPOV+AYZVVUNG98AHRhWSA+8QNuXxUQmNAfzvBEjkmdg6TmTR+BaV8WV-ABZXFlGgbgACFsNWABaQDKPfLCpXoPCT3QnDLAgEjuDQGBPAUYCqO4W5aNbXgGOYniXQAannZkAF1IyOR1M1E8TiDWD1KN7RDkIlCcIP1cdhwiGFbjEiT1KOZdmV0q8yJgFojPw+9TONcyhyhOzRxs4KdV4O5PNDNl71chdLVZMoKhATAcDwfIECoE4mmIPAyg0qh2C4BAUEqdKalyeToHqP1yBqDRtD0XR000TgrmcVwqvoqAAAFP3wAaAFZdG6hSoHwOoqEkTRqhAOpynKuak13PKqDqvBGp0fRWvazrRpcBVeoAJkGgBOfBjoO1bJqykAZrmhaUrSx6AEdrE7CRat4er1ClJqdrQNqOroVwTHez7eriU7P10YNxF0cGPt4CRbvqB68Cepa8E1KkIu+36tua3aQZcVIQjxl4oYSZI4YgBHcYgtHpokWbMYQUoNNKIA) \ No newline at end of file +Running example [flems: FullCalendar](https://flems.io/#0=N4IgZglgNgpgziAXAbVAOwIYFsZJAOgAsAXLKEAGhAGMB7NYmBvAHigjQGsACAJxigBeADog4xAJ6w4hGDGKjuhfmBEgSxAA5xEAel3UAJmgBWcfNSi0ArobBQM-C7Sy6MJjAA9d7AEZxdMGsoKGoMWDRDR10AZnwAdnwABkDg0PCmKN58LA4LODhRAD4QAF8KdGxcRAIzShp6RmYagDdHbgAxNIBhDMj2wW5gYTQR4WJ6an4MRkRuILRqYgh6bgAKFrRaQxgASiGxhWI6NDhaWHwrAHM1gHIukN6oft5EREnpxlvdw-GAEg2Wx2+EMLl2+CCjz6WTWw1GR3G+m4mmsxG4EhsvG4HAgy3C3FommW9Dg3AwkW4YRCvgw1E4pNk-F+xFKP1G8PGAHlfCYYEt8BgChArmhAdsYALiMReOZNI4mMQAMrEGYwChDSFQJ6ZRwAUSgc024pBLlZh3KY3hLQgMAA7nMFksVmh1kadvs4eNxvxiNZeC6sHdDBAWt9zRRLeN6L4YGBaPx+FhaC0YA7rItiS6xe6DhziEiAErpsloCTcHbiXi0Mu6SmwcnWTTcHDEQjbBkwJzM-QAt0S8SqiE9aF6qDgzXal5B+DS6th+GlEaL9lYHI2BhrUHUaw4Bj4XzbCTqz3Ea12tMZ52uoF7XNe6XyP0u5DM8aB26EACMt3Vt0nWW+CM8zfNYHi1EdeGPOV+AYZVVUNG98AHRhWSA+8QNuXxUQmNAfzvBEjkmdg6TmTR+BaV8WV-ABZXFlGgbgACFsNWABaQDKPfLCpXoPCT3QnDLAgEjuDQGBPAUYCqO4W5aNbXgGOYniXQAannZkAF1IyOR1M1E8TiDWD1KN7RDkIlCcIP1cdhwiGFbjEiT1KOZdmV0q8yJgFojPw+9TONcyhyhOzRxs4KdV4O5PNDNl71chdLVZMoKhATAcDwfIECoE4mmIPAyg0qh2C4BAUEqdKalyeToHqP1yBqDRtD0XR000TgrmcVwqvoqAAAFP3wAaAFZdG6hSoHwOoqEkTRqhAOpynKuak13PKqDqvBGp0fRWvazrRpcBVeoAJkGgBOfBjoO1bJqykAZrmhaUrSx6AEdrE7CRat4er1ClJqdrQNqOroVwTHez7eriU7P10YNxF0cGPt4CRbvqB68Cepa8E1KkIu+36tua3aQZcVIQjxl4oYSZI4YgBHcYgtHpokWbMYQUoNNKIA) diff --git a/docs/learning-mithril.md b/docs/learning-mithril.md index fb599df88..049b11b93 100644 --- a/docs/learning-mithril.md +++ b/docs/learning-mithril.md @@ -1,4 +1,4 @@ -# Learning Mithril +# Learning Resources Links to Mithril learning content: diff --git a/docs/nav-guides.md b/docs/nav-guides.md index d567cfae4..0a954c4de 100644 --- a/docs/nav-guides.md +++ b/docs/nav-guides.md @@ -1,7 +1,9 @@ -- Tutorials - - [Installation](installation.md) +- Getting Started - [Introduction](index.md) + - [Installation](installation.md) - [Tutorial](simple-application.md) + - [Learning Resources](learning-mithril.md) + - [Getting Help](support.md) - Resources - [JSX](jsx.md) - [ES6](es6.md) @@ -9,8 +11,7 @@ - [Animation](animation.md) - [Testing](testing.md) - [Examples](examples.md) - - [Integrating with Other Libraries](integrating-libs.md) - - [Learning Mithril](learning-mithril.md) + - [3rd Party Integration](integrating-libs.md) - Key concepts - [Vnodes](vnodes.md) - [Components](components.md) diff --git a/docs/route.md b/docs/route.md index a883e833a..0f253f5b9 100644 --- a/docs/route.md +++ b/docs/route.md @@ -475,7 +475,7 @@ m.route(document.body, "/", { }) ``` -Note that in this case, if the Layout component the `oninit` and `oncreate` lifecycle methods would only fire on the Layout component on the first route change (assuming all routes use the same layout). +Note that in this case, if the Layout component has `oninit` and `oncreate` lifecycle methods, they would only fire on the first route change (assuming all routes use the same layout). To clarify the difference between the two examples, example 1 is equivalent to this code: diff --git a/docs/support.md b/docs/support.md index ae466e16e..b157a5a42 100644 --- a/docs/support.md +++ b/docs/support.md @@ -1,3 +1,3 @@ -## Getting Help +# Getting Help Mithril has an active & welcoming community on [Gitter](https://gitter.im/mithriljs/mithril.js), or feel free to ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/mithril.js) using the `mithril.js` tag.