From da013361ac83c738d6f54aef3906e1f0be47f409 Mon Sep 17 00:00:00 2001
From: shannonbux <shannon.soper@gmail.com>
Date: Tue, 28 Jul 2020 16:46:06 -0700
Subject: [PATCH] feat(gatsby-recipes)

---
 .../recipes/animated-page-transitions.mdx     |  8 +++++---
 packages/gatsby-recipes/recipes/ava.mdx       |  8 +++++---
 packages/gatsby-recipes/recipes/cypress.mdx   | 17 +++++++---------
 packages/gatsby-recipes/recipes/emotion.mdx   | 10 +++++-----
 packages/gatsby-recipes/recipes/eslint.mdx    | 16 +++++++--------
 .../recipes/gatsby-plugin-layout.mdx          | 13 ++++++------
 .../recipes/gatsby-plugin-react-helmet.mdx    | 16 +++++++--------
 .../recipes/gatsby-theme-blog-core.mdx        | 13 +++++++-----
 .../recipes/gatsby-theme-blog.mdx             | 13 ++++++------
 .../recipes/gatsby-theme-notes.mdx            | 13 +++++++-----
 .../gatsby-recipes/recipes/gitlab-ci-cd.mdx   | 10 ++++++----
 packages/gatsby-recipes/recipes/jest.mdx      | 20 ++++++++++---------
 .../gatsby-recipes/recipes/mdx-images.mdx     | 16 +++++++--------
 packages/gatsby-recipes/recipes/mdx-pages.mdx | 18 ++++++++---------
 packages/gatsby-recipes/recipes/preact.mdx    | 10 ++++++----
 .../recipes/prettier-git-hook.mdx             | 20 ++++++++++---------
 16 files changed, 117 insertions(+), 104 deletions(-)

diff --git a/packages/gatsby-recipes/recipes/animated-page-transitions.mdx b/packages/gatsby-recipes/recipes/animated-page-transitions.mdx
index cbd028d64d5d6..fe655a5021729 100644
--- a/packages/gatsby-recipes/recipes/animated-page-transitions.mdx
+++ b/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" />
 
diff --git a/packages/gatsby-recipes/recipes/ava.mdx b/packages/gatsby-recipes/recipes/ava.mdx
index f354d4f94a5bc..71b86eca47cd0 100644
--- a/packages/gatsby-recipes/recipes/ava.mdx
+++ b/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!
 
diff --git a/packages/gatsby-recipes/recipes/cypress.mdx b/packages/gatsby-recipes/recipes/cypress.mdx
index 8727891568e30..e2c380506c425 100644
--- a/packages/gatsby-recipes/recipes/cypress.mdx
+++ b/packages/gatsby-recipes/recipes/cypress.mdx
@@ -2,9 +2,11 @@ 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" />
@@ -12,7 +14,7 @@ Add dependencies to your package.json, including a useful package `gatsby-cypres
 
 ---
 
-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
 
diff --git a/packages/gatsby-recipes/recipes/emotion.mdx b/packages/gatsby-recipes/recipes/emotion.mdx
index 973fa41afaa08..c793ce47f4a38 100644
--- a/packages/gatsby-recipes/recipes/emotion.mdx
+++ b/packages/gatsby-recipes/recipes/emotion.mdx
@@ -4,9 +4,11 @@
 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" />
@@ -14,15 +16,13 @@ Install necessary NPM packages
 
 ---
 
-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
diff --git a/packages/gatsby-recipes/recipes/eslint.mdx b/packages/gatsby-recipes/recipes/eslint.mdx
index aa864f34ce3ba..fa850619d95bf 100644
--- a/packages/gatsby-recipes/recipes/eslint.mdx
+++ b/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"
diff --git a/packages/gatsby-recipes/recipes/gatsby-plugin-layout.mdx b/packages/gatsby-recipes/recipes/gatsby-plugin-layout.mdx
index 8f006e342a316..01b570ca33838 100644
--- a/packages/gatsby-recipes/recipes/gatsby-plugin-layout.mdx
+++ b/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"
diff --git a/packages/gatsby-recipes/recipes/gatsby-plugin-react-helmet.mdx b/packages/gatsby-recipes/recipes/gatsby-plugin-react-helmet.mdx
index b866a0085b987..37cdaad375a57 100644
--- a/packages/gatsby-recipes/recipes/gatsby-plugin-react-helmet.mdx
+++ b/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"
diff --git a/packages/gatsby-recipes/recipes/gatsby-theme-blog-core.mdx b/packages/gatsby-recipes/recipes/gatsby-theme-blog-core.mdx
index 3d9cee4bb5def..f300d07202c20 100644
--- a/packages/gatsby-recipes/recipes/gatsby-theme-blog-core.mdx
+++ b/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`.
 
