Introduce banner for Harrow.io

Sorry chaps, we're trying a push to promote Harrow.io to try and make my
work on Capistrano sustainable, and to promote our new SaaS Harrow.io,
which is a new take on CI tooling focused on collaboration.

It was designed with "Web Based Capistrano" in mind, but as you might
imagine, once one builds a tool for running Cap in the "cloud" it's not
a big leap to run anything else.

Ping me off-list if you have any issues with anything here, we tried to
be very fair with the behaviour, cookie lifetimes and positioning.

tl;dr:

- Invisible by default (display none)
- Reasonable cookie lifetime
- Made visible using jQuery (.css("display", "block")

.gitignore

@@ -3,3 +3,4 @@ _site_site
 .bundle/
 /_site/
 *.swp
+vendor/

Gemfile.lock

@@ -124,3 +124,6 @@ PLATFORMS
 
 DEPENDENCIES
   github-pages
+
+BUNDLED WITH
+   1.10.3

_config.yml

@@ -5,4 +5,4 @@ lsi: false
 markdown: redcarpet
 redcarpet:
   extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]
-exclude: ["Gemfile", "Gemfile.lock", "README.md"]
+exclude: ["Gemfile", "Gemfile.lock", "README.md", "vendor"]

_includes/header.html

@@ -1,12 +1,24 @@
+<div class="harrowBanner">
+  <div class="harrowBanner__newRibbon">New!</div>
+  <h2 class="harrowBanner__title">Our web-based Capistrano</h2>
+  <p class="harrowBanner__p">
+    Improve collaboration within your team.
+    <br/>
+    Hosted, secure and available any time, from anywhere.
+  </p>
+  <a href="https://www.harrow.io/hosted-capistrano-for-teams/?utm_source=CAP&utm_medium=BAN&utm_term=00001&utm_campaign=00002utm_campaign=CAP_BAN_00001_00002#hosted-capistrano-for-teams" class="harrowBanner__ctaButton">Try it now!</a>
+  <a href="#" class="harrowBanner__dismissLink">No thanks</a>
+</div>
+
 <div class="header">
   <div class="row">
-    <div class="large-8 column">
+    <div class="large-12 column">
       <a href="/" class="brand">
         <img src="/images/CapistranoLogo.png" alt="capistrano logo" />
       </a>
     </div>
-    <div class="large-4 column">
-      {% include carbon.html %}
-    </div>
+    <!-- <div class="large&#45;4 column"> -->
+    <!--   {% include carbon.html %} -->
+    <!-- </div> -->
   </div>
 </div>

_includes/navigation.html

@@ -1,5 +1,5 @@
 <ul class="side-nav">
-  <li><a href="http://goo.gl/4sqEav" title="Harrow | Seamless collaboration for software teams"><span class="label label-important">New</span> Hosted Capistrano for Teams</a></li>
+  <li><a href="https://www.harrow.io/hosted-capistrano-for-teams/?utm_source=CAP&utm_medium=BAN&utm_term=00001&utm_campaign=00002utm_campaign=CAP_BAN_00001_00002#hosted-capistrano-for-teams" title="Harrow | Seamless collaboration for software teams"><span class="label label-important">New</span> Hosted Capistrano for Teams</a></li>
   <li class="divider"></li>
 
   <h5>Overview</h5>

_layouts/default.html

@@ -33,22 +33,27 @@
       </div>
     </div>
 
