Add banner for Gatsby workshops (#4788)

* Add banner for Gatsby workshops * Copy edit
gatsbyjs · Apr 1, 2018 · 8b754c9 · 8b754c9
1 parent 66df579
commit 8b754c9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/packages/gatsby-plugin-google-analytics/src/index.js b/packages/gatsby-plugin-google-analytics/src/index.js
@@ -17,13 +17,15 @@ function OutboundLink(props) {
         ) {
           redirect = false
         }
-
+        if (props.target && props.target.toLowerCase() !== `_self`) {
+          redirect = false
+        }
         if (window.ga) {
-          ga(`send`, `event`, {
+          window.ga(`send`, `event`, {
             eventCategory: `Outbound Link`,
             eventAction: `click`,
             eventLabel: props.href,
-            transport: `beacon`,
+            transport: redirect ? `beacon` : ``,
             hitCallback: function() {
               if (redirect) {
                 document.location = props.href
@@ -44,6 +46,7 @@ function OutboundLink(props) {
 
 OutboundLink.propTypes = {
   href: PropTypes.string,
+  target: PropTypes.string,
 }
 
 export { OutboundLink }
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`}