Merge pull request #363 from artsy/comments

orta · web-flow · commit d20da8fc11c8 · 2017-07-15T14:17:48.000-04:00
Add GitHub issues as comments for posts
diff --git a/_includes/gh_comments.html b/_includes/gh_comments.html
@@ -0,0 +1,97 @@
+<section id="comments" />
+
+<script type="text/javascript">
+// Comes from https://stackoverflow.com/questions/3177836/how-to-format-time-since-xxx-e-g-4-minutes-ago-similar-to-stack-exchange-site
+function timeSince(date) {
+  var seconds = Math.floor((new Date() - date) / 1000)
+  var interval = Math.floor(seconds / 31536000)
+
+  if (interval > 1) {
+    return interval + " years"
+  }
+  interval = Math.floor(seconds / 2592000)
+  if (interval > 1) {
+    return interval + " months"
+  }
+  interval = Math.floor(seconds / 86400)
+  if (interval > 1) {
+    return interval + " days"
+  }
+  interval = Math.floor(seconds / 3600)
+  if (interval > 1) {
+    return interval + " hours"
+  }
+  interval = Math.floor(seconds / 60)
+  if (interval > 1) {
+    return interval + " minutes"
+  }
+  return Math.floor(seconds) + " seconds"
+}
+
+// Based on https://ivanzuzak.info/2011/02/18/github-hosted-comments-for-github-hosted-blogs.html
+// And https://donw.io/post/github-comments/
+
+var loadComments = function(data) {
+  var header = document.createElement("h2")
+  temp.innerText = "Comments"
+  document.getElementById("comments").appendChild(temp)
+
+  for (var i = 0; i < data.length; i++) {
+    var cuser = data[i].user.login
+    var cuserlink = data[i].user.html_url
+    var clink = data[i].html_url
+    var cbody = data[i].body_html
+    var cavatarlink = data[i].user.avatar_url
+    var cdate = new Date(data[i].created_at)
+
+    var commentHTML =
+      "<div class='comment'>" +
+        "<div class='comment-header'>" +
+          "<a class='comment-username' href=\"" + cuserlink + '">' +
+          '<img src="' + cavatarlink + '" alt="" width="40" height="40">' +
+          cuser +
+          "</a>" + " commented " +
+          "<a class='comment-date' href=\"" + clink + '">' +
+            timeSince(cdate) + " ago" +
+          "</a>" +
+        "</div>" +
+        "<div class='comment-body'>" 
+          + cbody +
+        "</div>"
+      "</div>"
+
+    var temp = document.createElement("div")
+    temp.innerHTML = commentHTML
+    document.getElementById("comments").appendChild(temp)
+  }
+
+  var addComment = document.createElement("div")
+  addComment.innerHTML = "<hr/><p>Our comments are using GitHub Issues on the Artsy Blog repo. You can post by replying to <a href='https://github.com/artsy/artsy.github.io/issues/{{ page.comment_id }}'>issue #{{ page.comment_id }}</a>.</p>"
+  document.getElementById("comments").appendChild(addComment)
+
+}
+
+var writeFirstComment = function() {
+    var addComment = document.createElement("div")
+    addComment.innerHTML = "<hr/><p>This post has no comments, yet, you could be the first. Our comments are using GitHub Issues on the Artsy Blog repo. You can post by replying to <a href='https://github.com/artsy/artsy.github.io/issues/{{ page.comment_id }}'>issue #{{ page.comment_id }}.</a></p>"
+    document.getElementById("comments").appendChild(addComment)
+}
+
+if (window.fetch) {
+  var url =
+    "https://artsy-blog-gh-commentify.herokuapp.com/repos/artsy/artsy.github.io/issues/{{ page.comment_id }}/comments"
+  window
+    .fetch(url, { Accept: "application/vnd.github.v3.html+json" })
+    .then(function(response) {
+      return response.json()
+    })
+    .then(function(json) {
+      if(json.length) {
+        loadComments(json)
+      } else {
+        writeFirstComment()
+      }
+    })
+}
+  
+</script>
diff --git a/_layouts/epic.html b/_layouts/epic.html
@@ -45,6 +45,13 @@ <h3>
             </a>
           <p/>
         </article>
+
+      {% if page.comment_id %}
+        <article class='post'>
+          {% include gh_comments.html %}
+        </article>
+      {% endif %}
+
       </section>
 
       <footer>
diff --git a/_posts/2017-07-06-React-Native-for-iOS-devs.markdown b/_posts/2017-07-06-React-Native-for-iOS-devs.markdown
@@ -6,6 +6,7 @@ categories: [Technology, emission, reaction, react-native, react, javascript]
 author: orta
 series: React Native at Artsy
 css: what-is-react-native
+comment_id: 362
 ---
 
 React Native is a new native library that vastly changes the way in which you can create applications. The majority of the information and tutorials on the subject come from the angle of _"you are a web developer, and want to do native"_.
diff --git a/_sass/epic.scss b/_sass/epic.scss
@@ -96,6 +96,44 @@ article.post {
   }
 }
 
+body > div > div .comment {
+
+  background-image: url(/images/epic/comment-header.svg);
+  background-repeat: no-repeat;
+  background-position: 60px 10px;
+  margin-bottom: 20px;
+  
+  .comment-header {
+    color: #999;
+  }
+
+  .comment-username {
+    font-weight: bold;
+  }
+
+  a.comment-date {
+    color: #999;
+    &:hover {
+          color: #444;
+    }
+   }
+
+  .comment-body {
+    padding-left: 80px;
+    padding-top: 20px
+  }
+  
+  img {
+    border-radius: 3px !important;
+    vertical-align: middle;
+    margin-right: 50px;
+  }
+
+  p {
+    padding-bottom: 0.75em;
+  }
+}
+
 body > div > div > footer {
   border-top: 1px lightgrey solid;
   padding-top: 30px;
diff --git a/images/epic/comment-header.svg b/images/epic/comment-header.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="60px" viewBox="0 0 80 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 45.2 (43514) - https://www.bohemiancoding.com/sketch -->
+    <title>Path</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="0%" y1="48.4825556%" x2="102.365706%" y2="48.4825552%" id="linearGradient-1">
+            <stop stop-color="#0C0C0C" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M79.9609375,1 C37.7407286,1 15.638274,1 13.6535734,1 C10.6765227,1 10.6765227,1.03125 10.6765227,3.34667969 C10.6765227,4.89029948 10.6765227,10.4352214 10.6765227,19.9814453 L1,29.657968 L10.6765227,39.6333008 L10.6765227,59.7246094" id="Path" stroke="url(#linearGradient-1)"></path>
+    </g>
+</svg>
