gatsbyjs · Nov 26, 2020 · Nov 27, 2020 · Nov 27, 2020 · Nov 27, 2020 · Nov 27, 2020
Showing 487 changed files with 9,324 additions and 2,077 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -334,6 +334,8 @@ jobs:
     environment:
       GATSBY_HOT_LOADER: fast-refresh
       CYPRESS_HOT_LOADER: fast-refresh
+      CYPRESS_PROJECT_ID: 917bea
+      CYPRESS_RECORD_KEY: 4750fb36-4576-4638-a617-d243a381acef
 
   e2e_tests_development_runtime_with_experimental_react:
     <<: *e2e_tests_development_runtime_alias

diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,15 +1,15 @@
 ---
 name: Bug Report 🐞
-about: Something isn't working as expected? Here is the right place to report.
+about: Something isn't working as expected? Here is the right place to report. For questions, please use "Discussions".
 labels: "type: bug"
 ---
 
 <!--
   Please fill out each section below, otherwise, your issue will be closed. This info allows Gatsby maintainers to diagnose (and fix!) your issue as quickly as possible.
 
   Useful Links:
-  - Documentation: https://www.gatsbyjs.org/docs/
-  - How to File an Issue: https://www.gatsbyjs.org/contributing/how-to-file-an-issue/
+  - Documentation: https://www.gatsbyjs.com/docs/
+  - How to File an Issue: https://www.gatsbyjs.com/contributing/how-to-file-an-issue/
 
   Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
 -->
@@ -20,9 +20,9 @@ Describe the issue that you're seeing.
 
 ### Steps to reproduce
 
-Clear steps describing how to reproduce the issue. Please please please link to a demo project if possible, this makes your issue _much_ easier to diagnose (seriously).
+Clear steps describing how to reproduce the issue. **Please** link to a reproduction, this makes your issue _much_ easier to diagnose (seriously).
 
-How to Make a Minimal Reproduction: https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/
+How to Make a Minimal Reproduction: https://www.gatsbyjs.com/contributing/how-to-make-a-reproducible-test-case/
 
 ### Expected result
 

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
@@ -1,14 +1,14 @@
 blank_issues_enabled: false
 contact_links:
   - name: Gatsby Documentation
-    url: https://www.gatsbyjs.org/docs/
+    url: https://www.gatsbyjs.com/docs/
     about: Check out the Gatsby documentation for answers to common questions
   - name: Gatsby Discord
     url: https://gatsby.dev/discord
     about: Ask questions, get help and discuss new things you're building with the Gatsby community
   - name: Gatsby Discussions
     url: https://github.com/gatsbyjs/gatsby/discussions
-    about: Have a question or feature request?
+    about: Ask questions, request features & discuss RFCs
   - name: AskGatsbyJS Twitter
     url: https://twitter.com/AskGatsbyJS
     about: The official Twitter account to ask questions and get help with Gatsby
diff --git a/.github/ISSUE_TEMPLATE/documentation.md b/.github/ISSUE_TEMPLATE/documentation.md
@@ -1,20 +1,15 @@
 ---
 name: Documentation 📝
-about: Suggest better docs coverage for a particular tool or process.
+about: Suggest specific improvements for our documentation. For questions, please use "Discussions".
 labels: "type: documentation"
 ---
 
 <!--
   To make it easier for us to help you, please include as much useful information as possible.
 
   Useful Links:
-  - Documentation: https://www.gatsbyjs.org/docs/
-  - Contributing: https://www.gatsbyjs.org/contributing/
-
-  Gatsby has several community support channels, try asking your question on:
-
-  - Discord: https://gatsby.dev/discord
-  - Twitter: https://twitter.com/gatsbyjs
+  - Documentation: https://www.gatsbyjs.com/docs/
+  - Contributing: https://www.gatsbyjs.com/contributing/
 
   Before opening a new issue, please search existing issues https://github.com/gatsbyjs/gatsby/issues
 -->
