docs: update docz version

Author: rakannimer

src/docs/documentation/customizing/gatsby-theme.mdx

@@ -7,18 +7,19 @@ menu: Customizing
 
 # Gatsby Theme
 
-If you want to use Docz in a Gatsby environment, use our `gatsby-theme-docz` is the better choice.
+If you want to use Docz in a Gatsby application, you can use `gatsby-theme-docz`.
 
 Gatsby themes is one of the coolest features of all time in Gatsby. With the introduction of theming in Gatsby, it's easier than ever to get started building a Gatsby site. Shared functionality, data sourcing, and design can all be prepackaged as a Gatsby Theme that's an NPM install away.
 
 Our theme has all components and algorithms used to render your documentation website, with it we can explore a lot of Gatsby features and put all this things together in order
-to create a really usefull documentation for you. Because of `gatsby-theme-docz` you can enjoy of a lot easier system to customize and improve your docs too.
+to create a really useful documentation website. 
+With `gatsby-theme-docz` you can get the full power of docz in your existing Gatsby app.
 
-If you like it, but you don't know what is a Gatsby theme, please read [the official docs](https://www.gatsbyjs.org/docs/themes/introduction/)
+If you're not sure what a Gatsby theme is, please read [the official docs](https://www.gatsbyjs.org/docs/themes/introduction/)
 
 ## How to use
 
-It's so simple to use our Gatsby theme. First of all, just install some packages:
+First, install some packages:
 
  ```
 yarn add gatsby gatsby-theme-docz@next docz@next react react-dom
@@ -33,7 +34,7 @@ module.exports = {
 }
 ```
 
-Then, add some `.mdx` inside your project:
+Then, add some `.mdx` in your project:
 
 ```markdown
 ---
@@ -59,7 +60,7 @@ If everything works, you should see something like this:
 ## Configuration
 
 Set your config by using `doczrc.js` file ([see all available](https://www.docz.site/docs/project-configuration)) or if you want to
-set some defaults for your theme, use `options` on plugin definition:
+set some defaults for your theme, use `options` in the plugin definition:
 
 ```js
 // gatsby-config.js
