Merge pull request #63 from ascribe/feature/subscribe

More subscriptions

_config.yml

@@ -17,6 +17,7 @@ github:
     repo:               bigchaindb
 medium:                 the-bigchaindb-blog
 googlegroup:            bigchaindb
+gitter:                 bigchaindb/bigchaindb
 disqus:                 bigchain
 
 address:

_src/_assets/images/gitter.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #ed1a55;
+        stroke-linecap: square;
+        stroke-width: 2px;
+      }
+    </style>
+  </defs>
+  <title>gitter</title>
+    <g id="gitter">
+      <path class="cls-1" d="M8,4V19.5"/>
+      <path class="cls-1" d="M12,4V19.5"/>
+      <path class="cls-1" d="M16,4v7"/>
+      <path class="cls-1" d="M4,1V11"/>
+    </g>
+</svg>

_src/_assets/javascripts/bigchain.js

@@ -7,6 +7,7 @@
 //=include bigchain/dnt.js
 
 //=include bigchain/form-contact.js
+//=include bigchain/newsletter.js
 
 
 jQuery(function($) {
@@ -16,6 +17,7 @@ jQuery(function($) {
     //
     Forms.init();
     FormContact.init();
+    Newsletter.init();
 
     if (!_dntEnabled()) {
         GoogleAnalytics.init();

_src/_assets/javascripts/bigchain/newsletter.js

@@ -0,0 +1,48 @@
+
+//=include ../vendor/jquery.ajaxchimp.js
+
+var Newsletter = (function(w, d, $) {
+
+    'use strict';
+
+    var app, _private, _config;
+
+    _config = {
+        newsletter: $('#newsletter')
+    },
+
+    _private = {
+        ajaxChimp: function() {
+            _config.newsletter.ajaxChimp({
+                callback: formCallback
+            });
+
+            function formCallback (resp) {
+                if (resp.result === 'success') {
+
+                    _config.newsletter.find('.input-group').addClass('hide');
+
+                    // send GA event
+                    ga('send', 'event', 'newsletter', 'subscribe', 'success', true);
+                }
+                if (resp.result === 'error') {
+                    _config.newsletter.find('.btn')
+                        .removeClass('disabled')
+                        .text('Subscribe');
+
+                    // send GA event
+                    ga('send', 'event', 'newsletter', 'subscribe', 'error', true);
+                }
+            }
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.ajaxChimp();
+        }
+    };
+
+    return app;
+
+})(window, document, jQuery);

_src/_assets/javascripts/vendor/jquery.ajaxchimp.js

@@ -0,0 +1,158 @@
+/*!
+Mailchimp Ajax Submit
+jQuery Plugin
+Author: Siddharth Doshi
+URL: https://github.com/scdoshi/jquery-ajaxchimp
+
+---
+Modified by: Matthias Kretschmann
+- changes to work with our form control feedback styles
+- changes to work with our parsley form validation
+---
+
+Use:
+===
+$('#form_id').ajaxchimp(options);
+
+- Form should have one <input> element with attribute 'type=email'
+- Form should have one label element with attribute 'for=email_input_id' (used to display error/success message)
+- All options are optional.
+
+Options:
+=======
+options = {
+    language: 'en',
+    callback: callbackFunction,
+    url: 'http://blahblah.us1.list-manage.com/subscribe/post?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f'
+}
+
+Notes:
+=====
+To get the mailchimp JSONP url (undocumented), change 'post?' to 'post-json?' and add '&c=?' to the end.
+For e.g. 'http://blahblah.us1.list-manage.com/subscribe/post-json?u=5afsdhfuhdsiufdba6f8802&id=4djhfdsh99f&c=?',
+*/
+
+(function ($) {
+    'use strict';
+
+    $.ajaxChimp = {
+        responses: {
+            'We have sent you a confirmation email'                                             : 0,
+            'Please enter a value'                                                              : 1,
+            'An email address must contain a single @'                                          : 2,
+            'The domain portion of the email address is invalid (the portion after the @: )'    : 3,
+            'The username portion of the email address is invalid (the portion before the @: )' : 4,
+            'This email address looks fake or invalid. Please enter a real email address'       : 5
+        },
+        translations: {
+            'en': null
+        },
+        init: function (selector, options) {
+            $(selector).ajaxChimp(options);
+        }
+    };
+
+    $.fn.ajaxChimp = function (options) {
+        $(this).each(function(i, elem) {
+            var form = $(elem);
+            var email = form.find('input[type=email]');
+            var feedback = form.find('.form-control-feedback');
+            var formgroup = form.find('.input-group');
+
+            var settings = $.extend({
+                'url': form.attr('action'),
+                'language': 'en'
+            }, options);
+
+            var url = settings.url.replace('/post?', '/post-json?').concat('&c=?');
+
+            form.attr('novalidate', 'true');
+            email.attr('name', 'EMAIL');
+
+            form.submit(function () {
+                var msg;
+                function successCallback(resp) {
+                    if (resp.result === 'success') {
+                        msg = 'We have sent you a confirmation email';
+                        formgroup.removeClass('has-error').addClass('has-success');
+                    } else {
+                        formgroup.removeClass('has-success').addClass('has-error');
+                        email.removeClass('parsley-success');
+                        var index = -1;
+                        try {
+                            var parts = resp.msg.split(' - ', 2);
+                            if (parts[1] === undefined) {
+                                msg = resp.msg;
+                            } else {
+                                var i = parseInt(parts[0], 10);
+                                if (i.toString() === parts[0]) {
+                                    index = parts[0];
+                                    msg = parts[1];
+                                } else {
+                                    index = -1;
+                                    msg = resp.msg;
+                                }
+                            }
+                        }
+                        catch (e) {
+                            index = -1;
+                            msg = resp.msg;
+                        }
+                    }
+
+                    // Translate and display message
+                    if (
+                        settings.language !== 'en'
+                        && $.ajaxChimp.responses[msg] !== undefined
+                        && $.ajaxChimp.translations
+                        && $.ajaxChimp.translations[settings.language]
+                        && $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]]
+                    ) {
+                        msg = $.ajaxChimp.translations[settings.language][$.ajaxChimp.responses[msg]];
+                    }
+                    feedback.html(msg);
+
+                    feedback.show(2000);
+                    if (settings.callback) {
+                        settings.callback(resp);
+                    }
+                }
+
+                var data = {};
+                var dataArray = form.serializeArray();
+                $.each(dataArray, function (index, item) {
+                    data[item.name] = item.value;
+                });
+
+                $.ajax({
+                    url: url,
+                    data: data,
+                    success: successCallback,
+                    dataType: 'jsonp',
+                    error: function (resp, text) {
+                        console.log('mailchimp ajax submit error: ' + text);
+                    }
+                });
+
+                // Translate and display submit message
+                var submitMsg = 'Sending...';
+                if(
+                    settings.language !== 'en'
+                    && $.ajaxChimp.translations
+                    && $.ajaxChimp.translations[settings.language]
+                    && $.ajaxChimp.translations[settings.language]['submit']
+                ) {
+                    submitMsg = $.ajaxChimp.translations[settings.language]['submit'];
+                }
+                form.find('.btn')
+                    .addClass('disabled')
+                    .text(submitMsg);
+
+                //feedback.html(submitMsg).show(2000);
+
+                return false;
+            });
+        });
+        return this;
+    };
+})(jQuery);

_src/_assets/styles/_page-community.scss

@@ -46,6 +46,10 @@
                 fill: lighten($brand-primary, 10%);
                 filter: drop-shadow(0 1px 4px rgba($brand-main-blue-dark, .4));
                 transform: translateY(-1px);
+
+                &.icon--gitter {
+                    stroke: lighten($brand-primary, 10%);
+                }
             }
         }
 
@@ -63,6 +67,10 @@
             fill: $brand-primary;
             width: 1.5rem;
             height: 1.5rem;
+
+            &.icon--gitter {
+                stroke: $brand-primary;
+            }
         }
     }
 }

