Merge branch 'master' into feat/server-cache-headers

* master: (23 commits) fix(gatsby-source-wordpress): Prevent "EADDRINUSE: address already in use 127.0.0.1" error (gatsbyjs#31713) feat(gatsby-source-wordpress: architecture.md (gatsbyjs#31537) chore(deps): update dependency @babel/node to ^7.14.2 (gatsbyjs#31690) chore(deps): update babel monorepo (gatsbyjs#31143) fix(gatsby): merge resolveType when merging abstract types (gatsbyjs#31710) chore(release): Publish next fix(gatsby): Correct config for svgo plugins whitelist chore: Add translations and validations to Contentful test (gatsbyjs#31533) chore(docs): Correct nginx spelling (gatsbyjs#31651) chore(docs): Update Jest instructions for v27 (gatsbyjs#31649) Fix typo in adding-search.md (gatsbyjs#31639) Fix typos in improving-build-performance.md (gatsbyjs#31640) feat(gatsby-source-wordpress): Fix false positive error if the URL and the responsePath are the same (gatsbyjs#31612) Fixed syntax error in example (gatsbyjs#31636) fix(contentful): pass reporter to retry function (gatsbyjs#31608) chore: Properly typecheck `gatsby` (gatsbyjs#31519) fix(gatsby-source-contentful): fix progress bar (gatsbyjs#31467) fix(gatsby-plugin-gatsby-cloud): fix cloud being bundled (gatsbyjs#31604) chore(gatsby-source-wordpress): Fix typos (gatsbyjs#31600) chore(docs): Add title to release notes (gatsbyjs#31595) ...
moonmeister · Jun 1, 2021 · d805f3f · d805f3f
2 parents 571e74c + 58e8503
commit d805f3f
Show file tree

Hide file tree

Showing 335 changed files with 4,000 additions and 1,588 deletions.
diff --git a/docs/docs/how-to/adding-common-features/adding-an-rss-feed.md b/docs/docs/how-to/adding-common-features/adding-an-rss-feed.md
@@ -135,7 +135,24 @@ The `output` field in your feed object allows you to customize the filename for
 
 By default, feed is referenced in every page. You can customize this behavior by providing an extra field `match` of type `string`. This string will be used to build a `RegExp`, and this regular expression will be used to test the `pathname` of current page. Only pages that satisfied the regular expression will have feed reference included.
 
-To see your feed in action, run `gatsby build && gatsby serve` and you can then inspect the content and URLs in your RSS file at `http://localhost:9000/rss.xml`.
+If your site has none-English link (or none-ASCII link), you may need to encode URI in advance. You can use the build-in function `encodeURI(string)` for your link:
+
+```js:title=gatsby-config.js
+serialize: ({ query: { site, allMarkdownRemark } }) => {
+  return allMarkdownRemark.edges.map(edge => {
+    return Object.assign({}, edge.node.frontmatter, {
+      description: edge.node.excerpt,
+      date: edge.node.frontmatter.date,
+      // highlight-next-line
+      url: encodeURI(site.siteMetadata.siteUrl + edge.node.fields.slug),
+      guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
+      custom_elements: [{ "content:encoded": edge.node.html }],
+    })
+  })
+},
+```
+
+To see your feed in action, run `gatsby build && gatsby serve` and you can then inspect the content and URLs in your RSS file at `http://localhost:9000/rss.xml`. You can checkout the validation of your RSS feed on [W3C Feed Validation Service](https://validator.w3.org/feed/ "W3C Feed Validation Service").
 
 > NOTE: if your blog has custom permalinks, such as links with or without dates in them, you may need to [customize `gatsby-node.js`](https://github.com/gatsbyjs/gatsby-starter-blog/blob/master/gatsby-node.js#L57) to output the correct URLs in your RSS feed. [Get in touch with us](/contributing/how-to-contribute/) if you need any help!
 

diff --git a/docs/docs/how-to/adding-common-features/adding-search.md b/docs/docs/how-to/adding-common-features/adding-search.md
@@ -9,7 +9,7 @@ There are three required components for adding search to your Gatsby website: th
 | Search Component  | Description                                                                                                                                                                                                                                                              |
 | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | **Search index**  | The search index is a copy of your data stored in a search-friendly format. An index is for optimizing speed and performance when executing a search query. Without an index, every search would need to scan every page in your site—which quickly becomes inefficient. |
-| **Search engine** | The search engine indexes your content, takes a search query, runs it through theindex, and returns any matching documents. Search engines can be hosted services (like Algolia) or open-source that you can self-host (like Elastic)                                    |
+| **Search engine** | The search engine indexes your content, takes a search query, runs it through the index, and returns any matching documents. Search engines can be hosted services (like Algolia) or open-source that you can self-host (like Elastic)                                   |
 | **Search UI**     | A UI component on your site that allows users to write search queries and view the results of each query. Some search providers provide out of the box React components that you can drop into Gatsby sites.                                                             |  |
 
 ## Adding search to your site

diff --git a/docs/docs/how-to/performance/improving-build-performance.md b/docs/docs/how-to/performance/improving-build-performance.md
@@ -23,15 +23,15 @@ The Gatsby team is constantly updating plugins to use less memory and run faster
 
 #### Audit plugin configuration and queries and remove unused ones
 
-As your site's codebaes evolves, you might acccumulate plugins that are not longer needed. Try looking through your `gatsby-config.js` to make sure you're using all the plugins you have installed. In addition, you may want to look through queries to make sure you're using them (and the fields in each query).
+As your site's codebase evolves, you might accumulate plugins that are not longer needed. Try looking through your `gatsby-config.js` to make sure you're using all the plugins you have installed. In addition, you may want to look through queries to make sure you're using them (and the fields in each query).
 
 #### Make sure you're not clearing the cache between builds
 
 In the past, Gatsby's cache was less reliable than it is now. As a result, some sites started clearing the cache between builds. With improvements we've made, that should not be necessary anymore, so if your build script says something like "gatsby clean && gatsby build" you may want to change it to just run gatsby build.
 
 #### Run builds on a machine with more and higher-powered CPUs
 
-The better the underlying hardware / VM / container you have, the faster your builds will go. As an anecdote, a Gatsby core team developer ran the same build on two machines they owned -- a five-year-old low-powered Windows machine and a new Macbook Pro -- and found that the latter gave a 30x build speed improvement.
+The better the underlying hardware / VM / container you have, the faster your builds will go. As an anecdote, a Gatsby core team developer ran the same build on two machines they owned -- a five-year-old low-powered Windows machine and a new MacBook Pro -- and found that the latter gave a 30x build speed improvement.
 
 #### Use Gatsby Cloud
 

diff --git a/docs/docs/how-to/routing/client-only-routes-and-user-authentication.md b/docs/docs/how-to/routing/client-only-routes-and-user-authentication.md
@@ -119,7 +119,7 @@ Popular hosting services like Gatsby Cloud, Netlify, and Vercel have plugins tha
 - [Netlify](https://www.gatsbyjs.com/plugins/gatsby-plugin-netlify/?=netlif)
 - Vercel automatically adds its Gatsby plugin.
 
-### Self-hosting with Ngninx and Apache
+### Self-hosting with NGINX and Apache
 
 Your server configuration should handle `GET` requests to `/app/*` e.g. `/app/why-gatsby-is-awesome` with `/app/index.html` and let the client handle the rendering of the route with the matching path. It is important to note that the response code should be a **200** (an OK) and not a **301** (a redirect). This can be done with NGINX using [`try_files`](https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/#trying-several-options), or an [equivalent directive](https://serverfault.com/questions/290784/what-is-apaches-equivalent-of-nginxs-try-files) if using Apache.
 

diff --git a/docs/docs/how-to/testing/unit-testing.md b/docs/docs/how-to/testing/unit-testing.md
@@ -65,9 +65,12 @@ const babelOptions = {
   presets: ["babel-preset-gatsby"],
 }
 
-module.exports = require("babel-jest").createTransformer(babelOptions)
+module.exports = require("babel-jest").default.createTransformer(babelOptions)
 ```
 
+> **Note:** If you're using Jest 26.6.3 or below, the last line has to be changed to
+> `module.exports = require("babel-jest").createTransformer(babelOptions)`
+
 - The next option is `moduleNameMapper`. This
   section works a bit like webpack rules and tells Jest how to handle imports.
   You are mainly concerned here with mocking static file imports, which Jest can't

diff --git a/docs/docs/reference/release-notes/v2.26/index.md b/docs/docs/reference/release-notes/v2.26/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2020-11-12"
 version: "2.26.0"
+title: "v2.26 Release Notes"
 ---
 
 # [v2.26](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.26.0-next.0...gatsby@2.26.0) (November 2020)

diff --git a/docs/docs/reference/release-notes/v2.27/index.md b/docs/docs/reference/release-notes/v2.27/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2020-11-19"
 version: "2.27.0"
+title: "v2.27 Release Notes"
 ---
 
 # [v2.27](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.27.0-next.0...gatsby@2.27.0) (November 2020 #2)

diff --git a/docs/docs/reference/release-notes/v2.28/index.md b/docs/docs/reference/release-notes/v2.28/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2020-12-01"
 version: "2.28.0"
+title: "v2.28 Release Notes"
 ---
 
 # [v2.28](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.28.0-next.0...gatsby@2.28.0) (December 2020 #1)

diff --git a/docs/docs/reference/release-notes/v2.29/index.md b/docs/docs/reference/release-notes/v2.29/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2020-12-15"
 version: "2.29.0"
+title: "v2.29 Release Notes"
 ---
 
 # [v2.29](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.29.0-next.0...gatsby@2.29.0) (December 2020 #2)

diff --git a/docs/docs/reference/release-notes/v2.30/index.md b/docs/docs/reference/release-notes/v2.30/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-01-05"
 version: "2.30.0"
+title: "v2.30 Release Notes"
 ---
 
 # [v2.30](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.30.0-next.0...gatsby@2.30.0) (January 2021 #1)

diff --git a/docs/docs/reference/release-notes/v2.31/index.md b/docs/docs/reference/release-notes/v2.31/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-01-19"
 version: "2.31.0"
+title: "v2.31 Release Notes"
 ---
 
 # [v2.31](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.31.0-next.0...gatsby@2.31.0) (January 2021 #2)

diff --git a/docs/docs/reference/release-notes/v2.32/index.md b/docs/docs/reference/release-notes/v2.32/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-02-02"
 version: "2.32.0"
+title: "v2.32 Release Notes"
 ---
 
 # [v2.32](https://github.com/gatsbyjs/gatsby/compare/gatsby@2.32.0-next.0...gatsby@2.32.0) (February 2021 #1)

diff --git a/docs/docs/reference/release-notes/v3.0/index.md b/docs/docs/reference/release-notes/v3.0/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-03-02"
 version: "3.0.0"
+title: "v3 Release Notes"
 ---
 
 # v3.0 (March 2021 #1)

diff --git a/docs/docs/reference/release-notes/v3.1/index.md b/docs/docs/reference/release-notes/v3.1/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-03-16"
 version: "3.1.0"
+title: "v3.1 Release Notes"
 ---
 
 # [v3.1](https://github.com/gatsbyjs/gatsby/compare/gatsby@3.1.0-next.0...gatsby@3.1.0) (March 2021 #2)

diff --git a/docs/docs/reference/release-notes/v3.2/index.md b/docs/docs/reference/release-notes/v3.2/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-03-30"
 version: "3.2.0"
+title: "v3.2 Release Notes"
 ---
 
 # [v3.2](https://github.com/gatsbyjs/gatsby/compare/gatsby@3.2.0-next.0...gatsby@3.2.0) (March 2021 #3)

diff --git a/docs/docs/reference/release-notes/v3.3/index.md b/docs/docs/reference/release-notes/v3.3/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-04-13"
 version: "3.3.0"
+title: "v3.3 Release Notes"
 ---
 
 # [v3.3](https://github.com/gatsbyjs/gatsby/compare/gatsby@3.3.0...gatsby@3.3.0) (April 2021 #1)

diff --git a/docs/docs/reference/release-notes/v3.4/index.md b/docs/docs/reference/release-notes/v3.4/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-04-27"
 version: "3.4.0"
+title: "v3.4 Release Notes"
 ---
 
 # [v3.4](https://github.com/gatsbyjs/gatsby/compare/gatsby@3.4.0-next.0...gatsby@3.4.0) (April 2021 #2)

diff --git a/docs/docs/reference/release-notes/v3.5/index.md b/docs/docs/reference/release-notes/v3.5/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-05-11"
 version: "3.5.0"
+title: "v3.5 Release Notes"
 ---
 
 # [v3.5](https://github.com/gatsbyjs/gatsby/compare/gatsby@3.5.0-next.0...gatsby@3.5.0) (May 2021 #1)

diff --git a/docs/docs/reference/release-notes/v3.6/index.md b/docs/docs/reference/release-notes/v3.6/index.md
@@ -1,6 +1,7 @@
 ---
 date: "2021-05-25"
 version: "3.6.0"
+title: "v3.6 Release Notes"
 ---
 
 # [v3.6](https://github.com/gatsbyjs/gatsby/compare/gatsby@3.6.0-next.0...gatsby@3.6.0) (May 2021 #2)

diff --git a/docs/docs/tutorial/part-0/index.mdx b/docs/docs/tutorial/part-0/index.mdx
@@ -3,9 +3,9 @@ title: Set Up Your Development Environment
 tableOfContentsDepth: 2
 ---
 
-import { Announcement, Notification } from 'gatsby-interface'
+import { Announcement, Notification, LinkButton } from 'gatsby-interface'
 import Collapsible from '@components/collapsible'
-import { MdInfo } from 'react-icons/md'
+import { MdInfo, MdArrowForward } from 'react-icons/md'
 
 <Notification
   Icon={MdInfo}
@@ -331,10 +331,6 @@ In this Tutorial, you will deploy your site using Gatsby Cloud. To use Gatsby Cl
 
 Now that you have all the knowledge and tools you'll need, you're ready for the Tutorial!
 
-### What's coming next?
-
-In the next part, you'll create your first Gatsby site and deploy it online for everyone to see.
-
 <Announcement style={{marginBottom: "1.5rem"}}>
 
 **Share Your Feedback!**
@@ -344,3 +340,15 @@ Our goal is for this Tutorial to be helpful and easy to follow. We'd love to hea
 Use the "Was this doc helpful to you?" form at the bottom of this page to let us know what worked well and what we can improve.
 
 </Announcement>
+
+### What's coming next?
+
+In Part 1 of the Tutorial, you'll create your first Gatsby site and deploy it online for everyone to see.
+
+<LinkButton
+  to="/docs/tutorial/part-1"
+  rightIcon={<MdArrowForward />}
+  variant="SECONDARY"
+>
+  Continue to Part 1
+</LinkButton>
diff --git a/docs/docs/tutorial/part-1/index.mdx b/docs/docs/tutorial/part-1/index.mdx
@@ -2,9 +2,9 @@
 title: Create and Deploy Your First Gatsby Site
 ---
 
-import { Announcement, Notification } from 'gatsby-interface'
+import { Announcement, Notification, LinkButton } from 'gatsby-interface'
 import Collapsible from '@components/collapsible'
-import { MdInfo } from 'react-icons/md'
+import { MdInfo, MdArrowForward } from 'react-icons/md'
 
 <Notification
   Icon={MdInfo}
@@ -304,10 +304,6 @@ First, you write the code for your Gatsby site from your computer. When you're r
 
 </Collapsible>
 
-### What's coming next?
-
-Now that you have a default Gatsby site up and running, it's time to make it your own. In the next section, you'll learn how to use React to customize the design and contents of your site.
-
 <Announcement style={{marginBottom: "1.5rem"}}>
 
 **Share Your Feedback!**
@@ -317,3 +313,15 @@ Our goal is for this Tutorial to be helpful and easy to follow. We'd love to hea
 Use the "Was this doc helpful to you?" form at the bottom of this page to let us know what worked well and what we can improve.
 
 </Announcement>
+
+### What's coming next?
+
+Now that you have a default Gatsby site up and running, it's time to make it your own. In Part 2 of the Tutorial, you'll learn how to use React to customize the design and contents of your site.
+
+<LinkButton
+  to="/docs/tutorial/part-2"
+  rightIcon={<MdArrowForward />}
+  variant="SECONDARY"
+>
+  Continue to Part 2
+</LinkButton>
diff --git a/docs/docs/tutorial/part-2/index.mdx b/docs/docs/tutorial/part-2/index.mdx
@@ -2,9 +2,9 @@
 title: Use and Style React Components
 ---
 
-import { Announcement, Notification } from 'gatsby-interface'
+import { Announcement, Notification, LinkButton } from 'gatsby-interface'
 import Collapsible from '@components/collapsible'
-import { MdInfo } from 'react-icons/md'
+import { MdInfo, MdArrowForward } from 'react-icons/md'
 
 <Notification
   Icon={MdInfo}
@@ -791,11 +791,7 @@ Once your changes have been pushed to GitHub, Gatsby Cloud should notice the upd
 * **Building-block components** are smaller reusable parts of your UI. They can be imported into page components or other building block components.
 * You can import **pre-built** components (like `Link`) from other packages, or you can write your own **custom** components from scratch (like `Layout`).
 * You can use **props** to change how a component renders. You can define your own props when you build a component. React also has some built-in props, like `children` and `className`.
-* Gatsby isn't opinionated about what styling approach you want to use, but it works with **CSS modules** by default.
-
-### What's coming next?
-
-In the next section, you'll learn about how to use Gatsby plugins to add more pre-built functionality to your site.
+* Gatsby isn't opinionated about what styling approach you want to use, but it works with **CSS Modules** by default.
 
 <Announcement style={{marginBottom: "1.5rem"}}>
 
@@ -807,24 +803,14 @@ Use the "Was this doc helpful to you?" form at the bottom of this page to let us
 
 </Announcement>
 
-<Notification
-  Icon={MdInfo}
-  tone="WARNING"
+### What's coming next?
+
+In Part 3 of the Tutorial, you'll learn about how to use Gatsby plugins to add more pre-built functionality to your site.
+
+<LinkButton
+  to="/docs/tutorial/part-3"
+  rightIcon={<MdArrowForward />}
   variant="SECONDARY"
-  content={
-    <div>
-      <p>
-        <strong>Note:</strong> We{"'"}re still working on updating this Tutorial to use Gatsby v3.
-        You've reached the end of the new content we've released so far. Subsequent parts
-        will be added as we finish them.
-      </p>
-      <p style={{ marginBottom: 0 }}>
-        If you{"'"}re looking for a full experience in the meantime, you can check out the (slightly outdated){" "}
-        <a href="https://v2.gatsbyjs.com/docs/tutorial/">
-          <strong>Gatsby v2 Tutorial</strong>
-        </a>
-        .
-      </p>
-    </div>
-  }
-/>
+>
+  Continue to Part 3
+</LinkButton>
diff --git a/docs/docs/tutorial/part-3/cooking-accessories.png b/docs/docs/tutorial/part-3/cooking-accessories.png
diff --git a/docs/docs/tutorial/part-3/index-page-with-static-image-from-filesystem.png b/docs/docs/tutorial/part-3/index-page-with-static-image-from-filesystem.png
diff --git a/docs/docs/tutorial/part-3/index-page-with-static-image-from-url.png b/docs/docs/tutorial/part-3/index-page-with-static-image-from-url.png