Merge branch 'master' into updates/fewer-install-warnings

.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

.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
 

.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

.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
 

SECURITY.md

@@ -12,4 +12,4 @@ The following versions are currently being supported with security updates.
 
 ## Reporting a Vulnerability
 
-Please email Kyle Mathews @ mathews.kyle@gmail.com
+Please email security@gatsbyjs.com

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",

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"

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
+              }
             }
           }
         }

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).

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")`

docs/docs/gatsby-config.md

@@ -12,11 +12,12 @@ Options available to set within `gatsby-config.js` include:
 
 1. [siteMetadata](#sitemetadata) (object)
 2. [plugins](#plugins) (array)
-3. [pathPrefix](#pathprefix) (string)
-4. [polyfill](#polyfill) (boolean)
-5. [mapping](#mapping-node-types) (object)
-6. [proxy](#proxy) (object)
-7. [developMiddleware](#advanced-proxying-with-developmiddleware) (function)
+3. [flags](#flags) (object)
+4. [pathPrefix](#pathprefix) (string)
+5. [polyfill](#polyfill) (boolean)
+6. [mapping](#mapping-node-types) (object)
+7. [proxy](#proxy) (object)
+8. [developMiddleware](#advanced-proxying-with-developmiddleware) (function)
 
 ## siteMetadata
 
@@ -57,6 +58,20 @@ module.exports = {
 
 See more about [Plugins](/docs/plugins/) for more on utilizing plugins, and to see available official and community plugins.
 
+## Flags
+
+Flags let sites enable experimental or upcoming changes that are still in testing or waiting for the next major release.
+
+[Go here to see a list of the current flags](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/flags.ts).
+
+```javascript:title=gatsby-config.js
+module.exports = {
+  flags: {
+    QUERY_ON_DEMAND: true,
+  },
+}
+```
+
 ## pathPrefix
 
 It's common for sites to be hosted somewhere other than the root of their domain. Say you have a Gatsby site at `example.com/blog/`. In this case, you would need a prefix (`/blog`) added to all paths on the site.