gatsbyjs · Nov 10, 2020 · Nov 10, 2020 · Nov 10, 2020 · Nov 10, 2020 · Nov 11, 2020
Showing 661 changed files with 12,984 additions and 4,829 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -117,6 +117,23 @@ aliases:
       - notify-status:
           condition: << parameters.nightly >>
 
+  e2e_tests_development_runtime_lazy_alias:
+    &e2e_tests_development_runtime_lazy_alias
+    <<: *e2e-executor
+    parameters:
+      nightly:
+        type: boolean
+        default: false
+    environment:
+      CYPRESS_PROJECT_ID: ihj5mz
+      CYPRESS_RECORD_KEY: 01acdce8-75bd-4280-9839-6cb215b2c84b
+    steps:
+      - e2e-test:
+          test_path: e2e-tests/lazy-development-runtime
+          skip_file_change_test: << parameters.nightly >>
+      - notify-status:
+          condition: << parameters.nightly >>
+
   e2e_tests_gatsby-image_alias: &e2e_tests_gatsby-image_alias
     <<: *e2e-executor
     parameters:
@@ -271,6 +288,12 @@ jobs:
       - e2e-test:
           test_path: integration-tests/artifacts
 
+  integration_tests_ssr:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/ssr
+
   e2e_tests_path-prefix:
     <<: *e2e-executor
     environment:
@@ -326,6 +349,13 @@ jobs:
   e2e_tests_development_runtime:
     <<: *e2e_tests_development_runtime_alias
 
+  e2e_tests_development_runtime_lazy_devjs:
+    <<: *e2e_tests_development_runtime_alias
+    environment:
+      GATSBY_EXPERIMENT_LAZY_DEVJS: true
+      CYPRESS_PROJECT_ID: ihj5mz
+      CYPRESS_RECORD_KEY: 01acdce8-75bd-4280-9839-6cb215b2c84b
+
   e2e_tests_development_runtime_with_experimental_react:
     <<: *e2e_tests_development_runtime_alias
 
@@ -582,6 +612,8 @@ workflows:
           <<: *e2e-test-workflow
       - integration_tests_artifacts:
           <<: *e2e-test-workflow
+      - integration_tests_ssr:
+          <<: *e2e-test-workflow
       - integration_tests_gatsby_cli:
           requires:
             - bootstrap
@@ -597,6 +629,8 @@ workflows:
           <<: *e2e-test-workflow
       - e2e_tests_development_runtime:
           <<: *e2e-test-workflow
+      - e2e_tests_development_runtime_lazy_devjs:
+          <<: *e2e-test-workflow
       - e2e_tests_production_runtime:
           <<: *e2e-test-workflow
       - themes_e2e_tests_production_runtime:

