Merge branch 'master' into wordpress-images

docs/docs/environment-variables.md

@@ -2,7 +2,11 @@
 title: "Environment Variables"
 ---
 
-You can easily provide environment variables to your site. Just add a `.env.development` and/or `.env.production` file in your root folder for development or production builds respectively. The environment variables are embedded during build time using Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/). Because these variables are provided at build time, you will need restart your dev server or rebuild your site after changing them.
+You can easily provide environment variables to your site. 
+
+For JavaScript loaded into the browser, just add a `.env.development` and/or `.env.production` file in your root folder for development or production builds respectively. The environment variables are embedded during build time using Webpack's [DefinePlugin](https://webpack.js.org/plugins/define-plugin/). Because these variables are provided at build time, you will need restart your dev server or rebuild your site after changing them.
+
+To add environment variables for the JavaScript run in node.js, e.g. in `gatsby-config.js` or `gatsby-node.js`, you can use the NPM package [dotenv](https://www.npmjs.com/package/dotenv). Once you've installed dotenv and followed their setup instructions, you can use your environment variables in the same way as shown in the example below.
 
 ## Example
 

docs/docs/plugins.md

@@ -133,6 +133,8 @@ you can place the files in a `src` subfolder and build them to the plugin folder
 * [gatsby-plugin-purify-css](https://github.com/rongierlach/gatsby-plugin-purify-css)
 * [gatsby-plugin-yandex-metrika](https://github.com/viatsko/gatsby-plugin-yandex-metrika)
 * [gatsby-plugin-klipse](https://github.com/ahmedelgabri/gatsby-plugin-klipse)
+* [gatsby-plugin-stripe-checkout](https://github.com/njosefbeck/gatsby-plugin-stripe-checkout)
+* [gatsby-plugin-stripe-elements](https://github.com/njosefbeck/gatsby-plugin-stripe-elements)
 * [gatsby-remark-emoji](https://github.com/Rulikkk/gatsby-remark-emoji)
 * [gatsby-remark-external-links](https://github.com/JLongley/gatsby-remark-external-links)
 * [gatsby-source-workable](https://github.com/tumblbug/gatsby-source-workable)

examples/using-gatsby-image/src/components/navigation.js

@@ -3,6 +3,50 @@ import Link from "gatsby-link"
 
 import { rhythm, scale, options } from "../utils/typography"
 
+const NavItem = ({ title, to }) => (
+  <li
+    css={{
+      display: `inline`,
+      fontFamily: options.headerFontFamily.join(`,`),
+      fontWeight: `300`,
+      "&:after": {
+        color: options.bodyColor,
+        content: ` / `,
+        opacity: 0.2,
+        padding: `0 ${rhythm(options.blockMarginBottom / 4)}`,
+      },
+      "&:last-child:after": {
+        display: `none`,
+      },
+      // These are not directly applied to <Link> to avoid React Router's
+      // <NavLink> from complaining about className not being a string
+      // but an object
+      // https://github.com/ReactTraining/react-router/issues/5593
+      "& .nav-link": {
+        backgroundImage: `none`,
+        color: options.bodyColor,
+        letterSpacing: `.005em`,
+        opacity: 0.57,
+        textTransform: `uppercase`,
+        transition: `all 200ms ease-out`,
+        whiteSpace: `nowrap`,
+      },
+      "& .nav-link-active, & .nav-link:hover": {
+        backgroundImage: `linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, ${options.accentColor} 1px, ${options.accentColor} 2px, rgba(0, 0, 0, 0) 2px)`,
+        color: options.accentColor,
+        opacity: 1,
+      },
+      "& .nav-link-active": {
+        // fontWeight: `700`,
+      },
+    }}
+  >
+    <Link to={to} className="nav-link" activeClassName="nav-link-active">
+      {title}
+    </Link>
+  </li>
+)
+
 const Navigation = () => (
   <div>
     <h1
@@ -23,60 +67,14 @@ const Navigation = () => (
     </h1>
     <ul
       css={{
-        fontFamily: options.headerFontFamily.join(`,`),
         margin: 0,
         listStyle: `none`,
-        "& li": {
-          display: `inline`,
-          fontWeight: `300`,
-        },
-        "& li:after": {
-          content: ` / `,
-          color: options.bodyColor,
-          opacity: 0.2,
-          padding: `0 ${rhythm(options.blockMarginBottom / 4)}`,
-        },
-        "& li:last-child:after": {
-          display: `none`,
-        },
-        "& a": {
-          color: options.bodyColor,
-          opacity: 0.57,
-          textTransform: `uppercase`,
-          backgroundImage: `none`,
-          transition: `all 200ms ease-out`,
-          letterSpacing: `.005em`,
-        },
-        "& .nav-link-active, & a:hover": {
-          color: options.accentColor,
-          opacity: 1,
-          backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 1px, ${options.accentColor} 1px, ${options.accentColor} 2px, rgba(0, 0, 0, 0) 2px);`,
-        },
-        "& .nav-link-active": {
-          // fontWeight: `700`,
-        },
       }}
     >
-      <li>
-        <Link to="/blur-up/" activeClassName="nav-link-active">
-          Blur Up
-        </Link>
-      </li>
-      <li>
-        <Link to="/background-color/" activeClassName="nav-link-active">
-          Background Color
-        </Link>
-      </li>
-      <li>
-        <Link to="/traced-svg/" activeClassName="nav-link-active">
-          Traced SVG
-        </Link>
-      </li>
-      <li>
-        <Link to="/prefer-webp/" activeClassName="nav-link-active">
-          Prefer WebP
-        </Link>
-      </li>
+      <NavItem to="/blur-up/" title="Blur Up" />
+      <NavItem to="/background-color/" title="Background Color" />
+      <NavItem to="/traced-svg/" title="Traced SVG" />
+      <NavItem to="/prefer-webp/" title="Prefer WebP" />
     </ul>
   </div>
 )

examples/using-gatsby-image/src/pages/traced-svg.js

@@ -33,9 +33,9 @@ const UnsplashMasonry = edges => (
         },
       }}
     >
-      {edges.images.map(image => (
+      {edges.images.map((image, index) => (
         <div
-          key={image.node.src}
+          key={index}
           css={{
             border: `4px solid transparent`,
             breakInside: `avoid`,

examples/using-redirects/src/layouts/index.js

@@ -42,8 +42,7 @@ const TemplateWrapper = ({ children }) => (
       meta={[
         {
           name: `description`,
-          content:
-            `Gatsby example site demonstrating using createRedirect for client-side, in browser redirection in Gatsby`,
+          content: `Gatsby example site demonstrating using createRedirect for client-side, in browser redirection in Gatsby`,
         },
       ]}
     />

examples/using-redirects/src/pages/index.js

@@ -13,7 +13,8 @@ const IndexPage = () => (
       </code>
       &nbsp;<a href="https://www.gatsbyjs.org/docs/bound-action-creators/">
         bound action creator
-      </a>{` `}
+      </a>
+      {` `}
       example.
     </p>
     <p>
@@ -34,16 +35,17 @@ const IndexPage = () => (
       The{` `}
       <Link activeClassName="selected" to="/">
         here
-      </Link>{` `}
+      </Link>
+      {` `}
       link uses{` `}
-      <a href="https://www.gatsbyjs.org/packages/gatsby-link/">
-        gatsby-link
-      </a>{` `}
+      <a href="https://www.gatsbyjs.org/packages/gatsby-link/">gatsby-link</a>
+      {` `}
       <code>activeClassName</code>
       &nbsp;support derived from{` `}
       <a href="https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md">
         React Router’s NavLink component
-      </a>{` `}
+      </a>
+      {` `}
       to apply the <code>selected</code>
       &nbsp;class to links that match to the active path, and{` `}
       <code>import './selected.css'</code>

examples/using-redux/package.json

@@ -7,11 +7,8 @@
   "dependencies": {
     "gatsby": "latest",
     "gatsby-link": "latest",
-    "lodash": "^4.16.4",
     "react-redux": "5.0.5",
-    "react-router-redux": "4.0.8",
-    "redux": "3.6.0",
-    "slash": "^1.0.0"
+    "redux": "3.6.0"
   },
   "keywords": ["gatsby"],
   "license": "MIT",

packages/gatsby-plugin-sharp/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-sharp",
   "description": "Wrapper of the Sharp image manipulation library for Gatsby plugins",
-  "version": "1.6.12",
+  "version": "1.6.13",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
     "async": "^2.1.2",

packages/gatsby-plugin-sharp/src/index.js

@@ -644,7 +644,8 @@ async function notMemoizedtraceSVG({ file, args, fileArgs }) {
   }
 
   const tmpDir = require(`os`).tmpdir()
-  const tmpFilePath = `${tmpDir}/${file.name}-${crypto
+  const tmpFilePath = `${tmpDir}/${file.internal
+    .contentDigest}-${file.name}-${crypto
     .createHash(`md5`)
     .update(JSON.stringify(fileArgs))
     .digest(`hex`)}.${file.extension}`

packages/gatsby-remark-images/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-remark-images",
-  "version": "1.5.23",
+  "version": "1.5.24",
   "description": "Processes images in markdown so they can be used in the production build.",
   "main": "index.js",
   "keywords": [
@@ -20,7 +20,7 @@
   "dependencies": {
     "babel-runtime": "^6.26.0",
     "cheerio": "^1.0.0-rc.2",
-    "gatsby-plugin-sharp": "^1.6.12",
+    "gatsby-plugin-sharp": "^1.6.13",
     "is-relative-url": "^2.0.0",
     "lodash": "^4.17.4",
     "slash": "^1.0.0",

packages/gatsby-source-wordpress/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-source-wordpress",
   "description": "Gatsby source plugin for building websites using the Wordpress CMS as a data source.",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "author": "Sebastien Fichot <fichot.sebastien@gmail.com>",
   "bundleDependencies": false,
   "dependencies": {

www/src/pages/docs/doc-links.yaml

@@ -47,7 +47,9 @@
     - title: Adding a List of Markdown Blog Posts*
       link: /docs/adding-a-list-of-markdown-blog-posts/
     - title: Adding Tags and Categories to Blog Posts*
-      link:: /docs/adding-tags-and-categories-to-blog-posts/
+      link: /docs/adding-tags-and-categories-to-blog-posts/
+    - title: Adding Markdown Pages*
+      link: /adding-markdown-pages/
     - title: Creating Dynamically-Rendered Navigation*
       link: /docs/creating-dynamically-rendered-navigation/
     - title: Dropping Images into Static Folders*