gatsbyjs · KyleAMathews · Apr 16, 2020 · Apr 1, 2020 · Apr 1, 2020 · Apr 1, 2020
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -14,4 +14,5 @@
 /themes/                                        @gatsbyjs/themes-core
 /packages/gatsby-plugin-mdx/                    @gatsbyjs/themes-core
 /packages/gatsby/src/bootstrap/load-themes      @gatsbyjs/themes-core
+/packages/gatsby-recipes/                       @gatsbyjs/themes-core
 /packages/gatsby/src/internal-plugins/webpack-theme-component-shadowing/   @gatsbyjs/themes-core
diff --git a/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/index.md b/docs/blog/2019-04-26-how-to-build-a-blog-with-wordpress-and-gatsby-part-1/index.md
@@ -102,8 +102,6 @@ When I build a Gatsby website, I like to use Netlify to handle the deployment of
 
 Netlify has the ability to create webhooks that you can grab to say, "Hey, there's new content so you need to rebuild". I built [WP Trigger Netlify Build](https://github.com/iamtimsmith/wp-trigger-netlify-build) to make this super easy to integrate with WordPress. Simply drop in the necessary information and it will tell Netlify to rebuild when changes are made. It even shows a badge with the status of the build on the dashboard.
 
-https://giphy.com/gifs/qyX9oq2ZmsPwk
-
 ## You have themes and plugins, now what?
 
 Not to be too anti-climactic, but there's really not a ton more to do on the WordPress side other than create content. These plugins and theme will pretty much expose everything you need to build your Gatsby.js blog.

diff --git a/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md b/docs/blog/2019-04-30-how-to-build-a-blog-with-wordpress-and-gatsby-part-2/index.md
@@ -18,7 +18,7 @@ In the last post, I covered setting up [WordPress for use with Gatsby](/blog/201
 
 I have set up a WordPress site for you to use with the plugins mentioned in the last post as well as some dummy content to use. If you're curious, my favorite lorem generator is [Fillerama](http://fillerama.io/) which offers random content from Futurama, Monty Python, Star Wars, and more. This is where the content came from.
 
-https://giphy.com/gifs/french-week-sDcfxFDozb3bO
+https://giphy.com/gifs/movie-funny-HfJdu4HABDU3e
 
 ## Gatsby.js starter
 
@@ -108,7 +108,7 @@ You can see there are several dependencies installed right off the bat. I'll jus
 
 Whew! That was a mouthful.
 
-https://giphy.com/gifs/monty-python-and-the-holy-grail-eb3WAhXzlUAFi
+https://giphy.com/gifs/movie-funny-HfJdu4HABDU3e
 
 ### Running the site
 

diff --git a/docs/blog/2019-08-14-strivectin-case-study/index.md b/docs/blog/2019-08-14-strivectin-case-study/index.md
@@ -119,8 +119,6 @@ We confidently ship code to production many times per day. At the time of writin
 
 StriVectin’s hosting costs have gone from \$2,000/month to just a few dollars per day. The servers will be decommissioned very soon.
 
-https://giphy.com/gifs/DC4g3SGNJpC
-
 Feature development and maintenance is much simpler. The codebase was around 20,000 files on Magento and went down to around 300.
 
 ## Final Thoughts

diff --git a/docs/blog/2019-11-14-announcing-gatsby-cloud/index.md b/docs/blog/2019-11-14-announcing-gatsby-cloud/index.md
@@ -3,7 +3,9 @@ title: "Announcing Gatsby Cloud"
 date: 2019-11-14
 author: "Kyle Mathews"
 excerpt: "I'm excited to announce that we're launching our commercial platform, Gatsby Cloud, which will provide a growing suite of tools for web creators"
-tags: ["gatsby-inc"]
+tags: ["gatsby-inc", "releases", "gatsby-cloud"]
+---
+
 ---
 
 We're excited to announce the launch of [Gatsby Cloud](https://www.gatsbyjs.com/): a commercial platform of stable, trusted tools that enable web creators to build better websites.

diff --git a/docs/starters.yml b/docs/starters.yml
@@ -4544,15 +4544,6 @@
     - Based on the official Gatsby starter blog
     - Uses TailwindCSS
     - Uses PostCSS
-- url: https://gatsby-starter-hello-world-with-header-and-footer.netlify.com/
-  repo: https://github.com/lgnov/gatsby-starter-hello-world-with-header-and-footer
-  description: Gatsby starter with a responsive barebones header and footer layout
-  tags:
-    - Styling:CSS-in-JS
-  features:
-    - Navbar and footer components with only minimal CSS that make responsiveness works
-    - Works in any device screen
-    - Easily kicking off your project with writing CSS right away
 - url: https://gatsby-minimalist-starter.netlify.com/
   repo: https://github.com/dylanesque/Gatsby-Minimalist-Starter
   description: A minimalist, general-purpose Gatsby starter

diff --git a/packages/gatsby-cli/src/create-cli.js b/packages/gatsby-cli/src/create-cli.js
@@ -293,6 +293,19 @@ function buildLocalCommands(cli, isLocalSite) {
       return cmd(args)
     }),
   })
