Migrate website to Docusaurus 2 (#3635)

* Migrate website to Docusaurus 2

* Tweak styling to better match original site

- Shrank padding and border radius for code snippets
- Made category chevrons closed=right and open=down
- Added transition for category chevrons
- Forced links in code snippets to inherit link color

* Restructure index page sales pitch content based on RTK layout

Co-authored-by: Mark Erikson <[email protected]>

Author: BSKY

README.md

@@ -1,11 +1,11 @@
 # <a href='http://redux.js.org'><img src='https://assets-git-camo.f3mw1.com/f28b5bc7822f1b7bb28a96d8d09e7d79169248fc/687474703a2f2f692e696d6775722e636f6d2f4a65567164514d2e706e67' height='60' alt='Redux Logo' aria-label='redux.js.org' /></a>
 
-Redux is a predictable state container for JavaScript apps.  
+Redux is a predictable state container for JavaScript apps.
 (Not to be confused with a WordPress framework – [Redux Framework](https://reduxframework.com/).)
 
 It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
 
-You can use Redux together with [React](https://reactjs.org), or with any other view library.  
+You can use Redux together with [React](https://reactjs.org), or with any other view library.
 It is tiny (2kB, including dependencies).
 
 > **Note**: We are currently planning a rewrite of the Redux docs. Please take some time to **[fill out this survey on what content is most important in a docs site](https://docs.google.com/forms/d/e/1FAIpQLSfzIkY3fXZ8PrQKScYMK0YoEgALfAK2qQ0mOj1_ibKv2qDTuQ/viewform)**. Thanks!
@@ -85,7 +85,7 @@ Dan Abramov (author of Redux) wrote Redux while working on his React Europe talk
 
 ## Influences
 
-Redux evolves the ideas of [Flux](http://facebook.github.io/flux/), but avoids its complexity by taking cues from [Elm](https://github.com/evancz/elm-architecture-tutorial/).  
+Redux evolves the ideas of [Flux](http://facebook.github.io/flux/), but avoids its complexity by taking cues from [Elm](https://github.com/evancz/elm-architecture-tutorial/).
 Even if you haven't used Flux or Elm, Redux only takes a few minutes to get started with.
 
 ## Installation
@@ -119,8 +119,8 @@ Note that unlike Redux itself, many packages in the Redux ecosystem don't provid
 
 ## The Gist
 
-The whole state of your app is stored in an object tree inside a single _store_.  
-The only way to change the state tree is to emit an _action_, an object describing what happened.  
+The whole state of your app is stored in an object tree inside a single _store_.
+The only way to change the state tree is to emit an _action_, an object describing what happened.
 To specify how the actions transform the state tree, you write pure _reducers_.
 
 That's it!
@@ -185,19 +185,19 @@ This architecture might seem like an overkill for a counter app, but the beauty
 
 **[Getting Started with Redux](https://egghead.io/series/getting-started-with-redux)** is a video course consisting of 30 videos narrated by [Dan Abramov](https://twitter.com/dan_abramov), author of Redux. It is designed to complement the “Basics” part of the docs while bringing additional insights about immutability, testing, Redux best practices, and using Redux with React. **This course is free and will always be.**
 
-> [“Great course on egghead.io by @dan_abramov - instead of just showing you how to use #redux, it also shows how and why redux was built!”](https://twitter.com/sandrinodm/status/670548531422326785)  
+> [“Great course on egghead.io by @dan_abramov - instead of just showing you how to use #redux, it also shows how and why redux was built!”](https://twitter.com/sandrinodm/status/670548531422326785)
 > Sandrino Di Mattia
 
-> [“Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video.”](https://twitter.com/chrisdhanaraj/status/670328025553219584)  
+> [“Plowing through @dan_abramov 'Getting Started with Redux' - its amazing how much simpler concepts get with video.”](https://twitter.com/chrisdhanaraj/status/670328025553219584)
 > Chris Dhanaraj
 
-> [“This video series on Redux by @dan_abramov on @eggheadio is spectacular!”](https://twitter.com/eddiezane/status/670333133242408960)  
+> [“This video series on Redux by @dan_abramov on @eggheadio is spectacular!”](https://twitter.com/eddiezane/status/670333133242408960)
 > Eddie Zaneski
 
-> [“Come for the name hype. Stay for the rock solid fundamentals. (Thanks, and great job @dan_abramov and @eggheadio!)”](https://twitter.com/danott/status/669909126554607617)  
+> [“Come for the name hype. Stay for the rock solid fundamentals. (Thanks, and great job @dan_abramov and @eggheadio!)”](https://twitter.com/danott/status/669909126554607617)
 > Dan
 
-> [“This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring”](https://twitter.com/gelatindesign/status/669658358643892224)  
+> [“This series of videos on Redux by @dan_abramov is repeatedly blowing my mind - gunna do some serious refactoring”](https://twitter.com/gelatindesign/status/669658358643892224)
 > Laurence Roberts
 
 So, what are you waiting for?
@@ -274,13 +274,13 @@ If you're new to the NPM ecosystem and have troubles getting a project up and ru
 
 ## Testimonials
 
-> [“Love what you're doing with Redux”](https://twitter.com/jingc/status/616608251463909376)  
+> [“Love what you're doing with Redux”](https://twitter.com/jingc/status/616608251463909376)
 > Jing Chen, creator of Flux
 
-> [“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”](https://twitter.com/fisherwebdev/status/616286955693682688)  
+> [“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”](https://twitter.com/fisherwebdev/status/616286955693682688)
 > Bill Fisher, author of Flux documentation
 
-> [“It's cool that you are inventing a better Flux by not doing Flux at all.”](https://twitter.com/andrestaltz/status/616271392930201604)  
+> [“It's cool that you are inventing a better Flux by not doing Flux at all.”](https://twitter.com/andrestaltz/status/616271392930201604)
 > André Staltz, creator of Cycle
 
 ## Thanks
@@ -304,12 +304,12 @@ You can find the official logo [on GitHub](https://github.com/reduxjs/redux/tree
 
 ## Change Log
 
-This project adheres to [Semantic Versioning](http://semver.org/).  
+This project adheres to [Semantic Versioning](http://semver.org/).
 Every release, along with the migration instructions, is documented on the GitHub [Releases](https://github.com/reduxjs/redux/releases) page.
 
 ## Patrons
 
-The work on Redux was [funded by the community](https://www.patreon.com/reactdx).  
+The work on Redux was [funded by the community](https://www.patreon.com/reactdx).
 Meet some of the outstanding companies that made it possible:
 
 - [Webflow](https://github.com/webflow)

netlify.toml

@@ -0,0 +1,4 @@
+[build]
+  base    = "website"
+  publish = "website/build"
+  command = "npm run 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*

website/README.md

@@ -1,198 +1,33 @@
-This website was created with [Docusaurus](https://docusaurus.io/).
+# Website
 
-# What's In This Document
+This website is built using Docusaurus 2, a modern static website generator.
 
-- [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)
+### Installation
 
-# 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...
+$ yarn
 ```
 
-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
----
+### Local Development
 
-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
-    ],
-    ...
-  },
-  ...
-}
+$ yarn start
 ```
 
-For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
 
-## Adding a new blog post
+### Build
 
-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...
+$ yarn build
 ```
 
-For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-## Adding items to your site's top navigation bar
+### Deployment
 
-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' },
-    ...
-  ],
-  ...
-}
+$ GIT_USER=<Your GitHub username> USE_SSH=1 yarn deploy
 ```
 
-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/).
+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.