Skip to content

Commit

Permalink
WiP: Integrate docusaurus 2 (reduxjs#247)
Browse files Browse the repository at this point in the history
* Migrate Docs to Docusaurus 2 Alpha (reduxjs#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 <[email protected]>

* 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
  • Loading branch information
wgao19 authored and markerikson committed Nov 19, 2019
1 parent f565b5b commit c646304
Show file tree
Hide file tree
Showing 31 changed files with 9,898 additions and 10,493 deletions.
6 changes: 3 additions & 3 deletions docs/tutorials/advanced-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorials/basic-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
10 changes: 5 additions & 5 deletions docs/tutorials/intermediate-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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,
+});
```
Expand All @@ -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

Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion docs/usage/usage-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
9 changes: 3 additions & 6 deletions netlify.toml
Original file line number Diff line number Diff line change
@@ -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"
20 changes: 20 additions & 0 deletions website/.gitignore
Original file line number Diff line number Diff line change
@@ -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
231 changes: 33 additions & 198 deletions website/README.md
Original file line number Diff line number Diff line change
@@ -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.
Loading

0 comments on commit c646304

Please sign in to comment.