_src/_assets/styles/bigchain.scss

@@ -19,6 +19,7 @@
 @import 'bigchain/_tables';
 @import 'bigchain/_buttons';
 @import 'bigchain/_forms';
+@import 'bigchain/_input-group';
 @import 'bigchain/_logo';
 @import 'bigchain/_icons';
 @import 'bigchain/_grid';
@@ -41,6 +42,7 @@
 @import 'bigchain/_content-page';
 @import 'bigchain/_comments';
 @import 'bigchain/_toc';
+@import 'bigchain/_newsletter';
 
 // specific page styles
 @import '_page-front';

_src/_assets/styles/bigchain/_icons.scss

@@ -18,6 +18,10 @@
     stroke: none;
     fill: $text-color;
     margin-bottom: -2px;
+
+    .icon--gitter {
+        stroke: $text-color;
+    }
 }
 
 .icon--sm {

_src/_assets/styles/bigchain/_input-group.scss

@@ -0,0 +1,60 @@
+//
+// Base styles
+//
+.input-group {
+    width: 100%;
+    display: flex;
+    align-items: flex-end;
+
+    .form-control {
+        flex: 1;
+        margin-bottom: 0;
+    }
+}
+
+.input-group-btn,
+.input-group .form-control {
+    &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+    }
+}
+
+//
+// Button input groups
+//
+.input-group-btn {
+    white-space: nowrap;
+    vertical-align: middle; // Match the inputs
+    position: relative;
+    // Jankily prevent input button groups from wrapping with `white-space` and
+    // `font-size` in combination with `inline-block` on buttons.
+    font-size: 0;
+    white-space: nowrap;
+
+    > .btn {
+        margin-top: 0 !important;
+    }
+}
+
+
+//
+// Reset rounded corners
+//
+.input-group .form-control:not(:last-child),
+.input-group-btn:not(:last-child) > .btn,
+.input-group-btn:not(:last-child) > .btn-group > .btn,
+.input-group-btn:not(:last-child) > .dropdown-toggle,
+.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
+.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+.input-group .form-control:not(:first-child),
+.input-group-btn:not(:first-child) > .btn,
+.input-group-btn:not(:first-child) > .btn-group > .btn,
+.input-group-btn:not(:first-child) > .dropdown-toggle,
+.input-group-btn:not(:last-child) > .btn:not(:first-child),
+.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}

