diff --git a/.eslintrc b/.eslintrc index 81f9691a139cb..424a3154912a4 100644 --- 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 index 16651d972a8f9..7866381b8d711 100644 --- 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 index bc3afc379b8f0..606853c5c5b3d 100644 --- 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 index 1309e218ea96a..3f925758c9338 100644 --- 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 index d7d1695e06bc4..dcaffc008a64d 100644 --- 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 index b06ee26ea1c55..3702a1c3d7e94 100644 --- a/packages/gatsby-plugin-google-analytics/README.md +++ b/packages/gatsby-plugin-google-analytics/README.md @@ -25,7 +25,29 @@ module.exports = { }, }, ], -}; +} +``` + +## `` 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 `` element e.g. + +```jsx +import React +import { Outboundink } from 'gatsby-plugin-google-analytics' + +export default () => { +
+ + Visit the Google Analytics plugin page! + +
+} ``` ## The "anonymize" option diff --git a/packages/gatsby-plugin-google-analytics/index.js b/packages/gatsby-plugin-google-analytics/index.js deleted file mode 100644 index 172f1ae6a468c..0000000000000 --- a/packages/gatsby-plugin-google-analytics/index.js +++ /dev/null @@ -1 +0,0 @@ -// noop diff --git a/packages/gatsby-plugin-google-analytics/package.json b/packages/gatsby-plugin-google-analytics/package.json index 0a187629be9b1..2abee4df897cc 100644 --- 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 ", "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 new file mode 100644 index 0000000000000..a1bbe085042be --- /dev/null +++ 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 ( + { + 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 index 3adb8ab7518ac..50cac727333ad 100644 --- 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 ", "bugs": { "url": "https://github.com/gatsbyjs/gatsby/issues" diff --git a/www/src/components/discord.js b/www/src/components/discord.js index 7da27ab938495..b273d2d0e40e9 100644 --- a/www/src/components/discord.js +++ b/www/src/components/discord.js @@ -11,16 +11,20 @@ const DiscordIcon = ({ overrideCSS }) => ( css={{ verticalAlign: `middle`, ...overrideCSS }} > - - + + C22.3,16.2,21.1,18.2,18,18.3L18,18.3z" + /> ) diff --git a/www/src/components/navigation.js b/www/src/components/navigation.js index 61a4bc2ed159e..6796f6c3e5a9b 100644 --- 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} /> - { }} > - +
{ [presets.Hd]: { display: `inline-block` }, }} > - { }} > - - + { }} > - +
diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js index 0902fdca7c97e..a4fff880d80ce 100644 --- 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 { +
+ Live 2-day Gatsby training with Kyle Mathews! Sign up for{" "} + + SF in April + {" "} + and{" "} + + NYC in May + ! +
Don't build a website with last decade's tech. The future of the web is mobile, JavaScript and APIs—the {` `} - JAMstack. 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. + + JAMstack + . 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. diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js index 56a75791e367f..539246b5f1e0a 100644 --- 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 { {` `} (originally published at{` `} - + {post.frontmatter.publishedAt} - ) + ) )} @@ -190,9 +191,9 @@ class BlogPostTemplate extends React.Component { post.frontmatter.imageAuthorLink && ( Image by{` `} - + {post.frontmatter.imageAuthor} - + )}
diff --git a/www/src/templates/template-contributor-page.js b/www/src/templates/template-contributor-page.js index 0e069bdb3683a..88836040e540a 100644 --- 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}

- + + {` `} {contributor.twitter} - +