Meetup (#127)

* add meetup link to community page
* all social data as array
* add next meetup link to hero, grab data from Meetup API
* community bar style tweaks

_config.yml

@@ -12,17 +12,30 @@ email:
     cla_cc:             sylvain@bigchaindb.com
     enterprise:         ikytz6br@robot.zapier.com
 
-twitter:                BigchainDB
+social:
-facebook:               BigchainDB
+    gitter:
-github:
+        title: Gitter
-    org:                bigchaindb
+        url:   https://gitter.im/bigchaindb/bigchaindb
-    repo:               bigchaindb
+    github:
-medium:                 the-bigchaindb-blog
+        title: GitHub
-googlegroup:            bigchaindb
+        url:   https://github.com/bigchaindb
-gitter:                 bigchaindb/bigchaindb
+        org:   bigchaindb
-disqus:                 bigchain
+        repo:  bigchaindb
-linkedin:               bigchaindb
+    twitter:
-youtube:                UCh0Y3p3kJ9oyz9CRgZaO05w
+        title: Twitter
+        url:   https://twitter.com/bigchaindb
+    medium:
+        title: Blog
+        url:   https://blog.bigchaindb.com
+    meetup:
+        title: Meetup
+        url:   https://www.meetup.com/BigchainDB-IPDB-Meetup
+    linkedin:
+        title: LinkedIn
+        url:   https://www.linkedin.com/company/bigchaindb
+    youtube:
+        title: YouTube
+        url:   https://www.youtube.com/channel/UCh0Y3p3kJ9oyz9CRgZaO05w
 
 address:
     company:            BigchainDB GmbH

_src/_assets/javascripts/bigchain/meetup.js

@@ -0,0 +1,33 @@
+//require whatwg-fetch/fetch.js
+
+document.addEventListener('DOMContentLoaded', function() {
+
+    const url = 'https://bigchaindb-meetups.now.sh'
+
+    function injectData(data) {
+        const events = data
+
+        // just grab the first item of array
+        const nextEvent = events[0]
+        const name = nextEvent.name
+        const link = nextEvent.link
+        const date = new Date(nextEvent.time).toLocaleDateString('en-us', { month: 'short', day: 'numeric' })
+        const element = document.getElementsByClassName('js-social-link--meetup')[0]
+        const elementTitle = document.getElementsByClassName('meetup-title')[0]
+
+        elementTitle.innerHTML = '<span class="hero__community__label">' + date + '</span> ' + '<strong>' + name + '</strong>'
+        elementTitle.style.opacity = 1
+        element.href = link
+    }
+
+    fetch(url)
+        .then(function(response) {
+            return response.json()
+        })
+        .then(function(data) {
+            injectData(data)
+        })
+        .catch(function(error) {
+            console.log(error)
+        })
+})

_src/_assets/javascripts/page-front.js

@@ -2,6 +2,7 @@
 //=include bigchain/testimonials.js
 //=include bigchain/smoothscroll.js
 //=include bigchain/github.js
+//=include bigchain/meetup.js
 
 jQuery(function($) {
 

_src/_assets/styles/_page-community.scss

@@ -34,6 +34,7 @@
             @include transition;
         }
 
+        display: inline-block;
         box-shadow: none;
         padding: $btn-padding-y-sm $btn-padding-x-sm;
 
@@ -72,6 +73,13 @@
             }
         }
     }
+
+    .social-link__title {
+        @include text-small;
+        color: $brand-primary;
+        display: block;
+        text-align: center;
+    }
 }
 
 .text-milestones {

_src/_assets/styles/bigchain/_hero.scss

@@ -141,12 +141,17 @@ $menu-height-md: 66px;
     }
 
     .stars,
-    .release {
+    .release,
+    .meetup-title {
         display: inline-block;
         opacity: 0;
         transition: opacity .2s ease-out;
     }
 
+    strong {
+        font-weight: $font-weight-normal;
+    }
+
     .stars {
         font-size: .6rem;
         background: rgba($brand-main-gray-lighter, .15);
@@ -158,11 +163,14 @@ $menu-height-md: 66px;
     }
 
     .release {
-        @include text-bold;
         min-width: 44px;
     }
 }
 
