diff --git a/docs/contributing/organize-a-gatsby-event.md b/docs/contributing/organize-a-gatsby-event.md
index d48042c..8e66f2a 100644
--- a/docs/contributing/organize-a-gatsby-event.md
+++ b/docs/contributing/organize-a-gatsby-event.md
@@ -2,38 +2,12 @@
title: Organize a Gatsby Event
---
-Interested in organizing a Gatsby event? We want to help build the Gatsby community in your area. If your event meets a few basic requirements listed below, you’ll be eligible to receive support from Gatsby such as Gatsby swag, \$300 for food, learning resources, and more. Get started by requesting event support below.
-
-[Request Event Support](https://airtable.com/shrpwc99yogJm9sfI)
+Our communiy event support offerings and process are undergoing some changes. Check back soon to see our updated community event support opportunities!
## What constitutes a Gatsby event?
A community organized Gatsby event can be a local meetup, a small conference, a _lunch and learn_ with coworkers, or a larger event. It’s up to you how many people you want to invite and how casual the environment. You can organize an event at your workplace or for the local community.
-## What support does Gatsby provide?
-
-There are several ways Gatsby may support your event:
-
-- Promote event on the [Gatsbyjs.org Events Page](/contributing/events/)
-- Promote event via [Gatsby’s Twitter handle](https://twitter.com/gatsbyjs)
-- \$300 off food related expenses
-- Free Gatsby stickers from the [Gatsby Swag Store](https://store.gatsbyjs.org/)
-- 20% off swag in the [Gatsby Swag Store](https://store.gatsbyjs.org/) for your attendees
-- Gatsby team member speaker (when available)
-
-## Requirements
-
-- The event must have at least half of the content focused on Gatsby or a Gatsby-related topic (such as JAMstack)
-- Both US and international events qualify for support
-- If you’re requesting the \$300 food credit, then you must submit a receipt for the expense
-- The event must be in harmony with the [Gatsby Code of Conduct](/contributing/code-of-conduct/) and follow the [Gatsby brand guidelines](/guidelines/logo/)
-
-## How do you qualify for Gatsby support?
-
-To request support and submit your event to the Gatsby events page, apply at the link below.
-
-[Request Event Support](https://airtable.com/shrpwc99yogJm9sfI)
-
-## Related Links:
+## Related Links
- [Gatsby's Community Events](/contributing/events/)
diff --git a/docs/docs/add-404-page.md b/docs/docs/add-404-page.md
index a74801d..2ec502e 100644
--- a/docs/docs/add-404-page.md
+++ b/docs/docs/add-404-page.md
@@ -2,26 +2,16 @@
title: "Добавление страницы 404"
---
-Для добавления страницы 404 создайте страницу, путь которой соответствует регулярному выражению
-`^\/?404\/?$` (`/404/`, `/404`, `404/` или `404`). Как правило, React-компонент для такой страницы будет находиться по пути
-`src/pages/404.js`.
+Для добавления страницы 404 создайте страницу, путь которой соответствует регулярному выражению `^\/?404\/?$` (`/404/`, `/404`, `404/` или `404`). Как правило, React-компонент для такой страницы будет находиться по пути `src/pages/404.js`.
-Gatsby позаботится о том, чтобы 404 страница была доступна как `404.html`, поскольку большинство хостингов
-статичных файлов по умолчанию использует это имя файла для обработки ошибки 404. Если в вашем случае
-это не так, то потребуется дополнительно настроить свой хостинг на использование именно этого файла для
-страницы ошибки 404.
+Gatsby позаботится о том, чтобы 404 страница была доступна как `404.html`, поскольку большинство хостингов статичных файлов по умолчанию использует это имя файла для обработки ошибки 404. Если в вашем случае это не так, то потребуется дополнительно настроить свой хостинг на использование именно этого файла для страницы ошибки 404.
-Поскольку Gatsby по умолчанию создает эту страницу,
-вам не нужно дополнительно настраивать его в файле `gatsby-node.js`.
+Поскольку Gatsby по умолчанию создает эту страницу, вам не нужно дополнительно настраивать его в файле `gatsby-node.js`.
При разработке с помощью команды `gatsby develop`, Gatsby использует собственную страницу 404,
-которая переопределяет вашу страницу 404. Тем не менее, вы всё равно можете посмотреть вашу страницу 404,
-нажав "Preview custom 404 page", чтобы убедиться, что она корректно отображается. Это удобно
-во время разработки, потому что можно посмотреть все доступные страницы.
+которая переопределяет вашу страницу 404. Тем не менее, вы всё равно можете посмотреть вашу страницу 404, нажав "Preview custom 404 page", чтобы убедиться, что она корректно отображается. Это удобно во время разработки, потому что можно посмотреть все доступные страницы.
-The screenshot below shows the default 404 page that Gatsby creates.
-It also lists out all the pages on your website. Clicking the "Preview custom 404
-page" button will allow you to view the 404 page you created.
+The screenshot below shows the default 404 page that Gatsby creates. It also lists out all the pages on your website. Clicking the "Preview custom 404 page" button will allow you to view the 404 page you created.
The screenshot below shows the custom 404 page.
diff --git a/docs/docs/add-custom-webpack-config.md b/docs/docs/add-custom-webpack-config.md
index 838a299..9937821 100644
--- a/docs/docs/add-custom-webpack-config.md
+++ b/docs/docs/add-custom-webpack-config.md
@@ -2,39 +2,22 @@
title: "Добавление пользовательской конфигурации webpack"
---
-_Перед созданием пользовательского файла конфигурации Webpack поищите уже готовый
-Gatsby-плагин, который решает вашу проблему, в
-[разделе плагинов](/docs/plugins/). Если ничего найти не удалось, а ваш случай
-распространен, пожалуйста, добавьте ваш плагин в Библиотеку Плагинов Gatsby,
-чтобы другие люди смогли им воспользоваться (включая вас самого в будущем 😀)._
-
-Чтобы добавить пользовательскую конфигурацию Webpack, создайте (если уже не создан)
-`gatsby-node.js` файл в корневой директории. Внутри этого файла экспортируйте
-функцию с именем `onCreateWebpackConfig`.
-
-При создании собственной webpack-конфигурации Gatsby вызовет эту функцию,
-позволяя вам изменить настройку webpack по умолчанию с помощью
-[webpack-merge](https://github.com/survivejs/webpack-merge).
-
-Gatsby генерирует ряд webpack-сборок с несколько отличной друг от друга конфигурацией.
-Каждую из таких сборок мы называем "стадия". Существуют следующие стадии:
-
-1. develop: при запуске `gatsby develop` команды. Включает настройку для горячей
- перезагрузки и добавления CSS на страницу.
-2. develop-html: то же самое, что и develop, но без react-hmre в конфигурации babel для
- рендеринга HTML-компонента.
-3. build-javascript: продакшен-сборка JavaScript и CSS. Создает как маршрут для JS-бандлов,
- так и чанки с общим кодом для JS и CSS.
+_Перед созданием пользовательского файла конфигурации Webpack поищите уже готовый Gatsby-плагин, который решает вашу проблему, в [разделе плагинов](/docs/plugins/). Если ничего найти не удалось, а ваш случай распространен, пожалуйста, добавьте ваш плагин в Библиотеку Плагинов Gatsby, чтобы другие люди смогли им воспользоваться (включая вас самого в будущем 😀)._
+
+Чтобы добавить пользовательскую конфигурацию Webpack, создайте (если уже не создан) `gatsby-node.js` файл в корневой директории. Внутри этого файла экспортируйте функцию с именем `onCreateWebpackConfig`.
+
+При создании собственной webpack-конфигурации Gatsby вызовет эту функцию, позволяя вам изменить настройку webpack по умолчанию с помощью [webpack-merge](https://github.com/survivejs/webpack-merge).
+
+Gatsby генерирует ряд webpack-сборок с несколько отличной друг от друга конфигурацией. Каждую из таких сборок мы называем "стадия". Существуют следующие стадии:
+
+1. develop: при запуске `gatsby develop` команды. Включает настройку для горячей перезагрузки и добавления CSS на страницу.
+2. develop-html: то же самое, что и develop, но без react-hmre в конфигурации babel для рендеринга HTML-компонента.
+3. build-javascript: продакшен-сборка JavaScript и CSS. Создает как маршрут для JS-бандлов, так и чанки с общим кодом для JS и CSS.
4. build-html: продакшен-сборка статических HTML-страниц.
-Ознакомьтесь с
-[webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js)
-в качестве источника.
+Ознакомьтесь с [webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) в качестве источника.
-Примеры использования этого API можно найти в плагинах из репозитория Gatsby,
-например, [Sass](/packages/gatsby-plugin-sass/),
-[TypeScript](/packages/gatsby-plugin-typescript/),
-[Glamor](/packages/gatsby-plugin-glamor/) и многих других!
+Примеры использования этого API можно найти в плагинах из репозитория Gatsby, например, [Sass](/packages/gatsby-plugin-sass/), [TypeScript](/packages/gatsby-plugin-typescript/), [Glamor](/packages/gatsby-plugin-glamor/) и многих других!
## Примеры
diff --git a/docs/docs/adding-search-with-elasticlunr.md b/docs/docs/adding-search-with-elasticlunr.md
index 3dbb42c..ffee981 100644
--- a/docs/docs/adding-search-with-elasticlunr.md
+++ b/docs/docs/adding-search-with-elasticlunr.md
@@ -1,5 +1,6 @@
---
-title: Adding search with elasticlunr
+title: Adding Search with Elasticlunr
+issue: https://github.com/gatsbyjs/gatsby/issues/21066
---
This is a stub. Help our community expand it.
diff --git a/docs/docs/audit-with-lighthouse.md b/docs/docs/audit-with-lighthouse.md
index f51fd58..0ef2a19 100644
--- a/docs/docs/audit-with-lighthouse.md
+++ b/docs/docs/audit-with-lighthouse.md
@@ -26,7 +26,7 @@ gatsby build
gatsby serve
```
-Как только команда запустится, вы можете посмотреть сайт по адресу `localhost:9000`.
+Как только команда запустится, вы можете посмотреть сайт по адресу `http://localhost:9000`.
### Запуск аудита с помощью Lighthouse
@@ -34,7 +34,7 @@ gatsby serve
1. Откройте сайт в Chrome (если ещё не открыли в нём) и откройте инструменты разработки Chrome.
-2. Нажмите на вкладку "Audits", где вы увидите экран, который выглядит примерно так:
+2. Нажмите на вкладку "Audits", где вы увидите экран, который выглядит примерно так:
diff --git a/docs/docs/babel.md b/docs/docs/babel.md
index 6829dec..afc3036 100644
--- a/docs/docs/babel.md
+++ b/docs/docs/babel.md
@@ -2,29 +2,19 @@
title: Babel
---
-Gatsby uses the phenomenal project [Babel](https://babeljs.io/) to enable
-support for writing modern JavaScript — while still supporting older browsers.
+Gatsby uses the phenomenal project [Babel](https://babeljs.io/) to enable support for writing modern JavaScript — while still supporting older browsers.
## How to specify which browsers to support
-Gatsby supports by default the last two versions of major browsers, IE 9+, as well as
-any browser that still has 1%+ browser share.
+Gatsby supports by default the last two versions of major browsers, IE 9+, as well as any browser that still has 1%+ browser share.
-This means we automatically compile your JavaScript to ensure it works on older browsers.
-We also automatically add polyfills as needed — no more shipping code which mysteriously
-breaks on older browsers!
+This means that your JavaScript is automatically compiled to ensure it works on older browsers. Polyfills are also automatically added — no more shipping code which mysteriously breaks on older browsers!
-If you only target newer browsers, see the [Browser
-Support](/docs/browser-support/) docs page for how to instruct Gatsby on which
-browsers you support and then Babel will start compiling for only these
-browsers.
+If you only target newer browsers, see the [Browser Support](/docs/browser-support/) docs page for how to instruct Gatsby on which browsers you support and then Babel will start compiling for only these browsers.
## How to use a custom .babelrc file
-Gatsby ships with a default .babelrc setup that should work for most sites. If you'd like
-to add custom Babel presets or plugins, you can create your own `.babelrc` at the root of
-your site, import [`babel-preset-gatsby`](https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby),
-and add additional plugins, presets, and pass options to `babel-preset-gatsby`, e.g. `targets`.
+Gatsby ships with a default .babelrc setup that should work for most sites. If you'd like to add custom Babel presets or plugins, you can create your own `.babelrc` at the root of your site, import [`babel-preset-gatsby`](https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby), and add additional plugins, presets, and pass options to `babel-preset-gatsby`, e.g. `targets`.
```shell
npm install --save-dev babel-preset-gatsby
diff --git a/docs/docs/browser-support.md b/docs/docs/browser-support.md
index fdbdafe..eebaad9 100644
--- a/docs/docs/browser-support.md
+++ b/docs/docs/browser-support.md
@@ -2,36 +2,21 @@
title: Browser Support
---
-Gatsby supports
-[the same browsers as the current stable version of React.js](https://facebook.github.io/react/docs/react-dom.html#browser-support)
-which is currently IE9+ as well as the most recent versions of other popular
-browsers.
+Gatsby supports [the same browsers as the current stable version of React.js](https://facebook.github.io/react/docs/react-dom.html#browser-support) which is currently IE9+ as well as the most recent versions of other popular browsers.
## Polyfills
-Gatsby leverages Babel 7's ability to automatically add polyfills for your
-target browsers.
+Gatsby leverages Babel 7's ability to automatically add polyfills for your target browsers.
-Newer browsers support more JavaScript APIs than older browsers. For older
-versions, Gatsby (via Babel) automatically adds the minimum "polyfills"
-necessary for your code to work in those browsers.
+Newer browsers support more JavaScript APIs than older browsers. For older versions, Gatsby (via Babel) automatically adds the minimum "polyfills" necessary for your code to work in those browsers.
-If you start using a newer JavaScript API like `[].includes` that isn't
-supported by some of your targeted browsers, you won't have to worry about it
-breaking the older browsers as Babel will automatically add the needed polyfill
-`core-js/modules/es7.array.includes`.
+If you start using a newer JavaScript API like `[].includes` that isn't supported by some of your targeted browsers, you won't have to worry about it breaking the older browsers as Babel will automatically add the needed polyfill `core-js/modules/es7.array.includes`.
## Specify what browsers your project supports using "Browserslist"
-You may customize your list of supported browser versions by declaring a
-[`"browserslist"`](https://github.com/ai/browserslist) key within your
-`package.json`. Changing these values will modify your JavaScript (via
-[`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers))
-and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer))
-output.
+You may customize your list of supported browser versions by declaring a [`"browserslist"`](https://github.com/ai/browserslist) key within your `package.json`. Changing these values will modify your JavaScript (via[`babel-preset-env`](https://github.com/babel/babel-preset-env#targetsbrowsers)) and your CSS (via [`autoprefixer`](https://github.com/postcss/autoprefixer)) output.
-This article is a good introduction to the growing community of tools around
-Browserslist — https://css-tricks.com/browserlist-good-idea/
+This article is a good introduction to the growing community of tools around Browserslist — https://css-tricks.com/browserlist-good-idea/
By default, Gatsby emulates the following config:
@@ -41,11 +26,4 @@ By default, Gatsby emulates the following config:
}
```
-If you only support newer browsers, make sure to specify this in your
-`package.json`. This will often enable you to ship smaller JavaScript files.
-
-## Note about IE < 11
-
-React depends on collection types `Map` and `Set`. While these are not used by Gatsby, Gatsby uses React and you will need to polyfill these if you support older browsers and devices including IE < 11.
-
-Read more about this in [ReactJS Docs - JavaScript Environment Requirements](https://reactjs.org/docs/javascript-environment-requirements.html)
+If you only support newer browsers, make sure to specify this in your `package.json`. This will often enable you to ship smaller JavaScript files.
diff --git a/docs/docs/building-an-e-commerce-site.md b/docs/docs/building-an-e-commerce-site.md
index bcd3c7d..6e48ffc 100644
--- a/docs/docs/building-an-e-commerce-site.md
+++ b/docs/docs/building-an-e-commerce-site.md
@@ -1,8 +1,11 @@
---
-title: Building an e-commerce site
+title: Building an e-commerce Site
---
-This is a stub. Help our community expand it.
+The speed and performance of sites built with Gatsby make it a great tool for building e-commerce sites. There are existing plugins for connecting services like [Shopify](/packages/gatsby-source-shopify/) and [Snipcart](/packages/gatsby-plugin-snipcart/) to Gatsby, and this section contains reference guides to help get things setup.
-Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your
-pull request gets accepted.
+To see examples of e-commerce sites built with Gatsby, check out the [showcase](/showcase/?filters%5B0%5D=eCommerce).
+
+
+
+_You can also check out the ["Making an e-commerce Site with Stripe" tutorial](/tutorial/ecommerce-tutorial/) for more information._
diff --git a/docs/docs/bulma.md b/docs/docs/bulma.md
index 203fc16..04a148d 100644
--- a/docs/docs/bulma.md
+++ b/docs/docs/bulma.md
@@ -22,7 +22,7 @@ plugins: [`gatsby-plugin-sass`],
Now is the time to create a scss-file that holds our simple style customisation and the import statement for bulma.
-(To keep things simple, insert the file next to index.js in the pages-directory)
+(To keep things simple, insert the file next to `index.js` in the pages-directory)
```scss:title=mystyles.scss
@charset "utf-8";
@@ -37,7 +37,7 @@ $title-color: #ff0000;
The last step is to import the style and use it.
-Let's replace the default contents of the index.js file.
+Replace the default contents of the `index.js` file.
```jsx:title=index.js
import React from "react"
diff --git a/docs/docs/gatsby-cli.md b/docs/docs/gatsby-cli.md
index ab5019a..48746d3 100644
--- a/docs/docs/gatsby-cli.md
+++ b/docs/docs/gatsby-cli.md
@@ -81,7 +81,11 @@ You can now view gatsbyjs.org in the browser.
On Your Network: http://192.168.0.212:8000/ // highlight-line
```
+<<<<<<< HEAD
**Примечание**: вы не можете посетить 0.0.0.0:8000 в Windows (но всё будет работать с использованием localhost:8000 или "On Your Network" URL в Windows)
+=======
+**Note**: To access Gatsby on your local machine, use either `http://localhost:8000` or the "On Your Network" URL.
+>>>>>>> 90932a06db2e297cf416552b84e48b4b82e56fbc
### `build`
diff --git a/docs/docs/gatsby-lifecycle-apis.md b/docs/docs/gatsby-lifecycle-apis.md
index d578e4e..3a223b6 100644
--- a/docs/docs/gatsby-lifecycle-apis.md
+++ b/docs/docs/gatsby-lifecycle-apis.md
@@ -2,8 +2,6 @@
title: Gatsby Lifecycle APIs
---
-import LayerModel from "../../www/src/components/layer-model"
-
Gatsby provides a rich set of lifecycle APIs to hook into its bootstrap,
build, and client runtime operations.
@@ -23,37 +21,33 @@ The following model gives a conceptual overview of how data is sourced and trans
## Bootstrap sequence
-During "bootstrap" Gatsby:
-
-- reads `gatsby-config.js` to load in your list of plugins
-- initializes its cache (stored in `/.cache`)
-- pulls in and preprocesses data ("source and transform nodes") into a GraphQL schema
-- creates pages in memory
- - from your `/pages` folder
- - from your `gatsby-node.js` if you implement `createPages`/`createPagesStatefully` (e.g. templates)
- - from any plugins that implement `createPages`/`createPagesStatefully`
-- extracts, runs, and replaces graphql queries for pages and `StaticQuery`s
-- writes out the pages to cache
+During the main bootstrap sequence, Gatsby (in this order):
+
+- reads and validates `gatsby-config.js` to load in your list of plugins (it doesn't run them yet).
+- deletes HTML and CSS files from previous builds (public folder)
+- initializes its cache (stored in `/.cache`) and checks if any plugins have been updated since the last run, if so it deletes the cache
+- sets up `gatsby-browser` and `gatsby-ssr` for plugins that have them
+- starts main bootstrap process
+ - runs [onPreBootstrap](/docs/node-apis/#onPreBootstrap). e.g. implemented by [`gatsby-plugin-typography`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typography/src/gatsby-node.js)
+- runs [sourceNodes](/docs/node-apis/#sourceNodes) e.g. implemented by [`gatsby-source-wikipedia`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wikipedia/src/gatsby-node.js)
+ - within this, `createNode` can be called multiple times, which then triggers [onCreateNode](/docs/node-apis/#onCreateNode)
+- creates initial GraphQL schema
+- runs [resolvableExtensions](/docs/node-apis/#resolvableExtensions) which lets plugins register file types or extensions e.g. [`gatsby-plugin-typescript`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typescript/src/gatsby-node.js)
+- runs [createPages](/docs/node-apis/#createPages) from the gatsby-node.js in the root directory of the project e.g. implemented by [`page-hot-reloader`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/page-hot-reloader.js)
+ - within this, `createPage` can be called any number of times, which then triggers [onCreatePage](/docs/node-apis/#onCreatePage)
+- runs [createPagesStatefully](/docs/node-apis/#createPagesStatefully)
+- runs source nodes again and updates the GraphQL schema to include pages this time
+- runs [onPreExtractQueries](/docs/node-apis/#onPreExtractQueries) e.g. implemented by [`gatsby-transformer-sharp`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/gatsby-node.js) and [`gatsby-source-contentful`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/src/gatsby-node.js), and extracts queries from pages and components (`StaticQuery`)
+- compiles GraphQL queries and creates the Abstract Syntax Tree (AST)
+- runs query validation based on schema
+- executes queries and stores their respective results
+- writes page redirects (if any) to `.cache/redirects.json`
+- the [onPostBootstrap](/docs/node-apis/#onPostBootstrap) lifecycle is executed
In development this is a running process powered by [Webpack](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L128) and [`react-hot-loader`](https://github.com/gatsbyjs/gatsby/blob/dd91b8dceb3b8a20820b15acae36529799217ae4/packages/gatsby/package.json#L104), so changes to any files get re-run through the sequence again, with [smart cache invalidation](https://github.com/gatsbyjs/gatsby/blob/ffd8b2d691c995c760fe380769852bcdb26a2278/packages/gatsby/src/bootstrap/index.js#L141). For example, `gatsby-source-filesystem` watches files for changes, and each change triggers re-running queries. Other plugins may also perform this service. Queries are also watched, so if you modify a query, your development app is hot reloaded.
The core of the bootstrap process is the "api-runner", which helps to execute APIs in sequence, with state managed in Redux. Gatsby exposes a number of lifecycle APIs which can either be implemented by you (or any of your configured plugins) in `gatsby-node.js`, `gatsby-browser.js` or `gatsby-ssr.js`.
-The sequence of the **main** bootstrap Node API lifecycles are:
-
-- [onPreBootstrap](/docs/node-apis/#onPreBootstrap) e.g. implemented by [`gatsby-plugin-typography`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typography/src/gatsby-node.js)
-- [sourceNodes](/docs/node-apis/#sourceNodes) e.g. implemented by [`gatsby-source-wikipedia`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-wikipedia/src/gatsby-node.js)
- - within this `createNode` can be called multiple times, which then triggers [onCreateNode](/docs/node-apis/#onCreateNode).
-- (the first schema build happens here)
-- [resolvableExtensions](/docs/node-apis/#resolvableExtensions) for filetype/language extensions e.g. [`gatsby-plugin-typescript`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-typescript/src/gatsby-node.js)
-- [createPages](/docs/node-apis/#createPages) e.g. implemented by [`page-hot-reloader`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/page-hot-reloader.js)
- - within this `createPage` can be called any number of times, which then triggers [onCreatePage](/docs/node-apis/#onCreatePage)
-- [onPreExtractQueries](/docs/node-apis/#onPreExtractQueries) e.g. implemented by [`gatsby-transformer-sharp`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-sharp/src/gatsby-node.js) and [`gatsby-source-contentful`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/src/gatsby-node.js)
-- (schema update happens here)
-- **extract queries from components** where the [queryCompiler](https://github.com/gatsbyjs/gatsby/blob/6de0e4408e14e599d4ec73948eb4153dc3cde849/packages/gatsby/src/internal-plugins/query-runner/query-compiler.js#L189) replaces page GraphQL queries and `StaticQueries`
-- The [queries are run](https://github.com/gatsbyjs/gatsby/blob/6de0e4408e14e599d4ec73948eb4153dc3cde849/packages/gatsby/src/internal-plugins/query-runner/page-query-runner.js#L120), and the [pages are written out](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/internal-plugins/query-runner/pages-writer.js)
-- [onPostBootstrap](/docs/node-apis/#onPostBootstrap) is called (but it is not often used)
-
## Build sequence
(to be written)
diff --git a/docs/docs/gatsby-source-filesystem-programmatic-import.md b/docs/docs/gatsby-source-filesystem-programmatic-import.md
deleted file mode 100644
index 5157cd6..0000000
--- a/docs/docs/gatsby-source-filesystem-programmatic-import.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: gatsby-source-filesystem programmatic import
-issue: https://github.com/gatsbyjs/gatsby/issues/9018
----
-
-This is a stub. Help our community expand it.
-
-Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your
-pull request gets accepted.
diff --git a/docs/docs/how-shadowing-works.md b/docs/docs/how-shadowing-works.md
new file mode 100644
index 0000000..b429508
--- /dev/null
+++ b/docs/docs/how-shadowing-works.md
@@ -0,0 +1,363 @@
+---
+title: How Shadowing Works
+---
+
+Shadowing is a powerful feature that allows theme users to override components, objects, and anything else in a theme's `src` directory.
+
+> **Note** This is a technical deep dive into how Shadowing works. If you'd
+> like to learn about what Shadowing is, see the [What is Component Shadowing?](/blog/2019-04-29-component-shadowing/)
+> blog post.
+
+Shadowing works by using a [webpack resolver plugin](https://webpack.js.org/api/resolvers/) that maps themes in a `gatsby-config.js` to possible shadowed files. This gets especially mind melty because themes can add parent themes to a configuration so you need to be able to walk the composition of themes to determine the "last shadow" since the last shadowed theme file wins in the algorithm.
+
+## Theme Composition
+
+It's important to begin discussing how the composition of themes works. An end user of a theme can configure any number of themes. Each of these themes are considered sibling themes. Here is a `gatsby-config.js` that configures two sibling themes:
+
+```js:title=gatsby-config.js
+module.exports = {
+ plugins: ["gatsby-theme-tomato-blog", "gatsby-theme-tomato-portfolio"],
+}
+```
+
+Both of the themes above (blog and portfolio) can install and configure any other theme so you end up with a tree of themes which we call a theme composition.
+
+The theme composition itself has a few properties:
+
+- the last theme wins
+- a theme that uses another theme is the child theme
+- a theme that is used by another theme is the parent theme
+- theme trees are flattened during resolution
+
+These characteristics are used in the component shadowing algorithm to decide which component to render. So, for example, if `gatsby-theme-tomato-blog` has `gatsby-theme-parent` as a parent theme it results in the following themes array:
+
+```js
+const themesArray = [
+ "gatsby-theme-parent",
+ "gatsby-theme-tomato-blog",
+ "gatsby-theme-tomato-portfolio",
+]
+```
+
+This means that `gatsby-theme-tomato-portfolio` receives priority for component resolution, because it is last in the array.
+
+## Modifying the webpack Config
+
+Component shadowing is a bit meta because it is implemented as an internal Gatsby plugin that applies a webpack plugin which modifies how module resolution happens for files that are shadowed.
+
+The plugin consists of a `gatsby-node.js` and the webpack plugin code.
+The `gatsby-node` file is pretty straightforward:
+
+```js
+const GatsbyThemeComponentShadowingResolverPlugin = require(`.`)
+
+exports.onCreateWebpackConfig = (
+ { store, stage, getConfig, rules, loaders, actions },
+ pluginOptions
+) => {
+ const { themes, flattenedPlugins } = store.getState()
+
+ actions.setWebpackConfig({
+ resolve: {
+ plugins: [
+ new GatsbyThemeComponentShadowingResolverPlugin({
+ themes: themes.themes
+ ? themes.themes
+ : flattenedPlugins.map(plugin => {
+ return {
+ themeDir: plugin.pluginFilepath,
+ themeName: plugin.name,
+ }
+ }),
+ }),
+ ],
+ },
+ })
+}
+```
+
+We first check for themes in the redux store. This is for backwards-compatibility since themes are now merged with plugins. If the `themes` key was used in the user's `gatsby-config.js` those are passed to the shadowing resolver plugin. Otherwise, the flattened plugin list is passed.
+
+## Structure of a webpack Plugin
+
+The webpack plugin itself has a constructor and an apply function which webpack calls as part of module resolution. We tie into the "relative" hook in [the pipeline](https://github.com/webpack/enhanced-resolve/blob/5c1495a947060cf11106abc325b8adf1a0eff9b1/lib/ResolverFactory.js#L158).
+
+```js:title=packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/index.js
+module.exports = class GatsbyThemeComponentShadowingResolverPlugin {
+ constructor({ projectRoot, themes }) {
+ this.themes = themes
+ this.projectRoot = projectRoot
+ }
+
+ apply(resolver) {
+ resolver.plugin(`relative`, (request, callback) => {
+ // highlight-line
+ // ...
+ })
+ }
+}
+```
+
+### Get matching themes
+
+The `request` contains the path of the file which we want to use to find potential matches in themes.
+
+```js
+resolver.plugin(`relative`, (request, callback) => {
+ const matchingThemes = this.getMatchingThemesForPath(request.path)
+})
+```
+
+Which is defined on the class:
+
+```js
+module.exports = class GatsbyThemeComponentShadowingResolverPlugin {
+ // ...
+
+ getMatchingThemesForPath(filepath) {
+ // find out which theme's src/components dir we're requiring from
+ const allMatchingThemes = this.themes.filter(({ themeName }) =>
+ filepath.includes(path.join(themeName, `src`))
+ )
+
+ // The same theme can be included twice in the themes list causing multiple
+ // matches. This case should only be counted as a single match for that theme.
+ return _.uniq(allMatchingThemes.map(({ themeName }) => themeName))
+ }
+
+ // ...
+}
+```
+
+This is run for all files in the site bundle and checks for potential matches. So, if a request is `/some/path/my-site/gatsby-theme-tomato/src/button/heading.js` and `gatsby-theme-tomato` is installed on the site, we'll return `gatsby-theme-tomato`.
+
+We perform this match so that we can determine the theme that is being required from so we can check for shadowed files in the user's site or other themes to match against. We also make sure the matched themes are unique because two themes can bring in the same theme to the theme composition. When that's the case we won't worry about them being different. Though, it is important to note that when performing resolution to build the site, the last theme added will always win.
+
+#### Handle too many matches
+
+Next, we check to make sure that if there is more than one matching theme there is some sort of ambiguity and we should return an error. This can happen if there's a path like `gatsby-theme-blog/src/components/gatsby-theme-something/src/components` in the project.
+
+#### No matches
+
+If there are no theme matches we return the invoked callback because there's nothing more to do, time to let webpack continue on it's way with module resolution.
+
+```js
+if (matchingThemes.length === 0) {
+ return callback()
+}
+```
+
+### The matched theme
+
+Now, if we still haven't returned the callback or thrown an error (due to ambiguity) it means we have a file being required from a theme. The file being required will look something like `/some/path/my-site/gatsby-theme-tomato/src/box` and so the first thing we want to do is get the relative path for the file within the theme's `src` directory:
+
+```js
+const [theme] = matchingThemes
+const [, component] = request.path.split(path.join(theme, `src`))
+```
+
+So, with the example path above we'll end up with `/box`. This can then be used to see if the user's site or any other themes are shadowing the file.
+
+### The component shadow
+
+Since a file from a theme is being required we need to figure out which path should be resolved for the requested component. We do this by calling `resolveComponentPath` which uses the theming algorithm to attempt to find a shadowed component. If nothing is found we return the original request which points at the original theme's component.
+
+```js
+const builtComponentPath = this.resolveComponentPath({
+ matchingTheme: theme,
+ themes: this.themes,
+ component,
+})
+
+return resolver.doResolve(
+ `describedRelative`,
+ { ...request, path: builtComponentPath || request.path },
+ null,
+ {},
+ callback
+)
+```
+
+We call `doResolve` on the resolver which specifies the shadowed component path if one is found, otherwise the original request. This is what tells webpack to resolve and bundle that particular file.
+
+#### Resolving a shadowed component
+
+When looking for a component we perform a search that occurs in two locations:
+
+- user's project
+- themes
+
+##### User's project
+
+In order to ensure that the user's project always takes precedence in terms of shadowing it's prepended to the theme list when attempting to resolve the component. This ensures that `my-site/src/gatsby-theme-tomato/box.js` will take priority over any other theme that might want to shadow the same component.
+
+##### Themes
+
+As discussed before, themes are flattened into a list and then all possible shadow paths are constructed to match against. When concatenating with the user's project it's important to note again that the themes array is reversed. This is how we ensure that "the last theme wins" when resolving a shadowed file. We walk the list for matches from start to finish.
+
+```js
+const locationsToCheck = [
+ // User's site
+ path.join(path.resolve(`.`), `src`, theme),
+].concat(
+ Array.from(themes)
+ // Last theme wins, so start matching reverse
+ .reverse()
+ // Create the full theme directory path to check against
+ .map(({ themeDir }) => path.join(themeDir, `src`, theme))
+)
+```
+
+Additionally, the original theme is removed because that's the default behavior of webpack so we don't need to resolve a theme to itself.
+
+```js
+const themes = ogThemes.filter(({ themeName }) => themeName !== theme)
+```
+
+#### All together
+
+The shadowing algorithm can be boiled down the following function that's roughly 20 lines of code:
+
+```js
+resolveComponentPath({
+ matchingTheme: theme,
+ themes: ogThemes,
+ component,
+}) {
+ // don't include matching theme in possible shadowing paths
+ const themes = ogThemes.filter(({ themeName }) => themeName !== theme)
+ if (!this.cache[`${theme}-${component}`]) {
+ this.cache[`${theme}-${component}`] = [
+ path.join(path.resolve(`.`), `src`, theme),
+ ]
+ .concat(
+ Array.from(themes)
+ .reverse()
+ .map(({ themeDir }) => path.join(themeDir, `src`, theme))
+ )
+ .map(dir => path.join(dir, component))
+ .find(possibleComponentPath => {
+ debug(`possibleComponentPath`, possibleComponentPath)
+ let dir
+ try {
+ // we use fs/path instead of require.resolve to work with
+ // TypeScript and alternate syntaxes
+ dir = fs.readdirSync(path.dirname(possibleComponentPath))
+ } catch (e) {
+ return false
+ }
+ const exists = dir
+ .map(filepath => {
+ const ext = path.extname(filepath)
+ const filenameWithoutExtension = path.basename(filepath, ext)
+ return filenameWithoutExtension
+ })
+ .includes(
+ path.basename(
+ possibleComponentPath,
+ path.extname(possibleComponentPath)
+ )
+ )
+ return exists
+ })
+ }
+```
+
+### Handling component extending
+
+This is where things begin to get a bit whacky. In addition to overriding a file, we want it to be possible to import the very component you're shadowing so that you can wrap it or even add props.
+
+```js
+import React from "react"
+import { Author } from "gatsby-theme-blog/src/components/author"
+import Card from "../components/card"
+
+export default props => (
+
+
+
+)
+```
+
+[Learn more about extending components](/blog/2019-07-02-extending-components/)
+
+This is the first case we'll handle when attempting to resolve the file.
+
+In order to do this we need to leverage the **issuer** of the request. This points to the file that the request came from. This means it refers to _where_ the `import` occurs.
+The **request** refers to what the import points to.
+
+This is implemented by another method on the plugin's class which we call `requestPathIsIssuerShadowPath` which has the following method signature:
+
+```js
+requestPathIsIssuerShadowPath({
+ theme,
+ component,
+ requestPath: request.path,
+ issuerPath: request.context.issuer,
+})
+```
+
+`requestPathIsIssuerShadowPath` checks all possible directories for shadowing and then returns whether the issuer's path is found. Let's first take a look at the code and then unpack what's happening here.
+
+```js
+requestPathIsIssuerShadowPath({ requestPath, issuerPath, theme }) {
+ const shadowFiles = this.getBaseShadowDirsForThemes(theme).map(dir =>
+ path.join(dir, component)
+ )
+
+ return shadowFiles.includes(pathWithoutExtension(issuerPath))
+}
+```
+
+In the above code block `getBaseShadowDirsForThemes` returns:
+
+```js
+const baseDirs = [
+ "/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-rebeccapurple/src/gatsby-theme-tomato",
+ "/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-tomato/src",
+]
+```
+
+This constructs the shadowable files for `gatsby-theme-tomato`'s Box component.
+Then, we join the component path and end up with:
+
+```js
+const fullPaths = [
+ "/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-rebeccapurple/src/gatsby-theme-tomato/box",
+ "/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-tomato/src/box",
+]
+```
+
+We then know that if the issuer _matches_ one of these components that it's being extended. This means that a shadowed component is extending the same component from its parent.
+
+When this happens, we return the next path, so here the original location of the theme: `/Users/johno/c/gatsby-theme-example-component-extending/gatsby-theme-tomato/src/box`.
+
+This means that when our shadowed file imports Box from a shadowed file we return the original box component defined in the theme.
+
+As a result, the following will work as we expect:
+
+```js
+import React from "react"
+import Box from "gatsby-theme-tomato/src/box"
+import Card from "../components/card"
+
+export default props => (
+
+
+
+)
+```
+
+Now, all usages of the Box in `gatsby-theme-tomato` will be also wrapped in a purple box.
+
+#### An edge case
+
+If a theme sets [`module` config](https://webpack.js.org/configuration/resolve/#resolvemodules) the issuer will be null. As such we need to first check that the `request.context.issuer` is present before we attempt to resolve the shadowed component.
+
+It's important to note that we don't recommend appending to the modules list in themes.
+Though, if you do, we will make sure we don't arbitrarily error.
+
+## Summary
+
+Shadowing uses a predictable algorithm that leverages webpack to dynamically change module resolution based on a `gatsby-config` and theme composition.
+The last theme will take precedence in the shadowing algorithm, and the user's `src` directory is always take into account first.
diff --git a/docs/docs/index.md b/docs/docs/index.md
index 373d0ca..a9abe25 100644
--- a/docs/docs/index.md
+++ b/docs/docs/index.md
@@ -1,10 +1,9 @@
---
title: Документация Gatsby.js
+description: Единое место для учебных пособий, руководств и информации по работе с Gatsby
disableTableOfContents: true
---
-import EmailCaptureForm from "../../www/src/components/email-capture-form"
-
Gatsby это быстрый и современный генератор сайтов для React.
## Для Начала
@@ -19,7 +18,7 @@ Gatsby это быстрый и современный генератор сай
1. [Рецепты](/docs/recipes/): Найдите быстрые ответы о том, как решить те или иные задачи с Gatsby.
2. Выберите для себя по каким секциям документации Gatsby вы хотели бы пройтись:
- - [Справочное Руководство](/docs/guides/): Изучайте разные темы по работе с Gatsby, например получение данных, публикация и другие.
+ - [Справочное Руководство](/docs/guides/): Изучайте разные темы по работе с Gatsby, например получение данных, публикация и другие.
- [Руководство по Gatsby API](/docs/api-reference/): Узнайте больше о Gatsby API.
- [Релиз и Миграция](/docs/releases-and-migration/): Найдите заметки о релизах и руководства по миграции между основными версиями.
- [Концептуальное Руководство](/docs/conceptual-guide/): Прочтите высокоуровневые обзоры о подходах к Gatsby.
diff --git a/docs/docs/mdx/programmatically-creating-pages.md b/docs/docs/mdx/programmatically-creating-pages.md
index c0f181a..98e684a 100644
--- a/docs/docs/mdx/programmatically-creating-pages.md
+++ b/docs/docs/mdx/programmatically-creating-pages.md
@@ -129,8 +129,8 @@ to set up our page. `/blog${value}` is a [template
string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
that will result in:
-- blog-1.mdx => localhost:8000/blog/blog-1/
-- blog-2.mdx => localhost:8000/blog/blog-2/
+- blog-1.mdx => http://localhost:8000/blog/blog-1/
+- blog-2.mdx => http://localhost:8000/blog/blog-2/
[`createFilePath`](https://www.gatsbyjs.org/packages/gatsby-source-filesystem/?=gatsby-source#createfilepath)
is a function from `gatsby-source-filesystem` that translates file
@@ -146,8 +146,8 @@ In order to create pages from the sourced MDX files, you need
to construct a query that finds all MDX nodes and pulls out
the `slug` field added earlier.
-> **NOTE**: You can open up a GraphiQL console for query testing
-> in your browser at
+> **Note**: You can open up a GraphiQL console for query testing
+> in your browser at `http://localhost:8000/___graphql`
```graphql
query {
@@ -224,19 +224,27 @@ will be rendered as the template for all posts. There's a component,
`MDXRenderer` which is used by `gatsby-plugin-mdx` that will be used to render any
programmatically accessed MDX content.
+For now, to update imports within .mdx files, you should rerun your Gatsby development environment. Otherwise, it will raise a `ReferenceError`. To import things dynamically, you can use the `MDXProvider` component and provide it all the common components you'll be using, such as `Link`.
+
First, create a component that accepts the queried MDX data (which will be
added in the next step).
```jsx:title=src/components/posts-page-layout.js
import React from "react"
import { graphql } from "gatsby"
+import { MDXProvider } from "@mdx-js/react"
import { MDXRenderer } from "gatsby-plugin-mdx"
+import { Link } from "gatsby"
+
+const shortcodes = { Link } // Provide common components here
export default function PageTemplate({ data: { mdx } }) {
return (
{mdx.frontmatter.title}
- {mdx.body}
+
+ {mdx.body}
+
)
}
diff --git a/docs/docs/path-prefix.md b/docs/docs/path-prefix.md
index b223587..196973b 100644
--- a/docs/docs/path-prefix.md
+++ b/docs/docs/path-prefix.md
@@ -33,7 +33,17 @@ gatsby build --prefix-paths
If this flag is not passed, Gatsby will ignore your `pathPrefix` and build the site as if hosted from the root domain.
-### In-app linking
+## Serve
+
+Serve your application with the `--prefix-paths` flag, like so:
+
+```shell
+gatsby serve --prefix-paths
+```
+
+If this flag is not passed, Gatsby will ignore your `pathPrefix`.
+
+## In-app linking
Gatsby provides APIs and libraries to make using this feature seamless. Specifically, the [`Link`](/docs/gatsby-link/) component has built-in functionality to handle path prefixing.
diff --git a/docs/docs/preparing-your-environment.md b/docs/docs/preparing-your-environment.md
index df65432..169e843 100644
--- a/docs/docs/preparing-your-environment.md
+++ b/docs/docs/preparing-your-environment.md
@@ -5,9 +5,9 @@ overview: true
To get started with Gatsby, you'll need to make sure you have the following software tools installed:
-1. [Node.js](/tutorial/part-zero/#install-nodejs)
-2. [npm CLI](/tutorial/part-zero/#familiarize-with-npm)
-3. [Gatsby CLI](/tutorial/part-zero/#install-the-gatsby-cli)
+1. [Node.js](/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system)
+2. [npm CLI](/tutorial/part-zero/#check-your-nodejs-installation)
+3. [Gatsby CLI](/tutorial/part-zero/#using-the-gatsby-cli)
For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/tutorial/part-zero/).
diff --git a/docs/docs/quick-start.md b/docs/docs/quick-start.md
index 7ecde13..4505da9 100644
--- a/docs/docs/quick-start.md
+++ b/docs/docs/quick-start.md
@@ -11,35 +11,37 @@ title: "Быстрый старт"
lessonTitle="Быстрый старт с Gatsby: создавайте, разрабатывайте и собирайте Gatsby сайты из командной строки"
/>
-### Установка Gatsby CLI.
+### Установка Gatsby CLI
```shell
npm install -g gatsby-cli
```
-### Создание нового сайта.
+> Приведенная выше команда устанавливает Gatsby CLI глобально на ваш компьютер.
+
+### Создание нового сайта
```shell
gatsby new gatsby-site
```
-### Изменение директории на папку с сайтом.
+### Изменение директории на папку с сайтом
```shell
cd gatsby-site
```
-### Запуск сервера разработки.
+### Запуск сервера разработки
```shell
gatsby develop
```
-Gatsby запустит рабочее окружение с горячей перезагрузкой доступное по умолчанию на `localhost:8000`.
+Gatsby запустит рабочее окружение с горячей перезагрузкой доступное по умолчанию на `http://localhost:8000`.
Попробуйте изменить страницы с JavaScript в `src/pages`. Сохранённые изменения автоматически перезагружаются в браузере.
-### Создание продакшен-сборки.
+### Создание продакшен-сборки
```shell
gatsby build
@@ -47,7 +49,7 @@ gatsby build
Gatsby выполнит оптимизированную продакшен-сборку для вашего сайта, генерируя статические HTML и бандлы JavaScript для каждого маршрута.
-### Запуск продакшен-сборки локально.
+### Запуск продакшен-сборки локально
```shell
gatsby serve
diff --git a/docs/docs/sourcing-from-buttercms.md b/docs/docs/sourcing-from-buttercms.md
index 2683a3a..4929947 100644
--- a/docs/docs/sourcing-from-buttercms.md
+++ b/docs/docs/sourcing-from-buttercms.md
@@ -265,7 +265,7 @@ in your terminal, run
gatsby develop
```
-Now open up [localhost:8000/home](http://localhost:8000/home) to see the home page populated with the content you created on butter.
+Now open up `http://localhost:8000/home` to see the home page populated with the content you created on butter.
## Create multiple pages using Page Types
@@ -303,7 +303,7 @@ gatsby develop
### Testing with GrapiQl
-You can test out your Graphql queries with GrahiQl( A graphql debugger) fire up Graphiql on [http://localhost:8000/\_\_\_graphql](http://localhost:8000/___graphql)
+You can test out your GraphQL queries with GraphiQL (a GraphQL debugger) fire up GraphiQL on `http://localhost:8000/___graphql`
Once graphiql is opened paste the query below :
diff --git a/docs/docs/typography-js.md b/docs/docs/typography-js.md
index 40a450c..3400c91 100644
--- a/docs/docs/typography-js.md
+++ b/docs/docs/typography-js.md
@@ -86,6 +86,8 @@ const typography = new Typography(
export default typography;
```
-After completing the above steps, you can start the development server using the command `gatsby develop` and navigate to the local website `http://localhost:8000`. If all went well you should see the text on your website using the Funston typographic theme just installed.
+After completing the above steps, you can start the development server using the command `gatsby develop` and navigate to the local website `http://localhost:8000`. If all went well you should see the text on your website using the Funston typographic theme.
+
+**Note**: If your fonts remains unchanged, remove all `font-family` calls in your CSS and check again.
If you would like to find more themes to install into your project check out at the official [Typography.js](https://kyleamathews.github.io/typography.js/) website.
diff --git a/docs/docs/upgrading-node-js.md b/docs/docs/upgrading-node-js.md
index 65e92da..8c6f5c6 100644
--- a/docs/docs/upgrading-node-js.md
+++ b/docs/docs/upgrading-node-js.md
@@ -35,7 +35,7 @@ There are multiple ways to update your version of Node depending on how you orig
This is our recommended way to install a newer version of Node.
-You will have homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-zero/#-install-nodejs-and-npm). Homebrew is a program that allows you to install specific versions of Node (and other software).
+You will have Homebrew installed on your computer if you [followed part zero of the Gatsby tutorial](/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system). Homebrew is a program that allows you to install specific versions of Node.js (and other software).
To update from Node.js 8 to Node.js 10 using Homebrew, open a terminal and run the following commands:
diff --git a/docs/docs/using-graphql-playground.md b/docs/docs/using-graphql-playground.md
index 3a26712..71197e5 100644
--- a/docs/docs/using-graphql-playground.md
+++ b/docs/docs/using-graphql-playground.md
@@ -18,7 +18,19 @@ To access this experimental feature utilizing GraphQL Playground with Gatsby, ad
"develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop",
```
-Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on `https://localhost:8000/___graphql`
+If you are on **Windows** then you should use:
+
+```
+"develop": "cross-env GATSBY_GRAPHQL_IDE=playground gatsby develop",
+```
+
+If you haven't installed **cross-env**, you can do it with:
+
+```
+npm install --save-dev cross-env
+```
+
+Use `npm run develop` instead of `gatsby develop` and access it when the development server is running on `http://localhost:8000/___graphql`
To still be able to use `gatsby develop` you would require the dotenv package to your gatsby-config.js file and add an [environment variable](/docs/environment-variables/) file, typically called `.env.development`. Finally, add `GATSBY_GRAPHQL_IDE=playground` to the `.env.development` file.
diff --git a/docs/tutorial/using-a-theme.md b/docs/tutorial/using-a-theme.md
index 1911c77..5cc77f2 100644
--- a/docs/tutorial/using-a-theme.md
+++ b/docs/tutorial/using-a-theme.md
@@ -65,7 +65,7 @@ module.exports = {
When using Gatsby themes, you can take advantage of something called component shadowing.
-The Gatsby blog theme package has a component that contains the content of the site author's biography. The file path to that component (in the blog theme package, not your site) is `gatsby-theme-blog/src/components/bio-content.js`.
+The Gatsby blog theme package has a component that contains the content of the site author's biography. The file path to that component (in the blog theme package, not your site) is `src/gatsby-theme-blog/components/bio-content.js`. You can find this path by looking through the theme in your site's `node_modules/gatsby-theme-blog` directory.
If you look at the file tree of your site, you'll see it looks like this:
diff --git a/docs/tutorial/wordpress-source-plugin-tutorial.md b/docs/tutorial/wordpress-source-plugin-tutorial.md
index 56a9b5f..8dad27e 100644
--- a/docs/tutorial/wordpress-source-plugin-tutorial.md
+++ b/docs/tutorial/wordpress-source-plugin-tutorial.md
@@ -112,7 +112,7 @@ Run:
gatsby develop
```
-In your browser, open localhost:8000 to see your site, and open localhost:8000/\_\_\_graphql so that you can create your GraphQL queries.
+In your browser, open `http://localhost:8000` to see your site, and open `http://localhost:8000/___graphql` so that you can create your GraphQL queries.
As an exercise, try re-creating the following queries in your GraphiQL explorer. This first query will pull in the blogpost content from WordPress:
@@ -194,7 +194,7 @@ export const pageQuery = graphql`
//highlight-end
```
-Save these changes and look at localhost:8000 to see your new homepage with list of sorted blog posts!
+Save these changes and look at `http://localhost:8000` to see your new homepage with a list of sorted blog posts!
@@ -322,7 +322,7 @@ exports.createPages = ({ graphql, actions }) => {
}
```
-You will need to stop and start your environment again using `gatsby develop`. When you do, you will not see a change on the index page of the site, but if you navigate to a 404 page, like [http://localhost:8000/asdf](http://localhost:8000/asdf), you should see the two sample posts created and be able to click on them to go to the sample posts:
+You will need to stop and start your environment again using `gatsby develop`. When you do, you will not see a change on the index page of the site, but if you navigate to a 404 page, like `http://localhost:8000/asdf`, you should see the two sample posts created and be able to click on them to go to the sample posts:
