Created an upcoming events widget

_includes/events.html

@@ -0,0 +1,4 @@
+<div class="events">
+  <h2 class="col12 contain z1 fill-blue button events-header">Upcoming Events:</h2>
+  <ul class="events-list"></ul>
+</div>

_includes/head.html

@@ -19,7 +19,6 @@
     <meta property='og:type' content='website' />
   {% endif %}
   <title>{% if page.url == '/' %}{{site.maptime.chapter}}{% else %}{{site.maptime.chapter}} | {{page.title}}{% endif %}</title>
-  <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   <link href='http://fonts.googleapis.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
   <link rel='stylesheet' href='{{site.baseurl}}/css/site.css' type='text/css'/>
   {% for stylesheet in page.css %}

_includes/menu.html

@@ -8,29 +8,4 @@
     </ul>
   </nav>
   <button class="nav-expand"><img src="/img/menu-hamburger.svg"></button>
-</div>
-
-<script>
-var nav = $('#nav');
-var menu = $('#nav .menu');
-var navButton = $('.nav-expand');
-$('button.nav-expand').on('click', function(){
-  menu.slideToggle(200);
-  navButton.toggleClass('open');
-});
-var blocked = false,
-    threshold = 800;
-$(window).resize(function(){
-  menuCheck($(window).outerWidth(true), blocked, threshold);
-});
-function menuCheck(w, b, t) {
-  if (w>t && !b) {
-    menu.show();
-    blocked = !b;
-    $('.nav-expand').removeClass('open');
-  } else if (w<=t && b) {
-    menu.hide();
-    blocked = !b;
-  }
-}
-</script>
+</div>

_layouts/default.html

@@ -37,6 +37,8 @@
             </div>
           </div>
         </div>
+
+        {% include events.html %}
       </aside>
 
       <div class='col8 margin2r prose content'>
@@ -50,7 +52,7 @@
       <p>This website is <a href='http://github.com/{{site.github_org}}/{{site.repo}}/'>open source</a> and you can improve it. Learn more about contributing <a href='https://guides.github.com/activities/forking/'>here</a>.  In founding partnership with <a href="http://stamen.com">Stamen</a>.</p>
    </div>
   </footer>
-<script src='{{site.baseurl}}/js/jquery.min.js'></script>
+<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
 <script src='{{site.baseurl}}/js/underscore.min.js'></script>
 <script src='{{site.baseurl}}/site.js'></script>
 

css/site.css

@@ -335,7 +335,6 @@ a.fill-darken0:hover  { background-color:rgba(0,0,0,0.15); }
     }
 
 .followers {
-  max-height:480px;
   position:relative;
   }
   .followers:after {
@@ -430,3 +429,39 @@ a.hover-link:hover:after {
 .form-alert.show {
   display:block;
 }
+
+.event {
+  background: white;
+  padding: 10px 5px;
+  border-bottom: 1px solid #eee;
+}
+.events-header {
+  font-size: 1em;
+}
+
+a.events-header {
+  text-decoration: underline;
+}
+
+.events-header:hover {
+  cursor: pointer;
+}
+
+.events-list {
+  display: none;
+}
+
+.event-title {
+  text-align: center;
+}
+
+@media (min-width: 704px) {
+  .events-list {
+    display: block;
+    max-height: 480px;
+    overflow-y: scroll;
+  }
+  .events-header:hover {
+    cursor: normal;
+  }
+}

site.js

@@ -1,5 +1,8 @@
 ---
 ---
+//Tabletop.js
+{% include js/tabletop.js %}
+{% include js/moment.js %}
 
 function githubWatchers() {
     var watchers = $('.followers');
@@ -24,6 +27,89 @@ function githubWatchers() {
             watchers.append(data);
         }
     });
-};
+}
 
-$(githubWatchers);
+function filterDates(events) {
+    // Ditch past events
+    var upcoming = _.filter(events, function(event){
+        return moment(event.datetime) > moment();
+    });
+
+    // Sort by date
+    upcoming.sort(function(a,b) {
+        var a = moment(a.datetime),
+            b = moment(b.datetime);
+        if (a < b)
+          return -1;
+        if (a > b)
+          return 1;
+        return 0;
+    });
+
+    return upcoming;
+}
+
+function processEvents(data, tabletop) {
+
+    // Filter and Sort dates
+    var filtered = filterDates(data);
+
+    var $eventList = $('.events-list'),
+        template = "<li class='event'>" +
+                    "<% if (externalurl) { %>" +
+                    "<a href='<%=externalurl%>'><%=whichchapter%></a></h3>" +
+                    "<% } else { %>" +
+                    "<h3 class='event-title'><%=whichchapter%></h3>" +
+                    "<% } %>" +
+                    "<p class='event-date'><%=moment(datetime).format('MMMM Do YYYY, h:mm a')%></p>" +
+                    "<p><address><%=locationname%><br><%=locationaddress%></address></p>" +
+                   "</li>";
+    var events = _(filtered)
+        .map(function(i) { return _(template).template(i); });
+
+    $eventList.append(events);
+}
+
+function initEvents() {
+    var $eventList = $('.events-list'),
+        $header = $('.events-header'),
+        $window = $(window),
+        events = Tabletop.init({
+            key: '1kswO9zq5UgQCdPwndBmQGtKhQtbQw8xSQhqHLcQHxKU',
+            callback: processEvents,
+            simpleSheet: true,
+            orderBy: 'datetime'
+        });
+
+    $header.on('click', function(){
+        if ($window.width() < 704) $eventList.toggle();
+    });
+}
+
+$(function() {
+    // Menu logic
+    var nav = $('#nav'),
+        menu = $('#nav .menu'),
+        navButton = $('.nav-expand');
+    $('button.nav-expand').on('click', function(){
+      menu.slideToggle(200);
+      navButton.toggleClass('open');
+    });
+    var blocked = false,
+        threshold = 800;
+    $(window).resize(function(){
+      menuCheck($(window).outerWidth(true), blocked, threshold);
+    });
+    function menuCheck(w, b, t) {
+      if (w>t && !b) {
+        menu.show();
+        blocked = !b;
+        $('.nav-expand').removeClass('open');
+      } else if (w<=t && b) {
+        menu.hide();
+        blocked = !b;
+      }
+    }
+    githubWatchers();
+    initEvents();
+});