chore(docs): Updating deprecated syntax/information (gatsbyjs#33730)

docs/contributing/docs-contributions/index.md

@@ -14,7 +14,7 @@ Check the GitHub repo for issues labeled with ["type: documentation" and "good f
 
 ## Options for contributing to the Gatsby docs
 
-When working on the Gatsby.js documentation, you can choose between two major styles of working:
+When working on the Gatsby documentation, you can choose between two major styles of working:
 
 - [Work directly in the GitHub UI](#modifying-markdown-files), using the "Edit this File" and commit capabilities without having to clone the repository. This is useful for quick documentation updates, typo fixes, and lightweight Markdown changes.
 - Clone the Gatsby.js repo and make changes to the Markdown files using your favorite text editor. Currently (as of March 2021), there is no way for community members to build the docs site locally. We are working internally to figure out a fix for this.

docs/contributing/how-to-file-an-issue.md

@@ -2,21 +2,16 @@
 title: How to File an Issue
 ---
 
-The Gatsby GitHub [issue tracker](https://github.com/gatsbyjs/gatsby/issues) is the preferred channel for bug reports, documentation, feature requests and [submitting pull requests](/contributing/how-to-open-a-pull-request/).
+The Gatsby GitHub [issue tracker](https://github.com/gatsbyjs/gatsby/issues) is the preferred channel for bug reports, documentation requests, and [submitting pull requests](/contributing/how-to-open-a-pull-request/).
 
 To resolve your issue, please select the appropriate category:
 
-- Bug Reports
+- Bug Report
 - Documentation
-- Feature Requests
-- New [Translation](/contributing/translation#creating-a-new-translation) Requests
 
 For bug reports, include in your issue:
 
-- Gatsby version, Node.js version, OS version
-- The contents of your `gatsby-config.js` and `package.json` as well as your
-  `gatsby-node.js`, `gatsby-browser.js`, and `gatsby-ssr.js` files depending on
-  changes you've made there.
+- Follow the issue template prompting you for each entry
 - A [reproduction](/contributing/how-to-make-a-reproducible-test-case/) for debugging and taking action
 
 Please do not use the issue tracker for personal support requests. [Stack Overflow](https://stackoverflow.com/questions/ask?tags=gatsby) (**gatsby** tag) and the [Gatsby Discord](https://gatsby.dev/discord) are better places to get help.

docs/contributing/how-to-make-a-reproducible-test-case.md

@@ -16,14 +16,14 @@ A reproducible test case is a great way to share a specific environment that cau
 
 ## Steps to create a reproducible test case
 
-- Create a new Gatsby site with a starter, the official `hello-world` starter is a great 'barebones' starting point here: `gatsby new bug-repro https://github.com/gatsbyjs/gatsby-starter-hello-world`
+- Create a new Gatsby site with a starter, the official `gatsby-starter-minimal` starter is a great 'barebones' starting point here: `gatsby new bug-repro https://github.com/gatsbyjs/gatsby-starter-minimal`
 - Add any Gatsby plugins that relate to the issue. For example, if you're having problems with Gatsby MDX you should install and configure [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/). Only add plugins that are needed to demonstrate the problem.
 - Add the code needed to recreate the error you've seen.
 - Publish the code (your GitHub account is a good place to do this) and then link to it when [creating an issue](/contributing/how-to-file-an-issue/).
 
 ## Places to develop a reproducible test case
 
-- Locally with a starter: You can start with a [Starter](/docs/starters) locally and then build it on your own machine. Gatsby's official [`hello-world`](https://github.com/gatsbyjs/gatsby/tree/master/starters/hello-world) or [`default`](https://github.com/gatsbyjs/gatsby-starter-default) starter are both good foundations for a reproducible test case.
+- Locally with a starter: You can start with a starter locally and then build it on your own machine. Gatsby's official [`gatsby-starter-minimal`](https://github.com/gatsbyjs/gatsby-starter-minimal) is a good foundation for a reproducible test case.
 - Host on CodeSandbox: You can develop a Gatsby site straight from your browser with CodeSandbox using their [Gatsby template](https://codesandbox.io/s/github/gatsbyjs/gatsby-starter-default). CodeSandbox also hosts your site automatically, which can be useful to demonstrate the behavior of your site.
 
 ## Benefits of reproducible test cases

docs/contributing/how-to-open-a-pull-request.md

@@ -79,7 +79,7 @@ To test changes locally against the Gatsby [site and project files](https://gith
 
 ### Documentation PRs
 
-The Gatsby.js docs site mostly lives in the [www](https://github.com/gatsbyjs/gatsby/tree/master/www) and [docs](https://github.com/gatsbyjs/gatsby/tree/master/docs) directories on GitHub, including docs and tutorial content. There are also some [examples in the Gatsby repo](https://github.com/gatsbyjs/gatsby/tree/master/examples) referenced in the docs.
+The Gatsby docs site lives in [docs](https://github.com/gatsbyjs/gatsby/tree/master/docs) directories on GitHub, including docs and tutorial content. There are also some [examples in the Gatsby repo](https://github.com/gatsbyjs/gatsby/tree/master/examples) referenced in the docs.
 
 Additional docs PR steps:
 

docs/docs/basic-hardware-software-requirements.md

@@ -18,7 +18,7 @@ This will be variable depending on the size of your site. Gatsby sites have been
 
 To develop with Gatsby, you'll need to install:
 
-- Node.js 10.13.0 (LTS) or higher
+- Node.js 14.15.0 (LTS) or higher
 - [npm](https://www.npmjs.com/) or [Yarn 1](https://classic.yarnpkg.com/lang/en/) package manager to install the [Gatsby CLI](/docs/reference/gatsby-cli/) and site dependencies.
   - npm is recommended for most developers.
   - Yarn is used for authoring Gatsby themes.

docs/docs/conceptual/graphql-concepts.md

@@ -194,20 +194,20 @@ markdownRemark {
 
 Gatsby has rich support for processing images. Responsive images are a big part of the modern web and typically involve creating 5+ sized thumbnails per photo. With Gatsby's [`gatsby-transformer-sharp`](/plugins/gatsby-transformer-sharp/), you can _query_ your images for responsive versions. The query automatically creates all the needed responsive thumbnails and returns `src` and `srcSet` fields to add to your image element.
 
-Combined with a special Gatsby image component, [gatsby-image](/plugins/gatsby-image/), you have a very powerful set of primitives for building sites with images.
+Combined with a special Gatsby image component, [gatsby-plugin-image](/plugins/gatsby-plugin-image/), you have a very powerful set of primitives for building sites with images.
 
-This is what a component using `gatsby-image` looks like:
+This is what a component using `gatsby-plugin-image` looks like:
 
 ```jsx
 import React from "react"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 import { graphql } from "gatsby"
 
 export default function Page({ data }) {
   return (
     <div>
-      <h1>Hello gatsby-image</h1>
-      <Img fixed={data.file.childImageSharp.fixed} />
+      <h1>Hello gatsby-plugin-image</h1>
+      <GatsbyImage image={data.file.childImageSharp.gatsbyImageData} />
     </div>
   )
 }
@@ -218,9 +218,7 @@ export const query = graphql`
       childImageSharp {
         # Specify the image processing specifications right in the query.
         # Makes it trivial to update as your page's design changes.
-        fixed(width: 125, height: 125) {
-          ...GatsbyImageSharpFixed
-        }
+        gatsbyImageData(width: 125, height: 125, layout: FIXED)
       }
     }
   }

docs/docs/conceptual/plugins-themes-and-starters.md

@@ -102,7 +102,7 @@ Themes are intended to abstract several plugins into one, by making a `gatsby-co
 
 #### Custom components
 
-Custom components are most traditionally distributed as packages in the React ecosystem. Components don't need to hook into the Gatsby build system, so if shipped with a plugin they don't need to be included in a `gatsby-config`'s plugin array. This is the case with `gatsby-image` which is a React component. It doesn't need to be included in the plugins array because it is merely a component.
+Custom components are most traditionally distributed as packages in the React ecosystem. Components don't need to hook into the Gatsby build system, so if shipped with a plugin they don't need to be included in a `gatsby-config`'s plugin array.
 
 Some plugins ship with components you can use in a Gatsby site. An example is the [`<OutboundLink />` component from `gatsby-plugin-google-analytics`](/plugins/gatsby-plugin-google-analytics/?=#outboundlink-component). Other plugins, like [`gatsby-plugin-react-helmet`](/plugins/gatsby-plugin-react-helmet), require you to install components from other libraries.
 

docs/docs/how-to/images-and-media/preprocessing-external-images.md

@@ -2,7 +2,7 @@
 title: Preprocessing External Images
 ---
 
-Gatsby allows powerful image processing features using the [`Sharp`](https://github.com/lovell/sharp/) library to automatically process images to be performant, with features like lazy-loading. That said, this only works if the image is a `File` node in the GraphQL layer.
+Gatsby allows powerful image processing features using the [`sharp`](https://github.com/lovell/sharp/) library to automatically process images to be performant, with features like lazy-loading. That said, this only works if the image is a `File` node in the GraphQL layer.
 
 If you want the same functionality for files that are remotely hosted online and not located in your Git repo, [`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem/) has an API called `createRemoteFileNode` to solve this.
 
@@ -24,7 +24,7 @@ featuredImgAlt: Mountains with a starry sky
 Hello World
 ```
 
-You can use a custom Frontmatter field for the URL of the featured image you want to pull down and use as part of the site.
+You can use a custom frontmatter field for the URL of the featured image you want to pull down and use as part of the site.
 
 By default, this is a string value as you haven't told Gatsby yet how to interpret it. However, you can add some code into `gatsby-node.js` to modify it.
 
@@ -43,7 +43,7 @@ exports.createSchemaCustomization = ({ actions }) => {
   createTypes(`
     type MarkdownRemark implements Node {
       frontmatter: Frontmatter
-      featuredImg: File @link(from: "featuredImg___NODE")
+      featuredImg: File @link(from: "fields.localFile")
     }
 
     type Frontmatter {
@@ -56,7 +56,7 @@ exports.createSchemaCustomization = ({ actions }) => {
 
 exports.onCreateNode = async ({
   node,
-  actions: { createNode },
+  actions: { createNode, createNodeField },
   store,
   cache,
   createNodeId,
@@ -66,7 +66,7 @@ exports.onCreateNode = async ({
     node.internal.type === "MarkdownRemark" &&
     node.frontmatter.featuredImgUrl !== null
   ) {
-    let fileNode = await createRemoteFileNode({
+    const fileNode = await createRemoteFileNode({
       url: node.frontmatter.featuredImgUrl, // string that points to the URL of the image
       parentNodeId: node.id, // id of the parent node of the fileNode you are going to create
       createNode, // helper function in gatsby-node to generate the node
@@ -75,20 +75,20 @@ exports.onCreateNode = async ({
       store, // Gatsby's Redux store
     })
 
-    // if the file was created, attach the new node to the parent node
+    // if the file was created, extend the node with "localFile"
     if (fileNode) {
-      node.featuredImg___NODE = fileNode.id
+      createNodeField({ node, name: "localFile", value: fileNode.id })
     }
   }
 }
 ```
 
 Going step by step through the code:
 
-1. Define some types for `MarkdownRemark` using the Schema Customization API. For `featuredImg`, use the `from` argument to point the `link` extension to the correct field name (with a `___NODE` suffix), [more details about foreign-key fields here](/docs/reference/graphql-data-layer/schema-customization/#foreign-key-fields). Defining a field for alternative text as `featuredImgAlt` can also improve accessibility, in addition to providing context for the image if it fails to load.
+1. Define some types for `MarkdownRemark` using the Schema Customization API. For `featuredImg`, use the `from` argument to point the `link` extension to the correct field name (the `createNodeField` extends the node with a `fields` key), [more details about foreign-key fields here](/docs/reference/graphql-data-layer/schema-customization/#foreign-key-fields). Defining a field for alternative text as `featuredImgAlt` can also improve accessibility, in addition to providing context for the image if it fails to load.
 2. Create an `onCreateNode` function so you can watch for when `MarkdownRemark` nodes are made.
 3. Use `createRemoteFileNode` by passing in the various required fields and get a reference to the file afterwards.
-4. If the Node is created, attach it as a child of the original Node. `___NODE` tells the GraphQL layer that the name before it is going to be a field on the parent Node that links to another Node. To do this, pass the `id` as the reference. Do note, this new node is now attached to the root of the `markdownRemark` node instead of the `frontmatter` field.
+4. If the Node is created, extend the node with a `localFile` field. To do this, pass the `id` as the reference. Do note, this new node is now attached to the root of the `markdownRemark` node instead of the `frontmatter` field as `fields`.
 
 And since it is a File Node, `gatsby-transformer-sharp` will pick it up and create a `childImageSharp` child Node inside this newly created Node.
 
@@ -114,17 +114,15 @@ query {
 
 ![GraphiQL with above query inserted](../../images/remote-file-node-graphiql-preview.png)
 
-You can then use `gatsby-transformer-sharp` to fill in the query for a fixed image here. For more information on transforming images using parameters and fragments, check out the [Gatsby Image API docs](/docs/reference/built-in-components/gatsby-image/).
+You can then use `gatsby-transformer-sharp` & `gatsby-plugin-image` to fill in the query for a fixed image here. For more information on transforming images using parameters and fragments, check out the ["Using Gatsby Plugin Image" guide](/docs/how-to/images-and-media/using-gatsby-plugin-image/).
 
 ```graphql
 query {
   allMarkdownRemark {
     nodes {
       featuredImg {
         childImageSharp {
-          fixed(width: 600) {
-            ...GatsbyImageSharpFixed
-          }
+          gatsbyImageData(width: 600, layout: FIXED)
         }
       }
     }
@@ -136,16 +134,18 @@ And finally, you can update the template for this blog post to include a feature
 
 ```jsx
 import React from "react"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 import { graphql } from "gatsby"
 
 const template = ({ data }) => {
   return (
     <>
       <h1>{data.markdownRemark.frontmatter.title}</h1>
       {data.markdownRemark.featuredImg && (
-        <Img
-          fixed={data.markdownRemark.featuredImg.childImageSharp.fixed}
+        <GatsbyImage
+          image={
+            data.markdownRemark.featuredImg.childImageSharp.gatsbyImageData
+          }
           alt={data.markdownRemark.frontmatter.featuredImgAlt}
         />
       )}
@@ -166,9 +166,7 @@ export const query = graphql`
       html
       featuredImg {
         childImageSharp {
-          fixed(width: 600) {
-            ...GatsbyImageSharpFixed
-          }
+          gatsbyImageData(width: 600, layout: FIXED)
         }
       }
     }

docs/docs/how-to/images-and-media/using-cloudinary-image-service.md

@@ -19,7 +19,7 @@ Dealing with images on the web has always been a problem as unoptimized images c
 Cloudinary provides a couple of amazing solutions to this problem, namely:
 
 - Remote storage and delivery of images via CDN
-- Offers a wider range of transformations than [gatsby-image](/docs/how-to/images-and-media/using-gatsby-image/).
+- Offers a wider range of transformations than [gatsby-plugin-image](/docs/how-to/images-and-media/using-gatsby-plugin-image/).
 - [Digital Asset Management](https://cloudinary.com/documentation/digital_asset_management_overview) for enterprise assets
 
 ## Gatsby-source-cloudinary

docs/docs/how-to/local-development/troubleshooting-common-errors.md

@@ -36,7 +36,7 @@ Here are some examples of plugins that require you to install more than just the
 - [gatsby-plugin-styled-components](/plugins/gatsby-plugin-styled-components/): `styled-components`, and `babel-plugin-styled-components`
 - [gatsby-plugin-sass](/plugins/gatsby-plugin-sass/): `node-sass`, or `sass`
 - [gatsby-plugin-material-ui](/plugins/gatsby-plugin-material-ui/): `@material-ui/styles`
-- [gatsby-image](/plugins/gatsby-image/): `gatsby-transformer-sharp`, and `gatsby-plugin-sharp`
+- [gatsby-plugin-image](/plugins/gatsby-plugin-image/): `gatsby-source-filesystem`, `gatsby-transformer-sharp`, and `gatsby-plugin-sharp`
 
 Rather than packaging up the other dependent libraries alongside these plugins, they can stay smaller in size when they are published and are able to rely on alternative implementations. One example is `gatsby-plugin-sass` that can use either the Node.js or Dart implementations of Sass.
 
@@ -129,7 +129,7 @@ Comparing your GraphQL query to your site's schema in `http://localhost:8000/___
 
 - neither any source plugins you are using nor your own implementation of the [`sourceNodes` API](/docs/reference/config-files/gatsby-node/#sourceNodes) are misconfigured
 
-## Errors using gatsby-image and sharp
+## Errors using gatsby-plugin-image and sharp
 
 Gatsby's image processing is broken up into different packages which need to work together to source images and transform them into different optimized versions. You might run into these errors getting them to play together nicely.
 
@@ -158,9 +158,7 @@ allMdx {
     title
     image {
       childImageSharp {
-        fluid {
-          srcSet
-        }
+        gatsbyImageData
       }
     }
   }

docs/docs/how-to/performance/improving-site-performance.md

@@ -192,13 +192,13 @@ Font optimizations are usually small, but easy performance wins.
 
 Media files are often the largest files on a site, and so can delay page load significantly while they are pulled over the network, especially if their location is not well-defined.
 
-[Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-image/) is our approach to optimizing image loading performance. It does three basic things:
+[Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-plugin-image/) is our approach to optimizing image loading performance. It does three basic things:
 
 1. It delays non-essential work for images not above the fold to avoid resource congestion.
 2. It provides a placeholder during image fetch.
 3. It minimizes image file size to reduce request roundtrip time.
 
-The `gatsby-plugin-image` documentation is fairly exhaustive, ranging from [why image optimization is important](/docs/conceptual/using-gatsby-image/), or [how to implement Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-plugin-image/), to a [Gatsby Image reference](/docs/reference/built-in-components/gatsby-image/).
+The `gatsby-plugin-image` documentation is fairly exhaustive, ranging from [why image optimization is important](/docs/conceptual/using-gatsby-image/) to [how to implement Gatsby Plugin Image](/docs/how-to/images-and-media/using-gatsby-plugin-image/).
 
 Implementing Gatsby Image is typically the bulk of image- and media-related performance optimization.
 

docs/docs/how-to/querying-data/using-gatsby-without-graphql.md

@@ -94,7 +94,7 @@ Using Gatsby's data layer provides the following benefits:
 
 Working outside of the data layer also means foregoing the optimizations provided by transformer plugins, like:
 
-- [`gatsby-image`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image) (speedy optimized images),
+- [`gatsby-plugin-image`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-image) (speedy optimized images),
 - [`gatsby-transformer-sharp`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-sharp) (provides queryable fields for processing your images in a variety of ways including resizing, cropping, and creating responsive images),
 - ... the whole Gatsby ecosystem of official and community-created [transformer plugins](/plugins/?=transformer).
 

docs/docs/recipes/querying-data.md

@@ -429,7 +429,6 @@ Fragments can be nested inside other fragments, and multiple fragments can be us
 
 - [Example repo using fragments](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-fragments)
 - [Gatsby GraphQL reference for fragments](/docs/graphql-reference/#fragments)
-- [Gatsby image fragments](/docs/reference/built-in-components/gatsby-image/#image-query-fragments)
 - [Example repo with co-located data](https://github.com/gatsbyjs/gatsby/tree/master/examples/gatsbygram)
 
 ## Querying data client-side with `fetch`