[v2] Merge master

README.md

@@ -247,6 +247,7 @@ Websites built with Gatsby:
 - [Airbnb Cereal](https://airbnb.design/cereal/)
 - [mottox2 blog](https://mottox2.com)
 - [Tiger Facility Services](https://www.tigerfacilityservices.com/)
+- [Jersey Watch](https://www.jerseywatch.com/)
 
 ## Docs
 

docs/blog/2018-06-18-why-narative-loves-gatsby/index.md

@@ -0,0 +1,58 @@
+---
+title: Why Narative loves Gatsby
+date: "2018-06-18"
+author: "Dennis Brotzky"
+tags: ["gatsby", "narative", "graphql", "blog", "agency"]
+excerpt: "Redefining how Narative builds page based websites with Gatsby"
+canonicalLink: "https://medium.com/narative/why-narative-loves-gatsbyjs-825b6b3bc9a4"
+---
+
+![Why Narative loves Gatsby hero](narative-gatsby-hero.jpg)
+
+To understand why we love Gatsby you have to understand what we do at Narative. Narative is a digital studio that focuses on creating the best brands and products in the world. Our team works on everything from page based websites to complex web apps. The core of our engineering team works in the React ecosystem and has experience from some of the best startups in Canada.
+
+Traditionally, building page based websites, such as marketing websites, landing pages, or blogs, would require a vastly different skillset from building interactive web apps. There are popular tools such as WordPress or Drupal that are written in their own flavour of PHP or static site generators such as Jekyll, Hugo, and Middleman that leverage templating to build static websites. _The problem we've found with these tools is that there is very little overlap between web app development and page based development_. Within the last couple years, React has taken over web app development and popularized an intuitive API for building user interfaces. React has also created an astonishing community of developers that are focused on creating amazing tools to accelerate and improve UI development.
+
+Part of our mission at Narative is to provide technical excellence through an engineering team that is proud and cohesive. To help accomplish this, we need a team that can share its knowledge, tools, and skills amongst itself and with the community around it.
+
+# The beauty of Gatsby
+
+Gatsby allows our team to use the powerful React API when creating page based websites with almost no drawbacks. _All the principles and techniques we've learned from using React for the last few years can be leveraged with Gatsby_. This has enabled us to create a team that is extremely dynamic and cohesive without the worry of creating silos or losing knowledge across teams. _Our team is able to learn once, write everywhere_. With an engineering team that's familiar with React and Gatsby we're able to tackle more problems faster, which is highly beneficial to our partners and the services we offer.
+
+One concern we had when adopting Gatsby is that page based websites are not the same as web apps. Even though we're using similar tools to build them there are different principles that drive each type of development. Luckily, our team doesn't have to worry about that problem, because the team behind Gatsby is focused on delivering the perfect experience to end users for us. The Gatsby team has baked in all the necessary features to make our websites fast and up to standard.
+
+# Gatsby's fast, really fast
+
+Gatsby handles a lot of the complexity of delivering a fast website for you. There are new performance standards built into it; we don't have to worry about code splitting, service workers / progress web app capabilities, server side rendering, asset optimization, and basic security.
+
+Great performance out-of-the-box is a huge win. Our team does not have to focus on these optimizations anymore. Instead, we focus on telling the story and building the values of our partners into our websites and web apps.
+
+# Developing with Gatsby is fast, really fast
+
+Gatsby does not only allow us to deliver fast websites, it has also sped up our development time. The developer experience is another focus of the team behind Gatsby - and it shows. Features such as live reload are ready to go at when you start a new project. There's no need to setup a custom Webpack configuration as the basics are completed for you. Building your website and deploying is also carefully thought out by Gatsby and often requires running a single command and using one of the many integrations for hosting. Furthermore, the documentation is comprehensive and has plenty of content from introductory guides to complex use cases. This has been amazing for training and on boarding new members of our team, especially if they're already familiar with React.
+
+# Separation between view and data layers
+
+Many popular CMS tools are tightly coupled to their source of data. Gatsby offers a clear separation between the data and view layer building on top of the Headless CMS principles. The advantage for Narative is that we can develop without CMS lock-in such as WordPress. If our team decides to go with a new view layer the migration would be less painful than migrating all the data as well. Often times flexibility in software means more complexity to manage but in this case the flexibility is in the right spots where it reduces complexity.
+
+We pass this flexibility on to our partners. They are able to manage their data while _our team is able to deliver an excellent product on top of their existing infrastructure. This has made our solutions to revamping legacy projects even stronger than before_.
+
+# Plugins and integrations
+
+Tools such as WordPress have a strong appeal because of the maturity and vast plugin ecosystem build around it. Gatsby has a well architected plugin-system that has already met our needs at Narative. The plugins are modern, plentiful, and easy to create if needed.
+
+![Plugins making up a website](narative-gatsby-plugins.jpg)
+
+Beyond all the plugins, Gatsby provides integrations into today's popular tools. Integrations such as Contentful are a perfect match for Gatsby because of the separation between data and view layers. Every major hurdle we thought we'd have to solve has already been taken care of by the Gatsby team and their custom integrations.
+
+# Conclusion
+
+Narative strives for technical excellence for all its products, which can be achieved with React, Gatsby, and GraphQL for us. We've landed on a solution that allows our team to stay cohesive and flexible. Thanks to the popularization of React and the principles behind it _Narative has been able to build page based websites and web apps with the same expertise. In the past, it was hard to share knowledge and tools between page based websites and web apps but now there's very little difference_.
+
+Gatsby streamlines our process with an excellent developer experience and all the features you could ask for in 2018. The heavy lifting of delivering a technically sound website with performance that users will love has slowly shifted towards frameworks such as Gatsby, which has freed up our team to focus on even better experiences and products.
+
+To conclude, Gatsby may not be the perfect solution for your project, but for our needs it's perfect. By building with Gatsby, we've extended our team to an amazing group of people that are working hard to improve page based websites. We're excited to see where Gatsby takes us next.
+
+# Narative
+
+[Narative](https://narative.co) is a digital studio co-founded by designers, engineers and strategists with decades of experience at Canada's most successful startups. We merge best practices in design, engineering, and growth marketing to create narratives that empowers your brand and product.

docs/blog/author.yaml

@@ -137,6 +137,10 @@
   bio: Marketing execution machine. I think critically, adjust often, and find creative solutions to problems.
   avatar: avatars/linda-watkins.jpg
   twitter: "@lindawatkins"
+- id: Dennis Brotzky
+  bio: Co-founder at Narative, driving Product and Engineering forward.
+  avatar: avatars/dennis-brotzky.jpg
+  twitter: "@_brotzky"
 - id: Tony Spiro
   bio: Cosmic JS Co-founder. Building (blazing fast) apps faster @ https://cosmicjs.com
   avatar: avatars/tony-spiro.jpg

docs/docs/gatsby-starters.md

@@ -744,3 +744,19 @@ Community:
   - Prettier code styling
   - Webpack `BundleAnalyzerPlugin`
   - [README](https://github.com/greglobinski/gatsby-starter-hero-blog) / [DEMO](https://gatsby-starter-hero-blog.greglobinski.com/)
+
+* [gatsby-starter-ecommerce](https://github.com/parmsang/gatsby-starter-ecommerce)
+  [(demo)](https://parmsang.github.io/gatsby-starter-ecommerce/)
+
+  Features:
+
+  - Uses the [Moltin eCommerce Api ](https://moltin.com/)
+  - React 16 (gatsby-plugin-react-next)
+  - Stripe checkout
+  - Semantic-UI
+  - Styled components
+  - Google Analytics - (you enter the tracking-id)
+  - [React-headroom](https://github.com/KyleAMathews/react-headroom)
+  - Eslint & Prettier. Uses [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
+  - Authentication via Moltin (Login and Register)
+  - [More info here](https://github.com/parmsang/gatsby-starter-ecommerce)

docs/docs/image-tutorial.md

@@ -144,6 +144,7 @@ Here’s an example of creating specific widths and heights for images:
                   # like "src". In your site's code, remove them
                   # and use the fragments provided by Gatsby.
                   src
+
                   # This fragment won't work in the GraphQL
                   # explorer, but you can use it in your site.
                   # ...GatsbyImageSharpResolutions_withWebp
@@ -198,7 +199,7 @@ Here is what your `index.js` should look like with the query added:
 
 ```jsx
 import React from "react"
-import Link from "gatsby-link"
+import { Link } from "gatsby"
 import Img from "gatsby-image"
 
 const IndexPage = ({ data }) => {

docs/docs/wordpress-source-plugin-tutorial.md

@@ -8,7 +8,7 @@ title: "Wordpress Source Plugin Tutorial"
 
 In this tutorial, you will install the `gatsby-source-wordpress` plugin in order to pull blog and image data from a WordPress install into your Gatsby site and render that data. This [Gatsby + Wordpress demo site](https://using-wordpress.gatsbyjs.org/) shows you a sample of what you’re going to be building in this tutorial, although it’s missing the cool images you’ll be adding :D
 
-### Why go through this tutorial?
+## Why go through this tutorial?
 
 While each source plugin may operate differently from others, it’s worth going through this tutorial because you will almost definitely be using a source plugin in most Gatsby sites you build. This tutorial will walk you through the basics of connecting your Gatsby site to a CMS, pulling in data, and using React to render that data in beautiful ways on your site.
 
@@ -112,7 +112,7 @@ This next query will pull in a sorted list of the blogposts:
 }
 ```
 
-### Rendering the blogposts to `index.js`
+## Rendering the blogposts to `index.js`
 
 Now that you've created GraphQL queries that pull in the data you want, we'll use that second query to create a list of sorted blogpost titles on your site's homepage. Here is what your `index.js` should look like:
 

examples/using-emotion-prismjs/src/components/layout.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Fragment } from "react"
 import { Link, StaticQuery } from "gatsby"
 import PropTypes from "prop-types"
 import { css } from "react-emotion"
@@ -26,21 +26,23 @@ class Layout extends React.Component {
     const title = pageTitle ? `${pageTitle} — ${siteTitle}` : `${siteTitle}`
 
     return (
-      <>`       `<Helmet>
+      <Fragment>
+        <Helmet>
           <title>{title}</title>
           <meta
             name="description"
             content="Gatsby example site using Emotion and PrismJS"
           />
           <meta name="referrer" content="origin" />
-        </Helmet>`       `<div className={indexContainer}>
+        </Helmet>` `<div className={indexContainer}>
           <HeadingTag>
             <Link className={link} to={`/`}>
               Using Gatsby with Emotion and PrismJS
             </Link>
           </HeadingTag>
           {this.props.children}
-        </div>`     `</>
+        </div>
+      </Fragment>
     )
   }
 }

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Fragment } from "react"
 import Helmet from "react-helmet"
 import { injectGlobal } from "emotion"
 import styled, { css } from "react-emotion"
@@ -61,11 +61,12 @@ const subtitle = css({
 })
 
 const IndexPage = () => (
-  <>`   `<Helmet>
+  <Fragment>
+    <Helmet>
       <title>Gatsby Emotion</title>
       <meta name="description" content="Gatsby example site using Emotion" />
       <meta name="referrer" content="origin" />
-    </Helmet>`   `<Wrapper>
+    </Helmet>` `<Wrapper>
       <h1 className={title}>
         Hello World, this is my first component styled with{` `}
         <a href="https://emotion.sh/">emotion</a>!
@@ -81,7 +82,8 @@ const IndexPage = () => (
           gatsby-plugin-emotion docs
         </a>
       </p>
-    </Wrapper>` `</>
+    </Wrapper>
+  </Fragment>
 )
 
 export default IndexPage

examples/using-styled-components/src/pages/index.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Fragment } from "react"
 import Helmet from "react-helmet"
 import styled from "styled-components"
 
@@ -18,14 +18,15 @@ const Wrapper = styled.section`
 class IndexPage extends React.Component {
   render() {
     return (
-      <>`       `<Helmet>
+      <Fragment>
+        <Helmet>
           <title>Gatsby Styled Components</title>
           <meta
             name="description"
             content="Gatsby example site using Styled Components"
           />
           <meta name="referrer" content="origin" />
-        </Helmet>`       `<div
+        </Helmet>` `<div
           style={{
             margin: `0 auto`,
             marginTop: `3rem`,
@@ -42,7 +43,8 @@ class IndexPage extends React.Component {
               </a>
             </p>
           </Wrapper>
-        </div>`     `</>
+        </div>
+      </Fragment>
     )
   }
 }

packages/gatsby-link/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-link",
   "description": "An enhanced Link component for Gatsby sites with support for resource prefetching",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "author": "Kyle Mathews <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

packages/gatsby-plugin-catch-links/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-catch-links",
   "description": "Intercepts local links from markdown and other non-react pages and does a client-side pushState to avoid the browser having to refresh the page.",
-  "version": "2.0.2-alpha.2",
+  "version": "2.0.2-alpha.3",
   "author": "Kyle Mathews <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

packages/gatsby-plugin-page-creator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-page-creator",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "Gatsby plugin that automatically creates pages from React components in specified directories",
   "main": "index.js",
   "scripts": {

packages/gatsby-remark-images-contentful/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-remark-images-contentful",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "Process Images in Contentful markdown so they can use the images API.",
   "main": "index.js",
   "scripts": {

packages/gatsby-remark-images-contentful/src/index.js

@@ -75,7 +75,7 @@ module.exports = async (
       options,
     })
     // Calculate the paddingBottom %
-    const ratio = `${1 / responsiveSizesResult.aspectRatio * 100}%`
+    const ratio = `${(1 / responsiveSizesResult.aspectRatio) * 100}%`
 
     const fallbackSrc = `https${node.url}`
     const srcSet = responsiveSizesResult.srcSet

packages/gatsby/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gatsby",
   "description": "React.js Static Site Generator",
-  "version": "2.0.0-alpha.59",
+  "version": "2.0.0-alpha.61",
   "author": "Kyle Mathews <[email protected]>",
   "bin": {
     "gatsby": "./dist/bin/gatsby.js"
@@ -62,8 +62,8 @@
     "front-matter": "^2.1.0",
     "fs-extra": "^5.0.0",
     "gatsby-cli": "^2.0.0-alpha.2",
-    "gatsby-link": "^2.0.0-alpha.2",
-    "gatsby-plugin-page-creator": "^2.0.0-alpha.2",
+    "gatsby-link": "2.0.0-alpha.3",
+    "gatsby-plugin-page-creator": "^2.0.0-alpha.3",
     "gatsby-react-router-scroll": "^2.0.0-alpha.2",
     "glob": "^7.1.1",
     "graphql": "^0.13.2",

packages/gatsby/src/internal-plugins/query-runner/file-parser.js

@@ -151,7 +151,7 @@ async function findGraphQLTags(file, text): Promise<Array<DefinitionNode>> {
           ExportNamedDeclaration(path, state) {
             path.traverse({
               TaggedTemplateExpression(innerPath) {
-                const { ast: gqlAst, text, hash } = getGraphQLTag(innerPath)
+                const { ast: gqlAst } = getGraphQLTag(innerPath)
                 if (gqlAst) {
                   gqlAst.definitions.forEach(def => {
                     if (!def.name || !def.name.value) {

yarn.lock

@@ -3033,7 +3033,7 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000856"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000856.tgz#fbebb99abe15a5654fc7747ebb5315bdfde3358f"
 
-caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000844:
+caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000844:
   version "1.0.30000856"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000856.tgz#ecc16978135a6f219b138991eb62009d25ee8daa"
 
@@ -3937,7 +3937,7 @@ core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
-core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.3, core-js@^2.5.7:
+core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0, core-js@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
 
@@ -4982,7 +4982,7 @@ ejs@^2.4.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
 
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.47:
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.47:
   version "1.3.48"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.48.tgz#d3b0d8593814044e092ece2108fc3ac9aea4b900"
 
@@ -10673,6 +10673,14 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-latin@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/parse-latin/-/parse-latin-3.2.0.tgz#cfe4b420982b1d20fc16c71dfb33f148de4f1d0b"
+  dependencies:
+    nlcst-to-string "^2.0.0"
+    unist-util-modify-children "^1.0.0"
+    unist-util-visit-children "^1.0.0"
+
 parse-latin@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/parse-latin/-/parse-latin-4.1.1.tgz#3a3edef405b2d5dce417b7157d3d8a5c7cdfab1d"
@@ -12743,11 +12751,11 @@ retext-english@^3.0.0:
     parse-english "^4.0.0"
     unherit "^1.0.4"
 
-retext-latin@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/retext-latin/-/retext-latin-2.0.0.tgz#b11bd6cae9113fa6293022a4527cd707221ac4b6"
+retext-latin@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/retext-latin/-/retext-latin-1.0.0.tgz#57f41257b4d857b6c6df631ca5788d10080d7051"
   dependencies:
-    parse-latin "^4.0.0"
+    parse-latin "^3.1.0"
     unherit "^1.0.4"
 
 retext-smartypants@^3.0.0:
@@ -12757,9 +12765,9 @@ retext-smartypants@^3.0.0:
     nlcst-to-string "^2.0.0"
     unist-util-visit "^1.0.0"
 
-retext-stringify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/retext-stringify/-/retext-stringify-2.0.0.tgz#00238facc5491f5bcdc589703a4658db2e54415b"
+retext-stringify@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/retext-stringify/-/retext-stringify-1.0.0.tgz#0032e4be3254ea56b19242ef406515479a3346a9"
   dependencies:
     nlcst-to-string "^2.0.0"
 
@@ -14719,6 +14727,19 @@ unified@^4.1.1:
     trough "^1.0.0"
     vfile "^1.0.0"
 
+unified@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-5.1.0.tgz#61268da9b91ce925be1f3d198c0278b0e9716094"
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    has "^1.0.1"
+    is-buffer "^1.1.4"
+    once "^1.3.3"
+    trough "^1.0.0"
+    vfile "^2.0.0"
+    x-is-string "^0.1.0"
+
 unified@^6.0.0, unified@^6.1.4, unified@^6.1.5:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/unified/-/unified-6.2.0.tgz#7fbd630f719126d67d40c644b7e3f617035f6dba"