@@ -39,10 +34,9 @@ Why should we document this and who will benefit from it?
 ### Draft the doc
 
 - [ ] Write the doc, following the format listed in these resources:
-  - [Overview on contributing to documentation](https://www.gatsbyjs.org/contributing/docs-contributions/)
-  - [Docs Templates](https://www.gatsbyjs.org/contributing/docs-templates/)
+  - [Overview on contributing to documentation](https://www.gatsbyjs.com/contributing/docs-contributions/)
+  - [Docs Templates](https://www.gatsbyjs.com/contributing/docs-templates/)
   - [Example of a similar article]()
-- [ ] Add the article to the [docs sidebar](https://github.com/gatsbyjs/gatsby/blob/master/www/src/data/sidebars/doc-links.yaml) under the [parent doc] section.
 
 ### Open a pull request
 

diff --git a/.github/ISSUE_TEMPLATE/new_translation.md b/.github/ISSUE_TEMPLATE/new_translation.md
diff --git a/benchmarks/source-contentful/package.json b/benchmarks/source-contentful/package.json
@@ -22,10 +22,10 @@
     "cross-env": "^7.0.0",
     "dotenv": "^8.2.0",
     "gatsby": "^2.19.7",
-    "gatsby-plugin-benchmark-reporting": "*",
     "gatsby-image": "^2.2.40",
+    "gatsby-plugin-benchmark-reporting": "*",
     "gatsby-plugin-sharp": "^2.4.5",
-    "gatsby-source-contentful": "^2.1.88",
+    "gatsby-source-contentful": "^4.2.0",
     "gatsby-source-drupal": "^3.3.18",
     "gatsby-source-filesystem": "^2.1.48",
     "gatsby-transformer-sharp": "^2.3.14",

diff --git a/benchmarks/source-wordpress/package.json b/benchmarks/source-wordpress/package.json
@@ -23,7 +23,7 @@
     "gatsby-plugin-benchmark-reporting": "*",
     "gatsby-plugin-sharp": "^2.6.2",
     "gatsby-source-filesystem": "^2.1.48",
-    "gatsby-source-wordpress-experimental": "^0.1.10",
+    "gatsby-source-wordpress-experimental": "^5.0.0",
     "gatsby-transformer-sharp": "^2.5.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"

diff --git a/benchmarks/source-wordpress/src/templates/article.js b/benchmarks/source-wordpress/src/templates/article.js
@@ -9,8 +9,8 @@ const Article = ({ data: { article } }) => {
       <Link to="/">Go back to index page</Link>
       <div>
         <h2>{article.title}</h2>
-        {!!article.featuredImage?.remoteFile?.childImageSharp && (
-          <Img fluid={article.featuredImage.remoteFile.childImageSharp.fluid} />
+        {!!article.featuredImage?.node?.localFile?.childImageSharp && (
+          <Img fluid={article.featuredImage.node.localFile.childImageSharp.fluid} />
         )}
         <div dangerouslySetInnerHTML={{ __html: article.content }} />
       </div>
@@ -26,10 +26,12 @@ export const query = graphql`
       title
       content
       featuredImage {
-        remoteFile {
-          childImageSharp {
-            fluid(maxWidth: 960, quality: 90) {
-              ...GatsbyImageSharpFluid_withWebp_tracedSVG
+        node {
+          localFile {
+            childImageSharp {
+              fluid(maxWidth: 960, quality: 90) {
+                ...GatsbyImageSharpFluid_withWebp_tracedSVG
+              }
             }
           }
         }

diff --git a/docs/docs/configuring-usage-with-plugin-options.md b/docs/docs/configuring-usage-with-plugin-options.md
@@ -8,7 +8,7 @@ _This guide refers to creating plugins, if you are looking for general informati
 
 ## Where to access plugin options
 
-A Gatsby plugin with options included makes those options available in the second argument of Gatsby [Node](/docs/node-apis/), [Browser](/docs/browser-apis/), and [SSR APIs](/docs/ssr-apis/). Consider the following `gatsby-config` with a plugin called `gatsby-plugin-console-log`:
+A Gatsby plugin with options included makes those options available in the second argument of Gatsby [Node](/docs/node-apis/), [Browser](/docs/browser-apis/), and [SSR APIs](/docs/ssr-apis/). Consider the following `gatsby-config.js` with a plugin called `gatsby-plugin-console-log`:
 
 ```javascript:title=gatsby-config.js
 module.exports = {
@@ -21,7 +21,7 @@ module.exports = {
 }
 ```
 
-With the `optionA`, `optionB`, and `message` options passed into the plugin, the code for `gatsby-plugin-console-log` is able to access the values `true`, `false`, and `Hello world` by their keys.
+With the `optionA`, `optionB`, and `message` options passed into the plugin, the code for `gatsby-plugin-console-log` is able to access the values `true`, `false`, and `"Hello world"` by their keys.
 
 For example, `gatsby-plugin-console-log` can access the `message` in order to log its value to the console inside of the `onPreInit` API:
 
@@ -52,7 +52,7 @@ The following table lists possible options values and an example plugin that mak
 | Array     | `["/about-us/", "/projects/*"]`  | [`gatsby-plugin-offline`](/packages/gatsby-plugin-offline/)       |
 | Object    | `{ default: "./src/layout.js" }` | [`gatsby-plugin-mdx`](/packages/gatsby-plugin-mdx/)               |
 
-**Note**: Themes (which are a type of plugin) are able to receive options from a site's `gatsby-config` to be used in its `gatsby-config` in order to allow themes to be composed together. This is done by exporting the `gatsby-config` as a function instead of an object. You can see an example of this in the [`gatsby-theme-blog`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog) and [`gatsby-theme-blog-core`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core) repositories. Plugins are not capable of this functionality.
+**Note**: Themes (which are a type of plugin) are able to receive options from a site's `gatsby-config.js` to be used in its `gatsby-config.js` in order to allow themes to be composed together. This is done by exporting the `gatsby-config.js` as a function instead of an object. You can see an example of this in the [`gatsby-theme-blog`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog) and [`gatsby-theme-blog-core`](https://github.com/gatsbyjs/themes/tree/master/packages/gatsby-theme-blog-core) repositories. Plugins are not capable of this functionality.
 
 ## How to validate plugin options
 
@@ -97,7 +97,7 @@ If users pass options that do not match the schema, the validation will show an
 
 For example, if an integer is passed into `message` (which is marked as a required string) this message would be shown:
 
-```
+```text
  ERROR #11331  PLUGIN
 
 Invalid plugin options for "gatsby-plugin-console-log":

diff --git a/docs/docs/deploying-to-kintohub.md b/docs/docs/deploying-to-kintohub.md
@@ -2,116 +2,43 @@
 title: Deploying to KintoHub
 ---
 
-[KintoHub](https://www.kintohub.com) is a next-gen cloud package manager. Making it easy to host and manage websites, backend APIs, cron jobs, databases and more in a production grade fashion for all your apps.
+[KintoHub](https://www.kintohub.com) is an all-in-one platform to combine and deploy your backend services, websites, cron jobs, databases and everything your app needs in one place.
 
-KintoHub has a free tier that you can use to deploy your static sites. Here are some features that come with it:
-
-- **CICD from GitHub** - You can build different branches and tag them to make sure the websites you deploy into staging and production environments are the same.
-- Automatic **[Let's Encrypt](https://letsencrypt.org) certificates.**
-- **Teams** - invite your collaborators on your workspace to work with you.
-- Setup **custom domain names** with automatic Let's Encrypt certificates.
-- Multiple **environments** (development, staging, production).
-- **Password Protection**.
+KintoHub allows anyone to deploy for free their static websites.
 
 ## Prerequisites
 
-This guide assumes you already have a Gatsby project to deploy. If you need a project, you can use the [Quick Start](/docs/quick-start) or KintoHub's template [Gatsby Template](https://github.com/kintohub/gatsby-example) before continuing.
-
-## Setup
-
-In order to deploy a Gatsby site on KintoHub, you will need to create and deploy a **KintoBlock** into an **Environment** (development, staging, production).
-
-_Note: A **KintoBlock** is connected to a GitHub repository. Accessing the KintoBlock page will allow you to build, manage or tags any branches of your repository._
-
-### Create a KintoBlock
-
-1. Register on [KintoHub](https://beta.kintohub.com).
-
-2. Create a new **KintoBlock** of type **Website** and give KintoHub permission to access your GitHub repo.
-
-3. Select your GitHub repo from the list and press **Continue**.
-
-4. Choose **Static from Build** with the following values:
-
-   |                         |                                                            |
-   | ----------------------- | ---------------------------------------------------------- |
-   | **Name**                | `Gatsby Website` (or your own name)                        |
-   | **Language**            | `Node.js`                                                  |
-   | **Version**             | `latest` (or your own node.js version)                     |
-   | **Build Command**       | `npm install && npm run build` (or your own build command) |
-   | **Build Output Folder** | `public` (or your own output directory)                    |
-
-5. Press **Create Website**.
-
-The build will automatically start on the default GitHub branch of your repository.
-Wait for your build to be successful (green).
-
-#### Multiple Branches
-
-When you create a new **KintoBlock**, KintoHub imports all your branches and you can access them from your KintoBlock page (new branches will also be automatically picked up).
-You can switch from one branch to another by pressing the branch name on the side panel on the left.
-
-#### Continuous Integration
-
-By default, KintoHub will build all the changes you push on your default branch.
-If you want to disable it:
-
-1. Disable the toggle **Build New Commits**.
-2. Press **Save Changes**.
-
-Your new changes will not be automatically picked up anymore and you will have to press **Build Latest Commit** to trigger a build.
-
-### Deploy your KintoBlock
-
-From your KintoBlock page, you will need to deploy your website first before accessing it.
-
-1. Press **Deploy Now** and then **New Project**.
-2. You can change the default values (optional).
-3. Press **Create New Project**.
-
-The deployment will start.
-Wait for it to be successful (green).
-
-_Note: you can disable Continuous Deployments for future builds._
-
-### Access your KintoBlock
+This guide assumes you already have a Gatsby project to deploy. If you need a project, you can use the [Quick Start](/docs/quick-start) or KintoHub's template [Gatsby Template](https://github.com/kintohub-examples/gatsby-site/generate) before continuing.
 
-From your Project page.
+## Deploy
 
-1. Scroll down to the **Added KintoBlocks** list.
-2. Press **Open** on your KintoBlock (`Gatsby Website`).
+1. Navigate to [KintoHub](https://app.kintohub.com/) and login/sign-up your account.
 
-And that's it!
+2. Create a new service of type **Static Website**.
 
-## Deployment Configuration
+3. Grant the permission needed for accessing the repo that you created in the previous step. Or if you prefer not to connect your GitHub account, you may select **Import URL** and provide your access token.
 
-You can configure additional features directly from your Project page.
-If you're not already there, select **Projects** on the left-hand navigation bar, and then click on the project you want to configure.
+4. Configure the service. Add the build command `yarn && yarn build`. This command is actually doing the following:
 
-### Basic Auth
+   - Install the dependencies.
+   - Run `gatsby build`.
+   - Put the generated site into the `./public` directory, which is the default value of “Build Output Path”.
 
-1. Scroll down to the **Added KintoBlocks** list.
-2. Click on the cog next to your KintoBlock (`Gatsby Website`).
-3. Enable **Password Protected**.
-4. Enter **Username** and **Password**.
-5. Press **Done Configuring** and then **Deploy**.
-6. You'll see a **Compare Versions** screen. Click **Confirm Deployment**.
+5. Everything is set up, now press the deploy button and wait until deployment is finished.
 
-Wait for the deployment to be successful.
-Refresh the page, your website is now protected.
+6. Once the deployment is finished you can close the release logs, check the **Access tab** and copy the URL there. Paste it to the browser and you will see your website is live!
 
 ### Custom domain
 
-1. Scroll down to the **Added KintoBlocks** list.
-2. Click on the cog next to your KintoBlock (`Gatsby Website`).
-3. Under **Custom Domain**, enter your custom domain name.
-4. Follow the instructions under _Setup_.
-5. Press **Done Configuring** and then **Deploy**.
-6. You'll see a **Compare Versions** screen. Click **Confirm Deployment**.
+1. Access the **Domains** tab.
+2. Enter your domain or subdomain you wish to map to your service.
+3. Click **Add Domain**.
+4. Follow the instructions to add a **CNAME** key and value to your DNS host provider.
+5. Click **OK**.
 
-Wait for the deployment to be successful.
-Access your new custom domain.
+Wait for the certificate to be generated and access your new custom domain.  
+Note: your DNS might take some time to update your domain.
 
 ## Support
 
-Chat with KintoHub developers on [Discord](https://discordapp.com/invite/QVgqWuw) or email `ben@kintohub.com`.
+Chat with KintoHub developers on [Discord](https://kintohub.com/discord).
diff --git a/docs/docs/deploying-to-render.md b/docs/docs/deploying-to-render.md
@@ -25,12 +25,11 @@ This guide assumes you already have a Gatsby project to deploy. If you need a pr
 
 You can set up a Gatsby site on Render in two quick steps:
 
-1. Create a new **Web Service** on Render, and give Render permission to access your GitHub repo.
+1. Create a new **Static Site** on Render, and give Render permission to access your GitHub repo.
 2. Use the following values during creation:
 
    |                       |                                            |
    | --------------------- | ------------------------------------------ |
-   | **Environment**       | `Static Site`                              |
    | **Build Command**     | `gatsby build` (or your own build command) |
    | **Publish Directory** | `public` (or your own output directory)    |
 

diff --git a/docs/docs/emotion.md b/docs/docs/emotion.md
@@ -17,7 +17,7 @@ gatsby new emotion-tutorial https://github.com/gatsbyjs/gatsby-starter-hello-wor
 Second, install the necessary dependencies for Emotion and Gatsby.
 
 ```shell
-npm install gatsby-plugin-emotion @emotion/core@^10.0.5 @emotion/styled
+npm install gatsby-plugin-emotion @emotion/react @emotion/styled
 ```
 
 And then add the plugin to your site's `gatsby-config.js`:
@@ -35,7 +35,7 @@ Now create a sample Emotion page at `src/pages/index.js`:
 ```jsx:title=src/pages/index.js
 import React from "react"
 import styled from "@emotion/styled"
-import { css } from "@emotion/core"
+import { css } from "@emotion/react"
 
 const Container = styled.div`
   margin: 3rem auto;
@@ -123,7 +123,7 @@ To start, create a new Gatsby site with the [hello world starter](https://github
 ```shell
 gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
 cd global-styles
-npm install gatsby-plugin-emotion @emotion/core@^10.0.5 @emotion/styled
+npm install gatsby-plugin-emotion @emotion/react @emotion/styled
 ```
 
 Create `gatsby-config.js` and add the Emotion plugin:
@@ -138,7 +138,7 @@ Next, add a layout component at `src/components/layout.js`:
 
 ```jsx:title=src/components/layout.js
 import React from "react"
-import { Global, css } from "@emotion/core"
+import { Global, css } from "@emotion/react"
 import styled from "@emotion/styled"
 
 const Wrapper = styled("div")`