Add Facebook event to camp page

Author: wvengen

_layouts/camp.html

@@ -3,6 +3,13 @@
 ---
 <div class="camp">
 
+  {% if page.fb_event %}
+  <a href="{{ page.fb_event }}" class="pull-right fb-event-box">
+    <i class="fa fa-facebook-square"></i>
+    <span id="fb-event-visit">Visit</span> this event on Facebook
+  </a>
+  {% endif %}
+
   <header class="camp-header">
     <h1 class="camp-title">{{ site.title }} {{ page.starts | date: '%Y' }} {{ page.city }}</h1>
   </header>
@@ -38,10 +45,12 @@ <h2>
 
   </article>
 
-  <!-- Find locations and create the map -->
   <script type="text/javascript" src="{{ site.baseurl }}/js/leaflet.min.js"></script>
   <script type="text/javascript" src="{{ site.baseurl }}/js/Control.Geocoder.js"></script>
   <script type="text/javascript"><!--
+    //
+    // Find locations and create the map
+    //
     var map = L.map('map-map');
     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 19,
@@ -69,5 +78,13 @@ <h2>
         map.fitBounds(L.latLngBounds(pts), {maxZoom: 12});
       }.bind(marker));
     }
+
+    //
+    // Turn "visit" into "join" when the event is in the future
+    //
+    if (Date.parse("{{ page.ends | date_to_rfc822 }}") >= Date.now()) {
+      document.getElementById('fb-event-visit').innerHTML = "<strong>Join</strong>";
+    }
+
   //--></script>
 </div>

_sass/_base.scss

@@ -62,6 +62,27 @@ body > .container:first-child {
 // Camps
 //
 
+.fb-event-box {
+  font-size: 15px;
+  padding: 15px;
+  padding-bottom: 10px;
+  display: block;
+  width: 13em;
+
+  border: 1px solid #ccc;
+  border-radius: 10px;
+  &:hover, &:active {
+    background: #fcfcfc;
+  }
+
+  .fa {
+    float: left;
+    margin-top: -4px;
+    font-size: 350%;
+    margin-right: 0.2em;
+  }
+}
+
 .centered-blocks {
   display: block;