diff --git a/_config.yml b/_config.yml index 4f6fcd2..dddfd3f 100644 --- a/_config.yml +++ b/_config.yml @@ -17,6 +17,7 @@ github: repo: bigchaindb medium: the-bigchaindb-blog googlegroup: bigchaindb +gitter: bigchaindb/bigchaindb disqus: bigchain address: diff --git a/_src/_assets/images/gitter.svg b/_src/_assets/images/gitter.svg new file mode 100644 index 0000000..fae8223 --- /dev/null +++ b/_src/_assets/images/gitter.svg @@ -0,0 +1,19 @@ + + + + + gitter + + + + + + + diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js index 89f31f1..150f38c 100644 --- a/_src/_assets/javascripts/bigchain.js +++ b/_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(); diff --git a/_src/_assets/javascripts/bigchain/newsletter.js b/_src/_assets/javascripts/bigchain/newsletter.js new file mode 100644 index 0000000..31cdd9b --- /dev/null +++ b/_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); diff --git a/_src/_assets/javascripts/vendor/jquery.ajaxchimp.js b/_src/_assets/javascripts/vendor/jquery.ajaxchimp.js new file mode 100644 index 0000000..4141e90 --- /dev/null +++ b/_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 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); diff --git a/_src/_assets/styles/_page-community.scss b/_src/_assets/styles/_page-community.scss index 0c4908f..e98b54e 100644 --- a/_src/_assets/styles/_page-community.scss +++ b/_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; + } } } } diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index 6abd7a6..bd15754 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_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'; diff --git a/_src/_assets/styles/bigchain/_icons.scss b/_src/_assets/styles/bigchain/_icons.scss index d8e62f6..0236bbd 100644 --- a/_src/_assets/styles/bigchain/_icons.scss +++ b/_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 { diff --git a/_src/_assets/styles/bigchain/_input-group.scss b/_src/_assets/styles/bigchain/_input-group.scss new file mode 100644 index 0000000..9dc20c8 --- /dev/null +++ b/_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; +} diff --git a/_src/_assets/styles/bigchain/_newsletter.scss b/_src/_assets/styles/bigchain/_newsletter.scss new file mode 100644 index 0000000..f970c96 --- /dev/null +++ b/_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; +} diff --git a/_src/_data/menus.yml b/_src/_data/menus.yml index 114f199..8ced698 100644 --- a/_src/_data/menus.yml +++ b/_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 diff --git a/_src/_includes/form-newsletter.html b/_src/_includes/form-newsletter.html new file mode 100644 index 0000000..750c391 --- /dev/null +++ b/_src/_includes/form-newsletter.html @@ -0,0 +1,22 @@ +
+ +
+
+ + + + + + + + +
+ + +
+
diff --git a/_src/_includes/section-newsletter.html b/_src/_includes/section-newsletter.html new file mode 100644 index 0000000..45d0c78 --- /dev/null +++ b/_src/_includes/section-newsletter.html @@ -0,0 +1,17 @@ + +
+
+ +
+
+

Get updates delivered to your inbox

+ +
+
+ + {% include form-newsletter.html %} + +
+
+
+
diff --git a/_src/_layouts/page.html b/_src/_layouts/page.html index a511fba..d1c3701 100644 --- a/_src/_layouts/page.html +++ b/_src/_layouts/page.html @@ -42,15 +42,7 @@ layout: base -
-
-
-

Get In Touch

-
- - {% include form-contact.html %} -
-
+ {% include section-newsletter.html %} {% endif %} {% if page.comments %} diff --git a/_src/community.html b/_src/community.html index 1a1726a..7981100 100644 --- a/_src/community.html +++ b/_src/community.html @@ -18,8 +18,14 @@ js: page-community.min.js
-

Google Group

-

Participate in our Google Group

+

Join the discussion

+

Participate via Gitter or Google Group

+
-

Social

+

Follow

Follow us for the latest updates

{% include svg/wrigley-with-stage.svg %} + + +{% include section-newsletter.html %} diff --git a/_src/index.html b/_src/index.html index aedcb19..58af21a 100644 --- a/_src/index.html +++ b/_src/index.html @@ -60,6 +60,8 @@ js: page-front.min.js +{% include section-newsletter.html %} +