-    <!--<div class="container">                                     -->
-      <!--      <h1 class="title"><a href="/">{{ site.name }}</a></h1>-->
-      <!--      <a class="extra" href="/">home</a>                    -->
-      <!--    </div>                                                  -->
-
-    <!--    {{ content }}                                           -->
-
-    <!--</div> [> /container <]                                     -->
-
   {% include footer.html %}
 
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
-  <script>
-    if (!window.jQuery) {
-      document.write('<script src="/js/jquery-1.7.min"><\/script>');
+  <script src="/js/jquery-1.7.min.js"></script>
+  <script src="/js/jquery.cookie.js"></script>
+  <script type="text/javascript">
+  $(function(){
+    if ($.cookie('harrowBanner__dismissed') != '1') {
+      $('.harrowBanner').css('display', 'block');
+      ga('send', 'event', 'harrowBanner', 'shown');
+    } else {
+      ga('send', 'event', 'harrowBanner', 'alreadydismissed');
     }
+    $(".harrowBanner__ctaButton").on('click', function (e) {
+      ga('send', 'event', 'harrowBanner', 'clickthrough');
+    });
+    $(".harrowBanner__dismissLink").on('click', function (e) {
+      $.cookie('harrowBanner__dismissed', '1', { expires: 10});
+      $('.harrowBanner').hide();
+      ga('send', 'event', 'harrowBanner', 'dismiss');
+    });
+  });
   </script>
   <script src="/js/jquery.githubRepoWidget.min.js"></script>
   <script src="/js/prism.js"></script>

css/capistrano.css

@@ -23,9 +23,69 @@ body {
   margin-bottom: 30px;
   padding-top: 20px;
   background-color: #1C1B39;
-  height: 170px;
+  min-height: 170px;
 }
 
+.harrowBanner {
+  overflow: hidden;
+  position: absolute;
+  top: 140px;
+  max-width: 650px;
+  left:0;
+  right:0;
+  box-shadow: 5px 5px 15px rgba(0,0,0, 0.5);
+  max-width: 60%;
+  margin: auto;
+  /* outline: 1px dotted pink; */
+  text-align: center;
+  background-color: rgba(28, 25, 59, 0.95);
+  border: 2px solid rgba(255, 255, 255, 0.75);
+  padding: 20px 40px;
+  z-index: 10000;
+  display: none;
+}
+
+.harrowBanner__newRibbon {
+  width: 200px;
+  background-color: #95b;
+  position: absolute;
+  top: 0px;
+  left: -65px;
+  text-align: center;
+  line-height: 50px;
+  letter-spacing: 1px;
+  color: #f0f0f0;
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
+  font-weight: bold;
+}
+
+.harrowBanner__title {
+  color: #fff;
+}
+
+.harrowBanner__p {
+  color: #fff;
+}
+
+.harrowBanner__ctaButton {
+  background-color: #4CC1DD;
+  border-radius: 3px;
+  font-weight: bold;
+  padding: 10px 20px;
+  color: #fff;
+  display: inline-block;
+  margin-bottom: 20px;
+}
+
+.harrowBanner__dismissLink {
+  color: #fff;
+  font-size: 75%;
+  display: block;
+}
+
+
 h1, h2, h3, h4, h5, h6 {
   font-weight: 400;
   font-family: 'Enriqueta', serif;

js/jquery.cookie.js

@@ -0,0 +1,114 @@
+/*!
+ * jQuery Cookie Plugin v1.4.1
+ * https://github.com/carhartl/jquery-cookie
+ *
+ * Copyright 2006, 2014 Klaus Hartl
+ * Released under the MIT license
+ */
+(function (factory) {
+	if (typeof define === 'function' && define.amd) {
+		// AMD (Register as an anonymous module)
+		define(['jquery'], factory);
+	} else if (typeof exports === 'object') {
+		// Node/CommonJS
+		module.exports = factory(require('jquery'));
+	} else {
+		// Browser globals
+		factory(jQuery);
+	}
+}(function ($) {
+
+	var pluses = /\+/g;
+
+	function encode(s) {
+		return config.raw ? s : encodeURIComponent(s);
+	}
+
+	function decode(s) {
+		return config.raw ? s : decodeURIComponent(s);
+	}
+
+	function stringifyCookieValue(value) {
+		return encode(config.json ? JSON.stringify(value) : String(value));
+	}
+
+	function parseCookieValue(s) {
+		if (s.indexOf('"') === 0) {
+			// This is a quoted cookie as according to RFC2068, unescape...
+			s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
+		}
+
+		try {
+			// Replace server-side written pluses with spaces.
+			// If we can't decode the cookie, ignore it, it's unusable.
+			// If we can't parse the cookie, ignore it, it's unusable.
+			s = decodeURIComponent(s.replace(pluses, ' '));
+			return config.json ? JSON.parse(s) : s;
+		} catch(e) {}
+	}
+
+	function read(s, converter) {
+		var value = config.raw ? s : parseCookieValue(s);
+		return $.isFunction(converter) ? converter(value) : value;
+	}
+
+	var config = $.cookie = function (key, value, options) {
+
+		// Write
+
+		if (arguments.length > 1 && !$.isFunction(value)) {
+			options = $.extend({}, config.defaults, options);
+
+			if (typeof options.expires === 'number') {
+				var days = options.expires, t = options.expires = new Date();
+				t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
+			}
+
+			return (document.cookie = [
+				encode(key), '=', stringifyCookieValue(value),
+				options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
+				options.path    ? '; path=' + options.path : '',
+				options.domain  ? '; domain=' + options.domain : '',
+				options.secure  ? '; secure' : ''
+			].join(''));
+		}
+
+		// Read
+
+		var result = key ? undefined : {},
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all. Also prevents odd result when
+			// calling $.cookie().
+			cookies = document.cookie ? document.cookie.split('; ') : [],
+			i = 0,
+			l = cookies.length;
+
+		for (; i < l; i++) {
+			var parts = cookies[i].split('='),
+				name = decode(parts.shift()),
+				cookie = parts.join('=');
+
+			if (key === name) {
+				// If second argument (value) is a function it's a converter...
+				result = read(cookie, value);
+				break;
+			}
+
+			// Prevent storing a cookie that we couldn't decode.
+			if (!key && (cookie = read(cookie)) !== undefined) {
+				result[name] = cookie;
+			}
+		}
+
+		return result;
+	};
+
+	config.defaults = {};
+
+	$.removeCookie = function (key, options) {
+		// Must not alter options, thus extending a fresh object...
+		$.cookie(key, '', $.extend({}, options, { expires: -1 }));
+		return !$.cookie(key);
+	};
+
+}));