Migrate/docusaurus (mobxjs#575)

Moved the documentation to Docusaurus

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+## Installation
+
+```console
+yarn install
+```
+
+## Local Development
+
+```console
+yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+```console
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+## Deployment
+
+```console
+GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/src/api/action.mdx → docs/docs/api/action.mdx

@@ -1,11 +1,8 @@
 ---
-name: Actions
-menu: API Overview
-route: /api/action
+title: Actions
+description: Actions are functions that encapsulate the mutations on observables.
 ---
 
-# Actions
-
 ### `Action(Function fn, {ReactiveContext context, String name})`
 
 - **`Function fn`**: A function that mutates some observables

docs/src/api/context.mdx → docs/docs/api/context.mdx

@@ -1,11 +1,8 @@
 ---
-name: Context
-menu: API Overview
-route: /api/context
+title: Context
+description: The MobX reactive system operates in a context where it is aware of the various observables and their linked reactions. All reactivity occurs within this context.
 ---
 
-# Context
-
 The MobX reactive system operates in a context where it is aware of the various observables and their linked reactions. Within this context, if an observable changes, any linked reaction would automatically execute. By default, there is a singleton, top-level context called the **`mainContext`**. All reactivity occurs within this context.
 
 > Creating custom context is an advanced feature and not needed for your normal usage.

docs/src/api/observable.mdx → docs/docs/api/observable.mdx

@@ -1,12 +1,9 @@
 ---
-name: Observables
-menu: API Overview
-route: /api/observable
+title: Observables
+description: Observables form the reactive state of your MobX Application. You can use the API directly or rely on annotations to make it easier.
 ---
 
-import coreDerivedStateImage from '../images/core-derived-state.png';
-
-# Observables
+import coreDerivedStateImage from '../../src/images/core-derived-state.png';
 
 Observables form the _reactive state_ of your MobX Application. You can use the API directly or rely on annotations to make it easier. The reactive state of your application can be divided into the **Core State** and **Derived State**. Core State is the state inherent to your business domain, where as Derived State is state that can be derived from the Core State.
 

docs/src/api/reaction.mdx → docs/docs/api/reaction.mdx

@@ -1,12 +1,9 @@
 ---
-name: Reactions
-menu: API Overview
-route: /api/reaction
+title: Reactions
+description: The MobX triad is completed when we add Reactions into the mix of Observables and Actions.
 ---
 
-import mobxTriad from '../images/mobx-triad.png';
-
-# Reactions
+import mobxTriad from '../../src/images/mobx-triad.png';
 
 <img src={mobxTriad} />
 

docs/src/api/spy.mdx → docs/docs/api/spy.mdx

@@ -1,11 +1,8 @@
 ---
-name: Spy
-menu: API Overview
-route: /api/spy
+title: Spy
+description: Spy exposes the internal workings of MobX and gives a deeper look into the reactive system.
 ---
 
-# Spy
-
 MobX so far has been somewhat of a black-box, nicely hiding the details of how its reactive system works internally. Some have seen this as "too much magic" and not sure of how/why things work. The problem exacerbates when you have runtime exceptions. The amount of detail exposed on the error may not be enough. It also lacks the complete trace of events that led to the failure.
 
 **Spying** exposes all these details and shows what is happening inside MobX. It can be summarized like so:
@@ -14,7 +11,7 @@ MobX so far has been somewhat of a black-box, nicely hiding the details of how i
 - Enables better developer experience while debugging
 - Paves the way for integrating with other tools
 
-import spy from '../images/spy.png';
+import spy from '../../src/images/spy.png';
 
 <img src={spy} alt="Spy Characterization" />
 
@@ -78,7 +75,7 @@ Future<void> main() async {
 
 Running the counter example in the simulator gives the following output:
 
-import counterSpy from '../images/mobx-counter-spy.png';
+import counterSpy from '../../src/images/mobx-counter-spy.png';
 
 <img src={counterSpy} width={300} />
 

docs/src/community.mdx → docs/docs/community.mdx

@@ -1,10 +1,8 @@
 ---
-name: Community
-route: /community
+title: Community
+description: The community around MobX.dart
 ---
 
-# Community
-
 ## Articles
 
 - MobX for state-management in Flutter Apps ([Part 1](https://blog.geekyants.com/state-management-made-fun-using-mobx-for-flutter-part-1-5e4273de7982), [Part 2](https://blog.geekyants.com/mobx-for-state-management-in-flutter-apps-part-2-844bf9b97869)) - [Aditya Soni](https://twitter.com/aditya_2495)
@@ -28,6 +26,6 @@ route: /community
 
 MobX Logo created by [Robert Felker](https://twitter.com/BlueAquilae), using a generative-art tool built using MobX!
 
-import genArtLogo from './images/mobx-logo-generative-art.jpg';
+import genArtLogo from '../src/images/mobx-logo-generative-art.jpg';
 
 <img src={genArtLogo} height={400} />

docs/src/core-concepts.mdx → docs/docs/core-concepts.mdx

@@ -1,12 +1,11 @@
 ---
-name: Core Concepts
-route: /concepts
+title: Core Concepts
+description: The fundamental concepts around MobX.dart
+id: concepts
 ---
 
-# Core Concepts
-
-import { PubBadge } from './components/PubBadge';
-import mobxTriad from './images/mobx-triad.png';
+import { PubBadge } from '../src/components/PubBadge';
+import mobxTriad from '../src/images/mobx-triad.png';
 
 <img
   src={mobxTriad}
@@ -309,7 +308,7 @@ class _CounterExampleState extends State<CounterExample> {
 }
 ```
 
-import mobxIsometric from './images/mobx-isometric.png';
+import mobxIsometric from '../src/images/mobx-isometric.png';
 
 <img src={mobxIsometric} width="50%" />
 

docs/src/development/blueprint.md → docs/docs/development/blueprint.md

@@ -1,11 +1,8 @@
 ---
-menu: Developer
-name: Blueprint
-route: /developer/blueprint
+title: Blueprint
+description: This document outlines the core behaviors of MobX that need to be implemented for an effective reactive system.
 ---
 
-# Blueprint (WIP)
-
 This document outlines the core behaviors of MobX that need to be implemented for an effective reactive system.
 
 ## Core Actors

docs/src/development/release.mdx → docs/docs/development/release.mdx

@@ -1,11 +1,8 @@
 ---
-menu: Developer
-route: /developer/release
-name: Release Guidelines
+title: Release Guidelines
+description: If you are a developer on the MobX project, here are few guidelines that will help in your journey.
 ---
 
-# Release Guidelines
-
 If you are a developer on the MobX project, here are few guidelines that will help in your journey. These apply to all the packages: `mobx`, `mobx_codegen`, `flutter_mobx`.
 
 ### 1. pubspec.yaml

docs/src/examples/connectivity/index.mdx → docs/docs/examples/connectivity/index.mdx

@@ -1,13 +1,11 @@
 ---
-name: Connectivity
-menu: Examples
-route: /examples/connectivity
+title: Connectivity
+slug: /examples/connectivity
+description: In this example, we will see how to use reactions for monitoring connection changes.
 ---
 
-import { PubBadge } from '../../components/PubBadge';
-import { Profile } from '../../components/Testimonial';
-
-# Connectivity
+import { PubBadge } from '../../../src/components/PubBadge';
+import { Profile } from '../../../src/components/Testimonial';
 
 <Profile
   author="Michael Bui"

docs/src/examples/counter.mdx → docs/docs/examples/counter.mdx

@@ -1,11 +1,8 @@
 ---
-name: Counter
-menu: Examples
-route: /examples/counter
+title: Counter
+description: The Counter example
 ---
 
-# Counter
-
 This example is the same as the one in the [Getting Started](/getting-started) guide. It does add a few details that were missing over there.
 
 > See the complete code [here](https://github.com/mobxjs/mobx.dart/tree/master/mobx_examples/lib/counter).
@@ -83,7 +80,7 @@ class CounterExample extends StatelessWidget {
 
 ```
 
-import counterGif from "../getting-started/mobx-counter.gif";
+import counterGif from '../getting-started/mobx-counter.gif';
 
 <img src={counterGif} width={300} />
 

docs/src/examples/dice/index.mdx → docs/docs/examples/dice/index.mdx

@@ -1,13 +1,11 @@
 ---
-name: Dice
-menu: Examples
-route: /examples/dice
+title: Dice
+slug: /examples/dice
+description: In this example, we will build a fun dice app. You can make the dice roll at the tap of a button and a random count is generated with every roll of dice.
 ---
 
-import { PubBadge } from '../../components/PubBadge';
-import { Profile } from '../../components/Testimonial';
-
-# Dice
+import { PubBadge } from '../../../src/components/PubBadge';
+import { Profile } from '../../../src/components/Testimonial';
 
 <Profile
   author="Giri Jeedigunta"

docs/src/examples/form/index.mdx → docs/docs/examples/form/index.mdx

@@ -1,14 +1,12 @@
 ---
-name: Form
-menu: Examples
-route: /examples/form
+title: Form
+slug: /examples/form
+description: In this article we will use the complete MobX triad to do form validation. This will involve the creation of a FormStore that contains the observables, actions to mutate the fields and reactions that do validations when a field changes.
 ---
 
 import formImage from './form.png';
 import formGif from './form.gif';
-import { PubBadge } from '../../components/PubBadge';
-
-# Login Form
+import { PubBadge } from '../../../src/components/PubBadge';
 
 In this article we will use the complete _MobX triad_ to do form validation. This will involve the creation of a `FormStore` that contains the **observables**, **actions** to mutate the fields and **reactions** that do validations when a field changes.
 

docs/src/examples/github/index.mdx → docs/docs/examples/github/index.mdx

@@ -1,12 +1,10 @@
 ---
-name: Github Repos
-menu: Examples
-route: /examples/github-repos
+title: Github Repos
+slug: /examples/github-repos
+description: In this example, we will fetch the repositories for a github user. This will also show the use of an ObservableFuture with an Observer.
 ---
 
-import { PubBadge } from '../../components/PubBadge';
-
-# Github Repos
+import { PubBadge } from '../../../src/components/PubBadge';
 
 In this example, we will use the <PubBadge name="github" /> package to fetch the repositories for a user. This will also show the use of an `ObservableFuture` with an `Observer`.
 

docs/src/examples/hacker-news/index.mdx → docs/docs/examples/hacker-news/index.mdx

@@ -1,12 +1,10 @@
 ---
-menu: Examples
-name: Hacker News
-route: /examples/hacker-news
+title: Hacker News
+slug: /examples/hacker-news
+description: In this example we will rely on the ObservableFuture to keep track of the fetch calls to the HackerNews API.
 ---
 
-import { PubBadge } from '../../components/PubBadge';
-
-# Hacker News
+import { PubBadge } from '../../../src/components/PubBadge';
 
 In this example we will rely on the `ObservableFuture` to keep track of the fetch calls to the HackerNews API. The entire state of the application will be defined in terms of the `ObservableFuture`.
 

docs/src/examples/random-stream/index.mdx → docs/docs/examples/random-stream/index.mdx

@@ -1,11 +1,9 @@
 ---
-name: Random Stream
-menu: Examples
-route: /examples/random-stream
+title: Random Stream
+slug: /examples/random-stream
+description: In this example, we will take a quick look at using the ObservableStream by observing a stream of random numbers.
 ---
 
-# Random Stream
-
 MobX provides a variety of reactive data structures to create your reactive-state. You must have already seen examples of the `Observable`, `ObservableSet`, `ObservableMap`, `ObservableList`, `ObservableFuture`. To add to this mix, we have the `ObservableStream<T>` that takes a stream and makes it reactive.
 
 In this example, we will take a quick look at using the `ObservableStream` by observing a stream of random numbers.

docs/src/examples/todos/index.mdx → docs/docs/examples/todos/index.mdx

@@ -1,12 +1,10 @@
 ---
-name: Todos
-menu: Examples
-route: /examples/todos
+title: Todos
+slug: /examples/todos
+description: In this example, we will build the classic TodoMVC, which has become the default way of showcasing the capabilities of a state-management library.
 ---
 
-import { PubBadge } from '../../components/PubBadge';
-
-# Todos
+import { PubBadge } from '../../../src/components/PubBadge';
 
 In this example, we will build the classic [TodoMVC](http://todomvc.com/), which has become the default way of showcasing the capabilities of a state-management library.
 

docs/src/getting-started/index.mdx → docs/docs/getting-started/index.mdx

@@ -1,10 +1,8 @@
 ---
-name: Getting Started
-route: '/getting-started'
+title: Getting Started 🚀
+slug: /getting-started
 ---
 
-# Getting Started 🚀
-
 In this tutorial you will learn how to create a MobX version of the default Flutter "counter" app.
 
 import finalImage from './end-result.png';