Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions packages/gatsby-recipes/recipes/animated-page-transitions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@ This recipe helps you create transitions for animating between entering and exit

---

The first step is installing the NPM packages you need:
The recipe's first step is to install the NPM packages you need:

<NPMPackage name="gatsby-plugin-transition-link" />
<NPMPackage name="gsap" />

---

Add the plugin to your Gatsby config.
Then, it adds the following plugin to your Gatsby config:

<GatsbyPlugin name="gatsby-plugin-transition-link" />

---

Now let's create a few example pages to animate between:
Finally, it 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" />

Expand All @@ -28,5 +28,3 @@ Now let's create a few example pages to animate between:
When you run your site you can navigate to http://localhost:8000/transition-paint-drip to try it out.

See more examples about usage in the docs for the transition link plugin: https://transitionlink.tylerbarnes.ca/docs/

And your recipe is served!
10 changes: 5 additions & 5 deletions packages/gatsby-recipes/recipes/ava.mdx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# Add AVA

This recipe helps you setup AVA in your Gatsby site to test components and utilities
This recipe helps you setup AVA in your Gatsby site to test components and utilities.

---

Install the `ava` package
First, the recipe installs the `ava` package:

<NPMPackage name="ava" />

---

Adding some AVA test files for you to play with
Then, it adds some AVA test files for you to play with.

<File
path="src/ava-example/sum.js"
Expand All @@ -24,9 +24,9 @@ Adding some AVA test files for you to play with

---

Add a `test` & `test:watch` scripts to your package.json.
Finally, it adds a `test` & `test:watch` scripts to your package.json.

Now try running `npm run test` — AVA will run your test!
Then you can run `npm run test` — AVA will run your test!

While writing tests you can run `npm run test:watch` and tests will re-run
as you edit them.
Expand Down
3 changes: 1 addition & 2 deletions packages/gatsby-recipes/recipes/emotion.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# Setup Emotion

[Emotion](https://emotion.sh/) is a powerful CSS-in-JS library that supports both inline CSS styles and styled components. You can use each styling feature individually or together in the same file.

[Emotion](https://emotion.sh/) is a powerful CSS-in-JS library that supports both inline CSS styles and styled components. You can use each styling feature individually or together in the same file.
---

Install necessary NPM packages
Expand Down
8 changes: 5 additions & 3 deletions packages/gatsby-recipes/recipes/eslint.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,15 @@ 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
our 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.

You’ll replicate (mostly) the ESLint config Gatsby ships with so you can then
add additional presets, plugins, and rules.

If you run this recipe, it will perform the following actions.

---

Install necessary packages
Expand All @@ -39,13 +41,13 @@ Install `gatsby-plugin-eslint`
---

Write out a basic .eslintrc.js file that you can extend with your own chosen
eslint plugins and presets.
eslint plugins and presets

<File
path=".eslintrc.js"
content='https://gist.githubusercontent.com/KyleAMathews/5c4cfa4f58cc2707094f3ae5048e72f6/raw/5a57b14ccc957c8d21c4c6b2f10bba9d179254a1/.estlintrc.js'/>

---

ESlint is now installed! You can edit the eslint config by opening
Once the recipe is installed, you can edit the eslint config by opening
`.eslintrc.js` in your code editor.