add comments

Author: Stephan Schmitz

index.html

@@ -40,16 +40,16 @@
                     <h1 id="titleHolder">Loading gist...</h1>
                 </header>
                 <div id="authorHolder">
-                    <span>Post by <span id="gistAuthor"></span>, <span id="gistPubDate"></span></span>
+                    <span>Post by <span id="gistAuthor"></span>, at <span id="gistPubDate"></span></span>
                 </div>
                 <div id="gistContent">
                     <noscript>Enable JavaScript to use nicegist.</noscript>
+                    <div id="loadingIndicator">
+                        <img src="./static/dom_distiller_material_spinner.svg">
+                    </div>
                 </div>
             </article>
-            <div id="loadingIndicator">
-                <img src="./static/dom_distiller_material_spinner.svg">
-            </div>
-            <div id="gistComments"></div>
+            <div id="gist-comments"></div>
             <footer>
                 <p id="footerIntro">Check out the <a href="https://github.com/nicegist/nicegist.github.io">source for Nicegist on GitHub</a></p>
                 <p id="footerPost"><a href="https://nicegist.github.io/">Nicegist</a> · writing for hackers · zero setup · publish in seconds</p>

manifest.json

@@ -1,5 +1,5 @@
 {
- "name": "Nicegist",
+ "name": "Nicegist · writing for hackers · zero setup · publish in seconds",
  "shortname": "Nicegist",
  "theme_color": "#FAFAFA",
  "background_color": "#FAFAFA",

static/app.js

@@ -159,10 +159,30 @@ var scrollToElem = function(elemSelector) {
 
 var addAuthor = function(gist) {
     document.querySelector('#gistAuthor').innerHTML = '<a href="' + gist.owner.html_url + '">@' + gist.owner.login + '</a>';
-    document.querySelector('#gistPubDate').textContent = gist.created_at;
+    document.querySelector('#gistPubDate').innerHTML = '<a href="' + gist.html_url + '">' + gist.created_at + '</a>';
     document.querySelector('#authorHolder').style.display = 'block';
 };
 
+var getCommentHTML = function(comment, renderedMarkdown) {
+    var username = comment.user === null ? 'ghost' : comment.user.login; // when a gist user was deleted, github uses a "ghost" label
+    var avatar = comment.user === null ? 'https://avatars3.githubusercontent.com/u/10137' : comment.user.avatar_url;
+    var commentUsername = comment.user === null ? `<span class="username">${username}</span>` : `<a href="${comment.user.html_url}" class="username">${username}</a>`;
+    return `<div class="comment-block">
+                <div class="comment" id="comment-${comment.id}">
+                    <div class="comment-block-title">
+                        <img class="avatar" height="32" width="32" alt="@${username}" src="${avatar}?s=88&amp;v=4">
+                        <div class="comment-block-meta">
+                            ${commentUsername}<br>
+                            commented at <a href="#comment-${comment.id}"><time class="timestamp" datetime="${comment.created_at}">${comment.created_at}</time></a>
+                        </div>
+                    </div>
+                    <div class="comment-block-comment">
+                        <div class="comment-body">${renderedMarkdown}</div>
+                    </div>
+                </div>
+            </div>`;
+};
+
 var loadGist = function(gistId) {
     GithubApi.getGist(gistId, function(gist) {
         if (gist) {
@@ -196,7 +216,16 @@ var loadGist = function(gistId) {
                         permalink: true,
                         permalinkClass: 'header-anchor',
                         permalinkSymbol: '¶',
-                        permalinkBefore: true
+                        permalinkBefore: true,
+                        slugify: function(str) {
+                            // use custom slugify function to fix several issues with anchor generation (special chars related)
+                            str = encodeURIComponent(String(str).trim().toLowerCase().replace(/[^a-zA-Z0-9]+/g,"-"));
+                            if (/[0-9]/.test(str[0])) { // ids must not start with a number
+                                var x = str.split('-', 1);
+                                str = str.substring((x[0].length + 1));
+                            }
+                            return str;
+                        }
                     });
 
                     for (var i in files.markdown) {
@@ -223,20 +252,24 @@ var loadGist = function(gistId) {
                         addAuthor(gist);
                     }
 
-                    // add link to gist comment section, if we have comments
+                    // add gist comments, if we have
                     if (!isHomepage && gist.comments > 0) {
-                        // var commentsHTML = '';
-                        // GithubApi.getGistComments(gistId, function(comments) {
-                        //     if (comments && comments.length) {
-                        //         for (var m in comments) {
-                        //             var commentHTML = md.render(comments[m].body);
-                        //             console.log(commentHTML);
-                        //         }
-                        //     }
-                        // }, function(error) {
-                        //     console.warn(error);
-                        // });
-                        document.querySelector('#gistComments').innerHTML = '<a target="_blank" href="https://gist.github.com/' + gistId + '#comments">' + gist.comments + ' comments</a>';
+                        var hl = gist.comments > 1 ? gist.comments + ' Comments' : '1 Comment';
+                        var commentsHTML = '<h2><a class="header-anchor" href="#gist-comments" aria-hidden="true">¶</a>' + hl + '</h2>';
+                        commentsHTML += '<p><a target="_blank" href="' + gist.html_url + '#partial-timeline-marker">Add comment on Gist</a></p>'
+                        GithubApi.getGistComments(gistId, function(comments) {
+                            if (comments && comments.length) {
+                                // create a new instance, since we don't want to create anchor links within comments
+                                md = window.markdownit({linkify: true});
+                                for (var m in comments) {
+                                    commentsHTML += getCommentHTML(comments[m], md.render(comments[m].body));
+                                }
+                                document.querySelector('#gist-comments').style.display = 'block';
+                                document.querySelector('#gist-comments').innerHTML = commentsHTML;
+                            }
+                        }, function(error) {
+                            console.warn(error);
+                        });
                     }
 
                     // add syntax highlighting to code blocks

static/dom_distiller_viewer.css

@@ -229,7 +229,7 @@ video::-webkit-media-controls-fullscreen-button {
     width: 100%;
 }
 
-article > #gistContent, #gistComments, footer {
+article > #gistContent, #gist-comments, footer {
     margin: 24px 16px 24px 16px;
 }
 
@@ -361,7 +361,7 @@ img {
 footer {
     margin-top: 4em;
     margin-bottom: 2em;
-    border-top: 1px solid #eee;
+    border-top: 1px solid #e1e4e8;
 }
 
 footer p {
@@ -401,6 +401,10 @@ h6:hover .header-anchor {
     }
 }
 
+article {
+    margin-bottom: 45px;
+}
+
 #authorHolder {
     margin: 5px 16px;
     display: none;
@@ -413,3 +417,79 @@ h6:hover .header-anchor {
     color: #aaa !important;
     text-decoration: underline;
 }
+#gist-comments {
+    display: none;
+}
+#gist-comments[style*="block"] {
+    border-top: 1px solid #e1e4e8;
+}
+.comment-block {
+    border-top: 1px solid #e1e4e8;
+    padding: 15px 0;
+}
+.comment-block>.comment {
+    margin: 0;
+}
+.comment {
+    background: #fff;
+    border: 1px solid #d1d5da;
+    border-radius: 3px;
+    margin: 0 15px 15px;
+    overflow: hidden;
+    padding: 0;
+    white-space: normal;
+    word-break: break-word;
+    word-wrap: break-word;
+}
+.comment-block-title {
+    background-color: #fff;
+    border-bottom: 1px solid #e1e4e8;
+    color: #586069;
+    font-size: 12px;
+    line-height: 16px;
+    padding: 10px 15px;
+    position: relative;
+}
+.comment-block-title:before,
+.comment-block-title:after {
+    content: "";
+    display: table;
+}
+.avatar {
+    border-radius: 3px;
+    display: inline-block;
+    line-height: 1;
+    overflow: hidden;
+    vertical-align: middle;
+    margin: 0;
+}
+.comment-block-title .avatar {
+    border-radius: 3px;
+    float: left;
+    margin-right: 10px;
+}
+.comment-block-title .username {
+    color: #444d56 !important;
+    font-weight: 600;
+}
+.comment-block-title .timestamp {
+    color: #586069 !important;
+}
+.comment-block-title a {
+    text-decoration: none;
+}
+.comment-block-meta {
+    margin-left: 42px;
+}
+.comment-block-comment {
+    padding: 15px;
+}
+.comment-body {
+    line-height: 1.5;
+    word-wrap: break-word;
+}
+.comment-body:before,
+.comment-body:after {
+    content: "";
+    display: table;
+}