Merge remote-tracking branch 'origin/master' into ts-migration/merge-…

…gatsby-config

.eslintignore

@@ -8,11 +8,12 @@ packages/*/scripts/**
 **/dist/*
 **/__testfixtures__/**
 **/__tests__/fixtures/**
+www/public
+www/src/components/search-form/docsearch.min.js
 peril
 docs
 plop-templates
 starters
-www
 benchmarks
 e2e-tests
 examples

.eslintrc.js

@@ -79,6 +79,15 @@ module.exports = {
         Cypress: false,
       },
     },
+    {
+      files: ["www/**/*"],
+      rules: {
+        // We need to import React to use the Fragment shorthand (`<>`).
+        // When we use theme-ui's JSX pragma, it lists React as an unused var
+        // even though it's still needed.
+        "no-unused-vars": ["error", { varsIgnorePattern: "React" }],
+      },
+    },
     {
       files: ["*.ts", "*.tsx"],
       parser: "@typescript-eslint/parser",

.remarkrc.js

@@ -1,6 +1,17 @@
+const unified = require("unified")
+
 module.exports = {
   plugins: [
     ["remark-frontmatter", "yaml"],
+    [
+      "remark-retext",
+      unified()
+        .use(require("retext-english"))
+        .use(require("retext-diacritics"))
+        .use(require("retext-indefinite-article"))
+        .use(require("retext-redundant-acronyms"))
+        .use(require("retext-sentence-spacing")),
+    ],
     "remark-preset-lint-recommended",
     "remark-preset-lint-markdown-style-guide",
 

benchmarks/md/package.json

@@ -23,7 +23,7 @@
     "front-matter": "^3.1.0",
     "gatsby": "^2.20.23",
     "gatsby-image": "^2.3.3",
-    "gatsby-plugin-benchmark-reporting": "0.1.3",
+    "gatsby-plugin-benchmark-reporting": "*",
     "gatsby-plugin-page-creator": "^2.2.2",
     "gatsby-plugin-sharp": "^2.4.12",
     "gatsby-remark-images": "^3.2.3",

benchmarks/mdx/package.json

@@ -25,7 +25,7 @@
     "front-matter": "^3.1.0",
     "gatsby": "^2.20.23",
     "gatsby-image": "^2.3.3",
-    "gatsby-plugin-benchmark-reporting": "0.1.3",
+    "gatsby-plugin-benchmark-reporting": "*",
     "gatsby-plugin-mdx": "^1.1.8",
     "gatsby-plugin-page-creator": "^2.2.2",
     "gatsby-plugin-sharp": "^2.4.12",

benchmarks/source-contentful/bin/site.js

@@ -367,10 +367,11 @@ async function runDataUpdate() {
     limit: 1
   })
 
-  const entry = entries.items[0]
+  let entry = entries.items[0]
   const title = entry.fields.title[locale]
   entry.fields.title[locale] = `${title.substring(0, title.lastIndexOf(` `))} ${Date.now()}`
 
-  await entry.update()
+  entry = await entry.update()
+  await entry.publish()
   console.log(`Updated ${chalk.green(entry.sys.id)}`)
 }

docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md

@@ -5,7 +5,7 @@ author: "Benjamin Read"
 tags: ["react", "getting-started", "wordpress"]
 ---
 
-As a frontend designer I've always prided myself on being a HTML and CSS
+As a frontend designer I've always prided myself on being an HTML and CSS
 specialist. My use of JavaScript has been limited to animations and DOM
 manipulation. However, at
 [Indigo Tree](https://indigotree.co.uk)

docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md

@@ -15,7 +15,7 @@ I’ve built apps with it (Rails / Sinatra / Jekyll / etc).
 
 I used to like Jekyll because I could write my posts in Markdown which is super
 easy to write and edit.. When I started my blog, I took a theme called
-[Lanyon](https://github.com/poole/lanyon) and tweaked it a bit. That was a
+[Lanyon](https://github.com/poole/lanyon) and tweaked it a bit. That was
 enough for me.
 
 But recently I find that I only install Ruby and Jekyll to manage my blog (I

docs/blog/2018-10-10-unbundling-of-the-cms/index.md

@@ -67,4 +67,4 @@ The next post, [The Rise of Modern Web Development](/blog/2018-10-11-rise-of-mod
 
 After that, [Why Mobile Performance is Crucial](/blog/2018-10-16-why-mobile-performance-is-crucial) discusses the rise of e-commerce on smartphones, why the average site haven't been getting any faster on mobile, and existing technology that can make sites fast _by default_.
 
-Finally, in our conclusion, Creating Compelling Experiences, we’ll discuss a step-by-step approach for choosing a content architecture, modern development environment, a performance strategy -- and most importantly, choosing an "content mesh" that makes all the other choices easy.
+Finally, in our conclusion, Creating Compelling Experiences, we’ll discuss a step-by-step approach for choosing a content architecture, modern development environment, a performance strategy -- and most importantly, choosing a "content mesh" that makes all the other choices easy.

docs/blog/2018-10-26-export-a-drupal-site-to-gatsby/index.md

@@ -7,7 +7,7 @@ tags: ["drupal", "getting-started"]
 
 This blogpost explains how I learned to reduce the cost of maintaining a simple brochure or blog site. When using Drupal, you need at least a shared hosting platform (there is no Wordpress.com for Drupal sites). So, migrating to a static site generator, like Jekyll or Gatsby, seemed like a good idea. Gatsby is also a great opportunity to learn React and then get hosting for free using something like GitHub Pages. This post is going to describe how to migrate a simple blog--that has featured images on the posts, comments and tags--from Drupal to Gatsby.
 
-To facilitate exporting the site, the first thing I did was export the database from the mysql database server to an sqlite file that I could use locally. To do this I used the [mysql2sqlite](https://github.com/dumblob/mysql2sqlite) project, which, as described on the project page, can be done with two commands like:
+To facilitate exporting the site, the first thing I did was export the database from the mysql database server to a sqlite file that I could use locally. To do this I used the [mysql2sqlite](https://github.com/dumblob/mysql2sqlite) project, which, as described on the project page, can be done with two commands like:
 
 ```shell
 mysqldump --skip-extended-insert --compact DB_name > dump_mysql.sql
@@ -25,7 +25,7 @@ npm i # to install regular gastby requirements
 npm i --save-dev better-sqlite3 # to add an sqlite javascript client
 ```
 
-The useful commands on an sqlite3 command line to explore are `.tables` to see all tables :) and `.schema table_name` to see information about a specific table. Oh! and `.help` to know more.
+The useful commands on a sqlite3 command line to explore are `.tables` to see all tables :) and `.schema table_name` to see information about a specific table. Oh! and `.help` to know more.
 
 Next, you will be creating a new file on your project at `src/scripts/import.js`. Initially, what you want is to iterate through all your posts and export basic data like title, created date, body and status (published or draft). All of that data is in two tables, the _node_ table and the _field_data_body_. Initially, your script will look like this:
 

docs/blog/2018-12-17-ibm-case-study/index.md

@@ -45,7 +45,7 @@ With non-technical content writers and designers needing the ability to add cont
 
 ## A New Era
 
-The new Carbon Design System website launched October 3, 2018, and is referenced by designers and developers as an open source project as well as internally at IBM. With a seamless design feel, most users didn’t “see” any changes, but they sure felt them with the lightning fast page load times. Alison pointed out their new Lighthouse performance score went from 7 to 96 (that’s a 89 point jump!) with PWA, Accessibility, Best Practices, and SEO scores in the high 90s - 100.
+The new Carbon Design System website launched October 3, 2018, and is referenced by designers and developers as an open source project as well as internally at IBM. With a seamless design feel, most users didn’t “see” any changes, but they sure felt them with the lightning fast page load times. Alison pointed out their new Lighthouse performance score went from 7 to 96 (that’s an 89 point jump!) with PWA, Accessibility, Best Practices, and SEO scores in the high 90s - 100.
 
 <figure>
   <img alt="Gatsby swag posts on Twitter." src="./images/lighthouse.png" />

docs/blog/2018-2-27-why-i-upgraded-my-website-to-gatsbyjs-from-jekyll/index.md

@@ -86,7 +86,7 @@ export const pageQuery = graphql`
 
 When the `<PostTemplate />` component needs to be rendered into a page, the accompanying exported `pageQuery`, a GraphQL query is made, and the results are passed in as props into the component.
 
-The real magic happens when the website is compiled into a production bundle. Running `npm run build` will tell Gatsby to perform all the GraphQL queries defined and render all the React components into a HTML document, using a technique known as server-side rendering. This means that everything “React” is serialized and compiled to static HTML, ready to be viewed without JavaScript. Visitors to the site will then be able to quickly load and interact with the static version of the page.
+The real magic happens when the website is compiled into a production bundle. Running `npm run build` will tell Gatsby to perform all the GraphQL queries defined and render all the React components into an HTML document, using a technique known as server-side rendering. This means that everything “React” is serialized and compiled to static HTML, ready to be viewed without JavaScript. Visitors to the site will then be able to quickly load and interact with the static version of the page.
 
 Not only that, within the HTML document, there are instructions to load the JavaScript bundle of your application asynchronously. When it has been loaded, the content displayed in the browser will be dynamically replaced by the React application, gaining interactivity. This also happens with the other pages of your site — Gatsby will ensure that they are asynchronously loaded so that when you click on a link, the data is already cached on the browser for React to swap out the DOM elements that need to be changed. Everything is done to give the illusion of speed to the viewer while asynchronously loading everything in the background.
 

docs/blog/2019-01-01-publish-multiple-gatsby-sites/index.md

@@ -16,7 +16,7 @@ This tutorial will take about two hours to complete. If you're unfamiliar with L
 
 If you work alone or in a small team, you’re likely to have started working on small programs that slowly grow complex and convoluted. Shit happens and you’ll soon find that your perfectly balanced lasagna evolves into a heaped bowlful of spaghetti.
 
-The same goes for those who have worked as part of a large company/team. Branding guidelines come in the form of css style-guides or reusable components. Separating the discrete packages from what’s shared becomes a hassle if everything’s stored together. You may even have to deal with several similar projects thrown about in different repos, which can be an headache to keep track of. These are some of the problems monorepos solve.
+The same goes for those who have worked as part of a large company/team. Branding guidelines come in the form of css style-guides or reusable components. Separating the discrete packages from what’s shared becomes a hassle if everything’s stored together. You may even have to deal with several similar projects thrown about in different repos, which can be a headache to keep track of. These are some of the problems monorepos solve.
 
 ![Monorepo Diagram](./images/monorepo-diagram.jpeg)
 
@@ -442,7 +442,7 @@ There are two more sections we need to add to our `.travis.yml` file
 
 We won’t worry about the latter for now, but let’s deal with running scripts for different repos. Because we’re not going to be deploying our `shared-ui` we can skip it from our CI pipeline. We’ll run `yarn test` and `yarn build` for both the blog and the shop.
 
-We’ll do this by adding a `matrix` step right after the `install` step to the CI pipeline. This `matrix` step will let us specify which packages we want to run the CI pipeline on. We’ll name each matrix and set a environment variables for the package location. We’ll then change the `script` step so Travis moves into the correct directory and runs the `script` step. Delete everything after the `install` step and add the following:
+We’ll do this by adding a `matrix` step right after the `install` step to the CI pipeline. This `matrix` step will let us specify which packages we want to run the CI pipeline on. We’ll name each matrix and set an environment variables for the package location. We’ll then change the `script` step so Travis moves into the correct directory and runs the `script` step. Delete everything after the `install` step and add the following:
 
 ```yaml:title=.travis.yml
 matrix:

docs/blog/2019-02-14-behind-the-scenes-q-and-a/index.md

@@ -33,7 +33,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh
 **Answer:** Check out [Environment Variables](/docs/environment-variables/).
 
 **Question:** Is it possible to have the gatsby-\*.js files be rewritten in TypeScript?
-**Answer:** gatsby-browser.js and gatsby-ssr.js work just fine if you add gatsby-plugin-typescript. We don't have a out-of-the-box solution for gatsby-node.js but you could require the TypeScript interpreter and then require another TypeScript file and re-export its code from gatsby-node.js.
+**Answer:** gatsby-browser.js and gatsby-ssr.js work just fine if you add gatsby-plugin-typescript. We don't have an out-of-the-box solution for gatsby-node.js but you could require the TypeScript interpreter and then require another TypeScript file and re-export its code from gatsby-node.js.
 
 **Question:** Gatsby transformers support Markdown and asciidoc. Possible support for Sphinx reStructuredText?
 **Answer:** Certainly! Gatsby is super pluggable, so whatever content you want to bring to Gatsby, just write a plugin! Check out [Creating a Source Plugin](/docs/creating-a-source-plugin/).
@@ -127,7 +127,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh
 **Answer:** Yes. Builds are fast and automatic though so doesn't take any extra work or mental overhead.
 
 **Question:** How can I use gatsby-image for images in the content body like a WordPress post?
-**Answer:** That's a bit tricky as the content body is a HTML string. There's issues talking about how to make this happen so jump into the discussion and help out.
+**Answer:** That's a bit tricky as the content body is an HTML string. There's issues talking about how to make this happen so jump into the discussion and help out.
 
 **Question:** Is there a 3rd party CMS that you recommend that works particular well with Gatsby?
 **Answer:** Lots of CMS-s! Here's a list: [Headless CMS](/docs/headless-cms/)
@@ -160,7 +160,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh
 **Question:** Would it makes sense to still use Gatsby for a more "dynamic" type of app?
 **Answer:** Yes! You can learn more about what types of dynamic apps you can build with Gatsby here: [Dynamic Apps Webinar](https://www.gatsbyjs.com/build-web-apps-webinar).
 
-**Question:** What is the recommended approach for sites that have integrations like a oauth authentication or web mapping that need code to be run only in the browser (not SSR)? I have read about checking for module or browser and using babel dynamic import. Is there a way to have a separate bundle lazy loaded only when loaded in the browser?
+**Question:** What is the recommended approach for sites that have integrations like an oauth authentication or web mapping that need code to be run only in the browser (not SSR)? I have read about checking for module or browser and using babel dynamic import. Is there a way to have a separate bundle lazy loaded only when loaded in the browser?
 **Answer:** Check out [Building a site with authentication](/docs/building-a-site-with-authentication/).
 
 **Question:** Dustin mentioned a recording on building dynamic apps with Gatsby. Is that available?
@@ -179,7 +179,7 @@ To watch the full recorded webinar, [register here](https://www.gatsbyjs.com/beh
 
 ### Scaling Gatsby (Gatsby for Large Apps)
 
-**Question:** I'm working for a e-commerce company. We have millions of products in our shop. The product detail site is somewhat the same but for the data. Is there a way to generate all those pages for each of those products in a feasible time?
+**Question:** I'm working for an e-commerce company. We have millions of products in our shop. The product detail site is somewhat the same but for the data. Is there a way to generate all those pages for each of those products in a feasible time?
 **Answer:** Gatsby generally maxes out at 50k pages or so (right now) but you could break up the page, check out [Building a large, internationalized e-commerce website with Gatsby at Daniel Wellington
 ](/blog/2019-01-28-building-a-large-ecommerce-website-with-gatsby-at-daniel-wellington/)
 

docs/blog/2019-03-11-dot-org-prototypes/index.md

@@ -96,7 +96,7 @@ The homepage should be ordered by explaining the following:
 
 We left the prototype workshop with a few concerns that could be validated through testing:
 
-- Logos of companies could turn off developers because some consider logos to be cliche and therefore meaningless. Alternatively, the logos could provide social proof that world-class engineers use Gatsby. One possibility is to combine the logos with case studies so they aren’t in the classic “logos floating on white space” design that most startups use.
+- Logos of companies could turn off developers because some consider logos to be cliché and therefore meaningless. Alternatively, the logos could provide social proof that world-class engineers use Gatsby. One possibility is to combine the logos with case studies so they aren’t in the classic “logos floating on white space” design that most startups use.
 - We debated how to help developers know that Gatsby also has some upcoming commercial offerings. What do we call the commercial offerings so they make sense to first time visitors?
 
 ### Settled concerns:

docs/blog/2019-04-06-security-for-modern-web-frameworks/index.md

@@ -134,7 +134,7 @@ Remember, keep it **secret**, keep it **safe** 🧙🏼‍! Do not store API key
 
 Now go make awesome Gatsby sites that are completely secure! For more information on web security checkout these resources:
 
-- **General web-app security**: The [OWASP Top Ten](https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project) is a list of top website security vulnerabilities. The [Open Web Application Security Project](https://www.owasp.org/index.php/Main_Page) is a excellent resource for security.
+- **General web-app security**: The [OWASP Top Ten](https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project) is a list of top website security vulnerabilities. The [Open Web Application Security Project](https://www.owasp.org/index.php/Main_Page) is an excellent resource for security.
 
 - **Shared Security**: The article "[Security for Static Websites](https://blog.sqreen.com/static-websites-security/)" covers shared security issues well and includes complete solutions.
 

docs/blog/2019-05-03-how-gatsby-helped-jump-start-my-engineering-career/index.md

@@ -61,7 +61,7 @@ And GraphQL is great -- if you know what resolvers do, it supercharges your fron
 
 The other company -- they didn't know what React was back then -- now today they're putting out 20-30 positions for React developers. I get contacted on LinkedIn multiple times a day for companies in Dallas looking for React engineers.
 
-If you need to survive, learn React, put it on your resume, and you'll probably get an interview. React is the most looked-for skill in web development right now.
+If you need to survive, learn React, put it on your résumé, and you'll probably get an interview. React is the most looked-for skill in web development right now.
 
 **Sam**: And if you’re looking to learn React, why Gatsby?
 
@@ -77,7 +77,7 @@ There were a few things I had to learn -- Git etiquette, not committing to other
 
 But there's stuff you just can't learn until you work professionally -- how to be an effective team member, how to weight tickets.
 
-A lot of times, when we're learning to code, we get caught up in "is my resume perfect?" but when I was interviewing people, we were looking for, can we find people who want to learn? Do you like playing around with cutting edge tech?
+A lot of times, when we're learning to code, we get caught up in "is my résumé perfect?" but when I was interviewing people, we were looking for, can we find people who want to learn? Do you like playing around with cutting edge tech?
 
 And that's why Gatsby's great.