Merge branch 'master' into patch-7

gatsbyjs · Apr 2, 2018 · b9322e9 · b9322e9
2 parents 1637171 + 94da324
commit b9322e9
Show file tree

Hide file tree

Showing 16 changed files with 159 additions and 32 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -18,6 +18,7 @@
     }
   },
   "env": {
+    "browser": true,
     "es6": true,
     "node": true,
     "jest": true

diff --git a/README.md b/README.md
@@ -192,6 +192,7 @@ Websites built with Gatsby:
 * [CodeBushi](https://codebushi.com/)
 * [WebGazer](https://www.webgazer.io)
 * [Joe Seifi's Blog](http://seifi.org)
+* [Bartosz Dominiak Blog/Portfolio](http://www.bartoszdominiak.com/) ([source](https://github.com/bartdominiak/blog))
 
 ## Docs
 

diff --git a/docs/docs/gatsby-starters.md b/docs/docs/gatsby-starters.md
@@ -581,3 +581,16 @@ Community:
   * Single Page, Responsive Site
   * Custom grid made with CSS Grid
   * Styling with SCSS
+
+* [gatsby-starter-business](https://github.com/v4iv/gatsby-starter-business)
+  [(demo)](https://gatsby-starter-business.netlify.com/)
+
+  Features:
+
+  * Complete Business Website Suite - Home Page, About Page, Pricing Page, Contact Page and Blog
+  * Netlify CMS for Content Management
+  * SEO Friendly (Sitemap, Schemas, Meta Tags, GTM etc)
+  * Bulma and Sass Support for styling
+  * Progressive Web App & Offline Support
+  * Tags and RSS Feed for Blog
+  * Disqus and Share Support
diff --git a/docs/docs/seo.md b/docs/docs/seo.md
@@ -10,7 +10,7 @@ Because Gatsby pages are server-rendered, all the page content is available to G
 
 ### Speed boost
 
-Gatsby's many built-in performance optimizations, such as rendering to static files, progressive image loading, and the PRPL pattern—all help your site be lightning-fast by default. 
+Gatsby's many built-in performance optimizations, such as rendering to static files, progressive image loading, and the PRPL pattern—all help your site be lightning-fast by default.
 
 Starting in January 2018, Google [rewards faster sites with a bump in search rankings](https://searchengineland.com/google-speed-update-page-speed-will-become-ranking-factor-mobile-search-289904).
 
@@ -21,6 +21,6 @@ Add metadata to pages, such as page title and description, helps search engines
 A common way to add metadata to pages is to add [react-helmet](https://github.com/nfl/react-helmet) components (together with the [Gatsby React Helmet plugin](/packages/gatsby-plugin-react-helmet) for SSR support) to your page components.
 
 Some examples using react-helmet:
+
 * [Official GatsbyJS.org site](https://github.com/gatsbyjs/gatsby/blob/master/www/src/layouts/index.js)
 * [Jason Lengstorf's personal website](https://github.com/jlengstorf/lengstorf.com/blob/master/src/components/SEO.js)
-
diff --git a/packages/gatsby-plugin-google-analytics/.gitignore b/packages/gatsby-plugin-google-analytics/.gitignore
@@ -1,2 +1 @@
-/gatsby-browser.js
-/gatsby-ssr.js
+/*.js
diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
@@ -25,7 +25,29 @@ module.exports = {
       },
     },
   ],
-};
+}
+```
+
+## `<OutboundLink>` component
+
+To make it easy to track clicks on outbound links in Google Analytics,
+the plugin provides a component.
+
+To use it, simply import it and use it like you would the `<a>` element e.g.
+
+```jsx
+import React
+import { Outboundink } from 'gatsby-plugin-google-analytics'
+
+export default () => {
+  <div>
+    <Outboundink
+      href="https://www.gatsbyjs.org/packages/gatsby-plugin-google-analytics/"
+    >
+      Visit the Google Analytics plugin page!
+    </Outboundink>
+  </div>
+}
 ```
 
 ## The "anonymize" option

diff --git a/packages/gatsby-plugin-google-analytics/index.js b/packages/gatsby-plugin-google-analytics/index.js
diff --git a/packages/gatsby-plugin-google-analytics/package.json b/packages/gatsby-plugin-google-analytics/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-google-analytics",
   "description": "Gatsby plugin to add google analytics onto a site",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "author": "Kyle Mathews <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

diff --git a/packages/gatsby-plugin-google-analytics/src/index.js b/packages/gatsby-plugin-google-analytics/src/index.js
@@ -0,0 +1,52 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+function OutboundLink(props) {
+  return (
+    <a
+      {...props}
+      onClick={e => {
+        let redirect = true
+        if (
+          e.button !== 0 ||
+          e.altKey ||
+          e.ctrlKey ||
+          e.metaKey ||
+          e.shiftKey ||
+          e.defaultPrevented
+        ) {
+          redirect = false
+        }
+        if (props.target && props.target.toLowerCase() !== `_self`) {
+          redirect = false
+        }
+        if (window.ga) {
+          window.ga(`send`, `event`, {
+            eventCategory: `Outbound Link`,
+            eventAction: `click`,
+            eventLabel: props.href,
+            transport: redirect ? `beacon` : ``,
+            hitCallback: function() {
+              if (redirect) {
+                document.location = props.href
+              }
+            },
+          })
+        } else {
+          if (redirect) {
+            document.location = props.href
+          }
+        }
+
+        return false
+      }}
+    />
+  )
+}
+
+OutboundLink.propTypes = {
+  href: PropTypes.string,
+  target: PropTypes.string,
+}
+
+export { OutboundLink }
diff --git a/packages/gatsby-plugin-react-helmet/package.json b/packages/gatsby-plugin-react-helmet/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gatsby-plugin-react-helmet",
   "description": "Provides drop-in support for server rendering data added with react-helmet",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "author": "Kyle Mathews <[email protected]>",
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"

diff --git a/www/src/components/discord.js b/www/src/components/discord.js
@@ -11,16 +11,20 @@ const DiscordIcon = ({ overrideCSS }) => (
     css={{ verticalAlign: `middle`, ...overrideCSS }}
   >
     <g>
-      <path d="M11.5,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6
+      <path
+        d="M11.5,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6
                 C12.9,12.4,12.3,11.7,11.5,11.7L11.5,11.7z M16.6,11.7c-0.8,0-1.4,0.7-1.4,1.6s0.6,1.6,1.4,1.6c0.8,0,1.4-0.7,1.4-1.6
-                S17.4,11.7,16.6,11.7L16.6,11.7z" />
-      <path d="M23.4,0H4.6C3,0,1.8,1.3,1.8,2.9v18.9c0,1.6,1.3,2.9,2.9,2.9h15.9l-0.7-2.6l1.8,1.7l1.7,1.6
+                S17.4,11.7,16.6,11.7L16.6,11.7z"
+      />
+      <path
+        d="M23.4,0H4.6C3,0,1.8,1.3,1.8,2.9v18.9c0,1.6,1.3,2.9,2.9,2.9h15.9l-0.7-2.6l1.8,1.7l1.7,1.6
                 l3,2.7V2.9C26.2,1.3,25,0,23.4,0L23.4,0z M18,18.3c0,0-0.5-0.6-0.9-1.1c1.8-0.5,2.5-1.7,2.5-1.7c-0.6,0.4-1.1,0.6-1.6,0.8
                 c-0.7,0.3-1.4,0.5-2,0.6c-1.3,0.3-2.6,0.2-3.6,0c-0.8-0.2-1.5-0.4-2.1-0.6c-0.3-0.1-0.7-0.3-1-0.5c0,0-0.1,0-0.1-0.1c0,0,0,0-0.1,0
                 c-0.3-0.1-0.4-0.2-0.4-0.2s0.7,1.1,2.4,1.7c-0.4,0.5-0.9,1.2-0.9,1.2c-3.1-0.1-4.3-2.1-4.3-2.1c0-4.5,2-8.2,2-8.2
                 c2-1.5,3.9-1.5,3.9-1.5L12,6.7C9.5,7.4,8.3,8.5,8.3,8.5s0.3-0.2,0.8-0.4c1.5-0.7,2.7-0.8,3.2-0.9c0.1,0,0.2,0,0.2,0
                 c0.9-0.1,1.8-0.1,2.8,0c1.3,0.2,2.8,0.5,4.2,1.3c0,0-1.1-1.1-3.5-1.8l0.2-0.2c0,0,1.9,0,3.9,1.5c0,0,2,3.7,2,8.2
-                C22.3,16.2,21.1,18.2,18,18.3L18,18.3z" />
+                C22.3,16.2,21.1,18.2,18,18.3L18,18.3z"
+      />
     </g>
   </svg>
 )

diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js
@@ -1,9 +1,11 @@
 import React from "react"
 import Link from "gatsby-link"
 import TwitterIcon from "react-icons/lib/fa/twitter"
-import DiscordIcon from "../components/discord"
 import GithubIcon from "react-icons/lib/go/mark-github"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
+
 import SearchForm from "../components/search-form"
+import DiscordIcon from "../components/discord"
 import logo from "../logo.svg"
 import typography, { rhythm, scale } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
@@ -167,7 +169,7 @@ export default ({ pathname }) => {
             iconStyles={{ ...socialIconsStyles }}
             isHomepage={isHomepage}
           />
-          <a
+          <OutboundLink
             href="https://github.com/gatsbyjs/gatsby"
             title="GitHub"
             css={{
@@ -176,7 +178,7 @@ export default ({ pathname }) => {
             }}
           >
             <GithubIcon style={{ verticalAlign: `text-top` }} />
-          </a>
+          </OutboundLink>
 
           <div
             css={{
@@ -185,7 +187,7 @@ export default ({ pathname }) => {
               [presets.Hd]: { display: `inline-block` },
             }}
           >
-            <a
+            <OutboundLink
               href="https://discord.gg/0ZcbPKXt5bVoxkfV"
               title="Discord"
               css={{
@@ -194,8 +196,8 @@ export default ({ pathname }) => {
               }}
             >
               <DiscordIcon overrideCSS={{ verticalAlign: `text-top` }} />
-            </a>
-            <a
+            </OutboundLink>
+            <OutboundLink
               href="https://twitter.com/gatsbyjs"
               title="@gatsbyjs"
               css={{
@@ -205,7 +207,7 @@ export default ({ pathname }) => {
               }}
             >
               <TwitterIcon style={{ verticalAlign: `text-top` }} />
-            </a>
+            </OutboundLink>
           </div>
         </div>
       </div>

diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js
@@ -1,5 +1,6 @@
 import React from "react"
 import Helmet from "react-helmet"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import Navigation from "../components/navigation"
 import MobileNavigation from "../components/navigation-mobile"
@@ -8,7 +9,7 @@ import SearchBar from "../components/searchbar-body"
 import tutorialSidebar from "../pages/docs/tutorial-links.yml"
 import docsSidebar from "../pages/docs/doc-links.yaml"
 import featuresSidebar from "../pages/docs/features-links.yaml"
-import { rhythm } from "../utils/typography"
+import { rhythm, options } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
 import hex2rgba from "hex2rgba"
 import "../css/prism-coy.css"
@@ -59,7 +60,7 @@ class DefaultLayout extends React.Component {
       width: rhythm(10),
       display: `none`,
       position: `fixed`,
-      top: `calc(${presets.headerHeight} - 1px)`,
+      top: `calc(${presets.headerHeight} + 2.8rem - 1px)`,
       overflowY: `auto`,
       height: `calc(100vh - ${presets.headerHeight} + 1px)`,
       WebkitOverflowScrolling: `touch`,
@@ -127,6 +128,34 @@ class DefaultLayout extends React.Component {
           <meta name="og:site_name" content="GatsbyJS" />
           <html lang="en" />
         </Helmet>
+        <div
+          css={{
+            width: `100%`,
+            padding: rhythm(1 / 2),
+            background: colors.ui.bright,
+            color: colors.gatsby,
+            fontFamily: options.headerFontFamily.join(`,`),
+            textAlign: `center`,
+            boxShadow: `inset 0px -3px 2px 0px ${colors.ui.bright}`,
+          }}
+        >
+          Live 2-day Gatsby training with Kyle Mathews! Sign up for{" "}
+          <OutboundLink
+            target="_blank"
+            rel="noopener"
+            href="https://workshop.me/2018-04-gatsby"
+          >
+            SF in April
+          </OutboundLink>{" "}
+          and{" "}
+          <OutboundLink
+            target="_blank"
+            rel="noopener"
+            href="https://workshop.me/2018-05-gatsby"
+          >
+            NYC in May
+          </OutboundLink>!
+        </div>
         <Navigation pathname={this.props.location.pathname} />
         <div
           className={hasSidebar ? `main-body has-sidebar` : `main-body`}

diff --git a/www/src/pages/index.js b/www/src/pages/index.js
@@ -1,5 +1,6 @@
 import React from "react"
 import Link from "gatsby-link"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import presets, { colors } from "../utils/presets"
 import { rhythm, scale, options } from "../utils/typography"
@@ -82,9 +83,11 @@ class IndexRoute extends React.Component {
                 <FuturaParagraph>
                   Don't build a website with last decade's tech. The future of
                   the web is mobile, JavaScript and APIs—the {` `}
-                  <a href="https://jamstack.org/">JAMstack</a>. Every website is
-                  a web app and every web app is a website. Gatsby.js is the
-                  universal JavaScript framework you’ve been waiting for.
+                  <OutboundLink href="https://jamstack.org/">
+                    JAMstack
+                  </OutboundLink>. Every website is a web app and every web app
+                  is a website. Gatsby.js is the universal JavaScript framework
+                  you’ve been waiting for.
                 </FuturaParagraph>
               </Card>
               <Card>

diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js
@@ -4,6 +4,7 @@ import Link from "gatsby-link"
 import ArrowForwardIcon from "react-icons/lib/md/arrow-forward"
 import ArrowBackIcon from "react-icons/lib/md/arrow-back"
 import Img from "gatsby-image"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import presets, { colors } from "../utils/presets"
 import typography, { rhythm, scale, options } from "../utils/typography"
@@ -160,9 +161,9 @@ class BlogPostTemplate extends React.Component {
                   <span>
                     {` `}
                     (originally published at{` `}
-                    <a href={post.frontmatter.canonicalLink}>
+                    <OutboundLink href={post.frontmatter.canonicalLink}>
                       {post.frontmatter.publishedAt}
-                    </a>)
+                    </OutboundLink>)
                   </span>
                 )}
               </BioLine>
@@ -190,9 +191,9 @@ class BlogPostTemplate extends React.Component {
                   post.frontmatter.imageAuthorLink && (
                     <em>
                       Image by{` `}
-                      <a href={post.frontmatter.imageAuthorLink}>
+                      <OutboundLink href={post.frontmatter.imageAuthorLink}>
                         {post.frontmatter.imageAuthor}
-                      </a>
+                      </OutboundLink>
                     </em>
                   )}
               </div>

diff --git a/www/src/templates/template-contributor-page.js b/www/src/templates/template-contributor-page.js
@@ -1,10 +1,10 @@
 import React from "react"
 import Img from "gatsby-image"
+import { OutboundLink } from "gatsby-plugin-google-analytics"
 
 import Container from "../components/container"
 import BlogPostPreviewItem from "../components/blog-post-preview-item"
-import typography, { rhythm, scale, options } from "../utils/typography"
-import presets from "../utils/presets"
+import typography, { rhythm, options } from "../utils/typography"
 
 class ContributorPageTemplate extends React.Component {
   render() {
@@ -46,9 +46,10 @@ class ContributorPageTemplate extends React.Component {
             >
               {contributor.bio}
             </p>
-            <a href={`https://twitter.com/${contributor.twitter}`}>
+            <OutboundLink href={`https://twitter.com/${contributor.twitter}`}>
+              {` `}
               {contributor.twitter}
-            </a>
+            </OutboundLink>
           </div>
         </div>
         <div