Playing around with the Instagram API to power a page

_assets/styles/site.less

@@ -4,6 +4,8 @@
 
 @import 'skeleton.less';
 
+@mobile-width: 550px;
+
 
 // Main Site CSS
 
@@ -78,7 +80,7 @@
 }
 
 // Restrict site width larger than mobile
-@media (min-width: 550px) {
+@media (min-width: @mobile-width) {
   .main-header,
   .main-footer,
   .main-content-feed,
@@ -103,7 +105,7 @@
   .margin-lr;
 }
 
-@media (min-width: 550px) {
+@media (min-width: @mobile-width) {
   .main-header-title,
   .main-header-description,
   .main-header-nav,
@@ -141,7 +143,7 @@
   .navigation-item;
 }
 
-@media (min-width: 550px) {
+@media (min-width: @mobile-width) {
   .main-header-image {
     height: 16rem;
   }
@@ -215,6 +217,20 @@
   }
 }
 
+.page-title,
+.page-subtitle {
+  display: inline;
+}
+
+.page-title {
+
+}
+
+.page-subtitle {
+  font-size: 80%;
+  color: #666;
+}
+
 // Main footer
 .main-footer {
   .u-text-center;
@@ -229,3 +245,68 @@
 .main-footer-nav-item {
   .navigation-item;
 }
+
+
+// Custom pages
+
+// Check-ins page
+#checkin_map {
+  height: 46rem;
+  margin-top: 2rem;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  transition: opacity .2s ease;
+}
+
+@media (min-width: @mobile-width) {
+  #checkin_map {
+    height: 60rem;
+    margin-top: 4rem;
+  }
+}
+
+// Instagram page
+#instagram_images {
+  min-height: 46rem;
+  margin-top: 2rem;
+  margin-left: -2rem;
+  margin-right: -2rem;
+  transition: opacity .2s ease;
+}
+
+.instagram-post {
+
+}
+
+.instagram-link {
+  display: inline-block;
+}
+
+.instagram-image {
+  width: 100vw;
+}
+
+.instagram-caption {
+  padding-top: 2rem;
+  padding-right: 2rem;
+  padding-bottom: 2rem;
+  padding-left: 2rem;
+}
+
+.instagram-tag {
+
+}
+
+@media (min-width: @mobile-width) {
+  #instagram_images {
+    display: flex;
+  	flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .instagram-post {
+    width: calc(50% - 4rem);
+    margin-right: 2rem;
+    margin-bottom: 2rem;
+  }
+}

_includes/foot.html

@@ -2,7 +2,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.1/picturefill.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/1.3.1/lazysizes.min.js"></script>
 
-{% if page.title == 'Check-Ins' %}
+{% if page.page_id == 'checkins' %}
 <script>
   function formatDate (timestamp) {
     var a = new Date(timestamp * 1000)
@@ -98,3 +98,49 @@
     .then(generateMapMarkers)
 </script>
 {% endif %}
+
+{% if page.page_id == 'mk7gti' %}
+<script>
+  var generateImages = function (results) {
+    var images_div = document.getElementById('instagram_images')
+
+    for (var imageId in results) {
+      var data = results[imageId]
+      caption = data.caption.replace(/\S*#(\S+)/gi, '<a href="https://instagram.com/explore/tags/$1" class="instagram-tag">#$1</a>')
+
+      if (data.type === 'image') {
+        images_div.innerHTML += ' \
+          <div class="instagram-post"> \
+            <a href="' + data.url + '" class="instagram-link"> \
+              <img src="' + data.image + '" class="instagram-image" /> \
+            </a> \
+            <div class="instagram-caption"> \
+              ' + caption + ' \
+            </div> \
+          </div>'
+      }
+      // TODO: UNTESTED!
+      // else if (data.type === 'video') {
+      //   images_div.innerHTML += ' \
+      //     <div class="instagram-post"> \
+      //       <video width="480" height="480" controls> \
+      //       <source src="' + data.video + '" type="video/mp4"/> \
+      //       </video> \
+      //       <div class="instagram-caption"> \
+      //         ' + caption + ' \
+      //       </div> \
+      //     </div>'
+      // }
+    }
+
+    images_div.style.opacity = '1.0'
+  }
+
+  // Get Swarm checkins
+  fetch('/api/instagram.json')
+    .then(function (response) {
+      return response.json()
+    })
+    .then(generateImages)
+</script>
+{% endif %}

_includes/head.html

@@ -34,22 +34,7 @@
 
 <script async src="https://assets.codepen.io/assets/embed/ei.js"></script>
 
-{% if page.title == 'Check-Ins' %}
+{% if page.page_id == 'checkins' %}
 <script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
 <link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
-<style>
-  #checkin_map {
-    transition: opacity .1s ease;
-    height: 46rem;
-    margin-top: 2rem;
-    margin-left: -2rem;
-    margin-right: -2rem;
-  }
-  @media (min-width: 550px) {
-    #checkin_map {
-      height: 60rem;
-      margin-top: 4rem;
-    }
-  }
-</style>
 {% endif %}

_layouts/page.html

@@ -3,7 +3,7 @@
 ---
 
 <article class="main-content-page">
-  <h2>
+  <h2 class="page-title">
     {{ page.title }}
   </h2>
 

_pages/checkins.md

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: Check-Ins
+page_id: checkins
 include_in_nav: true
 ---
 

_pages/mk7-gti.html

@@ -0,0 +1,12 @@
+---
+layout: page
+title: My MK7 GTI
+page_id: mk7gti
+include_in_nav: false
+---
+
+<h5 class="page-subtitle">
+  Powered by <a href="https://instagram.com/_vigti/">Instagram</a>
+</h5>
+
+<div id="instagram_images" style="opacity:0;"></div>

gulp_tasks/tasks/default.js

@@ -6,7 +6,10 @@ gulp.task('default', (callback) => {
   runSequence(
     'build:dev',
     'browser-sync',
-    'foursquare:dev',
+    [
+      'foursquare:dev',
+      'instagram:dev'
+    ],
     'watch',
     callback
   )

gulp_tasks/tasks/deploy.js

@@ -76,7 +76,10 @@ gulp.task('deploy', (callback) => {
       ],
       'inlinesource',
       'optimize:html',
-      'foursquare:prod',
+      [
+        'foursquare:prod',
+        'instagram:prod'
+      ],
       callback
     )
   } else {
@@ -88,7 +91,10 @@ gulp.task('deploy', (callback) => {
       ],
       'inlinesource',
       'optimize:html',
-      'foursquare:prod',
+      [
+        'foursquare:prod',
+        'instagram:prod'
+      ],
       'surge-deploy',
       's3-deploy',
       callback