Merge branch 'master' into ts/reducers-nodes

gatsbyjs · LekoArts · May 8, 2020 · May 3, 2020 · May 4, 2020 · May 4, 2020
commit f275d959ccf3e3264751cfa227907735eb86a665
diff --git a/docs/blog/2020-04-29-incredimental-builds/index.md b/docs/blog/2020-04-29-incredimental-builds/index.md
@@ -1,5 +1,5 @@
 ---
-title: "Incredimental Builds"
+title: "Gatsby Cloud Incremental Builds: More like *Incredimental* Builds!"
 date: 2020-04-29
 author: "Josh Comeau"
 excerpt: "A deeper look at Gatsby's recent announcement, how it changes the game for content editors, and what it means for the future."

diff --git a/docs/blog/2020-05-05-Butter-CMS-case-study/car_loans_canada_web.png b/docs/blog/2020-05-05-Butter-CMS-case-study/car_loans_canada_web.png
diff --git a/docs/blog/2020-05-05-Butter-CMS-case-study/index.md b/docs/blog/2020-05-05-Butter-CMS-case-study/index.md
@@ -0,0 +1,55 @@
+---
+title: "Faster, Easier and Also in French: Butter CMS + Gatsby drive Car Loans Canada"
+author: Jake Lumetta
+date: 2020-05-05
+excerpt: "CarLoansCanada.com’s growing marketplace team needed to make their content marketing leaner and meaner. They tuned up their performance with a new website built on Gatsby paired with supremely easy content management from headless ButterCMS."
+tags:
+  - case-studies
+  - performance
+  - building-sites-faster
+---
+
+Car Loans Canada helps connect prospective car buyers with automotive loans and car dealers throughout Canada. Marketing content is an essential part of this business model, and Car Loans Canada relies on a high volume of blog posts—in both English and French—to build the top-of-funnel awareness required to continue growing this successful business.
+
+The company needed to scale its website’s performance to keep pace with this growth and success. The team already knew they wanted to build it with Gatsby. However, blog content needed to scale along with the new site, meaning that content creators must be able to easily publish or change content without any developer intervention.
+
+Because the Car Loans Canada team outsources most of its blog content at a rather large scale, it needed an efficient way to move its writers through the content creation workflow with minimal intervention from Car Loans Canada engineers. Blog management had originated in Wordpress, which had resulted in also using Wordpress on the front end to simplify running the blog engine. The engineering team was eager to move away from this setup and quickly concluded that a headless content management system (CMS) was the best and only option.
+
+The prime directive was static asset management. “I needed something that would allow my writers to go in and create a blog that I could just post on my website without having to worry about how they’re going to style it or anything,”says Josh Elias, Car Loans Canada’s CTO. “Not to mention avoid having to pull developers off other tasks to help them make it happen.”
+
+Josh and his team also had two more technical considerations that quickly limited the field of potential headless CMS solutions. First and foremost: localization. Being a Canadian company with operations across the country, Car Loans Canada needs the ability to publish content in both English and French. They also planned to rebuild the site using React and Gatsby, which would allow them to select whichever engine made the most sense for their static content. Not all blog engines play equally nice with these developer frameworks.
+
+## Not all headless CMSs are created equal
+
+The decision came down to two final CMS contenders: Contentful and ButterCMS. There were four main reasons that ultimately tipped the scales toward Butter:
+
+- Butter plays nice with Gatsby, the framework that Car Loans Canada uses to build its sites.
+- Documentation and support were superior across the board. Documentation was especially important to the company. (“I won’t use anything with poor documentation,” adds Josh). Butter and Gatsby are both known for dedication to outstanding documentation.
+- Clear and simple pricing meant the team knew exactly how many collections and pages they’d get, and for what price.
+- The speedy API responds quickly thanks to static querying, which allowed Car Loans Canada to take full advantage of building a very fast, highly responsive website using Gatsby.
+
+Relying solely on Butter documentation, Josh and his team were able to rebuild the entire Car Loans Canada blog in React and Gatsby in just two days. “Like I said, the documentation was such that there were no special edge cases that I needed clarification on,” says Josh. “I was able to just get going just off the guides.” Because Butter is cloud-hosted, the Car Loans Canada team doesn’t have to configure or host any new infrastructure for their CMS. Instead, they use a number of queries while building their project at no additional cost at all.
+
+In terms of localization, the ability to localize content in French and English versions of the site was a huge win in terms of ease of use and time saved.
+
+## So much more than blog posts
+
+While they initially intended to use Butter only for content management for their blog, the team at Car Loans Canada soon realized they could do much more than that.
+
+“I could host static assets for my homepage and others. Let’s say there’s a feature description on our About page. Now, a content creator could just go in and change the wording whenever they want to,” Josh says. “There’s a lot of power in that, especially since we’re a relatively small company.”
+
+![car loans Canada website landing page](./car_loans_canada_web.png)
+
+In addition, the team could address special content needs. For example, the team has a different page for every city in Ontario (more than thirty cities, at least). Using Butter, Josh created a collection, all the content for those pages, and iterates them through Gatsby to create a new page for every single collection item.
+
+> _Pretty much everything that I can put in Butter, I will. Anything touched by any kind of content creator, I just put that on Butter so they can edit it and then just create a front viewport in my web stack. It’s working out very well._
+
+Today, content on the Canada Car Loans website loads significantly faster than it did before moving to Gatsby and ButterCMS. And it’s not just optimization: the content itself has been upgraded, including structure and visuals, to create better and richer content experiences. All of which could be done fearlessly thanks to Gatsby’s best-practice front end development patterns like route-based code splitting, PRPL, service workers, and offline support with dynamic data integrations.
+
+So far, the new site is performing wonderfully, Josh reports. The team is seeing impressive outcomes from the blazing fast performance, including:
+
+- Increased pageviews per session
+- Average user time spent on site has more than doubled
+- Full independence for marketing content leading to more and better content
+
+“Because I can query all the data before, and bundle my website up and then deploy it, the content doesn’t need to be processed every time a user requests it,” concludes Josh. “We believe this will impact our SEO significantly, leading to impressive gains.”
diff --git a/docs/blog/author.yaml b/docs/blog/author.yaml
@@ -418,3 +418,7 @@
   bio: "Front End React UI Developer/UX Engineer based in Worthing, UK. After all is said and done, structure + order = fun."
   avatar: avatars/paul-scanlon.jpg
   twitter: "@PaulieScanlon"