diff --git a/.gitignore b/.gitignore
@@ -26,8 +26,6 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
-examples/biz-website/public/
-examples/blog/public/
 integration-tests/gatsby-cli/execution-folder/*
 *.un~
 dist

diff --git a/CODEOWNERS b/CODEOWNERS
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@
   <a href="https://circleci.com/gh/gatsbyjs/gatsby">
     <img src="https://circleci.com/gh/gatsbyjs/gatsby.svg?style=shield" alt="Current CircleCI build status." />
   </a>
-  <a href="https://www.npmjs.org/package/gatsby">
+  <a href="https://www.npmjs.com/package/gatsby">
     <img src="https://img.shields.io/npm/v/gatsby.svg" alt="Current npm package version." />
   </a>
   <a href="https://npmcharts.com/compare/gatsby?minimal=true">

diff --git a/benchmarks/gabe-fs-mdx/gatsby-config.js b/benchmarks/gabe-fs-mdx/gatsby-config.js
@@ -10,6 +10,11 @@ module.exports = {
         path: `${__dirname}/generated_articles/`,
       },
     },
-    `gatsby-plugin-mdx`,
+    {
+      resolve: `gatsby-plugin-mdx`,
+      options: {
+        // lessBabel: true,
+      },
+    },
   ],
 }
diff --git a/benchmarks/source-contentful/gatsby-config.js b/benchmarks/source-contentful/gatsby-config.js
@@ -27,6 +27,7 @@ module.exports = {
     {
       resolve: "gatsby-source-contentful",
       options: contentfulConfig,
+      pageLimit: 1000,
     },
   ],
 }
diff --git a/benchmarks/source-strapi/package.json b/benchmarks/source-strapi/package.json
@@ -14,7 +14,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "sharp": "^0.25.4"
+    "sharp": "^0.26.3"
   },
   "devDependencies": {
     "prettier": "2.0.5"

diff --git a/docs/contributing/community.md b/docs/contributing/community.md
@@ -62,6 +62,10 @@ If you need an answer right away, check out the
 [Gatsby Discord](https://gatsby.dev/discord). Community & team members are happy to help you out or point you to
 useful resources.
 
+### GitHub Discussions
+
+Directly integrated into the repository, you can use [GitHub Discussions](https://github.com/gatsbyjs/gatsby/discussions) to ask for help or share ideas.
+
 ### Hashnode
 
 Many members of the community also use Hashnode to ask questions and share their tips. Read through

diff --git a/docs/docs/add-seo-component.md b/docs/docs/add-seo-component.md
@@ -62,7 +62,7 @@ Now define the query and pass it to `useStaticQuery`. You can also alias query i
 
 ```jsx:title=src/components/seo.js
 const SEO = ({ title, description, image, article }) => {
-  const { location } = useLocation()
+  const { pathname } = useLocation()
   const { site } = useStaticQuery(query)
 
   return null

diff --git a/docs/docs/deploying-to-firebase.md b/docs/docs/deploying-to-firebase.md
@@ -58,7 +58,7 @@ In this guide, you will learn how to deploy your Gatsby site to Firebase Hosting
            "headers": [
              {
                "key": "cache-control",
-               "value": "cache-control: public, max-age=0, must-revalidate"
+               "value": "public, max-age=0, must-revalidate"
              }
            ]
          },
@@ -85,7 +85,7 @@ In this guide, you will learn how to deploy your Gatsby site to Firebase Hosting
            "headers": [
              {
                "key": "cache-control",
-               "value": "cache-control: public, max-age=0, must-revalidate"
+               "value": "public, max-age=0, must-revalidate"
              }
            ]
          },
@@ -94,7 +94,7 @@ In this guide, you will learn how to deploy your Gatsby site to Firebase Hosting
            "headers": [
              {
                "key": "cache-control",
-               "value": "cache-control: public, max-age=0, must-revalidate"
+               "value": "public, max-age=0, must-revalidate"
              }
            ]
          }

diff --git a/docs/docs/gatsby-cli.md b/docs/docs/gatsby-cli.md
@@ -66,6 +66,8 @@ gatsby new
    (Use a different starter)
 ```
 
+_Note: you can try out the experimental interactive experience from the `create-gatsby` package with the `GATSBY_EXPERIMENTAL_GATSBY_NEW_FLOW=true` flag, which will prompt you with questions about the kind of site you're building, and install the plugins you'll need automatically._
+
 See the [Gatsby starters docs](/docs/gatsby-starters/) for more details.
 
 ### `develop`

diff --git a/docs/docs/recipes/styling-css.md b/docs/docs/recipes/styling-css.md
@@ -395,35 +395,41 @@ Hosting your own [Google Fonts](https://fonts.google.com/) locally within a proj
 
 - A [Gatsby site](/docs/quick-start)
 - The [Gatsby CLI](/docs/gatsby-cli/) installed
-- Choosing a font package from [the typefaces project](https://github.com/KyleAMathews/typefaces)
+- A chosen font package from [Fontsource](https://github.com/fontsource/fontsource)
 
 ### Directions
 
-1. Run `npm install typeface-your-chosen-font`, replacing `your-chosen-font` with the name of the font you want to install from [the typefaces project](https://github.com/KyleAMathews/typefaces).
+This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).
 
-An example to load the popular 'Source Sans Pro' font would be: `npm install typeface-source-sans-pro`.
+1. Run `npm install fontsource-open-sans` to download the necessary package files.
 
-2. Add `import "typeface-your-chosen-font"` to a layout template, page component, or `gatsby-browser.js`.
+2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.
 
 ```jsx:title=src/components/layout.js
-import "typeface-your-chosen-font"
+import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
 ```
 
+If you wish to select a particular weight or style, you may specify it by changing the import path.
+
+```jsx:title=src/components/layout.js
+import "fontsource-open-sans/500.css" // Weight 500 with all styles included.
+import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
+```
+
+**Note**: The range of supported weights and styles a font may support is shown in each package's README file.
+
 3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
 
 ```css:title=src/components/layout.css
 body {
-  font-family: "Your Chosen Font";
+  font-family: "Open Sans";
 }
 ```
 
-_NOTE: So for the above example, the relevant CSS declaration would be `font-family: 'Source Sans Pro';`_
-
 ### Additional resources
 
+- [Fontsource repo on GitHub](https://github.com/fontsource/fontsource)
 - [Typography.js](/docs/typography-js/) - Another option for using Google fonts on a Gatsby site
-- [The Typefaces Project Docs](https://github.com/KyleAMathews/typefaces/blob/master/README.md)
-- [Live example on Kyle Mathews' blog](https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/)
 
 ## Using Font Awesome
 

diff --git a/docs/docs/using-web-fonts.md b/docs/docs/using-web-fonts.md
@@ -18,36 +18,32 @@ Some examples of web font services include [Google Fonts](https://fonts.google.c
 
 ### Using Google Fonts
 
-The fastest way to get started using Google Fonts is by choosing a font from [the typefaces project](https://github.com/KyleAMathews/typefaces). This example shows how you can add Open Sans to your project.
+The fastest way to get started using Google Fonts is by choosing a font from [Fontsource](https://github.com/fontsource/fontsource).
 
-First, install the typeface package with npm:
+This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).
 
-```bash
-npm install --save typeface-open-sans
-```
+1. Run `npm install fontsource-open-sans` to download the necessary package files.
 
-Or with yarn:
+2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.
 
-```bash
-yarn add typeface-open-sans
+```jsx:title=src/components/layout.js
+import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
 ```
 
-In your `layout.js` file, import the typeface.
+If you wish to select a particular weight or style, you may specify it by changing the import path.
 
 ```jsx:title=src/components/layout.js
-import "typeface-open-sans"
+import "fontsource-open-sans/500.css" // Weight 500 with all styles included.
+import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
 ```
 
-Next, add the typeface name to the appropriate place in your CSS. In this case, you will override the `body` element's `font-family` default values.
+**Note**: The range of supported weights and styles a font may support is shown in each package's README file.
+
+3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.
 
 ```css:title=src/components/layout.css
 body {
-  color: hsla(0, 0%, 0%, 0.8);
-  // highlight-next-line
-  font-family: "Open Sans", georgia, serif;
-  font-weight: normal;
-  word-wrap: break-word;
-  font-kerning: normal;
+  font-family: "Open Sans";
 }
 ```