Merge remote-tracking branch 'upstream/master' into why_ts

docs/blog/100days/react-component/index.md

@@ -0,0 +1,38 @@
+---
+title: Challenge 4 - Add Third-Party React Components to Your Gatsby Site
+date: 2020-01-23
+author: "Hashim Warren"
+tags: ["learning-to-code", "contest", "100-Days-of-Gatsby"]
+---
+
+_Gatsby was named the [#1 new technology to learn in 2020](https://www.cnbc.com/2019/12/02/10-hottest-tech-skills-that-could-pay-off-most-in-2020-says-new-report.html)!_
+
+_To help you learn about Gatsby and our ecosystem, we invite you to take the #100DaysOfGatsby challenge! If you are new to Gatsby, you can follow along with our beginner-friendly weekly prompts. Or if you are familiar with Gatsby and want to go deeper, we invite you to [build your first Gatsby Theme](/docs/themes/building-themes/)._
+
+_Learn more about [#100DaysOfGatsby here](/blog/100days)!_
+
+## Challenge 4: Add a Form to Your Site (Using a Third-Party React Library)
+
+The Gatsby framework is [based on React](/docs/glossary/react/). So, a Gatsby project is a React project. And the Gatsby ecosystem is a subset of the React ecosystem.
+
+This is exciting! There are hundreds of [Gatsby plugins and themes](/plugins/) you can use on your site, with more being added every day. But there are already thousands of free, well-tested React projects that you can use on your site too!
+
+For example, you can hide/show your site header with [React headroom](https://kyleamathews.github.io/react-headroom/), organize your CSS with [Theme UI](https://theme-ui.com/), or control your HTML head with [React Helmet](https://github.com/nfl/react-helmet).
+
+In this prompt, we invite you to add forms to your Gatsby site using [Formik, a popular and powerful React library](https://jaredpalmer.com/formik). We suggest adding the form to the “About” page you created in a previous challenge.
+
+(In a future challenge we will show you how to add your form, or any React component to your Markdown-powered blog pages.)
+
+### Challenge Resources
+
+Learn how to [import and use almost any React component](/docs/adding-react-components/) in your Gatsby project. However, instead of using the example in our documentation, install [Formik from npm](https://www.npmjs.com/package/formik).
+
+Next, follow [Formik’s step-by-step tutorial](https://jaredpalmer.com/formik/docs/tutorial) for creating a newsletter signup form.
+
+Lastly, familiarize yourself with the [acessibility guidelines regarding forms](/docs/building-a-contact-form/#creating-an-accessible-form), and ensure your form meets those standards.
+
+### What to Do If You Need Help
+
+If you get stuck during the challenge, you can ask for help from the [Gatsby community](/contributing/community/) and the [ASKGatsbyJS](https://twitter.com/AskGatsbyJS) Twitter account. You can find fellow Gatsby Developers on [Discord](https://discordapp.com/invite/gatsby), [Reddit](https://www.reddit.com/r/gatsbyjs/), [Spectrum](https://spectrum.chat/gatsby-js), and [Dev](https://dev.to/t/gatsby).
+
+For this challenge, you can also ask the [Formik community](https://jaredpalmer.com/formik/help) for help.

docs/blog/2019-07-23-google-sheets-gatsby-acroyoga-video-explorer/index.md

@@ -336,7 +336,7 @@ This was such a clear and easy 'aha!' moment. I hadn't optimized my images and w
 
 I dug into my normal gatsby-image workflow but I quickly hit a snag. My previous use of Gatsby-image had been for local images whilst I was now trying to use remote images (cloud storage image links). Thankfully, with just a bit more searching, I found the right plugin to solve this: [gatsby-plugin-remote-images](/packages/gatsby-plugin-remote-images/).
 
-Gatsby-plugin-remote-images fetches image URL links (e.g. http://super-image.png) and prepares them in a way that gatsby-image can use them. To make my cards load faster, I'd need to optimize both the video thumbnail as well as the small instructor image. It makes no sense at all to load a 300+ pixel image of an instructor when all you really need are maybe 40 pixels max.
+Gatsby-plugin-remote-images fetches image URL links (e.g. `http://super-image.png`) and prepares them in a way that gatsby-image can use them. To make my cards load faster, I'd need to optimize both the video thumbnail as well as the small instructor image. It makes no sense at all to load a 300+ pixel image of an instructor when all you really need are maybe 40 pixels max.
 
 ![Acroyoga Card with Optimized Images](./images/word-image-4.png)
 

docs/docs/add-404-page.md

@@ -2,26 +2,15 @@
 title: Adding a 404 Page
 ---
 
-To create a 404 page create a page whose path matches the regex
-`^\/?404\/?$` (`/404/`, `/404`, `404/` or `404`). Most often you'll want to create a React component page at
-`src/pages/404.js`.
+To create a 404 page create a page whose path matches the regex `^\/?404\/?$` (`/404/`, `/404`, `404/` or `404`). Most often you'll want to create a React component page at `src/pages/404.js`.
 
-Gatsby ensures that your 404 page is built as `404.html` as many static hosting
-platforms default to using this as your 404 error page. If you're hosting your
-site another way, you'll need to set up a custom rule to serve this file for 404
-errors.
+Gatsby ensures that your 404 page is built as `404.html` as many static hosting platforms default to using this as your 404 error page. If you're hosting your site another way you'll need to set up a custom rule to serve this file for 404 errors.
 
-Because Gatsby creates this page for you by default, there is no need to configure
-it in your `gatsby-node.js` file.
+Because Gatsby creates this page for you by default, there is no need to configure it in your `gatsby-node.js` file.
 
-When developing using `gatsby develop`, Gatsby uses a default 404 page that
-overrides your custom 404 page. However, you can still preview your 404 page by
-clicking "Preview custom 404 page" to verify that it's working as expected. This is
-useful when you're developing so that you can see all the available pages.
+When developing using `gatsby develop`, Gatsby uses a default 404 page that overrides your custom 404 page. However, you can still preview your 404 page by clicking "Preview custom 404 page" to verify that it's working as expected. This is useful when you're developing so that you can see all the available pages.
 
-The screenshot below shows the default 404 page that Gatsby creates.
-It also lists out all the pages on your website. Clicking the "Preview custom 404
-page" button will allow you to view the 404 page you created.
+The screenshot below shows the default 404 page that Gatsby creates. It also lists out all the pages on your website. Clicking the "Preview custom 404 page" button will allow you to view the 404 page you created.
 ![Gatsby Default 404 Page](./images/gatsby-default-404.png)
 
 The screenshot below shows the custom 404 page.

docs/docs/add-custom-webpack-config.md

@@ -2,39 +2,22 @@
 title: "Adding a Custom Webpack Config"
 ---
 
-_Before creating custom webpack configuration, check to see if there's a Gatsby
-plugin already built that handles your use case in the
-[plugins section](/docs/plugins/). If there's not yet one and your use case is a
-general one, it is highly encouraged you to contribute back your plugin to the
-Gatsby Plugin Library so it's available to others (including your future self)._
-
-To add custom webpack configurations, create (if there's not one already) a
-`gatsby-node.js` file in your root directory. Inside this file, export a
-function called `onCreateWebpackConfig`.
-
-When Gatsby creates its webpack config, this function will be called allowing
-you to modify the default webpack config using
-[webpack-merge](https://github.com/survivejs/webpack-merge).
-
-Gatsby does multiple webpack builds with somewhat different configuration. Gatsby
-calls each build type a "stage". The following stages exist:
-
-1.  develop: when running the `gatsby develop` command. Has configuration for hot
-    reloading and CSS injection into page
-2.  develop-html: same as develop but without react-hmre in the babel config for
-    rendering the HTML component.
-3.  build-javascript: production JavaScript and CSS build. Creates route JS bundles as well
-    as common chunks for JS and CSS.
+_Before creating custom webpack configuration, check to see if there's a Gatsby plugin already built that handles your use case in the [plugins section](/docs/plugins/). If there's not yet one and your use case is a general one, it is highly encouraged you to contribute back your plugin to the Gatsby Plugin Library so it's available to others (including your future self)._
+
+To add custom webpack configurations, create (if there's not one already) a `gatsby-node.js` file in your root directory. Inside this file, export a function called `onCreateWebpackConfig`.
+
+When Gatsby creates its webpack config, this function will be called allowing you to modify the default webpack config using [webpack-merge](https://github.com/survivejs/webpack-merge).
+
+Gatsby does multiple webpack builds with somewhat different configuration. Gatsby calls each build type a "stage". The following stages exist:
+
+1.  develop: when running the `gatsby develop` command. Has configuration for hot reloading and CSS injection into page
+2.  develop-html: same as develop but without react-hmre in the babel config for rendering the HTML component.
+3.  build-javascript: production JavaScript and CSS build. Creates route JS bundles as well as common chunks for JS and CSS.
 4.  build-html: production build static HTML pages
 
-Check
-[webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js)
-for the source.
+Check [webpack.config.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js) for the source.
 
-There are many plugins in the Gatsby repo using this API to look to for examples
-e.g. [Sass](/packages/gatsby-plugin-sass/),
-[TypeScript](/packages/gatsby-plugin-typescript/),
-[Glamor](/packages/gatsby-plugin-glamor/), and many more!
+There are many plugins in the Gatsby repo using this API to look to for examples e.g. [Sass](/packages/gatsby-plugin-sass/), [TypeScript](/packages/gatsby-plugin-typescript/), [Glamor](/packages/gatsby-plugin-glamor/), and many more!
 
 ## Examples
 

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

@@ -4,5 +4,4 @@ title: Basic Hardware and Software Requirements
 
 This is a stub. Help our community expand it.
 
-Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your
-pull request gets accepted.
+Please use the [Gatsby Style Guide](/contributing/gatsby-style-guide/) to ensure your pull request gets accepted.