+.hero__community__label {
+    opacity: .5;
+}
+
 
 .hero__more {
     position: relative;

_src/_includes/hero.html

@@ -10,22 +10,28 @@
     </div>
 
     <aside class="hero__community">
-        <div class="row">
+        <div class="row row--wide">
-            <a class="btn btn-text btn-sm" href="https://github.com/{{ site.github.org }}/{{ site.github.repo }}/releases/latest" rel="external">Latest release: <span class="release" id="release"></span></a>
+            <a class="btn btn-text btn-sm" href="{{ site.social.github.url }}/{{ site.social.github.repo }}/releases/latest" rel="external"><span class="hero__community__label">Latest release</span> <strong class="release" id="release"></strong></a>
 
-            <a class="social-link btn btn-text btn-sm js-social-link" href="https://github.com/{{ site.github.org }}/{{ site.github.repo }}" title="Star {{ site.github.org }}/{{ site.github.repo }} on GitHub">
+            <a class="social-link btn btn-text btn-sm js-social-link" href="{{ site.social.github.url }}/{{ site.social.github.repo }}" title="Star {{ site.social.github.org }}/{{ site.social.github.repo }} on GitHub">
                 <svg class="icon icon--social icon--github" aria-labelledby="title">
                     <title>GitHub</title>
                     <use xlink:href="/assets/img/sprite.svg#github"></use>
                 </svg> Star <span class="stars" id="stars"></span>
             </a>
 
-            <a class="social-link btn btn-text btn-sm js-social-link" href="https://twitter.com/{{ site.twitter }}" title="Follow {{ site.twitter }} on Twitter">
+            <a class="social-link btn btn-text btn-sm js-social-link" href="https://twitter.com/{{ site.twitter }}" title="Follow on Twitter">
                 <svg class="icon icon--social icon--twitter" aria-labelledby="title">
                     <title>Twitter</title>
                     <use xlink:href="/assets/img/sprite.svg#twitter"></use>
                 </svg> Follow
             </a>
+
+            <a class="social-link btn btn-text btn-sm js-social-link js-social-link--meetup" href="https://www.meetup.com/BigchainDB-IPDB-Meetup/">
+                <svg class="icon icon--social icon--meetup">
+                    <use xlink:href="/assets/img/sprite.svg#meetup"></use>
+                </svg> <span class="meetup-title">BigchainDB &amp; IPDB Meetup</span>
+            </a>
         </div>
     </aside>
 

_src/community.html

@@ -16,49 +16,24 @@ quotes: set3
         <header class="section-header">
             <p class="section-description">There are many ways you can contribute to the BigchainDB project, some very easy and others more involved. We welcome all potential contributors, so we ask that everyone participating abide by some simple guidelines.</p>
 
-            <a href="https://github.com/{{ site.github.org }}/bigchaindb/blob/master/CONTRIBUTING.md" class="btn btn-primary btn-sm">Read The Guidelines</a>
+            <a href="{{ site.social.github.url }}/{{ site.social.github.repo }}/blob/master/CONTRIBUTING.md" class="btn btn-primary btn-sm">Read The Guidelines</a>
         </header>
 
         <div class="grid grid--full grid-small--fit grid--gutters">
             <div class="grid__col">
                 <h1>Follow</h1>
                 <p>Follow us for the latest updates</p>
-                <a class="social-link js-social-link" href="https://gitter.im/{{ site.gitter }}" title="Gitter">
+
-                    <svg class="icon icon--social icon--gitter" aria-labelledby="title">
+                {% for link in site.social %}
-                        <title>Gitter</title>
+                    <a class="social-link js-social-link" href="{{ link[1].url }}" title="{{ link[1].title }}">
-                        <use xlink:href="/assets/img/sprite.svg#gitter"></use>
+                        <svg class="icon icon--social icon--{{ link[0] }}" aria-labelledby="title">
-                    </svg>
+                            <title>{{ link.title }}</title>
-                </a>
+                            <use xlink:href="/assets/img/sprite.svg#{{ link[0] }}"></use>
-                <a class="social-link js-social-link" href="https://github.com/{{ site.github.org }}" title="GitHub">
+                        </svg>
-                    <svg class="icon icon--social icon--github" aria-labelledby="title">
+                        <span class="social-link__title">{{ link[1].title }}</span>
-                        <title>GitHub</title>
+                    </a>
-                        <use xlink:href="/assets/img/sprite.svg#github"></use>
+                {% endfor %}
-                    </svg>
+
-                </a>
-                <a class="social-link js-social-link" href="https://twitter.com/{{ site.twitter }}" title="Twitter">
-                    <svg class="icon icon--social icon--twitter" aria-labelledby="title">
-                        <title>Twitter</title>
-                        <use xlink:href="/assets/img/sprite.svg#twitter"></use>
-                    </svg>
-                </a>
-                <a class="social-link js-social-link" href="https://medium.com/{{ site.medium }}" title="Medium">
-                    <svg class="icon icon--social icon--blog" aria-labelledby="title">
-                        <title>Medium</title>
-                        <use xlink:href="/assets/img/sprite.svg#medium"></use>
-                    </svg>
-                </a>
-                <a class="social-link js-social-link" href="https://www.linkedin.com/company/{{ site.linkedin }}" title="LinkedIn">
-                    <svg class="icon icon--social icon--linkedin" aria-labelledby="title">
-                        <title>LinkedIn</title>
-                        <use xlink:href="/assets/img/sprite.svg#linkedin"></use>
-                    </svg>
-                </a>
-                <a class="social-link js-social-link" href="https://www.youtube.com/channel/{{ site.youtube }}" title="YouTube">
-                    <svg class="icon icon--social icon--youtube" aria-labelledby="title">
-                        <title>YouTube</title>
-                        <use xlink:href="/assets/img/sprite.svg#youtube"></use>
-                    </svg>
-                </a>
             </div>
         </div>