@@ -92,7 +93,7 @@ export default {
 
 ## Customizing components
 
-Components shadowing is one of the best things included in the new Gatsby theme feature, with it is possible to replace theme files just by creating your own file following a file naming convetion.
+Components shadowing is one of the best things included in the new Gatsby theme feature, with it, it is possible to replace theme files just by creating your own file following a file naming convention.
 
 Example: If you're using our `gatsby-theme-docz` which has a `Header` component located at `src/components/Header/index.js` you can override the component by creating `src/gatsby-theme-docz/components/Header/index.js`. Cool right?
 
@@ -112,7 +113,11 @@ Easy, right?
 
 ## Creating your own Docz theme
 
-One of the coolest thing of Docz is that you can create your own theme if you want from scratch and use all benefits of it. The oldest way to acomplish that is by using the `theme` property inside the `doczrc.js` file. Now, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`
+One of the coolest thing of Docz is that you can create your own theme if you want from scratch and keep all docz's benefits.
+
+Previously, this was accomplished by using the `theme` property inside the `doczrc.js` file. 
+
+Starting from v2, if you want to create your own theme, just create a file located at `src/gatsby-theme-docz/index.js`
 
 ```js
 import React from 'react'
@@ -170,9 +175,11 @@ export default ({ children }) => (
 
 ## Theme UI integrated
 
-As default theme system we are using the [Theme-UI](https://theme-ui.com/), it's a library for build consistent, themeable React apps based on constraint-based design principles.
+Docz's code uses [Theme-UI](https://theme-ui.com/) as the default theme system. 
+
+[Theme-UI](https://theme-ui.com/) is a library for building consistent, themeable React apps based on constraint-based design principles.
 
-You can modify our based theme creating your own style, combining these modifications with the component shadowing and creating a totally differente documentation.
+You can modify the default theme and create your own style by combining these modifications with component shadowing.
 
 Check our [base theme object](https://github.com/pedronauck/docz/blob/feat/gatsby/core/gatsby-theme-docz/src/theme/index.js) to see the properties.
 
@@ -191,7 +198,7 @@ export default {
 }
 ```
 
-Or, to create your own theme it's easy, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.
+Or, to create your own theme, just create this file in the root of your project: `src/gatsby-theme-docz/theme/index.js`.
 
 ```js
 import baseTheme from 'gatsby-theme-docz/src/theme'
@@ -208,7 +215,7 @@ export default merge(baseTheme, {
 
 ## Changing code highlight
 
-Both code highlights shortcodes and the `<Playground>` component are using [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code.
+Both code highlights shortcodes and the `<Playground>` component use [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer) to highlight the code.
 If you want to modify and use another PrismJS theme, you can do that just passing a `prismTheme` property for your theme.
 
 ```js
@@ -260,11 +267,11 @@ export default {
 
 ## Getting data
 
-Using our Gatsby Theme you can enjoy all our hooks to get data for your pages and also get data from Gatsby.
+Using our Gatsby Theme you can use all Gatsby hooks to get data for your pages and from Gatsby.
 So, you can create isolated pages on Gatsby using gatsby pages and get data from Docz or maybe pass data
 for your Docz documents using source from gatsby.
 
-Imagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can easy get this by doing:
+Imagine, that you have your home page inside `/pages` and you want to show all documents parsed from Docz. You can get this by doing:
 
 ```js
 import React from 'react'

src/docs/documentation/customizing/powered-by-gatsby.mdx

@@ -8,50 +8,54 @@ menu: Customizing
 # Powered by Gatsby
 
 [Gatsby](https://gatsbyjs.org) is a blazing fast modern site generator for React and one of the greatest modern tools
-of the new frontend era. It has a huge ecosystem and community around it and a very concise team behind.
+of the new frontend era. It has a huge ecosystem and community around it and a very talented team behind it.
 
-The Docz core since the new v2 is entirely build around Gatsby, this is the biggest change
+Starting from v2, docz's core is entirely built around Gatsby, this is the biggest change
 in the project since its creation and one of the best things that we could make for the tool.
 
-Using Gatsby as bundler behind the scenes we won a lot of benefits like:
+Using Gatsby as bundler behind the scenes gives you a lot of benefits like :
 
-* Stay focused in create features instead of lead with bundler management
+* Stay focused on creating features instead of worrying about bundler management
 * Static and optimized builds by default
 * Fast dev-experience and better workflow
 * Huge ecosystem of tools, plugins and community
 * Better and easy way to customize things inside Docz
-* More power in order to create your documentation
 
 ## Gatsby API and Hooks
 
-Gatsby has a pretty damn good [API for developers](https://www.gatsbyjs.org/docs/api-reference/) and a lot of hooks and life cycle methods that you can use in order to customize the process of
-your bundle. Indeed you can hook into it in a lot of ways and all these hooks
-and properties you can use with Docz.
+Gatsby has an extensive [API for developers](https://www.gatsbyjs.org/docs/api-reference/) and a lot of hooks and lifecycle methods that you can use in order to customize your build process. 
 
-> Check [all Gatsby API references](https://www.gatsbyjs.org/docs/api-reference/) here
+You can hook into it in a lot of ways and all of these hooks and properties are available when you use docz.
 
-So, if you want to use any of those Gatsby configurations file inside your Docz project, create it in the root and we'll handle them for you.
+> Check [the Gatsby API reference](https://www.gatsbyjs.org/docs/api-reference/) here.
 
-If you want to make some change in the webpack configuration, you can use
-the `onCreateWebpackConfig` hook inside the `gatsby-node.js` file:
+If you want to use any of those Gatsby configurations file inside your Docz project,
+create it in the root and docz will do the rest.
+
+If you want to make some changes to your webpack configuration, you can use
+the `onCreateWebpackConfig` hook by exporting a function from the `gatsby-node.js` file.
+
+For example to create aliases or change how your modules are resolved, you can do something like the below example :  
 
 ```js
 // gatsby-node.js
-exports.onCreateWebpackConfig = ({ actions }) => {
-  actions.setWebpackConfig({
-    module: {
-      rules: [
-        {
-          test: 'my-css',
-          use: [loaders.style(), loaders.css()]
-        },
-      ],
+const path = require('path')
+
+exports.onCreateWebpackConfig = args => {
+  args.actions.setWebpackConfig({
+    resolve: {
+      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
+      alias: {
+        '@': path.resolve(__dirname, '../src/components/'),
+      },
     },
   })
 }
 ```
 
-Or if you want to change your Babel configuration you can use `onCreateBabelConfig` hook for this:
+> ⚠ Note the '..' in the path because the docz gatsby project lives in the `.docz` directory
+
+Or if you want to change your Babel configuration you can use the `onCreateBabelConfig` hook for this:
 
 ```js
 // gatsby-node.js
@@ -65,4 +69,4 @@ exports.onCreateBabelConfig = ({ actions }) => {
 }
 ```
 
-Indeed you have a lot of hooks and actions that you can use to modify or get some information about your bundler process.
+You can use these hooks and actions to modify or get information about your bundler process.

src/docs/documentation/references/project-configuration.mdx

@@ -137,7 +137,7 @@ Then you can get assets from your folder:
 // my-file.mdx
 # Hello
 
-![](/public/some-image.png)
+![placeholder image](/public/some-image.png)
 ```
 
 ### debug

src/docs/home/components/HowTo.tsx

@@ -84,9 +84,7 @@ export const HowTo = () => (
     <Container>
       <Title>How to</Title>
       <Text>Install Docz as a dependency</Text>
-      <Pre className="language-bash">
-        $ yarn add docz@next react react-dom --dev
-      </Pre>
+      <Pre className="language-bash">$ yarn add docz react react-dom --dev</Pre>
       <Text>
         Create an <code>.mdx</code> file anywhere in your project
       </Text>