+  cli.command({
+    command: `recipes`,
+    desc: `Run a recipe`,
+    handler: handlerP(
+      getCommandHandler(`recipes`, (args, cmd) => {
+        cmd(args)
+        // Return an empty promise to prevent handlerP from exiting early.
+        // The recipe command shouldn't ever exit until the user directly
+        // kills it so this is fine.
+        return new Promise(resolve => {})
+      })
+    ),
+  })
 }
 
 function isLocalGatsbySite() {

diff --git a/packages/gatsby-recipes/README.md b/packages/gatsby-recipes/README.md
@@ -0,0 +1,209 @@
+# Gatsby Recipes
+
+Gatsby Recipes is framework for automating common Gatsby tasks. Recipes are MDX
+files which, when run by our interpretor, perform common actions like installing
+NPM packages, installing plugins, creating pages, etc.
+
+It's designed to be extensible so new capabilities can be added which allow
+Recipes to automate more things.
+
+We chose MDX to allow for a literate programming style of writing recipes which
+enables us to port our dozens of recipes from
+https://www.gatsbyjs.org/docs/recipes/ as well as in the future, entire
+tutorials.
+
+[Read more about Recipes on the RFC](https://github.com/gatsbyjs/gatsby/pull/22610)
+
+There's an umbrella issue for testing / using Recipes during its incubation stage.
+
+Follow the issue for updates!
+
+https://github.com/gatsbyjs/gatsby/issues/22991
+
+## Recipe setup
+
+Upgrade the global gatsby-cli package to the latest with recipes.
+
+```shell
+npm install -g gatsby-cli@latest
+```
+
+To confirm that this worked, run `gatsby --help` in your terminal. The output should show the recipes command.
+
+### Running an example recipe
+
+Now you can test out recipes! Start with a recipe for installing `emotion` by following these steps:
+
+1. Create a new Hello World Gatsby site:
+
+```shell
+gatsby new try-emotion https://github.com/gatsbyjs/gatsby-starter-hello-world
+```
+
+1. Navigate into that project directory:
+
+```shell
+cd try-emotion
+```
+
+1. Now you can run the `emotion` recipe with this command:
+
+```shell
+gatsby recipes emotion
+```
+
+![Terminal showing "gatsby recipes emotion" output](https://user-images.githubusercontent.com/1424573/79452177-f3362f00-7fa4-11ea-903a-e28472bf95b6.png)
+
+You can see a list of other recipes to run by running `gatsby recipes`
+
+![Terminal showing recipes list](https://user-images.githubusercontent.com/1424573/79452254-14971b00-7fa5-11ea-9bdf-021c341afb10.png)
+
+## Developing Recipes
+
+### An example MDX recipe
+
+Here's how you would write the `gatsby recipes emotion` recipe you just ran:
+
+```mdx
+# Setup Gatsby with 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.
+
+<!-- use three dashes to separate steps of the recipe -->
+
+---
+
+Install necessary NPM packages
+
+<!-- refer to the API in this doc to see what APIs are available, like `NPMPackage` -->
+
+<NPMPackage name="gatsby-plugin-emotion" />
+<NPMPackage name="@emotion/core" />
+<NPMPackage name="@emotion/styled" />
+
+---
+
+Install 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
+with Emotion.
+
+<File
+  path="src/pages/emotion-example.js"
+  content="https://gist.githubusercontent.com/KyleAMathews/323bacd551df46e8e7b6146cbf827d0b/raw/5c60f168f30c505cff1ff2433e69dabe27ae9738/sample-emotion.js"
+/>
+
+---
+
+Read more about Emotion on the official Emotion docs site:
+
+https://emotion.sh/docs/introduction
+```
+
+### How to run recipes
+
+You can run built-in recipes, ones you write locally, and ones people have posted online.
+
+To run a local recipe, make sure to start the path to the recipe with a period like `gatsby recipes ./my-cool-recipe.mdx`
+
+To run a remote recipe, just paste in the path to the recipe e.g. `gatsby recipes https://example.com/sweet-recipe.mdx`
+
+### Recipe API
+
+#### `<GatsbyPlugin>`
+
+Installs a Gatsby Plugin in the site's `gatsby-config.js`.
+
+Soon will support options.
+
+```jsx
+<GatsbyPlugin name="gatsby-plugin-emotion" />
+```
+
+##### props
+
+- **name** name of the plugin
+
+#### `<GatsbyShadowFile>`
+
+<GatsbyShadowFile theme="gatsby-theme-blog" path="src/components/seo.js" />
+
+##### props
+
+- **theme** the name of the theme (or plugin) which provides the file you'd like to shadow
+- **path** the path to the file within the theme. E.g. the example file above lives at `node_modules/gatsby-theme-blog/src/components/seo.js`
+
+#### `<NPMPackage>`
+
+`<NPMPackage name="lodash" version="latest" />`
+
+##### props
+
+- **name**: name of the package(s) to install. Takes a string or an array of strings.
+- **version**: defaults to latest
+- **dependencyType**: defaults to `production`. Other options include `development`
+
+#### `<NPMScript>`
+
+`<NPMScript name="test" command="jest" />`
+
+##### props
+
+- **name:** name of the command
+- **command** the command that's run when the script is called
+
+#### `<File>`
+
+<File path="test.md" content="https://raw.githubusercontent.com/KyleAMathews/test-recipes/master/gatsby-recipe-jest.mdx" />
+
+##### props
+
+- **path** path to the file that should be created. The path is local to the root of the Node.js project (where the package.json is)
+- **content** URL to the content that should be written to the path. Eventually we'll support directly putting content here after some fixees to MDX.
+
+> Note that this content is stored in a [GitHub gist](https://gist.github.com/). When linking to a gist you'll want to click on the "Raw" button and copy the URL from that page.
+
+## FAQ / common issues
+
+### Q) My recipe is combining steps instead of running them seperately!
+
+We use the `---` break syntax from Markdown to separate steps.
+
+One quirk with it is for it to work, it must have an empty line above it.
+
+So this will work:
+
+```mdx
+# Recipes
+
+---
+
+a step
+
+<File src="something.txt" content="something" />
+```
+
+But this won't
+
+```mdx
+# Recipes
+
+---
+
+a step
+
+<File src="something.txt" content="something" />
+```
+
+### Q) What kind of recipe should I write?
+
+If you’d like to write a recipe, there are two great places to get an idea:
+
+- Think of a task that took you more time than other tasks in the last Gatsby site you built. Is there a way to automate any part of that task?
+- Look at this list of recipes in the Gatsby docs. Many of these can be partially or fully automated through creating a recipe `mdx` file. https://www.gatsbyjs.org/docs/recipes/
diff --git a/packages/gatsby-recipes/babel.config.js b/packages/gatsby-recipes/babel.config.js
@@ -0,0 +1,7 @@
+// This being a babel.config.js file instead of a .babelrc file allows the
+// packages in `internal-plugins` to be compiled with the rest of the source.
+// Ref: https://github.com/babel/babel/pull/7358
+
+const configPath = require(`path`).join(__dirname, `..`, `..`, `.babelrc.js`)
+
+module.exports = require(configPath)
diff --git a/packages/gatsby-recipes/index.js b/packages/gatsby-recipes/index.js
@@ -0,0 +1 @@
+// noop