diff --git a/packages/gatsby-recipes/recipes/gatsby-theme-blog.mdx b/packages/gatsby-recipes/recipes/gatsby-theme-blog.mdx
index 367daa7b6227f..e8bd0233e5167 100644
--- a/packages/gatsby-recipes/recipes/gatsby-theme-blog.mdx
+++ b/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`.
 
diff --git a/packages/gatsby-recipes/recipes/gatsby-theme-notes.mdx b/packages/gatsby-recipes/recipes/gatsby-theme-notes.mdx
index daf681ee74d2c..c1e77d942c250 100644
--- a/packages/gatsby-recipes/recipes/gatsby-theme-notes.mdx
+++ b/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.
 
 ---
 
diff --git a/packages/gatsby-recipes/recipes/gitlab-ci-cd.mdx b/packages/gatsby-recipes/recipes/gitlab-ci-cd.mdx
index 3144986ffe22e..b051195a5dff0 100644
--- a/packages/gatsby-recipes/recipes/gitlab-ci-cd.mdx
+++ b/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)
diff --git a/packages/gatsby-recipes/recipes/jest.mdx b/packages/gatsby-recipes/recipes/jest.mdx
index 4618a6a79a2f3..c2ec3cedcf954 100644
--- a/packages/gatsby-recipes/recipes/jest.mdx
+++ b/packages/gatsby-recipes/recipes/jest.mdx
@@ -1,20 +1,22 @@
 # Add Jest
 
-This recipe helps you setup Jest in your Gatsby site to test components and utilities
+This recipe helps you setup Jest in your Gatsby site to test components and utilities.
 
 <Config
   name="gatsbyjs/add-jest"
 />
 
+This recipe:
+
 ---
 
-Installing the `jest` package
+Installs the `jest` package.
 
 <NPMPackage name="jest" />
 
 ---
 
-Adding some jest test files for you to play with
+Adds some jest test files for you to play with.
 
 <File
   path="src/jest-example/sum.js"
@@ -28,12 +30,7 @@ Adding some jest test files for you to play with
 
 ---
 
-Adding a `test` & `test:watch` scripts to your package.json.
-
-Now Try running `npm run test` — jest will run your test!
-
-While writing tests you can run `npm run test:watch` and tests will re-run
-as you edit them.
+Adds a `test` & `test:watch` scripts to your `package.json`.
 
 <NPMScript
   name="test"
@@ -44,3 +41,8 @@ as you edit them.
   name="test:watch"
   command="jest --watch"
 />
+
+---
+
+Once you've installed this recipe, try running `npm run test` and jest will run your test. And, while writing tests, you can run `npm run test:watch` and tests will re-run
+as you edit them.
diff --git a/packages/gatsby-recipes/recipes/mdx-images.mdx b/packages/gatsby-recipes/recipes/mdx-images.mdx
index 0ae1cf9f32bd3..b631cc6ef69b5 100644
--- a/packages/gatsby-recipes/recipes/mdx-images.mdx
+++ b/packages/gatsby-recipes/recipes/mdx-images.mdx
@@ -1,14 +1,16 @@
 # Setup images in MDX with Gatsby
 
 This recipe installs and configures all
-the necessary NPM packages & Gatsby Plugins
+the necessary NPM packages & Gatsby plugins
 to enable inline-images in MDX and MD files.
 
 Based on https://www.gatsbyjs.org/docs/working-with-images-in-markdown/
 
+This recipe:
+
 ---
 
-Install NPM Packages
+Installs NPM Packages.
 
 <NPMPackage
   name="gatsby-source-filesystem"
@@ -38,9 +40,7 @@ Install NPM Packages
 
 ---
 
-Install Gatsby Plugins
-
-First, add `gatsby-source-filesystem` to read images from the src/images
+Adds Gatsby plugin `gatsby-source-filesystem` to read images from the src/images
 directory.
 
 <GatsbyPlugin
@@ -54,7 +54,7 @@ directory.
 
 ---
 
-Next, add `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, and `gatsby-transformer-remark` 
+Adds `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, and `gatsby-transformer-remark` 
 to handle image processing.
 
 <GatsbyPlugin
@@ -66,7 +66,7 @@ to handle image processing.
 
 ---
 
-Finally, configure `gatsby-plugin-mdx` to resolve images in MDX files.
+Configures `gatsby-plugin-mdx` to resolve images in MDX files.
 
 <GatsbyPlugin 
   name="gatsby-plugin-mdx" 
@@ -84,5 +84,5 @@ Finally, configure `gatsby-plugin-mdx` to resolve images in MDX files.
 
 ---
 
-All set! You're ready to start adding images to MDX pages.
+Once you've installed this recipe, you can start adding images to MDX pages.
 
diff --git a/packages/gatsby-recipes/recipes/mdx-pages.mdx b/packages/gatsby-recipes/recipes/mdx-pages.mdx
index 246acc2ce1d20..64dca65761b17 100644
--- a/packages/gatsby-recipes/recipes/mdx-pages.mdx
+++ b/packages/gatsby-recipes/recipes/mdx-pages.mdx
@@ -10,9 +10,11 @@ the necessary NPM packages & Gatsby Plugins
 to enable auto-creation of MDX pages within
 src/pages.
 
+This recipe:
+
 ---
 
-Install NPM Packages
+Installs NPM Packages.
 
 <NPMPackage
   name="gatsby-source-filesystem"
@@ -29,9 +31,7 @@ Install NPM Packages
 
 ---
 
-Install the Gatsby Plugins.
-
-First `gatsby-source-filesystem` to read the MDX files in the src/pages
+Adds `gatsby-source-filesystem` to read the MDX files in the src/pages
 directory.
 
 <GatsbyPlugin
@@ -45,13 +45,13 @@ directory.
 
 ---
 
-Then `gatsby-plugin-mdx` to convert MDX files to pages.
+Adds `gatsby-plugin-mdx` to convert MDX files to pages.
 
 <GatsbyPlugin name="gatsby-plugin-mdx" />
 
 ---
 
-Then we'll add an example MDX page for you to play with.
+Adds an example MDX page for you to play with.
 
 <File
   path="src/pages/test-mdx.mdx"
@@ -60,9 +60,9 @@ Then we'll add an example MDX page for you to play with.
 
 ---
 
-You're now ready to start writing MDX pages on your Gatsby site!
+Once you've installed this recipe, you can start writing MDX pages on your Gatsby site.
 
-Try editing the test-mdx.mdx file as well as adding your own!
+Once this recipe is installed, try editing the `test-mdx.mdx` file as well as adding your own file.
 
-Read more about MDX at https://mdxjs.com/
+Read more about MDX at https://mdxjs.com/.
 
diff --git a/packages/gatsby-recipes/recipes/preact.mdx b/packages/gatsby-recipes/recipes/preact.mdx
index a81a007c5900a..8befbb4f9bcc1 100644
--- a/packages/gatsby-recipes/recipes/preact.mdx
+++ b/packages/gatsby-recipes/recipes/preact.mdx
@@ -1,12 +1,14 @@
 # Make your Gatsby site faster with Preact.
 
-Preact is a small alternative to React with the same api.
+Preact is a small alternative to React with the same API.
 
 Preact will reduce the bundle size by ~30kb on the network and ~24kb during parse/compile time.
 
+This recipe:
+
 ---
 
-Install the necessary NPM packages:
+Installs the necessary NPM packages.
 
 <NPMPackage name="gatsby-plugin-preact" />
 <NPMPackage name="preact" />
@@ -14,7 +16,7 @@ Install the necessary NPM packages:
 
 ---
 
-Add the Preact plugin to your Gatsby config. It will setup the correct configuration, which will let gatsby use Preact instead of React.
+Adds the Preact plugin to your Gatsby config. It will setup the correct configuration, which will let gatsby use Preact instead of React.
 
 <GatsbyPlugin
   name="gatsby-plugin-preact"
@@ -22,4 +24,4 @@ Add the Preact plugin to your Gatsby config. It will setup the correct configura
 
 ---
 
-Your site is now faster than ever!
+Once you install this recipe, your site will be faster than ever!
diff --git a/packages/gatsby-recipes/recipes/prettier-git-hook.mdx b/packages/gatsby-recipes/recipes/prettier-git-hook.mdx
index 95f2ad8f44df6..4d71056d4af21 100644
--- a/packages/gatsby-recipes/recipes/prettier-git-hook.mdx
+++ b/packages/gatsby-recipes/recipes/prettier-git-hook.mdx
@@ -1,12 +1,14 @@
-# Automaically run Prettier on commits
+# Automatically run Prettier on commits
 
-Make sure all of your code is run through Prettier when you commit it to git.
-We achieve this by configuring prettier to run on git hooks using husky and
-lint-staged.
+Make sure all of your code is run through `prettier` when you commit it to git.
+We achieve this by configuring prettier to run on git hooks using `husky` and
+`lint-staged`.
+
+This recipe:
 
 ---
 
-Install packages.
+Installs packages.
 
 <NPMPackage name="husky" />
 <NPMPackage name="prettier" />
@@ -14,7 +16,7 @@ Install packages.
 
 ---
 
-Implement git hooks for prettier.
+Implements git hooks for `prettier`.
 
 <NPMPackageJson
   name="husky"
@@ -35,7 +37,7 @@ Implement git hooks for prettier.
 
 ---
 
-Write prettier config files.
+Writes `prettier` config files.
 
 <File
   path=".prettierrc"
@@ -55,5 +57,5 @@ node_modules
 
 ---
 
-Prettier, husky, and lint-staged are now installed! You can edit your `.prettierrc`
-if you'd like to change your prettier configuration.
+Once you've installed this recipe, `prettier`, `husky`, and `lint-staged` will be installed! You can edit your `.prettierrc`
+if you'd like to change your `prettier` configuration.
\ No newline at end of file