WiP: Integrate docusaurus 2 (#247)

* Migrate Docs to Docusaurus 2 Alpha (#226)

* Migrate to docusaurus 2

* Change docs to MDX format

* Make custom 404 compatible with Docusaurus v2

* Removes unwated stuffs as suggested by @endiliey

* update doc site .gitignore for Docusaurus 2

* update dependencies for Docusaurus 2

* remove lightBackground class that breaks dark mode

* inline svgs to pick up colors by dark theme

* make font size align with current RSK site

* use monokai css for code block

* remove unused files

* add netlify.toml

* remove unused 404 file

* move monokai into custom.css

* Update docusaurus, rm -rf useless file  & use correct monokai prism theme instead of css"

Co-authored-by: Endi <endiliey@gmail.com>

* tweak css

* tweak codeblock, use line highlighting

* line highlight docs

* readme

* tweaks

* tweak monokai

* larger code font

* workaround for highlighting toc

* bold right toc

* align inline code snippet style with current rsk site

- border radius should be 3px
- bg color should be rgba(27, 31, 35, 0.05)

* align anchor color with current rsk site

- anchor color should be blue
- visited color should be redux purple

* align pagination pill styles with current rsk site

- outline and link colors should be redux purple
- hover effect flips color and bg

* disable dark mode

Author: wgao19

docs/tutorials/advanced-tutorial.md

@@ -34,7 +34,7 @@ The starting commit for this application is a plain React implementation that us
 Let's start by viewing the original plain React app in action:
 
 <iframe src="https://codesandbox.io/embed/rsk-github-issues-example-8jf6d?fontsize=14&hidenavigation=1&theme=dark&view=preview"
-     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
      title="rtk-github-issues-example-01-plain-react"
      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
@@ -381,7 +381,7 @@ Unlike typical `connect` + `mapDispatch` usage, here we call `dispatch()` direct
 Let's see if this works!
 
 <iframe  src="https://codesandbox.io/embed/rtk-github-issues-example-02-issues-display-tdx2w?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fapp%2FApp.tsx&theme=dark&view=preview"
-     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
      title="rtk-github-issues-example-02-issues-display"
      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
@@ -1219,7 +1219,7 @@ Hopefully you now have a solid understand of how Redux Toolkit looks in a real w
 Let's wrap this up with one more look at the complete source code and the running app:
 
 <iframe src="https://codesandbox.io/embed/rtk-github-issues-example-03-final-ihttc?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2FissueDetails%2FcommentsSlice.ts&theme=dark&view=editor"
-     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
      title="rtk-github-issues-example03-final"
      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"

docs/tutorials/basic-tutorial.md

@@ -275,7 +275,7 @@ You can see that we're keeping the async handling separate from the reducer logi
 Here's the complete example in a sandbox:
 
 <iframe src="https://codesandbox.io/embed/counter-vanilla-createslice-redux-toolkit-6gkxx?fontsize=14&hidenavigation=1&theme=dark&view=editor"
-     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }} 
      title="counter-vanilla createSlice - Redux Toolkit"
      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"

docs/tutorials/intermediate-tutorial.md

