Merge branch 'master' into aghreed/sc-42765/update-tutorial-reference…

…s-to-add-site-flow

docs/docs/conceptual/image-plugin-architecture.md

@@ -70,7 +70,7 @@ The `GatsbyImage` component supports three types of layout, which define the res
 
 #### Placeholder
 
-`GatbsyImage` supports displaying a placeholder while the main image loads. There are two kinds of placeholder that are currently supported: flat colors and images. The type of placeholder is set via the image data object, and will either be a data URI for the image, or a CSS color value. The image will either be a base64-encoded low resolution raster image (called `BLURRED` when using sharp) or a URI-encoded SVG (called `TRACED_SVG`). The raster image will by default be 20px wide, and the same aspect ratio as the main image. This will be resized to fill the full container, giving a blurred effect. The SVG image is expected to be a single-color, simplified SVG generated using [potrace](http://potrace.sourceforge.net/). While these are the defaults produced by sharp, and also used by many third-party source plugins, we do not enforce this, and it can be any URI. We strongly encourage the use of inline data URIs, as any placeholder that needs to make a network request will defeat much of the purpose of using a placeholder. The actual placeholder element is a regular `<img>` tag, even for SVGs.
+`GatsbyImage` supports displaying a placeholder while the main image loads. There are two kinds of placeholder that are currently supported: flat colors and images. The type of placeholder is set via the image data object, and will either be a data URI for the image, or a CSS color value. The image will either be a base64-encoded low resolution raster image (called `BLURRED` when using sharp) or a URI-encoded SVG (called `TRACED_SVG`). The raster image will by default be 20px wide, and the same aspect ratio as the main image. This will be resized to fill the full container, giving a blurred effect. The SVG image is expected to be a single-color, simplified SVG generated using [potrace](http://potrace.sourceforge.net/). While these are the defaults produced by sharp, and also used by many third-party source plugins, we do not enforce this, and it can be any URI. We strongly encourage the use of inline data URIs, as any placeholder that needs to make a network request will defeat much of the purpose of using a placeholder. The actual placeholder element is a regular `<img>` tag, even for SVGs.
 
 The alternative placeholder is a flat color. This is expected to be calculated from the dominant color of the source image. sharp supports performing this calculation, and some CMSs provide it in the image metadata. This color is applied as a background color to a placeholder `<div>` element.
 

docs/docs/how-to/adding-common-features/localization-i18n.md

@@ -57,4 +57,4 @@ This framework also has experimental support for the React suspense API and it s
 
 - [Gatsby i18n articles](https://www.gatsbyjs.com/blog/tags/localization/)
 
-- [W3C's i18n resources](https://w3c.github.io/i18n-drafts/getting-started/contentdev.en#reference)
+- [W3C's i18n resources](https://www.w3.org/International/i18n-drafts/nav/contentdev#reference)

docs/docs/quick-start.md

@@ -12,11 +12,11 @@ This quick start is intended for intermediate to advanced developers. For a gent
 npm init gatsby
 ```
 
-Follow the prompts to choose your preferred CMS, styling tools and additional features.
+It'll ask for a site title and the name of the project's directory. Continue following the prompts to choose your preferred CMS, styling tools and additional features.
 
 2. Once everything is downloaded you will see a message with instructions for navigating to your site and running it locally.
 
-It will look like this, but use your project's directory.
+The CLI created the site as a new folder with the name you chose in step 1.
 
 Start by going to the directory with
 
@@ -40,8 +40,8 @@ Try editing the home page in `src/pages/index.js`. Saved changes will live reloa
 
 ### Add more features
 
-[Install and configure additional plugins](/docs/recipes/) to quickly add additional functionality to your site.
+[Follow our guides](/docs/how-to/) to add more functionality to your site or browse [our plugins](/plugins/) to quickly install additional features.
 
 ### Deploy your site
 
-Try using [Gatsby Cloud](https://www.gatsbyjs.com/cloud/) to build and deploy your site to one of many hosting providers.
+Try using [Gatsby Cloud](/products/cloud/) to build and deploy your site to one of many hosting providers.

docs/docs/reference/release-notes/v4.5/index.md

@@ -0,0 +1,118 @@
+---
+date: "2022-01-11"
+version: "4.5.0"
+title: "v4.5 Release Notes"
+---
+
+Welcome to `gatsby@4.5.0` release (January 2022 #1)
+
+Key highlights of this release:
+
+- [Gracefully Handling Browser Cache Issues](#gracefully-handling-browser-cache-issues)
+- [TypeScript Types for `getServerData`](#typescript-types-for-getserverdata)
+- [Deprecation of `gatsby-recipes`](#deprecation-of-gatsby-recipes)
+
+Also check out [notable bugfixes](#notable-bugfixes--improvements).
+
+**Bleeding Edge:** Want to try new features as soon as possible? Install `gatsby@next` and let us know
+if you have any [issues](https://github.com/gatsbyjs/gatsby/issues).
+
+[Previous release notes](/docs/reference/release-notes/v4.4)
+
+[Full changelog][full-changelog]
+
+---
+
+## Gracefully Handling Browser Cache Issues
+
+If you've seen the error `The result of this StaticQuery could not be fetched`, `Loading (StaticQuery)`, or `We couldn't find the correct component chunk with the name` you might have run into issues regarding `useStaticQuery` and some form of browser cache. More details are laid out in these two issues: [#33956](https://github.com/gatsbyjs/gatsby/issues/33956) and [#33112](https://github.com/gatsbyjs/gatsby/issues/33112).
+
+The way we could reproduce this problem was using cached HTML from previous build (which would use previous JavaScript bundles), that would fetch new data (from newer builds). In those cases wrong static queries were fetched as the cached HTML expected other bundles.
+
+In [#34225](https://github.com/gatsbyjs/gatsby/pull/34225) we've added an integrity check to Gatsby's runtime to see if the loaded HTML & JavaScript is matching the new data, and if not a single (forced) reload tries to fetch the updated assets.
+
+If you've run into problems like these, please upgrade and let us know (in the two issues mentioned above) if your problem is resolved.
+
+## TypeScript Types for `getServerData`
+
+Gatsby now ships with TypeScript types for the `getServerData` function. You can use the `GetServerDataProps` and `GetServerDataReturn` as following:
+
+```tsx
+import * as React from "react"
+import { GetServerDataProps, GetServerDataReturn } from "gatsby"
+
+type ServerDataProps = {
+  hello: string
+}
+
+const Page = () => <div>Hello World</div>
+export default Page
+
+export async function getServerData(
+  props: GetServerDataProps
+): GetServerDataReturn<ServerDataProps> {
+  return {
+    status: 200,
+    headers: {},
+    props: {
+      hello: "world",
+    },
+  }
+}
+```
+
+If you're using an anonymous function, you can also use the shorthand `GetServerData` type like this:
+
+```tsx
+const getServerData: GetServerData<ServerDataProps> = async props => {
+  // your function body
+}
+```
+
+## Deprecation of `gatsby-recipes`
+
+In early 2020 we've [introduced Gatsby Recipes](/blog/2020-04-15-announcing-gatsby-recipes/) to automate common site building tasks. Since then our priorities and plans on that front for Gatsby have shifted, thus `gatsby-recipes` itself didn't ever go from alpha status to general availability. We're deprecating `gatsby-recipes` now to signal that we'll no longer will continue work on this specific package and to also remove some heavy dependencies from `gatsby-cli`. Some deprecation warnings or audit messages about packages from `gatsby-recipes` should be gone now.
+
+You can continue to use it via `gatsby-cli@4.4.0` and the source itself will live inside the `deprecated-packages` folder in the [monorepo](https://github.com/gatsbyjs/gatsby/tree/master/deprecated-packages).
+
+If you've liked the features in `gatsby-recipes` and would like to have something similar in the future, feel free to open a [feature request](https://github.com/gatsbyjs/gatsby/discussions/categories/ideas-feature-requests) in our discussions forum. Thanks!
+
+## Notable Bugfixes & Improvements
+
+- A lot of internal dependency updates to some packages. You can check the `CHANGELOG.md` file in each package’s folder for the details.
+- If you want to know how to enable [Content Sync](/docs/conceptual/content-sync/) in your source plugin, you can read the [updated guide](/docs/how-to/plugins-and-themes/creating-a-source-plugin/#enabling-content-sync) now.
+- `gatsby`
+  - When using the File System Route API and SSR rendering mode, the routing between individual pages and a catch-all splat route was not correctly resolved. The `findPageByPath` function was updated to use another algorithm to find the correct page, via [PR #34070](https://github.com/gatsbyjs/gatsby/pull/34070)
+  - Remove unused exports from query engine, via [PR #33484](https://github.com/gatsbyjs/gatsby/pull/33484)
+  - Resolve `createNode` promise when LMDB datastore is ready to fix issues where nodes were not created, via [PR #34277](https://github.com/gatsbyjs/gatsby/pull/34277)
+  - Reorder `<head>` tags so that e.g. large stylesheets don't block parsers from getting meta tags, via [PR #34030](https://github.com/gatsbyjs/gatsby/pull/34030)
+- `gatsby-plugin-preact`: Fix exports resolution to get it working with Gatsby 4, via [PR #34337](https://github.com/gatsbyjs/gatsby/pull/34337)
+- `gatsby-source-contentful`:
+  - Calculate aspect ratio for `base64` previews correctly, via [PR #33533](https://github.com/gatsbyjs/gatsby/pull/33533)
+  - Fix issue where images were not downloaded when using `downloadLocal`, via [PR #34276](https://github.com/gatsbyjs/gatsby/pull/34276)
+- `gatsby-cli`: Make `--inspect-brk` work with specified port, via [PR #34242](https://github.com/gatsbyjs/gatsby/pull/34242)
+- `gatsby-source-filesystem`: Replace special filename characters, via [PR #34249](https://github.com/gatsbyjs/gatsby/pull/34249)
+
+## Contributors
+
+A big **Thank You** to [our community who contributed][full-changelog] to this release 💜
+
+- [iChenLei](https://github.com/iChenLei)
+  - fix(gatsby-cli): make `--inspect-brk` work [PR #34242](https://github.com/gatsbyjs/gatsby/pull/34242)
+  - docs: use en-US version mdn links [PR #34318](https://github.com/gatsbyjs/gatsby/pull/34318)
+  - chore(examples): use mobx v6 in using-mobx example [PR #34351](https://github.com/gatsbyjs/gatsby/pull/34351)
+- [axe312ger](https://github.com/axe312ger): fix(gatsby-source-contentful): fix base64 aspect ratio [PR #33533](https://github.com/gatsbyjs/gatsby/pull/33533)
+- [cassiebeckley](https://github.com/cassiebeckley): chore(gatsby-transformer-screenshot): Update old name [PR #34285](https://github.com/gatsbyjs/gatsby/pull/34285)
+- [ollybenson](https://github.com/ollybenson): docs: fix typo in gatsby-image [PR #34300](https://github.com/gatsbyjs/gatsby/pull/34300)
+- [fagiani](https://github.com/fagiani): docs: Match egghead.io video instructions [PR #34315](https://github.com/gatsbyjs/gatsby/pull/34315)
+- [AnilSeervi](https://github.com/AnilSeervi)
+  - docs: change gastby to gatsby [PR #34341](https://github.com/gatsbyjs/gatsby/pull/34341)
+  - docs(gatsby-remark-prismjs): Update http links to use https [PR #34340](https://github.com/gatsbyjs/gatsby/pull/34340)
+  - docs: Add shell code block & remove starter link for sass [PR #34322](https://github.com/gatsbyjs/gatsby/pull/34322)
+  - docs: fix typo gatby-node.js -> gatsby-node.js [PR #34347](https://github.com/gatsbyjs/gatsby/pull/34347)
+- [varghesejose2020](https://github.com/varghesejose2020): chore(docs): Update localization doc [PR #34378](https://github.com/gatsbyjs/gatsby/pull/34378)
+- [SMony-L](https://github.com/SMony-L): chore: Fix typo [PR #34349](https://github.com/gatsbyjs/gatsby/pull/34349)
+- [seanparmelee](https://github.com/seanparmelee): chore(docs): Fix links to shared layout component [PR #34330](https://github.com/gatsbyjs/gatsby/pull/34330)
+- [tlgimenes](https://github.com/tlgimenes): fix(gatsby): Wrong route resolved by findPageByPath function [PR #34070](https://github.com/gatsbyjs/gatsby/pull/34070)
+
+[full-changelog]: https://github.com/gatsbyjs/gatsby/compare/gatsby@4.5.0-next.0...gatsby@4.5.0

docs/tutorial/building-a-theme.md

@@ -2,7 +2,7 @@
 title: Building a Theme
 ---
 
-In this tutorial, you'll learn how to build a theme plugin for Gatsby. This tutorial is meant as a written companion to the [Gatsby Theme Authoring Egghead course](https://egghead.io/courses/gatsby-theme-authoring).
+In this tutorial, you'll learn how to build a theme plugin for Gatsby. This tutorial is meant as a written companion to the [Gatsby Theme Authoring Egghead course](https://egghead.io/courses/gatsby-theme-authoring). **Note:** The video instructions are slightly outdated at times, thus the written instructions here are the source of truth.
 
 ## Set up yarn workspaces
 
@@ -47,12 +47,7 @@ In the `package.json` file in `gatsby-theme-events`, add the following:
   "name": "gatsby-theme-events",
   "version": "1.0.0",
   "main": "index.js",
-  "license": "MIT",
-  "scripts": {
-    "build": "gatsby build",
-    "develop": "gatsby develop",
-    "clean": "gatsby clean"
-  }
+  "license": "MIT"
 }
 ```
 
@@ -134,20 +129,14 @@ If you run `yarn workspaces info`, you'll be able to verify that the site is usi
 
 ### Add peer dependencies to `gatsby-theme-events`
 
-Targeting the `gatsby-theme-events` workspace, install `gatsby`, `react`, and `react-dom` as peer and development dependencies:
+Targeting the `gatsby-theme-events` workspace, install `gatsby`, `react`, and `react-dom` as peer dependencies:
 
 ```shell
 yarn workspace gatsby-theme-events add -P gatsby react react-dom
 ```
 
 > 💡 The `-P` flag is shorthand for installing peer dependencies.
 
-```shell
-yarn workspace gatsby-theme-events add -D gatsby react react-dom
-```
-
-> 💡 The `-D` flag is shorthand for installing development dependencies.
-
 The `gatsby-theme-events/package.json` file should now include the following:
 
 ```json:title=gatsby-theme-events/package.json
@@ -156,12 +145,6 @@ The `gatsby-theme-events/package.json` file should now include the following:
     "gatsby": "^3.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
-  },
-  {
-  "devDependencies": {
-    "gatsby": "^3.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
   }
 }
 ```

integration-tests/ssr/__tests__/ssr.js

@@ -33,7 +33,7 @@ describe(`SSR`, () => {
     expect(String(childProcess.stdout)).toContain(
       `testing these paths for differences between dev & prod outputs`
     )
-  }, 15000)
+  }, 30000)
 
   test(`it generates an error page correctly`, async () => {
     const src = path.join(__dirname, `/fixtures/bad-page.js`)

integration-tests/ssr/test-output.js

@@ -47,10 +47,10 @@ async function run() {
     // Fetch once to trigger re-compilation.
     await fetch(`${devSiteBasePath}/${path}`)
 
-    // Then wait for 6 seconds to ensure it's ready to go.
+    // Then wait for a second to ensure it's ready to go.
     // Otherwise, tests are flaky depending on the speed of the testing machine.
     await new Promise(resolve => {
-      setTimeout(() => resolve(), 6000)
+      setTimeout(() => resolve(), 1000)
     })
 
     let devStatus = 200
@@ -103,7 +103,15 @@ async function run() {
     paths
   )
 
-  const results = await Promise.all(paths.map(p => comparePath(p)))
+  const results = []
+
+  // Run comparisons serially, otherwise recompilation fetches
+  // interfere with each other when run within Promise.all
+  for (const path of paths) {
+    const result = await comparePath(path)
+    results.push(result)
+  }
+
   // Test all true
   if (results.every(r => r)) {
     process.exit(0)

packages/gatsby-cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-cli",
   "description": "Gatsby command-line interface for creating new sites and running Gatsby commands",
-  "version": "4.6.0-next.0",
+  "version": "4.6.0-next.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bin": {
     "gatsby": "cli.js"

packages/gatsby-plugin-create-client-paths/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-create-client-paths",
   "description": "Gatsby-plugin for creating paths that exist only on the client",
-  "version": "4.6.0-next.0",
+  "version": "4.6.0-next.1",
   "author": "scott.eckenthal@gmail.com",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

packages/gatsby-plugin-manifest/.babelrc

@@ -1,3 +1,9 @@
 {
-  "presets": [["babel-preset-gatsby-package", { "browser": true }]]
+  "presets": [["babel-preset-gatsby-package"]],
+  "overrides": [
+    {
+      "test": ["**/gatsby-browser.js"],
+      "presets": [["babel-preset-gatsby-package", { "browser": true, "esm": true }]]
+    }
+  ]
 }

packages/gatsby-plugin-manifest/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-manifest",
   "description": "Gatsby plugin which adds a manifest.webmanifest to make sites progressive web apps",
-  "version": "4.6.0-next.0",
+  "version": "4.6.0-next.1",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

packages/gatsby-plugin-manifest/src/gatsby-browser.js

@@ -3,8 +3,11 @@ import { withPrefix } from "gatsby"
 import getManifestForPathname from "./get-manifest-pathname"
 
 // when we don't have localisation in our manifest, we tree shake everything away
-if (__MANIFEST_PLUGIN_HAS_LOCALISATION__) {
-  exports.onRouteUpdate = function ({ location }, pluginOptions) {
+export const onRouteUpdate = function onRouteUpdate(
+  { location },
+  pluginOptions
+) {
+  if (__MANIFEST_PLUGIN_HAS_LOCALISATION__) {
     const { localize } = pluginOptions
     const manifestFilename = getManifestForPathname(
       location.pathname,

packages/gatsby-plugin-manifest/src/gatsby-node.js

@@ -220,11 +220,9 @@ const makeManifest = async ({
     async function processIconSet(iconSet) {
       // if cacheBusting is being done via url query icons must be generated before cache busting runs
       if (cacheMode === `query`) {
-        await Promise.all(
-          iconSet.map(dstIcon =>
-            checkCache(cache, dstIcon, icon, iconDigest, generateIcon)
-          )
-        )
+        for (const dstIcon of iconSet) {
+          await checkCache(cache, dstIcon, icon, iconDigest, generateIcon)
+        }
       }
 
       if (cacheMode !== `none`) {
@@ -237,11 +235,9 @@ const makeManifest = async ({
 
       // if file names are being modified by cacheBusting icons must be generated after cache busting runs
       if (cacheMode !== `query`) {
-        await Promise.all(
-          iconSet.map(dstIcon =>
-            checkCache(cache, dstIcon, icon, iconDigest, generateIcon)
-          )
-        )
+        for (const dstIcon of iconSet) {
+          await checkCache(cache, dstIcon, icon, iconDigest, generateIcon)
+        }
       }
 
       return iconSet

packages/gatsby-source-wordpress/docs/features/media-item-processing.md

@@ -26,7 +26,7 @@ For example, both of the following will be sourced:
 <img src="https://mysite.com/wp-content/uploads/2021/01/b.jpeg" />
 ```
 
-Note that there's currently a hard requirement for both kinds of url's to include `/wp-content/uploads` in order to be picked up. If your media items are stored in another directory they will not become Gatsby iamges.
+Note that there's currently a hard requirement for both kinds of url's to include `/wp-content/uploads` in order to be picked up. If your media items are stored in another directory they will not become Gatsby images.
 
 ## Preventing Image/File sourcing
 

packages/gatsby-source-wordpress/package.json

@@ -2,7 +2,7 @@
   "name": "gatsby-source-wordpress",
   "description": "Source data from WordPress in an efficient and scalable way.",
   "author": "Tyler Barnes <tylerdbarnes@gmail.com>",
-  "version": "6.6.0-next.0",
+  "version": "6.6.0-next.1",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },

packages/gatsby-worker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-worker",
   "description": "Utility to create worker pools",
-  "version": "1.6.0-next.0",
+  "version": "1.6.0-next.1",
   "author": "Michal Piechowiak<misiek.piechowiak@gmail.com>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"