diff --git a/README.md b/README.md
index 73ae2f84ed7a4..c575ddcbe4ff0 100644
--- a/README.md
+++ b/README.md
@@ -66,7 +66,7 @@ Gatsby is a modern web framework for blazing fast websites.
limitations. Gatsby sites are fully functional React apps, so you can create high-quality,
dynamic web apps, from blogs to e-commerce sites to user dashboards.
-- **Choose your Rendering Option.** You can choose alternative [rendering options](https://gatsbyjs.com/docs/conceptual/rendering-options/), namely Deferred Static Generation (DSG) and Server-Side Rendering (SSR), in addition to Static Site Generation (SSG) — on a per-page basis. This type of granular control allows you to optimize for performance and productivity without sacrificing one for the other.
+- **Choose your Rendering Options.** You can choose alternative [rendering options](https://gatsbyjs.com/docs/conceptual/rendering-options/), namely Deferred Static Generation (DSG) and Server-Side Rendering (SSR), in addition to Static Site Generation (SSG) — on a per-page basis. This type of granular control allows you to optimize for performance and productivity without sacrificing one for the other.
- **Use a Modern Stack for Every Site.** No matter where the data comes from, Gatsby sites are
built using React and GraphQL. Build a uniform workflow for you and your team, regardless of
diff --git a/docs/docs/how-to/adding-common-features/localization-i18n.md b/docs/docs/how-to/adding-common-features/localization-i18n.md
index 2eb023ce2376c..c0d7660eeb02f 100644
--- a/docs/docs/how-to/adding-common-features/localization-i18n.md
+++ b/docs/docs/how-to/adding-common-features/localization-i18n.md
@@ -55,6 +55,6 @@ This framework also has experimental support for the React suspense API and it s
- [Gatsby i18n packages](https://www.gatsbyjs.com/plugins/gatsby-plugin-i18n/?=i18)
-- [Gatsby i18n articles](https://www.gatsbyjs.com/blog/tags/i18n/)
+- [Gatsby i18n articles](https://www.gatsbyjs.com/blog/tags/localization/)
- [W3C's i18n resources](https://w3c.github.io/i18n-drafts/getting-started/contentdev.en#reference)
diff --git a/docs/docs/how-to/styling/global-css.md b/docs/docs/how-to/styling/global-css.md
index 97055d16415cd..333acbd2eea02 100644
--- a/docs/docs/how-to/styling/global-css.md
+++ b/docs/docs/how-to/styling/global-css.md
@@ -8,7 +8,7 @@ Globally-scoped CSS rules are declared in external `.css` stylesheets, and [CSS
## Adding global styles with a layout component
-The best way to add global styles is with a [shared layout component](/docs/tutorial/part-3/#your-first-layout-component). This layout component is used for things that are shared throughout the site, including styles, header components, and other common items.
+The best way to add global styles is with a [shared layout component](/docs/tutorial/part-2/#create-a-reusable-layout-component). This layout component is used for things that are shared throughout the site, including styles, header components, and other common items.
> **NOTE:** This pattern is implemented by default in [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/063978d59f74103da45d5880a61ebd2e77798e3c/src/components/layout.js#L13).
diff --git a/docs/docs/recipes/pages-layouts.md b/docs/docs/recipes/pages-layouts.md
index e978330ae0eef..c48aeeb80e3a8 100644
--- a/docs/docs/recipes/pages-layouts.md
+++ b/docs/docs/recipes/pages-layouts.md
@@ -153,7 +153,7 @@ export default function Home() {
### Additional resources
-- Create a layout component in [tutorial part three](/docs/tutorial/part-3/#your-first-layout-component)
+- Create a layout component in [tutorial part three](/docs/tutorial/part-2/#create-a-reusable-layout-component)
- Styling with [Layout Components](/docs/how-to/routing/layout-components/)
## Creating pages programmatically with createPage
diff --git a/docs/docs/recipes/styling-css.md b/docs/docs/recipes/styling-css.md
index 79029bcb8cc24..c2ecb9f6eb7d5 100644
--- a/docs/docs/recipes/styling-css.md
+++ b/docs/docs/recipes/styling-css.md
@@ -50,7 +50,7 @@ import "./src/styles/global.css"
### Directions
-You can add global styles to a [shared layout component](/docs/tutorial/part-3/#your-first-layout-component). This component is used for things that are common throughout the site, like a header or footer.
+You can add global styles to a [shared layout component](/docs/tutorial/part-2/#create-a-reusable-layout-component). This component is used for things that are common throughout the site, like a header or footer.
1. If you don't already have one, create a new directory in your site at `/src/components`.
diff --git a/examples/using-mobx/package.json b/examples/using-mobx/package.json
index 3421c651ffd3f..8e9cd30ef628d 100644
--- a/examples/using-mobx/package.json
+++ b/examples/using-mobx/package.json
@@ -7,8 +7,7 @@
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
- "format": "prettier --write \"src/**/*.js\"",
- "lint": "eslint **/*.{js,jsx} --quiet -o linterrors.txt --ignore-path .gitignore"
+ "format": "prettier --write \"src/**/*.js\""
},
"keywords": [
"gatsby",
@@ -17,21 +16,13 @@
"license": "MIT",
"dependencies": {
"gatsby": "next",
- "mobx": "^5.15.7",
- "mobx-react": "^6.3.0",
- "prop-types": "^15.7.2",
- "react": "^16.9.0",
- "react-dom": "^16.9.0"
+ "mobx": "^6.3.10",
+ "mobx-react": "^7.2.1",
+ "prop-types": "^15.8.0",
+ "react": "^17.0.1",
+ "react-dom": "^17.0.1"
},
"devDependencies": {
- "babel-eslint": "^10.1.0",
- "eslint": "^6.8.0",
- "eslint-config-airbnb": "^18.2.0",
- "eslint-config-prettier": "^6.11.0",
- "eslint-plugin-import": "^2.22.0",
- "eslint-plugin-jsx-a11y": "^6.3.1",
- "eslint-plugin-prettier": "^3.1.4",
- "eslint-plugin-react": "^7.20.6",
"prettier": "2.1.1"
}
}
diff --git a/examples/using-mobx/src/components/Counter.js b/examples/using-mobx/src/components/Counter.js
index 54de6eda5012a..5e417d09be467 100644
--- a/examples/using-mobx/src/components/Counter.js
+++ b/examples/using-mobx/src/components/Counter.js
@@ -1,16 +1,17 @@
-import React, { Fragment } from "react"
-import { observer, inject } from "mobx-react"
+import React, { useContext } from "react"
+import { MobXProviderContext, observer } from "mobx-react"
-const Counter = inject(`store`)(
- observer(({ store }) => (
-
+const Counter = observer(() => {
+ const store = useContext(MobXProviderContext)
+ return (
+ <>