GitHub-based comments for real :D

norm2782 · Jan 11, 2012 · 971b53d · 971b53d
1 parent e193d75
commit 971b53d
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 22 deletions.
diff --git a/sass/custom/_styles.scss b/sass/custom/_styles.scss
@@ -1,2 +1,171 @@
 // This File is imported last, and will override other styles in the cascade
 // Add styles here to make changes without digging in too much
+
+.comment {
+    background-color: transparent;
+    border-color: #CACACA;
+    border-style: solid;
+    border-width: 1px;
+    color: black;
+    display: block;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    padding: 0px;
+    width: 100%;
+  }
+
+.comment .commentheader {
+  border-bottom-color: #CACACA;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  color: black;
+  background-image: url(https://assets2.github.com/images/modules/comments/metabar.gif);
+  color: black;
+  display: block;
+  float: left;
+  font-family: helvetica, arial, freesans, clean, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  height: 33px;
+  line-height: 33px;
+  margin: 0px;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  padding: 0px;
+  text-overflow: ellipsis;
+  text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.comment .commentheader .commentgravatar {
+  background-attachment: scroll;
+  background-clip: border-box;
+  background-color: white;
+  background-image: none;
+  background-origin: padding-box;
+  border-color: #C8C8C8;
+  border-style: solid;
+  border-width: 1px;
+  color: black;
+  display: inline-block;
+  float: none;
+  font-family: helvetica, arial, freesans, clean, sans-serif;
+  font-size: 1px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  height: 20px;
+  line-height: 1px;
+  margin-left: 5px;
+  margin-right: 3px;
+  margin-top: -2px;
+  overflow-x: visible;
+  overflow-y: visible;
+  padding: 1px;
+  text-overflow: clip;
+  text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 20px;
+}
+
+.comment .commentheader a:link {
+  text-decoration: none;
+}
+
+.comment .commentheader a:hover {
+  border-bottom:1px solid;
+}
+
+
+.comment .commentheader .commentuser {
+  background-color: transparent;
+  color: black;
+  display: inline;
+  float: none;
+  font-family: helvetica, arial, freesans, clean, sans-serif;
+  font-size: 12px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: bold;
+  height: 0px;
+  line-height: 16px;
+  margin-left: 5px;
+  margin-right: 10px;
+  overflow-x: visible;
+  overflow-y: visible;
+  padding: 0px;
+  text-overflow: clip;
+  text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
+  white-space: nowrap;
+  width: 0px;
+}
+
+.comment .commentheader .commentdate {
+  background-color: transparent;
+  color: #777;
+  display: inline;
+  float: none;
+  font-family: helvetica, arial, freesans, clean, sans-serif;
+  font-size: 11px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  height: 0px;
+  line-height: 33px;
+  margin: 0px;
+  overflow-x: visible;
+  overflow-y: visible;
+  padding: 0px;
+  text-overflow: clip;
+  text-shadow: rgba(255, 255, 255, 0.699219) 1px 1px 0px;
+  white-space: nowrap;
+  width: 20em;
+}
+
+.comment .commentbody {
+  background-attachment: scroll;
+  background-clip: border-box;
+  background-color: transparent;
+  background-image: none;
+  background-origin: padding-box;
+  color: #333;
+  display: block;
+  margin-bottom: 1em;
+  margin-left: 1em;
+  margin-right: 1em;
+  margin-top: 40px;
+  overflow-x: visible;
+  overflow-y: visible;
+  padding: 0em;
+  position: static;
+  width: 96%;
+  word-wrap: break-word;
+}
+
+.comment .commentbody p {
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+  margin-left: 0em;
+  margin-right: 0em;
+}
+
+.comment .commentbody pre {
+  border: 0px solid #ddd;
+  background-color: #eef;
+  padding: 0 .4em;
+}
+
+.comment .commentbody pre code {
+  border: 0px solid #ddd;
+}
+
+.comment .commentbody code {
+  border: 1px solid #ddd;
+  background-color: #eef;
+  font-size: 85%;
+  padding: 0 .2em;
+}
diff --git a/source/_includes/head.html b/source/_includes/head.html
@@ -32,21 +32,21 @@
    <script type="text/javascript">
      var converter = new Showdown.converter();
 
-     function loadComments(data) {  
-       for (var i=0; i<data.data.length; i++) {
+     function loadComments(data) {
+       for (var i = 0; i < data.data.length; i++) {
          var cuser = data.data[i].user.login;
-         var cuserlink = "https://www.github.com/" + data.data[i].user.login;
-         var clink = "https://github.com/izuzak/izuzak.github.com/issues/12#issuecomment-" + data.data[i].url.substring(data.data[i].url.lastIndexOf("/")+1);
+         var cuserlink = "https://github.com/" + data.data[i].user.login;
+         var clink = "https://github.com/norm2782/norm2782.github.com/issues/{{page.commentIssueId}}#issuecomment-" + data.data[i].url.substring(data.data[i].url.lastIndexOf("/")+1);
          var cbody = converter.makeHtml(data.data[i].body);
-         var cgravatarlink = data.data[i].user.gravatar_url.replace("s=30&", "");
+         var cgravatarlink = data.data[i].user.avatar_url.replace("s=30&", "");
          var cdate = Date.parse(data.data[i].created_at).toString("yyyy-MM-dd HH:mm:ss");
-         $("#comments").append("<div class='comment'><div class='commentheader'><div class='commentgravatar'>" + '<img src="' + cgravatarlink + '" alt="" width="20" height="20">' + "</div><a class='commentuser' href=\""+ cuserlink + "\">" + cuser + "</a><a class='commentdate' href=\"" + clink + "\">" + cdate + "</a></div><div class='commentbody'>" + cbody + "</div></div>");
+         $("#comments").append('<div class="comment"><div class="commentheader"><div class="commentgravatar"><img src="' + cgravatarlink + '" alt="" width="20" height="20"></div><a class="commentuser" href="' + cuserlink + '">' + cuser + '</a> <a class="commentdate" href="' + clink + '">' + cdate + '</a></div><div class="commentbody">' + cbody + '</div></div>');
        }
      }
 
-     $.ajax("https://api.github.com/repos/izuzak/izuzak.github.com/issues/{{page.commentIssueId}}/comments", {
+     $.ajax("https://api.github.com/repos/norm2782/norm2782.github.com/issues/{{page.commentIssueId}}/comments", {
        dataType : "jsonp",
-       jsonpCallback : loadComments
+       jsonpCallback : "loadComments"
      });
      </script>
 </head>
diff --git a/source/_layouts/page.html b/source/_layouts/page.html
@@ -30,22 +30,11 @@ <h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% el
   <h1>Comments</h1>
   <div id="comments" aria-live="polite">
     <div id="header">
-      Want to leave a comment? Visit <a href="https://github.com/norm2782/norm2782.github.com/issues/{{page.commentIssueId}}"> this post's issue page on GitHub</a> (you'll need a GitHub account.)
+      Want to leave a comment? Visit <a href="https://github.com/norm2782/norm2782.github.com/issues/{{page.commentIssueId}}">this post's issue page on GitHub</a> (you'll need a GitHub account.)
     </div>
   </div>
 </section>
 {% endif %}
-<section>
-  <h1>Comments</h1>
-  <div id="comment_thread" aria-live="polite">
-    <div id="comments">
-      <h2>Comments</h2>
-      <div id="header">
-        Want to leave a comment? Visit <a href="https://github.com/norm2782/norm2782.github.com/issues/{{page.commentIssueId}}"> this post's issue page on GitHub</a> (you'll need a GitHub account.)
-      </div>
-    </div>
-  </div>
-</section>
 </div>
 {% unless page.sidebar == false %}
 <aside class="sidebar">

diff --git a/source/_posts/2012-01-01-using-digestive-functors-with-heist.lhs b/source/_posts/2012-01-01-using-digestive-functors-with-heist.lhs
@@ -5,7 +5,7 @@ date: 2012-01-01 21:23
 comments: true
 categories: [Haskell, Snap, digestive-functors, Heist]
 lhs: https://raw.github.com/norm2782/norm2782.github.com/source/source/_posts/2012-01-01-using-digestive-functors-with-heist.lhs
-commentIssueId: 1
+commentIssueId: 2
 ---
 
 In this post we will make *digestive-functors* and *Heist* play together

diff --git a/source/snaplet-hdbc.lhs b/source/snaplet-hdbc.lhs
@@ -6,7 +6,7 @@ comments: true
 sharing: true
 footer: true
 lhs: https://raw.github.com/norm2782/norm2782.github.com/source/source/snaplet-hdbc.lhs
-commentIssueId: 2
+commentIssueId: 1
 ---
 
 About the snaplet-hdbc library