Display last comments, Bugfix in animation system

css/ZeroBlog.css

@@ -16,8 +16,8 @@ a { border-bottom: 1px solid #3498db; text-decoration: none; color: black; font-
 a.nolink { border-bottom: none }
 a:hover { color: #3498db }
 
-.button { 
-	padding: 5px 10px; margin-left: 10px; background-color: #DDE0E0; border-bottom: 2px solid #999998; background-position: left center; 
+.button {
+	padding: 5px 10px; margin-left: 10px; background-color: #DDE0E0; border-bottom: 2px solid #999998; background-position: left center;
 	border-radius: 2px; text-decoration: none; transition: all 0.5s ease-out; color: #333
 }
 .button:hover { background-color: #FFF400; border-color: white; border-bottom: 2px solid #4D4D4C; transition: none; color: inherit }
@@ -26,13 +26,13 @@ a:hover { color: #3498db }
 /*.button-delete { background-color: #e74c3c; border-bottom-color: #A83F34; color: white }*/
 .button-outline { background-color: white; color: #DDD; border: 1px solid #eee }
 
-.button-delete:hover { background-color: #FF5442; border: 1px solid #FF5442; color: white } 
-.button-ok:hover { background-color: #27AE60; border: 1px solid #27AE60; color: white } 
+.button-delete:hover { background-color: #FF5442; border: 1px solid #FF5442; color: white }
+.button-ok:hover { background-color: #27AE60; border: 1px solid #27AE60; color: white }
 
-.button.loading { 
-	color: rgba(0,0,0,0); background: #999 url(../img/loading.gif) no-repeat center center; 
+.button.loading {
+	color: rgba(0,0,0,0); background: #999 url(../img/loading.gif) no-repeat center center;
 	transition: all 0.5s ease-out; pointer-events: none; border-bottom: 2px solid #666
-} 
+}
 
 .cancel { margin-left: 10px; font-size: 80%; color: #999; }
 
@@ -42,9 +42,9 @@ a:hover { color: #3498db }
 /* Editable */
 .editable { outline: none }
 .editable-edit:hover { opacity: 1; border: none; color: #333 }
-.editable-edit { 
+.editable-edit {
 	opacity: 0; float: left; margin-top: 0px; margin-left: -40px; padding: 8px 20px; transition: all 0.3s; width: 0px; display: inline-block; padding-right: 0px;
-	color: rgba(100,100,100,0.5); text-decoration: none; font-size: 18px; font-weight: normal; border: none; 
+	color: rgba(100,100,100,0.5); text-decoration: none; font-size: 18px; font-weight: normal; border: none;
 }
 /*.editing { white-space: pre-wrap; z-index: 1; position: relative; outline: 10000px solid rgba(255,255,255,0.9) !important; }
 .editing p { margin: 0px; padding: 0px }*/ /* IE FIX */
@@ -54,16 +54,16 @@ a:hover { color: #3498db }
 
 /* -- Editbar -- */
 
-.bottombar { 
+.bottombar {
 	display: none; position: fixed; padding: 10px 20px; opacity: 0; background-color: rgba(255,255,255,0.9);
-	right: 30px; bottom: 0px; z-index: 999; transition: all 0.3s; transform: translateY(50px) 
+	right: 30px; bottom: 0px; z-index: 999; transition: all 0.3s; transform: translateY(50px)
 }
 .bottombar.visible { transform: translateY(0px); opacity: 1 }
 .publishbar { z-index: 990}
 .publishbar.visible { display: inline-block; }
 .editbar { perspective: 900px }
-.markdown-help { 
-	position: absolute; bottom: 30px; transform: translateX(0px) rotateY(-40deg); transform-origin: right; right: 0px; 
+.markdown-help {
+	position: absolute; bottom: 30px; transform: translateX(0px) rotateY(-40deg); transform-origin: right; right: 0px;
 	list-style-type: none; background-color: rgba(255,255,255,0.9); padding: 10px; opacity: 0; transition: all 0.6s; display: none
 }
 .markdown-help.visible { transform: none; opacity: 1 }
@@ -74,21 +74,29 @@ a:hover { color: #3498db }
 
 /* -- Left -- */
 
-.left { float: left; position: absolute; width: 170px; padding-left: 60px; padding-right: 20px; margin-top: 60px; text-align: right }
+.left { float: left; position: absolute; width: 220px; padding-left: 20px; padding-right: 20px; margin-top: 60px; text-align: right }
 .right { float: left; padding-left: 60px; margin-left: 240px; max-width: 650px; padding-right: 60px; padding-top: 60px }
 
-.left .avatar { 
-	background-color: #F0F0F0; width: 60px; height: 60px; border-radius: 100%; margin-bottom: 10px; 
-	background-position: center center; background-size: 70%; display: inline-block;
+.left .avatar {
+	background-color: #F0F0F0; width: 60px; height: 60px; border-radius: 100%; margin-bottom: 10px;
+	background-position: center center; background-size: 70%; display: inline-block; image-rendering: pixelated;
 }
 .left h1 a.nolink { font-family: Tinos; display: inline-block; padding: 1px }
 .left h1 a.editable-edit { float: none }
 .left h2 { font-size: 15px; font-family: Tinos; line-height: 1.6em; color: #AAA; margin-top: 14px; letter-spacing: 0.2px }
 .left ul, .left li { padding: 0px; margin: 0px; list-style-type: none; line-height: 2em }
 .left hr { margin-left: 100px; margin-right: 0px; width: auto }
-.left .links { width: 230px; margin-left: -60px }
+/*.left .links { width: 230px; margin-left: -60px }*/
 .left .links.editor { text-align: left !important }
 
+.lastcomments { background-color: #FAFAFA; margin-left: -25px; padding-right: 15px; padding-bottom: 5px; padding-top: 3px; margin-top: 40px; margin-right: -15px; display: none }
+.lastcomments h3 { margin-top: 20px; }
+.lastcomments .lastcomment { font-size: 85%; margin-top: 20px; margin-bottom: 30px; margin-left: 20px; }
+.lastcomments .lastcomment .user_name { font-weight: bold; }
+.lastcomments .lastcomment .details { font-size: 90%; }
+.lastcomments .lastcomment .details .at { color: #999 }
+.lastcomments .lastcomment .details .postlink { border-bottom: 1px solid #BBB; }
+
 /* -- Post -- */
 
 .posts .new { display: none; position: absolute; top: -50px; margin-left: 0px; left: 50%; transform: translateX(-50%) }
@@ -117,7 +125,7 @@ a:hover { color: #3498db }
 .post .body a img { margin-bottom: -8px }
 .post .body img { max-width: 100% }
 
-code { 
+code {
 	background-color: #f5f5f5; border: 1px solid #ccc; padding: 0px 5px; overflow: auto; border-radius: 2px; display: inline-block;
 	color: #444; font-weight: normal; font-size: 60%; vertical-align: text-bottom; border-bottom-width: 2px;
 }
@@ -125,8 +133,8 @@ code {
 .post .body pre code { padding: 10px 20px; white-space: pre; max-width: 850px }
 
 blockquote { border-left: 3px solid #333; margin-left: 0px; padding-left: 1em }
-/*.post .more { 
-	display: inline-block; border: 1px solid #eee; padding: 10px 25px; border-radius: 26px; font-size: 11px; color: #AAA; font-weight: normal; 
+/*.post .more {
+	display: inline-block; border: 1px solid #eee; padding: 10px 25px; border-radius: 26px; font-size: 11px; color: #AAA; font-weight: normal;
 	left: 50%; position: relative; transform: translateX(-50%);
 }*/
 

css/all.css

@@ -77,8 +77,8 @@ a { border-bottom: 1px solid #3498db; text-decoration: none; color: black; font-
 a.nolink { border-bottom: none }
 a:hover { color: #3498db }
 
-.button { 
-	padding: 5px 10px; margin-left: 10px; background-color: #DDE0E0; border-bottom: 2px solid #999998; background-position: left center; 
+.button {
+	padding: 5px 10px; margin-left: 10px; background-color: #DDE0E0; border-bottom: 2px solid #999998; background-position: left center;
 	-webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px ; text-decoration: none; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out ; color: #333
 }
 .button:hover { background-color: #FFF400; border-color: white; border-bottom: 2px solid #4D4D4C; -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; transition: none ; color: inherit }
@@ -87,13 +87,13 @@ a:hover { color: #3498db }
 /*.button-delete { background-color: #e74c3c; border-bottom-color: #A83F34; color: white }*/
 .button-outline { background-color: white; color: #DDD; border: 1px solid #eee }
 
-.button-delete:hover { background-color: #FF5442; border: 1px solid #FF5442; color: white } 
-.button-ok:hover { background-color: #27AE60; border: 1px solid #27AE60; color: white } 
+.button-delete:hover { background-color: #FF5442; border: 1px solid #FF5442; color: white }
+.button-ok:hover { background-color: #27AE60; border: 1px solid #27AE60; color: white }
 
-.button.loading { 
-	color: rgba(0,0,0,0); background: #999 url(../img/loading.gif) no-repeat center center; 
+.button.loading {
+	color: rgba(0,0,0,0); background: #999 url(../img/loading.gif) no-repeat center center;
 	-webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out ; pointer-events: none; border-bottom: 2px solid #666
-} 
+}
 
 .cancel { margin-left: 10px; font-size: 80%; color: #999; }
 
@@ -103,9 +103,9 @@ a:hover { color: #3498db }
 /* Editable */
 .editable { outline: none }
 .editable-edit:hover { opacity: 1; border: none; color: #333 }
-.editable-edit { 
+.editable-edit {
 	opacity: 0; float: left; margin-top: 0px; margin-left: -40px; padding: 8px 20px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; width: 0px; display: inline-block; padding-right: 0px;
-	color: rgba(100,100,100,0.5); text-decoration: none; font-size: 18px; font-weight: normal; border: none; 
+	color: rgba(100,100,100,0.5); text-decoration: none; font-size: 18px; font-weight: normal; border: none;
 }
 /*.editing { white-space: pre-wrap; z-index: 1; position: relative; outline: 10000px solid rgba(255,255,255,0.9) !important; }
 .editing p { margin: 0px; padding: 0px }*/ /* IE FIX */
@@ -115,16 +115,16 @@ a:hover { color: #3498db }
 
 /* -- Editbar -- */
 
-.bottombar { 
+.bottombar {
 	display: none; position: fixed; padding: 10px 20px; opacity: 0; background-color: rgba(255,255,255,0.9);
-	right: 30px; bottom: 0px; z-index: 999; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; transform: translateY(50px) 
+	right: 30px; bottom: 0px; z-index: 999; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; transform: translateY(50px)
 }
 .bottombar.visible { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px) ; opacity: 1 }
 .publishbar { z-index: 990}
 .publishbar.visible { display: inline-block; }
 .editbar { -webkit-perspective: 900px ; -moz-perspective: 900px ; -o-perspective: 900px ; -ms-perspective: 900px ; perspective: 900px  }
-.markdown-help { 
-	position: absolute; bottom: 30px; -webkit-transform: translateX(0px) rotateY(-40deg); -moz-transform: translateX(0px) rotateY(-40deg); -o-transform: translateX(0px) rotateY(-40deg); -ms-transform: translateX(0px) rotateY(-40deg); transform: translateX(0px) rotateY(-40deg) ; transform-origin: right; right: 0px; 
+.markdown-help {
+	position: absolute; bottom: 30px; -webkit-transform: translateX(0px) rotateY(-40deg); -moz-transform: translateX(0px) rotateY(-40deg); -o-transform: translateX(0px) rotateY(-40deg); -ms-transform: translateX(0px) rotateY(-40deg); transform: translateX(0px) rotateY(-40deg) ; transform-origin: right; right: 0px;
 	list-style-type: none; background-color: rgba(255,255,255,0.9); padding: 10px; opacity: 0; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; transition: all 0.6s ; display: none
 }
 .markdown-help.visible { -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none; transform: none ; opacity: 1 }
@@ -135,21 +135,29 @@ a:hover { color: #3498db }
 
 /* -- Left -- */
 
-.left { float: left; position: absolute; width: 170px; padding-left: 60px; padding-right: 20px; margin-top: 60px; text-align: right }
+.left { float: left; position: absolute; width: 220px; padding-left: 20px; padding-right: 20px; margin-top: 60px; text-align: right }
 .right { float: left; padding-left: 60px; margin-left: 240px; max-width: 650px; padding-right: 60px; padding-top: 60px }
 
-.left .avatar { 
-	background-color: #F0F0F0; width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100% ; margin-bottom: 10px; 
-	background-position: center center; background-size: 70%; display: inline-block;
+.left .avatar {
+	background-color: #F0F0F0; width: 60px; height: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100% ; margin-bottom: 10px;
+	background-position: center center; background-size: 70%; display: inline-block; image-rendering: pixelated;
 }
 .left h1 a.nolink { font-family: Tinos; display: inline-block; padding: 1px }
 .left h1 a.editable-edit { float: none }
 .left h2 { font-size: 15px; font-family: Tinos; line-height: 1.6em; color: #AAA; margin-top: 14px; letter-spacing: 0.2px }
 .left ul, .left li { padding: 0px; margin: 0px; list-style-type: none; line-height: 2em }
 .left hr { margin-left: 100px; margin-right: 0px; width: auto }
-.left .links { width: 230px; margin-left: -60px }
+/*.left .links { width: 230px; margin-left: -60px }*/
 .left .links.editor { text-align: left !important }
 
+.lastcomments { background-color: #FAFAFA; margin-left: -25px; padding-right: 15px; padding-bottom: 5px; padding-top: 3px; margin-top: 40px; margin-right: -15px; display: none }
+.lastcomments h3 { margin-top: 20px; }
+.lastcomments .lastcomment { font-size: 85%; margin-top: 20px; margin-bottom: 30px; margin-left: 20px; }
+.lastcomments .lastcomment .user_name { font-weight: bold; }
+.lastcomments .lastcomment .details { font-size: 90%; }
+.lastcomments .lastcomment .details .at { color: #999 }
+.lastcomments .lastcomment .details .postlink { border-bottom: 1px solid #BBB; }
+
 /* -- Post -- */
 
 .posts .new { display: none; position: absolute; top: -50px; margin-left: 0px; left: 50%; -webkit-transform: translateX(-50%) ; -moz-transform: translateX(-50%) ; -o-transform: translateX(-50%) ; -ms-transform: translateX(-50%) ; transform: translateX(-50%)  }
@@ -178,7 +186,7 @@ a:hover { color: #3498db }
 .post .body a img { margin-bottom: -8px }
 .post .body img { max-width: 100% }
 
-code { 
+code {
 	background-color: #f5f5f5; border: 1px solid #ccc; padding: 0px 5px; overflow: auto; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px ; display: inline-block;
 	color: #444; font-weight: normal; font-size: 60%; vertical-align: text-bottom; border-bottom-width: 2px;
 }
@@ -186,8 +194,8 @@ code {
 .post .body pre code { padding: 10px 20px; white-space: pre; max-width: 850px }
 
 blockquote { border-left: 3px solid #333; margin-left: 0px; padding-left: 1em }
-/*.post .more { 
-	display: inline-block; border: 1px solid #eee; padding: 10px 25px; -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; -ms-border-radius: 26px; border-radius: 26px ; font-size: 11px; color: #AAA; font-weight: normal; 
+/*.post .more {
+	display: inline-block; border: 1px solid #eee; padding: 10px 25px; -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; -ms-border-radius: 26px; border-radius: 26px ; font-size: 11px; color: #AAA; font-weight: normal;
 	left: 50%; position: relative; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) ;
 }*/
 

index.html

@@ -49,8 +49,24 @@
  <h1><a href="?Home" class="nolink" data-editable="title" data-editable-mode="simple"></a></h1>
  <h2 data-editable="description"></h2>
  <hr>
- <div class="links" data-editable="links">
+ <div class="links" data-editable="links"></div>
+
+ <!-- Last comments -->
+ <div class="lastcomments">
+  <h3>Latest comments:</h3>
+  <ul>
+   <li class="lastcomment template">
+    <span class="user_name">nofish:</span>
+    <span class="body">WebGL under linux can be problematic, here is some tips...</span>
+    <div class="details">
+     <span class="at">@</span>
+     <a class="postlink" href="#">Changelog, August 16, 2015</a>
+    </div>
+   </li>
+  </ul>
  </div>
+ <!-- EOF Last comments -->
+
 </div>
 <!-- EOF left -->
 
@@ -62,7 +78,7 @@
  <!-- Post listing -->
  <div class="posts">
   <a href="#New+Post" class="button button-outline new">Add new post</a>
-  
+
   <!-- Template: post -->
   <div class="post template" data-object="Post:23" data-deletable="True">
    <h1 class="title"><a href="?Post:23:Title" data-editable="title" data-editable-mode="simple" class="editable">Title</a></h1>
@@ -74,7 +90,7 @@
    <a class="more" href="#"><span class='readmore'>Read more</span> →</a>
   </div>
   <!-- EOF Template: post -->
- 
+
  </div>
  <!-- EOF Post listing -->
 
@@ -89,7 +105,7 @@
   <div class="comment comment-new">
    <div class="info">
     <a class="user_name certselect" href="#Change+user" title='Change user'>Please sign in</a>
-    &#9473; 
+    &#9473;
     <span class="added">new comment</span>
    </div>
    <div class="comment-body">
@@ -111,7 +127,7 @@
     <div class="info">
      <span class="user_name">user_name</span>
      <!--<span class="cert_domain"></span>-->
-     &#9473; 
+     &#9473;
      <span class="added">1 day ago</span>
      <a href="#Reply" class="reply"><div class="icon icon-reply"></div> <span class="reply-text">Reply</span></a>
     </div>
@@ -120,7 +136,7 @@
    <!-- EOF Template: Comment -->
   </div>
  </div>
- <!-- EOF Single Post sho -->
+ <!-- EOF Single Post show -->
 
 
 

js/Comments.coffee

@@ -100,6 +100,9 @@ class Comments extends Class
 			Page.writePublish inner_path, btoa(json_raw), (res) =>
 				$(".comment-new .button-submit").removeClass("loading")
 				@loadComments()
+				setTimeout (->
+					Page.loadLastcomments()
+				), 1000
 				@checkCert("updaterules")
 				@log "Writepublish result", res
 				if res != false

js/ZeroBlog.coffee

@@ -45,6 +45,46 @@ class ZeroBlog extends ZeroFrame
 				$(".left .links").html(Text.toMarked(@data.links)).data("content", @data.links)
 
 
+	loadLastcomments: (type="show", cb=false) ->
+		query = "
+			SELECT comment.*, json_content.json_id AS content_json_id, keyvalue.value AS cert_user_id, json.directory, post.title AS post_title
+			FROM comment
+			LEFT JOIN json USING (json_id)
+			LEFT JOIN json AS json_content ON (json_content.directory = json.directory AND json_content.file_name='content.json')
+			LEFT JOIN keyvalue ON (keyvalue.json_id = json_content.json_id AND key = 'cert_user_id')
+			LEFT JOIN post ON (comment.post_id = post.post_id)
+			ORDER BY date_added DESC LIMIT 3"
+
+		@cmd "dbQuery", [query], (res) =>
+			if res.length
+				$(".lastcomments").css("display", "block")
+				res.reverse()
+			for lastcomment in res
+				elem = $("#lastcomment_#{lastcomment.json_id}_#{lastcomment.comment_id}")
+				if elem.length == 0 # Not exits yet
+					elem = $(".lastcomment.template").clone().removeClass("template").attr("id", "lastcomment_#{lastcomment.json_id}_#{lastcomment.comment_id}")
+					if type != "noanim"
+						elem.cssSlideDown()
+					elem.prependTo(".lastcomments ul")
+				@applyLastcommentdata(elem, lastcomment)
+			if cb then cb()
+
+	applyLastcommentdata: (elem, lastcomment) ->
+		elem.find(".user_name").text(lastcomment.cert_user_id.replace(/@.*/, "")+":")
+
+		body = Text.toMarked(lastcomment.body)
+		body = body.replace /[\r\n]/g, " "  # Remove whitespace
+		body = body.replace /\<blockquote\>.*?\<\/blockquote\>/g, " "  # Remove quotes
+		body = body.replace /\<.*?\>/g, " "  # Remove html codes
+		if body.length > 60  # Strip if too long
+			body = body[0..60].replace(/(.*) .*?$/, "$1") + " ..."  # Keep the last 60 character and strip back until last space
+		elem.find(".body").html(body)
+
+		title_hash = lastcomment.post_title.replace(/[#?& ]/g, "+").replace(/[+]+/g, "+")
+		elem.find(".postlink").text(lastcomment.post_title).attr("href", "?Post:#{lastcomment.post_id}:#{title_hash}#Comments")
+
+
+
 	routeUrl: (url) ->
 		@log "Routing url:", url
 		if match = url.match /Post:([0-9]+)/
@@ -120,7 +160,7 @@ class ZeroBlog extends ZeroFrame
 
 	addInlineEditors: (parent) ->
 		@logStart "Adding inline editors"
-		elems = $("[data-editable]:visible", parent) 
+		elems = $("[data-editable]:visible", parent)
 		for elem in elems
 			elem = $(elem)
 			if not elem.data("editor") and not elem.hasClass("editor")
@@ -170,7 +210,7 @@ class ZeroBlog extends ZeroFrame
 		else
 			$(".details .comments-num", elem).css("display", "none")
 
-		if full 
+		if full
 			body = post.body
 		else # On main page only show post until the first --- hr separator
 			body = post.body.replace(/^([\s\S]*?)\n---\n[\s\S]*$/, "$1")
@@ -187,6 +227,7 @@ class ZeroBlog extends ZeroFrame
 			@server_info = ret
 			if @server_info.rev < 160
 				@loadData("old")
+		@loadLastcomments("noanim")
 
 
 	# Returns the elem parent object
@@ -316,7 +357,7 @@ class ZeroBlog extends ZeroFrame
 			@cmd "fileWrite", ["content.json", btoa(content)], (res) =>
 				if res != "ok"
 					@cmd "wrapperNotification", ["error", "Content.json write error: #{res}"]
-				
+
 				# If the privatekey is stored sign the new content
 				if @site_info["privatekey"]
 					@cmd "siteSign", ["stored", "content.json"], (res) =>
@@ -358,11 +399,13 @@ class ZeroBlog extends ZeroFrame
 		if $("body").hasClass("page-post") then Comments.checkCert() # Update if username changed
 		# User commented
 		if site_info.event?[0] == "file_done" and site_info.event[1].match /.*users.*data.json$/
-			if $("body").hasClass("page-post") 
+			if $("body").hasClass("page-post")
 				Comments.loadComments() # Post page, reload comments
+				@loadLastcomments()
 			if $("body").hasClass("page-main")
 				RateLimit 500, =>
 					@pageMain()
+					@loadLastcomments()
 		else if site_info.event?[0] == "file_done" and site_info.event[1] == "data/data.json"
 			@loadData()
 			if $("body").hasClass("page-main") then @pageMain()

js/lib/jquery.cssanim.coffee

@@ -1,6 +1,6 @@
 jQuery.fn.cssSlideDown = ->
 	elem = @
-	elem.css({"opacity": 0, "margin-bottom": 0, "margin-top": 0, "padding-bottom": 0, "padding-top": 0, "display": "none", "transform": "scale(0.8)"}) 
+	elem.css({"opacity": 0, "margin-bottom": 0, "margin-top": 0, "padding-bottom": 0, "padding-top": 0, "display": "none", "transform": "scale(0.8)"})
 	setTimeout (->
 		elem.css("display", "")
 		height = elem.outerHeight()

js/lib/jquery.csslater.coffee

@@ -1,5 +1,3 @@
-timers = {}
-
 jQuery.fn.readdClass = (class_name) ->
 	elem = @
 	elem.removeClass class_name
@@ -21,6 +19,9 @@ jQuery.fn.hideLater = (time = 500) ->
 
 jQuery.fn.addClassLater = (class_name, time=5, mode="clear") ->
 	elem = @
+	elem[0].timers ?= {}
+	timers = elem[0].timers
+
 	if timers[class_name] and mode == "clear" then clearInterval(timers[class_name])
 	timers[class_name] = setTimeout ( ->
 		elem.addClass(class_name)
@@ -29,6 +30,9 @@ jQuery.fn.addClassLater = (class_name, time=5, mode="clear") ->
 
 jQuery.fn.removeClassLater = (class_name, time=500, mode="clear") ->
 	elem = @
+	elem[0].timers ?= {}
+	timers = elem[0].timers
+
 	if timers[class_name] and mode == "clear" then clearInterval(timers[class_name])
 	timers[class_name] = setTimeout ( ->
 		elem.removeClass(class_name)
@@ -37,6 +41,9 @@ jQuery.fn.removeClassLater = (class_name, time=500, mode="clear") ->
 
 jQuery.fn.cssLater = (name, val, time=500, mode="clear") ->
 	elem = @
+	elem[0].timers ?= {}
+	timers = elem[0].timers
+
 	if timers[name] and mode == "clear" then clearInterval(timers[name])
 	if time == "now"
 		elem.css name, val
@@ -49,6 +56,9 @@ jQuery.fn.cssLater = (name, val, time=500, mode="clear") ->
 
 jQuery.fn.toggleClassLater = (name, val, time=10, mode="clear") ->
 	elem = @
+	elem[0].timers ?= {}
+	timers = elem[0].timers
+
 	if timers[name] and mode == "clear" then clearInterval(timers[name])
 	timers[name] = setTimeout ( ->
 		elem.toggleClass name, val