www: move dotenv to gatsby-config so it can be used with GATSBY_SCREENSHOT_PLACEHOLDER (#9851)

Author: pieh

docs/docs/programmatically-create-pages-from-data.md

@@ -23,7 +23,7 @@ which is at the core of programmatically creating a page.
 
 ```javascript{17-25}:title=gatsby-node.js
 exports.createPages = ({ graphql, actions }) => {
-  const { createPage } = actions;
+  const { createPage } = actions
   return new Promise((resolve, reject) => {
     graphql(`
       {
@@ -45,12 +45,12 @@ exports.createPages = ({ graphql, actions }) => {
           context: {
             slug: node.fields.slug,
           },
-        });
-      });
-      resolve();
-    });
-  });
-};
+        })
+      })
+      resolve()
+    })
+  })
+}
 ```
 
 For each page we want to create we must specify the `path` for visiting that
@@ -66,23 +66,21 @@ that will be used to render the page. Here is an example of what the
 referenced template could look like:
 
 ```javascript:title=gatsby-node.js
-import React from 'react';
-import { graphql } from 'gatsby';
-import Layout from '../components/layout';
+import React from "react"
+import { graphql } from "gatsby"
+import Layout from "../components/layout"
 
 export default ({ data }) => {
-  const post = data.markdownRemark;
+  const post = data.markdownRemark
   return (
     <Layout>
       <div>
-        <h1>
-          {post.frontmatter.title}
-        </h1>
+        <h1>{post.frontmatter.title}</h1>
         <div dangerouslySetInnerHTML={{ __html: post.html }} />
       </div>
     </Layout>
-  );
-};
+  )
+}
 
 export const query = graphql`
   query($slug: String!) {
@@ -93,7 +91,7 @@ export const query = graphql`
       }
     }
   }
-`;
+`
 ```
 
 Notice that the `slug` value we specified in the `createPage` context is

packages/gatsby-transformer-screenshot/README.md

@@ -94,7 +94,7 @@ You can use placeholder image by setting `GATSBY_SCREENSHOT_PLACEHOLDER` environ
 GATSBY_SCREENSHOT_PLACEHOLDER=true gatsby develop
 ```
 
-or by adding it to `.env.development` file in root of your project:
+or by using [`dotenv`](https://www.gatsbyjs.org/docs/environment-variables/#server-side-nodejs) in your `gatsby-config.js` and adding `GATSBY_SCREENSHOT_PLACEHOLDER` to `.env.development` file in root of your project:
 
 ```shell:title=.env.development
 GATSBY_SCREENSHOT_PLACEHOLDER=true

www/gatsby-config.js

@@ -1,3 +1,7 @@
+require(`dotenv`).config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
 module.exports = {
   siteMetadata: {
     title: `GatsbyJS`,

www/gatsby-node.js

@@ -13,10 +13,6 @@ const moment = require(`moment`)
 
 let ecosystemFeaturedItems
 
-require(`dotenv`).config({
-  path: `.env.${process.env.NODE_ENV}`,
-})
-
 if (
   process.env.gatsby_executing_command === `build` &&
   !process.env.GITHUB_API_TOKEN