Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Transition to Docusaurus #2107

Merged
merged 29 commits into from
Oct 5, 2019
Merged
Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
ff5bb21
docs: move docs to master
cloverich Jul 27, 2019
5ca50de
docs: move all images to /docs/assets
cloverich Jul 27, 2019
e277e6d
docs: add front-matter to all docs
cloverich Jul 30, 2019
39b7ff1
docs: docusaurus-init
cloverich Jul 30, 2019
9d22bd1
docs: sidebar, siteConfig, image reference fixes
cloverich Jul 30, 2019
9df9a5d
docs: enable publishing to forked gh-pages
cloverich Jul 30, 2019
aa7a81b
docs: remove (unused) SUMMARY.md
cloverich Jul 30, 2019
0fa1670
docs: override img block style
cloverich Jul 30, 2019
3ead376
docs: fix iframe tags
cloverich Sep 11, 2019
cacdbec
docs: remove edit link
cloverich Sep 11, 2019
6c93833
docs: remove boilerplate. update links
cloverich Sep 11, 2019
a608905
docs: add codefund script
cloverich Sep 12, 2019
a02261b
docs: remove gitbook plugin from /docs
cloverich Sep 12, 2019
5f74f50
docs: fix baseUrl and project name
cloverich Sep 12, 2019
b6f830f
docs: remove donating, prefer OpenCollective
cloverich Sep 13, 2019
728e4d3
docs: fix 404 image links
cloverich Sep 13, 2019
31e3d5c
docs: remove id front matter.
cloverich Sep 13, 2019
de7acb5
docs: fix codfund positioning
cloverich Sep 13, 2019
68e9a92
docs: disable_title
cloverich Sep 13, 2019
4bd4388
docs: add upstream gh-pages changes
cloverich Sep 18, 2019
c2e46e1
docs: add github icon, links
cloverich Sep 18, 2019
3f104a4
docs: enable editUrl
cloverich Sep 18, 2019
568a4a8
Add convenience commands to package.json
mweststrate Oct 2, 2019
5fc4f1f
Merge branch 'master' into docusaurus
mweststrate Oct 2, 2019
85a33fb
docs: merge upstream docs changes
cloverich Oct 4, 2019
72062e8
docs: make readme the docs landing page
cloverich Oct 4, 2019
c3b4254
Fixed site config to work on mobx.js.org, with urls compatible with o…
mweststrate Oct 5, 2019
59ce31a
Don't run CI on gh-pages branch
mweststrate Oct 5, 2019
1a77b95
Fixed CI config (?)
mweststrate Oct 5, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@ dist/
*.ipr
*.iws
yarn-error.log
build/
30 changes: 15 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<img src="docs/mobx.png" alt="logo" height="120" align="right" />
<img src="docs/assets/mobx.png" alt="logo" height="120" align="right" />

# MobX

