gatsbyjs · Sep 8, 2022 · Sep 8, 2022 · Sep 8, 2022 · Sep 8, 2022 · Sep 9, 2022
Showing 387 changed files with 11,111 additions and 7,886 deletions.
diff --git a/docs/docs/cheat-sheet.md b/docs/docs/cheat-sheet.md
@@ -104,16 +104,6 @@ Get the PDF: <a href="/gatsby-cheat-sheet.pdf" download>gatsby-cheat-sheet.pdf</
           </p>
         </td>
       </tr>
-      <tr>
-        <td>
-          <p>Quick Reference Guide</p>
-        </td>
-        <td>
-          <p>
-            <a href="https://gatsby.dev/recipes">gatsby.dev/recipes</a>
-          </p>
-        </td>
-      </tr>
       <tr>
         <td>
           <p>Adding Images</p>

diff --git a/docs/docs/conceptual/react-hydration.md b/docs/docs/conceptual/react-hydration.md
@@ -26,7 +26,7 @@ This means that the browser can "pick up" where the server left off with the con
 
 ## Transfer rendering to the React reconciler
 
-After ReactDOM hydrates the content, the [React reconciler](https://reactjs.org/docs/reconciliation.html) can take over and [diff](https://en.m.wikipedia.org/wiki/Diff) the tree of elements. It then becomes responsible for making updates in the UI based on changing state or props.
+After ReactDOM hydrates the content, the [React reconciler](https://reactjs.org/docs/reconciliation.html) can take over and [diff](https://en.wikipedia.org/wiki/Diff) the tree of elements. It then becomes responsible for making updates in the UI based on changing state or props.
 
 ## Additional resources
 

diff --git a/docs/docs/conceptual/rendering-options.md b/docs/docs/conceptual/rendering-options.md
@@ -72,7 +72,7 @@ It implies a different deployment model and requires backend infrastructure. But
 
 SSG, DSG, and client-side rendering can handle a vast majority of use cases in web development. But there is a small niche when you may still need to generate HTML on-the-fly. That's when you'll need Server-Side Rendering.
 
-Server-Side Rendering is a method of content rendering in which each web page is served to a site visitor at runtime, meaning that a portion of the build process happens on each page request. Because the content is rendering during runtime, visitors will always get the latest version of content directly from the server—though they may have to wait a few seconds for it display.
+Server-Side Rendering is a method of content rendering in which each web page is served to a site visitor at runtime, meaning that a portion of the build process happens on each page request. Because the content is rendering during runtime, visitors will always get the latest version of content directly from the server—though they may have to wait a few seconds for it to display.
 
 For example, imagine you are building a site with user reviews. You want those reviews to be immediately indexed by search engines as soon as they are posted, so client-side rendering is not an option.
 

diff --git a/docs/docs/debugging-the-build-process.md b/docs/docs/debugging-the-build-process.md
@@ -95,6 +95,10 @@ We won't go in depth here about how to debug in VS Code - for that you can check
       "request": "launch",
       "program": "${workspaceRoot}/node_modules/.bin/gatsby",
       "args": ["develop"],
+      "env": {
+        "PARCEL_WORKERS": "0",
+        "GATSBY_CPU_COUNT": "1",
+      },
       "runtimeArgs": ["--nolazy"],
       "console": "integratedTerminal"
     },
@@ -104,6 +108,10 @@ We won't go in depth here about how to debug in VS Code - for that you can check
       "request": "launch",
       "program": "${workspaceRoot}/node_modules/.bin/gatsby",
       "args": ["build"],
+      "env": {
+        "PARCEL_WORKERS": "0",
+        "GATSBY_CPU_COUNT": "1",
+      },
       "runtimeArgs": ["--nolazy"],
       "console": "integratedTerminal"
     }
@@ -126,6 +134,10 @@ We won't go in depth here about how to debug in VS Code - for that you can check
         "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
       },
       "args": ["develop"],
+      "env": {
+        "PARCEL_WORKERS": "0",
+        "GATSBY_CPU_COUNT": "1",
+      },
       "runtimeArgs": ["--nolazy"],
       "console": "integratedTerminal"
     },