_src/_assets/styles/bigchain/_newsletter.scss

@@ -0,0 +1,52 @@
+
+.section-newsletter {
+    background: $brand-primary;
+
+    // .sections redefinitions
+    padding-top: $spacer;
+    padding-bottom: $spacer;
+
+    @media ($screen-sm) {
+        padding-top: ($spacer * 3);
+        padding-bottom: ($spacer * 3);
+    }
+}
+
+.newsletter {
+    p,
+    .form-group { margin: 0; }
+
+    .grid { margin-bottom: 0; }
+
+    .form-control {
+        border-color: $gray-darker;
+
+        &:focus {
+            border-color: #000;
+        }
+    }
+
+    .btn {
+        background: $brand-main-blue;
+    }
+
+    .form-label,
+    .form-control {
+        color: $gray-dark !important;
+    }
+
+    .form-control-feedback {
+        @extend .bold;
+        margin-top: ($spacer / 2);
+    }
+}
+
+.newsletter__title {
+    @extend .h4;
+    margin-top: 0;
+}
+
+.newsletter__title,
+.newsletter__text {
+    color: $gray-darker;
+}

_src/_data/menus.yml

@@ -22,6 +22,8 @@ community:
       url: https://github.com/bigchaindb
     - title: Twitter
       url: https://twitter.com/BigchainDB
+    - title: Gitter
+      url: https://gitter.im/bigchaindb/bigchaindb
     - title: Google Group
       url: https://groups.google.com/forum/#!forum/bigchaindb
 

_src/_includes/form-newsletter.html

@@ -0,0 +1,22 @@
+<form id="newsletter"
+    class="form-newsletter js-parsley"
+    action="//ascribe.us9.list-manage.com/subscribe/post?u=56f2d3da26a7d407177d3fba3&id=0a99a9481e"
+    method="post">
+
+    <div class="form-group has-feedback">
+        <div class="input-group">
+
+            <input class="form-control" type="email" id="email" name="EMAIL" required>
+            <label class="form-label" for="email">Your Email</label>
+
+            <span class="input-group-btn">
+                <button class="btn btn-secondary" type="submit" name="button">
+                    Subscribe
+                </button>
+            </span>
+
+        </div>
+
+        <div class="form-control-feedback"></div>
+    </div>
+</form>

_src/_includes/section-newsletter.html

@@ -0,0 +1,17 @@
+
+<section class="section section-newsletter newsletter">
+    <div class="row row--wide">
+
+        <div class="grid grid--full grid-small--half grid--gutters grid--center">
+            <div class="grid__col">
+                <h1 class="newsletter__title">Get updates delivered to your inbox</h1>
+                <p class="newsletter__text">No more than 1 email per month. We're busy too.</p>
+            </div>
+            <div class="grid__col">
+
+                {% include form-newsletter.html %}
+                
+            </div>
+        </div>
+    </div>
+</section>

_src/_layouts/page.html

@@ -42,15 +42,7 @@ layout: base
         </div>
     </section>
 
-    <section class="section section-contact">
+    {% include section-newsletter.html %}
-        <div class="row row--narrow">
-            <header class="section-header">
-                <h1 class="section-title">Get In Touch</h1>
-            </header>
-
-            {% include form-contact.html %}
-        </div>
-    </section>
 {% endif %}
 
 {% if page.comments %}

_src/community.html

@@ -18,8 +18,14 @@ js: page-community.min.js
 
         <div class="grid grid--full grid-small--fit grid--gutters">
             <div class="grid__col">
-                <h1>Google Group</h1>
+                <h1>Join the discussion</h1>
-                <p>Participate in our Google Group</p>
+                <p>Participate via Gitter or Google Group</p>
+                <a class="social-link" href="https://gitter.im/{{ site.gitter }}">
+                    <svg class="icon icon--social icon--gitter" aria-labelledby="title">
+                        <title>Gitter</title>
+                        <use xlink:href="/assets/img/sprite.svg#gitter"></use>
+                    </svg>
+                </a>
                 <a class="social-link" href="https://groups.google.com/forum/#!forum/{{ site.googlegroup }}">
                     <svg class="icon icon--social icon--github" aria-labelledby="title">
                         <title>Google Group</title>
@@ -28,7 +34,7 @@ js: page-community.min.js
                 </a>
             </div>
             <div class="grid__col">
-                <h1>Social</h1>
+                <h1>Follow</h1>
                 <p>Follow us for the latest updates</p>
                 <p>
                     <a class="social-link" href="https://github.com/{{ site.github.org }}">
@@ -58,4 +64,7 @@ js: page-community.min.js
     </div>
 
     {% include svg/wrigley-with-stage.svg %}
+
 </section>
+
+{% include section-newsletter.html %}

_src/index.html

@@ -60,6 +60,8 @@ js: page-front.min.js
 
 </section>
 
+{% include section-newsletter.html %}
+
 <section class="section section-quickstart background--darker">
     <div class="row row--wide">
         <header class="section-header">