Expand All @@ -15,21 +15,21 @@ _Simple, scalable state management_
MobX is proudly sponsored by Mendix, Coinbase, Facebook Open Source, Canva, Algolia, Guilded, Auction Frontier, Mantro and TalentPlot for 100\$/month or more! And beyond that by many [individual backers](#backers) and through [one time contributions](https://github.com/mobxjs/mobx/blob/master/sponsors.md).

**🥇Gold sponsors (\$250+ pm):** <br/>
<a href="https://mendix.com/"><img src="docs/mendix-logo.png" align="center" width="100" title="Mendix" alt="Mendix" /></a>
<a href="http://auctionfrontier.com/"><img src="docs/auctionfrontier.jpeg" align="center" width="100" title="Auction Frontier" alt="Auction Frontier"></a>
<a href="https://mendix.com/"><img src="docs/assets/mendix-logo.png" align="center" width="100" title="Mendix" alt="Mendix" /></a>
<a href="http://auctionfrontier.com/"><img src="docs/assets/auctionfrontier.jpeg" align="center" width="100" title="Auction Frontier" alt="Auction Frontier"></a>

**🥈Silver sponsors (\$100+ pm):**<br/>
<a href="https://opensource.facebook.com/"><img src="docs/fbos.jpeg" align="center" width="100" title="Facebook Open Source" alt="Facebook Open Source" /></a>
<a href="https://www.canva.com/"><img src="docs/canva.png" align="center" width="100" title="Canva" alt="Canva" /></a>
<a href="https://www.guilded.gg/"><img src="docs/guilded.jpg" align="center" width="100" title="Guilded" alt="Guilded" /></a>
<a href="https://mantro.net/jobs/warlock"><img src="docs/mantro.png" align="center" width="100" title="mantro GmbH" alt="mantro GmbH"></a>
<a href="https://www.codefirst.co.uk/"><img src="https://mobx.js.org/docs/codefirst.png" align="center" width="100" title="CodeFirst" alt="CodeFirst"/></a>
<a href="https://blokt.com/"><img src="https://mobx.js.org/docs/blokt.jpg" align="center" width="100" title="Blokt" alt="Blokt"/></a>
<a href="https://opensource.facebook.com/"><img src="docs/assets/fbos.jpeg" align="center" width="100" title="Facebook Open Source" alt="Facebook Open Source" /></a>
<a href="https://www.canva.com/"><img src="docs/assets/canva.png" align="center" width="100" title="Canva" alt="Canva" /></a>
<a href="https://www.guilded.gg/"><img src="docs/assets/guilded.jpg" align="center" width="100" title="Guilded" alt="Guilded" /></a>
<a href="https://mantro.net/jobs/warlock"><img src="docs/assets/mantro.png" align="center" width="100" title="mantro GmbH" alt="mantro GmbH"></a>
<a href="https://www.codefirst.co.uk/"><img src="docs/codefirst.png" align="center" width="100" title="CodeFirst" alt="CodeFirst"/></a>
<a href="https://blokt.com/"><img src="docs/blokt.jpg" align="center" width="100" title="Blokt" alt="Blokt"/></a>

**🥉Bronze sponsors:**<br/>
<a href="https://coinbase.com/"><img src="docs/coinbase.jpeg" align="center" width="100" title="Coinbase" alt="Coinbase" /></a>
<a href="https://www.algolia.com/"><img src="docs/algolia.jpg" align="center" width="100" title="Algolia" alt="Algolia" /></a>
<a href="https://talentplot.com/"><img src="docs/talentplot.png" align="center" width="100" title="talentplot" alt="talentplot"></a>
<a href="https://coinbase.com/"><img src="docs/assets/coinbase.jpeg" align="center" width="100" title="Coinbase" alt="Coinbase" /></a>
<a href="https://www.algolia.com/"><img src="docs/assets/algolia.jpg" align="center" width="100" title="Algolia" alt="Algolia" /></a>
<a href="https://talentplot.com/"><img src="docs/assets/talentplot.png" align="center" width="100" title="talentplot" alt="talentplot"></a>

# Installation

Expand Down Expand Up @@ -62,7 +62,7 @@ _Tip: Consider using the faster and smaller ES6 build if targetting a modern env

- <i><a style="color: white; background:green;padding:5px;margin:5px;border-radius:2px" href="https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx">Egghead.io course</a></i>
- [Ten minute, interactive MobX + React tutorial](https://mobxjs.github.io/mobx/getting-started.html)
- <img src="docs/book.jpg" height="80px"/> [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!)
- <img src="docs/assets/book.jpg" height="80px"/> [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!)
- [Official MobX 4 documentation and API overview](https://mobxjs.github.io/mobx/refguide/api.html) ([MobX 3](https://github.com/mobxjs/mobx/blob/54557dc319b04e92e31cb87427bef194ec1c549c/docs/refguide/api.md), [MobX 2](https://github.com/mobxjs/mobx/blob/7c9e7c86e0c6ead141bb0539d33143d0e1f576dd/docs/refguide/api.md))
- [How to (not) use decorators](https://mobx.js.org/best/decorators.html)
- Videos:
Expand All @@ -82,7 +82,7 @@ _Anything that can be derived from the application state, should be derived. Aut

This includes the UI, data serialization, server communication, etc.

<img alt="MobX unidirectional flow" src="docs/flow.png" align="center" />
<img alt="MobX unidirectional flow" src="/docs/assets/flow.png" align="center" />

React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.

Expand Down Expand Up @@ -303,7 +303,7 @@ And finally, kudos to all the people that believed in, tried, validated and even

## Further resources and documentation

- <img src="docs/book.jpg" height="80px"/> [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!)
- <img src="/docs/assets/book.jpg" height="80px"/> [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!)
- [MobX homepage](http://mobxjs.github.io/mobx/faq/blogs.html)
- [API overview](http://mobxjs.github.io/mobx/refguide/api.html)
- [Tutorials, Blogs & Videos](http://mobxjs.github.io/mobx/faq/blogs.html)
Expand Down
33 changes: 33 additions & 0 deletions docs/LINKS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<div id='codefund' style='float:right'></div>

# Resources

* [Ten minute interactive introduction to MobX and React](https://mobxjs.github.io/mobx/getting-started.html#demo)
* How MobX works: [In depth explanation of MobX](https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254#.wnlo6bw8y)
* Clone the boilerplate repository containing the above example from: https://github.com/mweststrate/react-mobservable-boilerplate.
* Or fork this [JSFiddle](https://jsfiddle.net/mweststrate/wgbe4guu/).

## Related projects

* [mobx-connect](https://github.com/nightwolfz/mobx-connect) MobX @connect decorator for react components. Similar to redux's @connect.
* [rfx-stack](https://github.com/foxhound87/rfx-stack) RFX Stack - Universal App featuring: React + Feathers + MobX
* [mobx-reactor](https://github.com/amsb/mobx-reactor) Connect MobX data stores to functional stateless React components with async actions and unidirectional data flow.
* [mobx-model](https://github.com/ikido/mobx-model) Simplify mobx data stores that mimic backend models
* [rx-mobx](https://github.com/chicoxyzzy/rx-mobx) Convert Mobx observables to RxJS and vice versa

## More examples

A nice list is WIP, but see this [github issue](https://github.com/mobxjs/mobx/issues/104) for a list of example projects, including routing, authorization, server side rendering etc.

* [TodoMVC using MobX and React](https://github.com/mweststrate/mobx-todomvc)
* The [ports of the _Notes_ and _Kanban_ examples](https://github.com/survivejs/mobservable-demo) from the book "SurviveJS - Webpack and React" to mobservable.
* A simple webshop using [React + mobx](https://jsfiddle.net/mweststrate/46vL0phw) or [JQuery + mobx](http://jsfiddle.net/mweststrate/vxn7qgdw).
* [Simple timer](https://jsfiddle.net/mweststrate/wgbe4guu/) application in JSFiddle.
* [Simple ES5 MobX examples](https://github.com/mattruby/mobx-examples) Bite sized MobX examples all setup to run in jsFiddle.

## Philosophy

* [Making React reactive: the pursuit of high performing, easily maintainable React apps](https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/)
* [SurviveJS interview on Mobservable, React and Flux](http://survivejs.com/blog/mobservable-interview/)
* [Pure rendering in the light of time and state](https://medium.com/@mweststrate/pure-rendering-in-the-light-of-time-and-state-4b537d8d40b1)
* [Official homepage](http://mobxjs.github.io/mobx/)
Loading