@@ -138,6 +150,10 @@ We won't go in depth here about how to debug in VS Code - for that you can check
         "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
       },
       "args": ["build"],
+      "env": {
+        "PARCEL_WORKERS": "0",
+        "GATSBY_CPU_COUNT": "1",
+      },
       "runtimeArgs": ["--nolazy"],
       "console": "integratedTerminal"
     }

diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md
@@ -296,6 +296,10 @@ A code library (written with [JavaScript](#javascript)) for building user interf
 
 A parser to translate [Markdown](#markdown) to other formats like [HTML](#html) or [React](#react) code.
 
+### Run Script
+
+An executable command defined in the `scripts` property of your `package.json` file. See [npm](https://docs.npmjs.com/cli/v8/using-npm/scripts) and [yarn](https://classic.yarnpkg.com/lang/en/docs/cli/run/) run script documentation for more information.
+
 ### Runtime
 
 Runtime is when a program is running (or being executable); it can refer to a few things. [Node.js](#nodejs) is a [server-side](#server-side) runtime that executes JavaScript code. [Client-side JavaScript](#client-side), on the other hand, refers to the browser runtime where traditional JavaScript code executes. Gatsby compiles your site at [build time](#build) and [rehydrates with a React runtime](#hydration) to provide a fast, interactive, and dynamic user experience.

diff --git a/docs/docs/how-to/cloud/deploying-to-fastly.md b/docs/docs/how-to/cloud/deploying-to-fastly.md
@@ -0,0 +1,62 @@
+---
+title: "Deploying to Fastly on Gatsby Cloud"
+description: "Learn how to deploy your Gatsby Cloud site to Fastly"
+---
+
+Gatsby Cloud is a performant cloud infrastructure for building your Gatsby site. Even better, it integrates with Content Delivery Networks (CDNs) like [Fastly](https://www.fastly.com/), so you can build and deploy your site seamlessly.
+
+## Prerequisites
+
+This guide assumes you already have:
+
+- A Fastly account
+- A site created on Gatsby Cloud
+
+You can use either of the following site creation options if you don't have one already:
+
+- [Create a Site from a Template](/docs/how-to/cloud/create-site-from-template)
+- [Create a Site from a Repository](/docs/how-to/cloud/create-site-from-repository)
+
+## Setting up a hosting integration
+
+Once your site is available inside Gatsby Cloud, you can navigate to the "Site Settings" tab.
+
+Inside the "Site Settings" select **"Hosting"** and scroll down to the Fastly logo. Click the **"Connect"** button to the right of that logo:
+
+![Fastly hosting option in Gatsby Cloud](../../images/fastly-logo.png)
+
+## Creating a deployment target
+
+Gatsby Cloud autoconfigures Fastly for you; all it needs is an API Token!
+
+To generate the token, you need to create a Fastly account. Once authenticated, navigate to your **"Account"**. Under your "Personal Profile" select **"Personal API Tokens"** and press the **"Create Token"** button.
+
+For Service Access, specify the service you want the API token to be able to control or "All Services." For Scope, specify **"Global API access."** Global API access is necessary because our Fastly integration needs this to write custom VCL.
+
+Once you create the token, be sure to copy it down as Fastly will not provide it to you again.
+
+On the "Fastly Integration" screen, you'll be prompted for four pieces of information. Other than the API Token, these items do not need to be pre-configured in Fastly. Gatsby Cloud will create and configure the deployment target for you.
+
+- API Token: This is what you previously created inside Fastly.
+- Service Name: Choose whichever name you like so long as it does not conflict with existing Fastly services under your account.
+- Hostname: This should match your intended domain name.
+- Force TLS/SSL: Use this setting to enable your deployed site to force TLS/SSL. This is off by default.
+
+Wait for your build to complete. If you navigate to your Fastly dashboard, you should see the new service. Note that you may need to refresh the page first. Your service should now be configured with a Host and Domain, and it will be Active.
+
+Navigate to your new Fastly service by clicking on the “version” linked from the dashboard. On this screen, it will list your domains; notice the “Test domain” button. Click on this to view your site. If you’re ready to route traffic to your site, [configure your DNS settings in Fastly](https://docs.fastly.com/en/guides/adding-cname-records#updating-the-cname-record-with-your-dns-provider).
+
+## Setting up HTTPS
+
+You may also want to configure HTTPS for your site. You can follow the instructions provided by Fastly to set this up. This step requires Fastly to verify your domain ownership and may take up to an hour. This requires a paid Fastly account.
+
+Once the certificate is generated, you’ll need to [configure your DNS records to serve HTTPS traffic](https://docs.fastly.com/en/guides/serving-https-traffic-using-fastly-managed-certificates#pointing-dns-to-serve-https-traffic).
+
+HTTPS Configuration is considered separate from your Service configuration and therefore is not subject to the [overwrite rules](https://support.gatsbyjs.com/hc/en-us/articles/360053098873-Deploying-to-Fastly#i-want-to-configure-additional-settings-inside-fastly-can-i-do-that).
+
+## Finishing Up
+
+And that’s it! Your site is now set up to build and deploy. Gatsby Cloud will handle everything for you. Note that you can only have one hosting integration. If you choose to configure another provider, that will override your existing Fastly integration. A few things to note:
+
+- Fastly limits users to 10 services. If your Gatsby Cloud integration sends you over that limit it will not appear in Fastly.
+- At this time the configuration is reset each time your site is built. Additional custom configurations inside Fastly will be overridden.
diff --git a/docs/docs/how-to/cloud/managing-invoices-and-payments.md b/docs/docs/how-to/cloud/managing-invoices-and-payments.md
@@ -0,0 +1,57 @@
+---
+title: "Managing Invoices and Payments"
+description: "Learn how to manage your invoices and billing data within Gatsby Cloud"
+---
+
+You can manage invoices and payments for your organization directly from the organization dashboard. This includes:
+
+- Updating your payment method (for subscriptions paid by card only).
+- Viewing your billing portal (to edit billing info and review history).
+
+To access these options, navigate to **"Workspace Settings."**
+
+![Gatsby Cloud workspace settings tab](../../images/workspace-settings-tab.png)
+
+## Update your payment information
+
+Under the "Payment method" section, select **"Update payment method."**
+
+![Update payment method button](../../images//update-payment-method.png)
+
+Next, enter your card information and click the **"Update payment method"** button to complete your changes.
+
+![Credit card details screen](../../images/credit-card-details-screen.png)
+
+## View your billing portal
+
+From your billing portal, you can access everything related to your subscription. To view the billing portal, click the **"Visit Portal"** button under "Payment history".
+
+![Visit portal button](../../images/visit-portal.png)
+
+The portal allows you to:
+
+1. Update billing information such as your email, address, phone, tax ID, etc.
+1. View and download recent invoices and receipts.
+1. Pay open invoices manually.
+
+![Billing portal screen](../../images/billing-portal-screen.png)
+
+### Update billing information
+
+To update billing information, select **"Update information"**. From there you can enter your information, then click **"Save"** to confirm the changes.
+
+![Update billing information screen](../../images/billing-information-screen.png)
+
+### View your invoice history
+
+Under the "Invoice History" section, you can select the date for the invoice to view it. Open invoices will be labeled as "Open". Older invoices can be retrieved by clicking **"View more"**.
+
+![Historical invoices in payment portal](../../images/invoice-history-section.png)
+
+### Pay open invoices
+
+When viewing an invoice, a separate window will open where you can pay (if unpaid). **"Click View invoice"** details to view details. Click the document icon to download the invoice.
+
+![Portal to pay open invoices in Gatsby Cloud](../../images/invoice-payment-portal.png)
+
+After an invoice is paid, you'll be able to download a receipt.
diff --git a/docs/docs/how-to/cloud/working-with-redirects-and-rewrites.md b/docs/docs/how-to/cloud/working-with-redirects-and-rewrites.md
@@ -7,18 +7,17 @@ description: "Learn how to leverage redirects, rewrites, and reverse proxies in
 
 Redirects are settings in the network layer that allow you to route traffic from one url path to another with little to no disruption.
 
-For instance, while rebuilding your cooking blog, you might want to move all of your recipes from their old path of blog/recipes to a new path of recipes. To make sure that all the existing links to your recipes still work, you would need a way to redirect your users from blog/recipes/mouthwatering-lasagna to recipes/mouthwatering-lasagna. No one wants to lose access to such a, well, mouthwatering recipe.
+For instance, while rebuilding your cooking blog, you might want to move all of your recipes from their old path of `blog/recipes` to a new path of recipes. To make sure that all the existing links to your recipes still work, you would need a way to redirect your users from `blog/recipes/mouthwatering-lasagna` to `recipes/mouthwatering-lasagna`. No one wants to lose access to such a, well, mouthwatering recipe.
 
 ## Prerequisites
 
-1. In order to use redirects, you must include the gatsby-plugin-gatsby-cloud in your project.
-1. If your Gatsby project doesn't already have a gatsby-node.js file, add one at that top level of your project (alongside your gatsby-config.js).
+- If your Gatsby project doesn't already have a `gatsby-node.js` file, add one at that top level of your project (alongside your `gatsby-config.js`).
 
 ## Directions
 
 1. In `gatsby-node.js`, export the `createPages` method and use the `createRedirects` action to generate any redirects that you want to add. Here's an example showing the lasagna recipe above:
 
-```javascript:title=gatsby-node.js
+```js:title=gatsby-node.js
 exports.createPages = async ({ graphql, actions }) => {
   const { createRedirect } = actions
 
@@ -29,12 +28,13 @@ exports.createPages = async ({ graphql, actions }) => {
 }
 ```
 
-2 . Once you've made these changes and deployed the changes through Gatsby Cloud, you should be able to test your changes once the CDN cache has been purged.
+2. Once you've made these changes and deployed the changes through Gatsby Cloud, you should be able to test your changes once the CDN cache has been purged.
 
 ## Advanced use cases
 
-Wildcard Path Redirects
-In our example above, you've explicitly redirected one of your recipe urls, and after adding a few others, you realize that you won't have time to get all the old urls. So you decide that any other url that uses your old path `blog/recipes/*` should just be redirected to the new `/recipes` path. Here's how you'd handle that:
+### Wildcard Path Redirects
+
+In the example above, you've explicitly redirected one of your recipe urls, and after adding a few others, you realize that you won't have time to get all the old urls. So you decide that any other url that uses your old path `blog/recipes/*` should just be redirected to the new `/recipes` path. Here's how you'd handle that:
 
 ```js:title=gatsby-node.js
 exports.createPages = async ({ graphql, actions }) => {
@@ -56,7 +56,7 @@ exports.createPages = async ({ graphql, actions }) => {
 
 ### Splat redirects
 
-Extending our wildcard example above, you may have a high degree confidence that all of your old recipes that lived at `/blog/recipes` have been migrated to `/recipe`. In that case, you can use a `*` marker in the toPath to indicate that you want the redirect to include everything after the base url. In that case `/blog/recipes/any-awesome-url-path` would become `/recipes/any-awesome-url-path`. Here's how you'd handle that:
+Extending the wildcard example above, you may have a high degree confidence that all of your old recipes that lived at `/blog/recipes` have been migrated to `/recipe`. In that case, you can use a `*` marker in the toPath to indicate that you want the redirect to include everything after the base url. In that case `/blog/recipes/any-awesome-url-path` would become `/recipes/any-awesome-url-path`. Here's how you'd handle that:
 
 ```js:title=gatsby-node.js
 exports.createPages = async ({ graphql, actions }) => {
@@ -74,7 +74,6 @@ exports.createPages = async ({ graphql, actions }) => {
 If your site has multi-national pages, Gatsby provides the ability of redirecting based in the country that the request is made. We use a Two-letter country code based on the regional indicator symbol standard to define the country you might want to redirect. If you would like a certain page redirected to its language equivalent you can use the conditions: `{ country: ""}` key in `createRedirect`. `country` can either be a string or an array of strings.
 
 ```js:title=gatsby-node.js
-// gatsby-node.js
 createRedirect({
   fromPath: `/blog`,
   toPath: `/italian/blog`,

diff --git a/docs/docs/how-to/images-and-media/importing-assets-into-files.md b/docs/docs/how-to/images-and-media/importing-assets-into-files.md
@@ -50,7 +50,7 @@ Please be advised that this is also a custom feature of webpack.
 
 ### Additional resources
 
-- More on [using an imported font](/docs/recipes/styling-css#adding-a-local-font).
+- More on [using an imported font](/docs/how-to/styling/using-local-fonts/).
 
 ## Querying for a `File` in GraphQL using gatsby-source-filesystem
 

diff --git a/docs/docs/how-to/previews-deploys-hosting/deploying-to-s3-cloudfront.md b/docs/docs/how-to/previews-deploys-hosting/deploying-to-s3-cloudfront.md
@@ -128,7 +128,6 @@ If you need the full address elsewhere in your config, you can access it via `si
 ## References:
 
 - [Gatsby on AWS, the right way](https://blog.joshwalsh.me/aws-gatsby/)
-- [Using CloudFront with gatsby-plugin-s3](https://github.com/jariz/gatsby-plugin-s3/blob/master/recipes/with-cloudfront.md)
 - [Publishing Your Next Gatsby Site to AWS With AWS Amplify](/blog/2018-08-24-gatsby-aws-hosting/)
 - [Escalade Sports: From $5000 to $5/month in Hosting With Gatsby](/blog/2018-06-14-escalade-sports-from-5000-to-5-in-hosting/)
 - [Deploy your Gatsby.js Site to AWS S3](https://github.com/bennewton999/blog2018/blob/master/content/posts/11-24-2017/index.md)
diff --git a/docs/docs/how-to/routing/layout-components.md b/docs/docs/how-to/routing/layout-components.md
@@ -4,7 +4,7 @@ title: Layout Components
 
 In this guide, you'll learn Gatsby's approach to layouts, how to create and use layout components, and how to prevent layout components from unmounting.
 
-## Gatsby's approach to layouts
+## Introduction
 
 Gatsby does not, by default, automatically apply layouts to pages (there are, however, ways to do so which will be covered in a later section). Instead, Gatsby follows React's compositional model of importing and using components. This makes it possible to create multiple levels of layouts, e.g. a global header and footer, and then on some pages, a sidebar menu. It also makes it possible to pass data between layout and page components.
 
@@ -59,9 +59,7 @@ Alternatively, you can prevent your layout component from unmounting by using [g
 
 ## Other resources
 
-- [Creating nested layout components in Gatsby](/docs/tutorial/part-3/)
-- [Life after layouts in Gatsby V2](/blog/2018-06-08-life-after-layouts/)
-- [Migrating from v1 to v2](/docs/reference/release-notes/migrating-from-v1-to-v2/#remove-or-refactor-layout-components)
 - [gatsby-plugin-layout](/plugins/gatsby-plugin-layout/)
+- [Defining a layout with MDX](/docs/how-to/routing/mdx/#defining-a-layout)
 - [wrapPageElement Browser API](/docs/reference/config-files/gatsby-browser/#wrapPageElement)
 - [wrapPageElement SSR API](/docs/reference/config-files/gatsby-ssr/#wrapPageElement)
diff --git a/docs/docs/how-to/routing/mdx.md b/docs/docs/how-to/routing/mdx.md
@@ -319,7 +319,7 @@ For further reading, check out the [createPages](/docs/reference/config-files/ga
 
 ### Make a layout template for your posts
 
-You can create a file called `posts.jsx` in `src/templates` - this component will be rendered as the template for all posts. Now, create a component that accepts your compiled MDX content via `children` and uses GraphQL `data` to show the title. **Please note:** The query must **not** have a name. This way Gatsby can create a unique one internally and the `__contentFilePath` in the next step will work correctly.
+You can create a file called `posts.jsx` in `src/templates` - this component will be rendered as the template for all posts. Now, create a component that accepts your compiled MDX content via `children` and uses GraphQL `data` to show the title:
 
 ```jsx:title=src/templates/posts.jsx
 import React from "react"