+- id: Jake Lumetta
+  bio: "Jake is the CEO of ButterCMS. He loves whipping up Butter puns and building tools that make developers' lives better."
+  avatar: avatars/jake-lumetta.jpg
+  twitter: "@jakelumetta"
diff --git a/docs/blog/avatars/jake-lumetta.jpg b/docs/blog/avatars/jake-lumetta.jpg
diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md
@@ -188,6 +188,10 @@ Once a site has been [built](#build) by Gatsby and loaded in a web browser, [cli
 
 As part of its data layer and [build](#build) process, Gatsby will automatically **infer** a [schema](#schema), or type-based structure, based on available data sources (e.g. Markdown file nodes, WordPress posts, etc.). More control can be gained over this structure by using Gatsby's [Schema Customization API](/docs/schema-customization/).
 
+### [Infrastructure As Code](/docs/glossary/infrastructure-as-code/)
+
+Infrastructure As Code is the practice of using configuration files and scripts to automate the process of setting up your development, testing, and production environments.
+
 ## J
 
 ### [JAMStack](/docs/glossary/jamstack)

diff --git a/docs/docs/glossary/infrastructure-as-code/index.md b/docs/docs/glossary/infrastructure-as-code/index.md
@@ -0,0 +1,84 @@
+---
+title: Infrastructure as Code
+disableTableOfContents: true
+---
+
+Learn what <q>Infrastructure as Code</q> means, and how you can use code to standardize and automate your Gatsby site.
+
+## What is <q>Infrastructure as Code?</q>
+
+_Infrastructure as Code_, or <abbr>IaC</abbr>, is the practice of managing your development, testing, and production environments using configuration files or scripts. Provisioning and configuring environments individually can introduce errors or inconsistencies. You may, for example, find yourself running different versions of Node on your laptop and your production servers. Infrastructure as Code minimizes this kind of drift and lets you automate the process of provisioning environments.
+
+Your configuration file describes what resources your project requires. If you're building an API, for example, you might create a configuration file that says, "Please install Node 12.16.2, npm 6.14.4, Express 4.17.1, and PostgreSQL 12.2 for Ubuntu Linux." For a Gatsby project, your configuration file may add plugins and themes.
+
+Configuration files, like other code files, are text. That means you can use version control software to store them and track changes to the environment. In short, <abbr>IaC</abbr>:
+
+- Creates consistent environments.
+- Saves time that would otherwise be spent setting up environments.
+- Reduces the risk of errors caused by mismatched environments.
+- Lays the groundwork for automation.
+
+## Automating Gatsby site development with Gatsby Recipes
+
+[Gatsby Recipes](/blog/2020-04-15-announcing-gatsby-recipes/) applies the infrastructure as code concept to front-end development. With Gatsby Recipes, you can automate common site building tasks, such as adding a plugin or test suite.
+
+To get started with Gatsby Recipes, upgrade to the latest version of Gatsby and the Gatsby CLI.
+
+```shell
+npm install -g gatsby-cli@latest
+npm install gatsby@latest
+```
+
+You can see the list of available recipes by using `gatsby recipes`. Use your up or down arrow keys to select a recipe, and press the _Enter_ or _Return_ key to run it.
+
+![partial list of available Gatsby recipes](recipes-screenshot.png)
+
+Gatsby Recipes use [MDX](/docs/glossary/mdx/). They're a readable mix of Markdown and React. MDX is an extension of [Markdown](/docs/glossary/markdown/) that lets you use [JSX](/docs/glossary#jsx) in Markdown-formatted documents. As an example, check out the [Styled Components recipe](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/recipes/styled-components.mdx).
+
+```markdown
+# Setup Styled Components
+
+[Styled Components](https://styled-components.com/) is visual primitives for the component age.
+Use the best bits of ES6 and CSS to style your apps without stress 💅
+
+---
+
+Install necessary NPM packages
+
+<NPMPackage name="gatsby-plugin-styled-components" />
+<NPMPackage name="styled-components" />
+<NPMPackage name="babel-plugin-styled-components" />
+
+---
+
+Install the Styled Components plugin in gatsby-config.js
+
+<GatsbyPlugin name="gatsby-plugin-styled-components" />
+
+---
+
+Sweet, now it's ready to go.
+
+Let's also write out an example page you can use to play
+with Styled Components.
+
+<File
+  path="src/pages/styled-components-example.js"
+  content="https://gist.githubusercontent.com/KyleAMathews/34541b87c4194ba2290eedbe8a0b1fe0/raw/dba4d3ffecb5f2a3a36e0e017387185a9835c685/styled-components-example.js"
+/>
+
+---
+
+Read more about Styled Components on the official docs site:
+
+https://styled-components.com/
+```
+
+You can also write and run your own recipes, or run recipes that were created by and shared with the community. Pass the path or URL of the recipe as an argument. For example, to run a local Gatsby recipe, use `gatsby recipes ./name-of-your-recipe.mdx`. To run a remote recipe, use `gatsby recipes https://example.com/community-made-recipe.mdx`.
+
+Gatsby Recipes help you save time and reduce configuration errors by automating the set up process.
+
+## Learn more
+
+- [Announcing Gatsby Recipes](/blog/2020-04-15-announcing-gatsby-recipes/)
+- [Developing Recipes](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-recipes/README.md#developing-recipes) from the Gatsby repository
diff --git a/docs/docs/glossary/infrastructure-as-code/recipes-screenshot.png b/docs/docs/glossary/infrastructure-as-code/recipes-screenshot.png
diff --git a/docs/docs/performance.md b/docs/docs/performance.md
@@ -5,7 +5,7 @@ overview: true
 
 While performance is already at the heart of Gatsby, it's important to ensure you are doing all you can to make your content available to your users as fast as possible. Not all users are enjoying high speed connections, or browsing from a desktop. It's important to make no assumptions and serve the smallest and fastest site possible, to provide an optimal experience for wherever your users might be coming from. Since Gatsby is already doing a lot of the heavy lifting for you there isn't a lot required out of the box to make your site blazing fast, but by following these guides you can ensure the best possible performance and delivery of your content to your users.
 
-This section will cover some ways you can optimize caching, set up `https` on `localhost` for easier testing of performance features, as well as how to measure the performance of your websites, giving you all the tools you need to maximize site performance. If you would like a more in-depth explanation of why performance matters so much, check out this article by Addy Osmani on the [Cost of JavaScript]](https://v8.dev/blog/cost-of-javascript-2019).
+This section will cover some ways you can optimize caching, set up `https` on `localhost` for easier testing of performance features, as well as how to measure the performance of your websites, giving you all the tools you need to maximize site performance. If you would like a more in-depth explanation of why performance matters so much, check out this article by Addy Osmani on the [Cost of JavaScript](https://v8.dev/blog/cost-of-javascript-2019).
 
 May your Lighthouse scores all be in the green. 😀
 

diff --git a/docs/docs/typescript.md b/docs/docs/typescript.md
@@ -0,0 +1,35 @@
+---
+title: TypeScript and Gatsby
+---
+
+## Introductory paragraph
+
+[TypeScript](https://www.typescriptlang.org/) is a JavaScript superset which extends the language to include type definitions allowing codebases to be statically checked for soundness. Gatsby provides an integrated experience out of the box, similar to an IDE. If you are new to TypeScript, adoption can _and should_ be incremental. Since Gatsby natively supports JavaScript and TypeScript, you can change files from .js to .tsx at any point to start adding types and gaining the benefits of a type system.
+
+## Example
+
+```tsx:title=src/pages/index.js
+import React from "react"
+import { PageProps } from "gatsby"
+
+export default function IndexRoute(props: PageProps) {
+  return (
+    <>
+      <h1>Path:</h1>
+      <p>{props.path}</p>
+    </>
+  )
+}
+```
+
+The example above uses the power of TypeScript, in combination with exported types from Gatsby (`PageProps`) to tell this code what props is. This can greatly improve your developer experience by letting your IDE show you what properties are injected by Gatsby. To see all of the types available look at our [TypeScript definition file](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/index.d.ts).
+
+## Other resources
+
+TypeScript integration is supported through automatically including [`gatsby-plugin-typescript`](/plugins/gatsby-plugin-typescript). Visit that link to see configuration options and limitations of this setup.
+
+If you are new to TypeScript, check out these other resources to learn more:
+
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/handbook/basic-types.html)
+- [TypeScript Playground (Try it out!)](https://www.typescriptlang.org/play/index.html)
+- [TypeScript Gatsby Example](https://using-typescript.gatsbyjs.org/)
diff --git a/docs/sites.yml b/docs/sites.yml
@@ -10508,3 +10508,12 @@
     - Data
     - Healthcare
   featured: false
+- title: Philip Domingo
+  url: https://www.prtdomingo.com
+  main_url: https://www.prtdomingo.com
+  description: >
+    Personal website built on top of GatsbyJS, Ghost, and Azure.
+  categories:
+    - Technology
+    - Blog
+  featured: false
diff --git a/docs/starters.yml b/docs/starters.yml
@@ -1,3 +1,24 @@
+- url: https://gatsby-ghost-balsa-starter.now.sh/
+  repo: https://github.com/draftbox-co/gatsby-ghost-balsa-starter
+  description: A Gatsby starter for creating blogs from headless Ghost CMS.
+  tags:
+    - Blog
+    - CMS:Headless
+    - SEO
+    - Styling:SCSS
+  features:
+    - Balsa theme by Draftbox
+    - Data sourcing from headless Ghost
+    - Responsive design
+    - SEO optimized
+    - OpenGraph structured data
+    - Twitter Cards meta
+    - Sitemap Generation
+    - XML Sitemaps
+    - Progressive Web App
+    - Offline Support
+    - RSS Feed
+    - Composable and extensible
 - url: https://gatsby-starter-wordpress-twenty-twenty.netlify.app/
   repo: https://github.com/henrikwirth/gatsby-starter-wordpress-twenty-twenty
   description: A port of the WordPress Twenty Twenty theme to Gatsby.

diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md
@@ -76,7 +76,7 @@ You want to use each markdown file name to create the page slug. So
 `pandas-and-bananas.md` will become `/pandas-and-bananas/`. But how do you get
 the file name from the `MarkdownRemark` node? To get it, you need to _traverse_
 the "node graph" to its _parent_ `File` node, as `File` nodes contain data you
-need about files on disk. To do that, modify your function again:
+need about files on disk. To do that, you'll use the [`getNode()`](/docs/node-api-helpers/#getNode) helper. Add it to `onCreateNode`'s function parameters, and call it to get the file node:
 
 ```javascript:title=gatsby-node.js
 // highlight-next-line

diff --git a/e2e-tests/development-runtime/cypress/integration/hot-reloading/arrow-functions.js b/e2e-tests/development-runtime/cypress/integration/hot-reloading/arrow-functions.js
@@ -18,7 +18,7 @@ describe(`hot-reloading anonymous arrow functions`, () => {
   it(`updates on change`, () => {
     const text = `The title`
     cy.exec(
-      `npm run update -- --file src/components/title.js --replacements "TITLE:${text}"`
+      `npm run update -- --file src/components/title.tsx --replacements "TITLE:${text}"`
     )
 
     cy.getTestElement(IDS.title).invoke(`text`).should(`eq`, text)

diff --git a/...velopment-runtime/src/components/title.js → ...elopment-runtime/src/components/title.tsx b/...velopment-runtime/src/components/title.js → ...elopment-runtime/src/components/title.tsx
diff --git a/examples/client-only-paths/package.json b/examples/client-only-paths/package.json
@@ -5,9 +5,9 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
-    "gatsby": "^2.21.0",
-    "gatsby-plugin-netlify": "^2.3.0",
-    "gatsby-plugin-typography": "^2.5.0",
+    "gatsby": "^2.21.13",
+    "gatsby-plugin-netlify": "^2.3.2",
+    "gatsby-plugin-typography": "^2.5.1",
     "lodash": "^4.17.15",
     "react": "^16.3.1",
     "react-dom": "^16.3.1",

diff --git a/examples/creating-source-plugins/example-site/package.json b/examples/creating-source-plugins/example-site/package.json
@@ -14,10 +14,10 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
-    "gatsby": "^2.21.0",
-    "gatsby-image": "^2.4.0",
-    "gatsby-plugin-sharp": "^2.6.0",
-    "gatsby-transformer-sharp": "^2.5.0",
+    "gatsby": "^2.21.13",
+    "gatsby-image": "^2.4.1",
+    "gatsby-plugin-sharp": "^2.6.1",
+    "gatsby-transformer-sharp": "^2.5.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },

diff --git a/examples/creating-source-plugins/source-plugin/package.json b/examples/creating-source-plugins/source-plugin/package.json
@@ -19,7 +19,7 @@
     "apollo-link-http": "^1.5.17",
     "apollo-link-ws": "^1.0.20",
     "apollo-utilities": "^1.3.3",
-    "gatsby-source-filesystem": "^2.3.0",
+    "gatsby-source-filesystem": "^2.3.1",
     "graphql": "^15.0.0",
     "graphql-tag": "^2.10.3",
     "node-fetch": "^2.6.0",

diff --git a/examples/data-fetching/package.json b/examples/data-fetching/package.json
@@ -6,9 +6,9 @@
   "author": "@gatsbyjs",
   "dependencies": {
     "dotenv": "^8.2.0",
-    "gatsby": "^2.21.0",
-    "gatsby-plugin-react-helmet": "^3.3.0",
-    "gatsby-source-graphql": "^2.5.0",
+    "gatsby": "^2.21.13",
+    "gatsby-plugin-react-helmet": "^3.3.1",
+    "gatsby-source-graphql": "^2.5.1",
     "prop-types": "^15.7.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",

diff --git a/examples/ecommerce-tutorial-with-stripe/package.json b/examples/ecommerce-tutorial-with-stripe/package.json
@@ -5,16 +5,16 @@
   "version": "0.1.0",
   "author": "@thorwebdev",
   "dependencies": {
-    "@stripe/stripe-js": "^1.4.0",
-    "gatsby": "^2.21.0",
-    "gatsby-image": "^2.4.0",
-    "gatsby-plugin-manifest": "^2.4.0",
+    "@stripe/stripe-js": "^1.5.0",
+    "gatsby": "^2.21.13",
+    "gatsby-image": "^2.4.1",
+    "gatsby-plugin-manifest": "^2.4.2",
     "gatsby-plugin-offline": "^2.2.10",
-    "gatsby-plugin-react-helmet": "^3.3.0",
-    "gatsby-plugin-sharp": "^2.6.0",
-    "gatsby-source-filesystem": "^2.3.0",
+    "gatsby-plugin-react-helmet": "^3.3.1",
+    "gatsby-plugin-sharp": "^2.6.1",
+    "gatsby-source-filesystem": "^2.3.1",
     "gatsby-source-stripe": "^2.2.2",
-    "gatsby-transformer-sharp": "^2.5.0",
+    "gatsby-transformer-sharp": "^2.5.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",