feat(gatsby-recipes) (#26085)

packages/gatsby-recipes/recipes/animated-page-transitions.mdx

@@ -2,22 +2,24 @@
 
 This recipe helps you create transitions for animating between entering and exiting Gatsby pages.
 
+This recipe:
+
 ---
 
-The recipe's first step is to install the NPM packages you need:
+Installs these NPM packages:
 
 <NPMPackage name="gatsby-plugin-transition-link" />
 <NPMPackage name="gsap" />
 
 ---
 
-Then, it adds the following plugin to your Gatsby config:
+Adds the following plugin to your Gatsby config:
 
 <GatsbyPlugin name="gatsby-plugin-transition-link" />
 
 ---
 
-Finally, it creates a few example pages to animate between:
+Creates a few example pages to animate between:
 
 <File path="./src/pages/transition-fade.js" content="https://gist.githubusercontent.com/gillkyle/50949d56409c338b427984c8e223034b/raw/4674121deb826f2c17a7acde4f20e9cfe8a268d5/transition-fade.js" />
 

packages/gatsby-recipes/recipes/ava.mdx

@@ -2,15 +2,17 @@
 
 This recipe helps you setup AVA in your Gatsby site to test components and utilities.
 
+This recipe:
+
 ---
 
-First, the recipe installs the `ava` package:
+Installs the `ava` package.
 
 <NPMPackage name="ava" />
 
 ---
 
-Then, it adds some AVA test files for you to play with.
+Adds some AVA test files for you to play with.
 
 <File
   path="src/ava-example/sum.js"
@@ -24,7 +26,7 @@ Then, it adds some AVA test files for you to play with.
 
 ---
 
-Finally, it adds a `test` & `test:watch` scripts to your package.json.
+Adds a `test` & `test:watch` scripts to your package.json.
 
 Then you can run `npm run test` — AVA will run your test!
 

packages/gatsby-recipes/recipes/cypress.mdx

@@ -2,17 +2,19 @@ Gatsby and Cypress can be used together seamlessly (and should be!). [Cypress](h
 
 First, we'll want to install Cypress and additional dependencies.
 
+This recipe:
+
 ---
 
-Add dependencies to your package.json, including a useful package `gatsby-cypress`. `gatsby-cypress` exposes additional Cypress functionality which makes Gatsby and Cypress work together just a bit more nicely. You'll see that later with your first test, but hold tight for just a bit because first you need to scaffold out some boilerplate files for Cypress.
+Adds dependencies to your package.json, including a useful package `gatsby-cypress`. `gatsby-cypress` exposes additional Cypress functionality which makes Gatsby and Cypress work together just a bit more nicely. You'll see that later with your first test after running this recipe.
 
 <NPMPackage name="cypress" dependencyType="development" />
 <NPMPackage name="gatsby-cypress" dependencyType="development" />
 <NPMPackage name="start-server-and-test" dependencyType="development" />
 
 ---
 
-Cool cool! So the recipe created a local `cypress` folder with two sub-folders, `support` and `plugins`. It also automatically included all the nice `gatsby-cypress` utilities, which you can now use in your first test.
+Creates a local `cypress` folder with two sub-folders, `support` and `plugins`. It automatically includes all the `gatsby-cypress` utilities, which you can use in your first test.
 
 <File
  path="cypress/plugins/index.js"
@@ -26,7 +28,7 @@ Cool cool! So the recipe created a local `cypress` folder with two sub-folders,
 
 ---
 
-Your first test! You'll notice it's failing. This is intentional -- you should run the test and fix it. 
+Runs a test that intentionally fails so you can practice fixing it. 
 
 <File
  path="cypress/integration/home-page/home-page.js"
@@ -35,7 +37,7 @@ Your first test! You'll notice it's failing. This is intentional -- you should r
 
 ---
 
-This raises a question -- how do you run a Cypress test? Easy peasy.
+Adds two scripts for running a Cypress test. 1) `start-server-and-test`: This spins up a local Gatsby development server and "waits" until it's live so we can then run our tests and 2) `test:e2e`: This is the command you'll use to run your tests.
 
 <NPMScript
   name="develop"
@@ -54,12 +56,7 @@ This raises a question -- how do you run a Cypress test? Easy peasy.
 
 ---
 
-Nifty! We've added two scripts:
-
-- `start-server-and-test`: This spins up a local Gatsby development server and "waits" until it's live so we can then run our tests
-- `test:e2e`: This is the command you'll use to run your tests.
-
-Let's give it a try. Run the following command in your terminal.
+After installing this recipe, you can run the following command in your terminal.
 
 npm run test:e2e
 

packages/gatsby-recipes/recipes/emotion.mdx

@@ -4,25 +4,25 @@
 both inline CSS styles and styled components. You can use each styling feature
 individually or together in the same file.
 
+This recipe:
+
 ---
 
-Install necessary NPM packages
+Installs necessary NPM packages.
 
 <NPMPackage name="gatsby-plugin-emotion" />
 <NPMPackage name="@emotion/core" />
 <NPMPackage name="@emotion/styled" />
 
 ---
 
-Install the Emotion plugin in gatsby-config.js
+Installs the Emotion plugin in gatsby-config.js
 
 <GatsbyPlugin name="gatsby-plugin-emotion" />
 
 ---
 
-Sweet, now it's ready to go.
-
-Let's also write out an example page you can use to play
+Writes out an example page you can use to play
 with Emotion.
 
 <File

packages/gatsby-recipes/recipes/eslint.mdx

@@ -16,32 +16,32 @@ without executing it.
 ## Why use this recipe
 
 Gatsby ships with a built-in ESLint setup. For most users,
-our built-in ESlint setup is all you need. If you know, however, that you’d like
+the built-in ESlint setup is all you need. If you know, however, that you’d like
 to customize your ESlint config e.g. your company has their own custom ESlint
-setup, this recipe sets this up for you.
+setup, this recipe makes that possible.
 
-You’ll replicate (mostly) the ESLint config Gatsby ships with so you can then
+This recipe replicates (mostly) the ESLint config Gatsby ships with and then you can
 add additional presets, plugins, and rules.
 
-If you run this recipe, it will perform the following actions.
+This recipe:
 
 ---
 
-Install necessary packages
+Installs necessary packages.
 
 <NPMPackage name="eslint-config-react-app" dependencyType={"development"} />
 <NPMPackage name="gatsby-plugin-eslint" dependencyType={"development"} />
 
 ---
 
-Install `gatsby-plugin-eslint`
+Installs `gatsby-plugin-eslint`.
 
 <GatsbyPlugin name="gatsby-plugin-eslint" />
 
 ---
 
-Write out a basic .eslintrc.js file that you can extend with your own chosen
-eslint plugins and presets
+Writes out a basic .eslintrc.js file that you can extend with your own chosen
+eslint plugins and presets.
 
 <File
   path=".eslintrc.js"

packages/gatsby-recipes/recipes/gatsby-plugin-layout.mdx

@@ -1,7 +1,6 @@
 # Setup gatsby-plugin-layout
-Setup [gatsby-plugin-layout](https://www.gatsbyjs.org/packages/gatsby-plugin-layout/?=gatsby%20layout)
 
-This plugin enables adding components which live above the page components and persist across page changes.
+This plugin sets up [gatsby-plugin-layout](https://www.gatsbyjs.org/packages/gatsby-plugin-layout/?=gatsby%20layout), which enables adding components that live above the page components and persist across page changes.
 
 This can be helpful for:
 
@@ -10,23 +9,23 @@ This can be helpful for:
 - Custom error handling using componentDidCatch
 - Inject additional data into pages using React Context.
 
+This recipe:
+
 ---
 
-Install necessary NPM packages
+Installs necessary NPM packages
 
 <NPMPackage name="gatsby-plugin-layout"/>
 
 ---
 
-Install the Layout plugin in gatsby-config.js
+Installs the Layout plugin in gatsby-config.js
 
 <GatsbyPlugin name="gatsby-plugin-layout"/>
 
 ---
 
-Sweet, now it's ready to go!
-
-Let's also write out a sample layout component to get started with.
+Writes out a sample layout component to get started with.
 
 <File
     path="src/layouts/index.js"

packages/gatsby-recipes/recipes/gatsby-plugin-react-helmet.mdx

@@ -1,31 +1,29 @@
 # Add React Helmet
 
-React Helmet is a reusable React component will manage all of your changes to the document head.
+React Helmet is a reusable React component that manages all of your changes to the document head.
 
-Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly.
+Helmet takes plain HTML tags and outputs plain HTML tags.
 
 [gatsby-plugin-helmet](https://www.gatsbyjs.org/packages/gatsby-plugin-react-helmet/?=react%20helmet) makes it easy to use React Helmet inside Gatsby projects as it automatically adds title and meta tags to the HTML during SSR.
 
+This recipe:
+
 ---
 
-Install necessary NPM packages
+Installs necessary NPM packages.
 
 <NPMPackage name="gatsby-plugin-react-helmet" />
 <NPMPackage name="react-helmet" />
 
 ---
 
-Install the React Helmet plugin in gatsby-config.js
+Installs the React Helmet plugin in `gatsby-config.js`.
 
 <GatsbyPlugin name="gatsby-plugin-react-helmet" />
 
 ---
 
-Great, now it's ready to go!
-
-It's also common to have a `<SEO>` component which helps ensure pages have the necessary title and meta tags.
-
-We'll write out one now.
+Writes out an `<SEO>` component which helps ensure pages have the necessary title and meta tags.
 
 <File
   path="src/components/seo.js"

packages/gatsby-recipes/recipes/gatsby-theme-blog-core.mdx

@@ -2,29 +2,32 @@
 
 [Gatsby theme blog core](https://www.gatsbyjs.org/packages/gatsby-theme-blog-core/) is a great theme for adding blog functionality to your site. It's designed to handle sourcing your blog data for you so you can style it however you like.
 
+This recipe:
+
 ---
 
-Install necessary NPM packages
+Installs necessary NPM packages.
 
 <NPMPackage name="gatsby-theme-blog-core" />
 
 ---
 
-Install the gatsby-theme-blog-core plugin in gatsby-config.js. Make use of the `basePath` configuration so the blog listing appears at `/blog`.
+Installs the `gatsby-theme-blog-core` plugin in `gatsby-config.js` and makes use of the `basePath` configuration so the blog listing appears at `/blog`.
 
 <GatsbyPlugin name="gatsby-theme-blog-core" options={{basePath: `/blog`}}/>
 
 ---
-Now let's add some posts! 
+
+Adds some posts. 
 
 <File path="content/posts/hello-world.md" content="https://gist.githubusercontent.com/laurieontech/c4729983c08e759cd10bf6a708ee2c0f/raw/ed8e1e5f6542928ac74f5ac3855db246e6980754/hello-world-post.md"/>
 <File path="content/posts/second-post.md" content="https://gist.githubusercontent.com/laurieontech/6957cd524dbbf0503682fad759001893/raw/eba38eb3048c190388f5348944d5114930fe4591/second-post.md"/>
 
 ---
 
-You're now set up to style your blog however you like!
+After installing this recipe, you will be setup to style your blog however you like.
 
-Run `gatsby develop` and check out `http://localhost:8000/blog` for the list of posts.
+When you've finished installing the recipe, run `gatsby develop` and check out `http://localhost:8000/blog` for the list of posts.
 
 Example content is available at `http://localhost:8000/blog/hello-world` and `http://localhost:8000/blog/second-post`.
 

packages/gatsby-recipes/recipes/gatsby-theme-blog.mdx

@@ -2,29 +2,30 @@
 
 [Gatsby theme blog](https://www.gatsbyjs.org/packages/gatsby-theme-blog/) is a great theme for adding blog functionality to your site.
 
+This recipe:
+
 ---
 
-Install necessary NPM packages
+Installs necessary NPM packages.
 
 <NPMPackage name="gatsby-theme-blog" />
 <NPMPackage name="gatsby-theme-blog-core" />
 
 ---
 
-Install the gatsby-theme-blog plugin in gatsby-config.js. Make use of the `basePath` configuration so the blog listing appears at `/blog`.
+Installs the `gatsby-theme-blog` plugin in `gatsby-config.js` and makes use of the `basePath` configuration so the blog listing appears at `/blog`.
 
 <GatsbyPlugin name="gatsby-theme-blog" options={{basePath: `/blog`}}/>
 
 ---
-Now let's add a post!
+
+Adds a post.
 
 <File path="content/posts/first-blog.md" content="https://gist.githubusercontent.com/laurieontech/dbd124e77f1fe96f18493f2e9c4ea62e/raw/03342f883c2cd1366dee47d257aa0dc598d1274c/hello-world-image.md"/>
 
 ---
 
-And just like that, you're ready to start blogging!
-
-Run `gatsby develop` and check out `http://localhost:8000/blog` for the list of posts.
+When you've finished installing the recipe, run `gatsby develop` and check out `http://localhost:8000/blog` for the list of posts.
 
 Example content is available at `http://localhost:8000/blog/first-blog`.
 

packages/gatsby-recipes/recipes/gatsby-theme-notes.mdx

@@ -2,28 +2,31 @@
 
 [Gatsby theme notes](https://www.gatsbyjs.org/packages/gatsby-theme-notes) is a great theme for adding learning notes to your site.
 
+This recipe:
+
 ---
 
-Install necessary NPM package
+Installs necessary NPM package.
 
 <NPMPackage name="gatsby-theme-notes" />
 
 ---
 
-Install the gatsby-theme-notes plugin in gatsby-config.js
+Installs the `gatsby-theme-notes` plugin in `gatsby-config.js`.
 
 <GatsbyPlugin name="gatsby-theme-notes" options={{basePath: `/notes`}}/>
 
 ---
-Now let's add a note!
+
+Adds a note.
 
 <File path="content/notes/learning.md" content="https://gist.githubusercontent.com/laurieontech/cf90cbee0bc69b106f2fa5109d055372/raw/58a012c02b6e9fffe3e93bc2a57bd5f01ef281b8/learning.md"/>
 
 ---
 
-Now you're ready to use your site for notetaking.
+After installing this recipe, you can use your site for notetaking.
 
-Run `gatsby develop` and check out `http://localhost:8000/notes` for the list of notes.
+When you've finished installing the recipe, run `gatsby develop` and check out `http://localhost:8000/notes` for the list of notes.
 
 ---
 

packages/gatsby-recipes/recipes/gitlab-ci-cd.mdx

@@ -1,10 +1,12 @@
 # Add GitLab CI/CD
 
-This recipe helps you setup GitLab CI/CD in your Gatsby site to create a pipeline on gitlab.com
+This recipe helps you setup GitLab CI/CD in your Gatsby site to create a pipeline on gitlab.com.
+
+This recipe:
 
 ---
 
-Adding the `.gitlab-ci.yml`
+Adds the `.gitlab-ci.yml`.
 
 <File
   path=".gitlab-ci.yml"
@@ -13,9 +15,9 @@ Adding the `.gitlab-ci.yml`
 
 ---
 
-Now, every time you `git push <you-remote-gitlab-repo>` you will have your gatsby project building!
+After installing this recipe, every time you `git push <you-remote-gitlab-repo>` you will have your gatsby project building.
 
----
+More resources:
 
 - See how you can develop this simple file into something more real world [GitLab CI/CD Docs](https://docs.gitlab.com/ee/ci/README.html)
 - Check this especially to learn how to make your newly build available for a next job - [GitLab Job Artifacts Docs](https://docs.gitlab.com/ee/ci/pipelines/job_artifacts.html)