permalinking comments. fixes schn4ck#20

src/embed/comments.jst.html

@@ -22,14 +22,14 @@
 <% } %>
 <ul class="schnack-comments">
     <% data.comments.forEach((comment) => { %>
-        <li data-id="<%= comment.id %>" class="schnack-comment<% if (!comment.approved && !comment.trusted) { %> schnack-not-approved<% } %>">
+        <li id="comment-<%= comment.id %>" data-id="<%= comment.id %>" class="schnack-comment<% if (!comment.approved && !comment.trusted) { %> schnack-not-approved<% } %>">
             <div class="schnack-dateline">
                 <span class="schnack-author"><% if (comment.author_url) { %><a href="<%= comment.author_url %>" target="_blank"><% } %><%= comment.display_name || comment.name %><% if (comment.author_url) { %></a><% } %></span>
                 <% if (data.user && data.user.admin &&!comment.trusted) {
                 ['trust', 'block'].forEach((action) => { %>
                 <button class="schnack-action" data-target="<%= comment.user_id %>" data-class="user" data-action="<%= action %>"><i class="icon schnack-icon-<%= action %>"></i> <span><%= action %></span></button>
                 <% }); } %>
-                <span class="schnack-date"><%= comment.created_at_s %></span>
+                <span class="schnack-date"><a href="#comment-<%= comment.id %>"><%= comment.created_at_s %></a></span>
             </div>
             <blockquote class="schnack-body">
                 <%= comment.comment %>

src/embed/index.js

@@ -3,6 +3,7 @@ import comments_tpl from './comments.jst.html';
 
 (function() {
     let initialized = false;
+    let firstLoad = true;
     const $ = (sel) => document.querySelector(sel);
     const script = $('script[data-schnack-target]');
 
@@ -52,7 +53,7 @@ import comments_tpl from './comments.jst.html';
                     .then((res) => {
                         console.log(res);
                         textarea.value = '';
-                        window.localStorage.setItem(`schnack-draft-${slug}`, textarea.value);                        
+                        window.localStorage.setItem(`schnack-draft-${slug}`, textarea.value);
 
                         refresh();
                     });
@@ -145,6 +146,13 @@ import comments_tpl from './comments.jst.html';
                     btn.addEventListener('click', action);
                 });
             }
+
+            if (firstLoad && window.location.hash.match(/^#comment-\d+$/)) {
+                const hl = document.querySelector(window.location.hash);
+                hl.scrollIntoView();
+                hl.classList.add('schnack-highlight');
+                firstLoad = false;
+            }
         });
     }
 

test/schnack.css

@@ -37,4 +37,13 @@ button.schnack-action:hover {
 
 button.schnack-action span {
     display: none;
-}
+}
+
+li.schnack-comment.schnack-highlight {
+  animation: flash 7s 1;
+}
+
+@keyframes flash {
+  0% { background-color: rgba(255,255,100,0.3); }
+  100% { background-color: rgba(255,255,255,0); }
+}