@@ -68,7 +68,7 @@ The changes here are simple. We update `src/index.js` to import `configureStore`
 
 > - [Convert store setup to use configureStore](https://github.com/reduxjs/rtk-convert-todos-example/commit/cdfc15edbd82beda9ef0521aa191574b6cc7695a)
 
-```diff
+```diff {3-4,9-12}
 import React from "react";
 import { render } from "react-dom";
 -import { createStore } from "redux";
@@ -77,8 +77,8 @@ import { Provider } from "react-redux";
 import App from "./components/App";
 import rootReducer from "./reducers";
 
--const store = createStore(rootReducer);
-+const store = configureStore({
+- const store = createStore(rootReducer);
++ const store = configureStore({
 +   reducer: rootReducer,
 +});
 ```
@@ -87,7 +87,7 @@ import rootReducer from "./reducers";
 
 If you have [the Redux DevTools browser extension](https://github.com/zalmoxisus/redux-devtools-extension) installed, you should now be able to see the current state if you start the application in development mode and open the DevTools Extension. It should look like this:
 
-![Redux DevTools Extension screenshot showing initial state](assets/tutorials/intermediate/int-tut-01-redux-devtools.png)
+![Redux DevTools Extension screenshot showing initial state](/assets/tutorials/intermediate/int-tut-01-redux-devtools.png)
 
 ## Creating the Todos Slice
 
@@ -674,7 +674,7 @@ Everyone has different preferences on what makes a "maintainable" folder structu
 Now, let's see the final version of the code in action!
 
 <iframe src="https://codesandbox.io/embed/rtk-convert-todos-example-uqqy3?fontsize=14&hidenavigation=1&module=%2Fsrc%2Ffeatures%2Ftodos%2FtodosSlice.js&theme=dark&view=editor"
-     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }}
      title="rtk-convert-todos-example"
      allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
      sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"

docs/usage/usage-guide.md

@@ -523,6 +523,6 @@ Second, **JS modules can have "circular reference" problems if two modules try t
 
 This CodeSandbox example demonstrates the problem:
 
-<iframe src="https://codesandbox.io/embed/rw7ppj4z0m" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden; margin-bottom: 20px" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/rw7ppj4z0m" style={{ width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }} sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
 If you encounter this, you may need to restructure your code in a way that avoids the circular references.

netlify.toml

@@ -1,7 +1,4 @@
-# Settings in the [build] context are global and are applied to all contexts
-# unless otherwise overridden by more specific contexts.
 [build]
-  # Directory (relative to root of your repo) that contains the deploy-ready
-  # HTML files and assets generated by the build. If a base directory has
-  # been specified, include it in the publish directory path.
-  publish = "website/build/redux-toolkit/"
+  base    = "website"
+  publish = "website/build"
+  command = "yarn build"

website/.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*
+*.log

website/README.md

@@ -1,198 +1,33 @@
-This website was created with [Docusaurus](https://docusaurus.io/).
-
-# What's In This Document
-
-- [Get Started in 5 Minutes](#get-started-in-5-minutes)
-- [Directory Structure](#directory-structure)
-- [Editing Content](#editing-content)
-- [Adding Content](#adding-content)
-- [Full Documentation](#full-documentation)
-
-# Get Started in 5 Minutes
-
-1.  Make sure all the dependencies for the website are installed:
-
-```sh
-# Install dependencies
-$ yarn
-```
-
-2.  Run your dev server:
-
-```sh
-# Start the site
-$ yarn start
-```
-
-## Directory Structure
-
-Your project file structure should look something like this
-
-```
-my-docusaurus/
-  docs/
-    doc-1.md
-    doc-2.md
-    doc-3.md
-  website/
-    blog/
-      2016-3-11-oldest-post.md
-      2017-10-24-newest-post.md
-    core/
-    node_modules/
-    pages/
-    static/
-      css/
-      img/
-    package.json
-    sidebar.json
-    siteConfig.js
-```
-
-# Editing Content
-
-## Editing an existing docs page
-
-Edit docs by navigating to `docs/` and editing the corresponding document:
-
-`docs/doc-to-be-edited.md`
-
-```markdown
----
-id: page-needs-edit
-title: This Doc Needs To Be Edited
----
-
-Edit me...
-```
-
-For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
-
-## Editing an existing blog post
-
-Edit blog posts by navigating to `website/blog` and editing the corresponding post:
-
-`website/blog/post-to-be-edited.md`
-
-```markdown
----
-id: post-needs-edit
-title: This Blog Post Needs To Be Edited
----
-
-Edit me...
-```
-
-For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
-
-# Adding Content
-
-## Adding a new docs page to an existing sidebar
-
-1.  Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
-
-```md
----
-id: newly-created-doc
-title: This Doc Needs To Be Edited
----
-
-My new content here..
-```
-
-1.  Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
-
-```javascript
-// Add newly-created-doc to the Getting Started category of docs
-{
-  "docs": {
-    "Getting Started": [
-      "quick-start",
-      "newly-created-doc" // new doc here
-    ],
-    ...
-  },
-  ...
-}
-```
-
-For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
-
-## Adding a new blog post
-
-1.  Make sure there is a header link to your blog in `website/siteConfig.js`:
-
-`website/siteConfig.js`
-
-```javascript
-headerLinks: [
-    ...
-    { blog: true, label: 'Blog' },
-    ...
-]
-```
-
-2.  Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
-
-`website/blog/2018-05-21-New-Blog-Post.md`
-
-```markdown
----
-author: Frank Li
-authorURL: https://twitter.com/foobarbaz
-authorFBID: 503283835
-title: New Blog Post
----
-
-Lorem Ipsum...
-```
-
-For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
-
-## Adding items to your site's top navigation bar
-
-1.  Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
-
-`website/siteConfig.js`
-
-```javascript
-{
-  headerLinks: [
-    ...
-    /* you can add docs */
-    { doc: 'my-examples', label: 'Examples' },
-    /* you can add custom pages */
-    { page: 'help', label: 'Help' },
-    /* you can add external links */
-    { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
-    ...
-  ],
-  ...
-}
-```
-
-For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
-
-## Adding custom pages
-
-1.  Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
-1.  If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
-
-`website/siteConfig.js`
-
-```javascript
-{
-  headerLinks: [
-    ...
-    { page: 'my-new-custom-page', label: 'My New Custom Page' },
-    ...
-  ],
-  ...
-}
-```
-
-For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
-
-# Full Documentation
-
-Full documentation can be found on the [website](https://docusaurus.io/).
+# Website
+
+This website is built using Docusaurus 2, a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ 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
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=1 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.