Disqus comments

_config-dev.yml

@@ -2,6 +2,5 @@
 baseurl: ""# the subpath of your site, e.g. /blog/
 
 # Site live URL
-url: "http://127.0.0.1:3000" # the base hostname & protocol for your site
-port: 3000
+url: "http://127.0.0.1:4000" # the base hostname & protocol for your site
 

_config.yml

@@ -21,6 +21,7 @@ theme:
     gplus: +GayanVirajith
     dribble: gayan
     pinterest: gayanvirajith
+  discus_shortname: gaya-webcreate
 
 # Build settings
 markdown: kramdown

_includes/social.html

@@ -49,4 +49,12 @@
     </li> 
     {% endif %}
 
+    <li>
+        <a title="Subscribe via RSS" 
+            href="{{ '/feed.xml' | prepend: site.baseurl | prepend: site.url }}"
+            class="rss wc-img-replace" target="_blank">
+            RSS
+        </a>
+    </li>
+
 </ul>

_layouts/default.html

@@ -90,6 +90,11 @@ <h3>{{ site.title }}<small>{{ site.tagline }}</small></h3>
       })(document);
     </script>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script type="text/javascript">
+      var config = {
+        "discus_shortname": "{{ site.theme.discus_shortname }}"
+      };
+    </script>
     <script async type="text/javascript" src="{{ '/assets/js/gaya.js' | prepend: site.baseurl | prepend: site.url }}"></script>
   </body>
 </html>

_layouts/post.html

@@ -26,4 +26,12 @@ <h1 class="post-title">{{ page.title }}</h1>
     {{ content }}
   </article>
 
+  {% if page.comments %}
+    <div class="comments">
+        <a href="javascript:;" class="load-view">View Comments...</a>
+        <div id="disqus_thread"></div>
+        <div id="g-comments"></div>
+    </div>
+  {% endif %}
+
 </div>

_posts/2014-11-22-welcome-to-jekyll.markdown

@@ -4,7 +4,6 @@ title:  "Welcome to Jekyll!"
 date:   2014-11-22 22:19:55
 categories: jekyll update
 banner_image: sample-banner-image-1.jpg
-banner_image_alt: About me
 ---
 You will find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
 

_posts/2014-12-14-what-is-nodejs.markdown

@@ -0,0 +1,43 @@
+---
+layout: post
+title:  "What is Node.js"
+date:   2014-12-14 04:07:49
+categories: NodeJS Guides
+banner_video: '<iframe width="560" height="315" src="//www.youtube.com/embed/pU9Q6oiQNd0" frameborder="0" allowfullscreen></iframe>'
+comments: true
+---
+
+Node.js is an open source, cross-platform runtime environment for server-side 
+and networking applications. Node.js applications are written in JavaScript, 
+and can be run within the Node.js runtime on OS X, Microsoft Windows, 
+Linux and FreeBSD.
+
+> Node.js is a platform built on Chrome's JavaScript runtime for easily building 
+fast, scalable network applications. Node.js uses an event-driven, 
+non-blocking I/O model that makes it lightweight and efficient, 
+perfect for data-intensive real-time applications that run across distributed 
+devices. 
+
+## Example web server
+
+This simple web server written in Node responds with "Hello World" for every 
+request.
+
+{% highlight js %}
+var http = require('http');
+http.createServer(function (req, res) {
+  res.writeHead(200, {'Content-Type': 'text/plain'});
+  res.end('Hello World\n');
+}).listen(1337, '127.0.0.1');
+console.log('Server running at http://127.0.0.1:1337/');
+{% endhighlight %}
+
+To run the server, put the code into a file example.js and execute it with the 
+node program from the command line:
+{% highlight sh %}
+$ node example.js
+{% endhighlight %}
+
+Node official website: [nodejs.org][nodejs]
+
+[nodejs]: http://nodejs.org/

assets/css/_sass/modules/_social-icons.scss

@@ -60,12 +60,19 @@ ul.social-media {
   }
 
   li a.pinterest {
-      background-position: -120px 0;
-      &:hover {
-        background-position: -120px -24px;
-      }
+    background-position: -144px 0;
+    &:hover {
+      background-position: -144px -24px;
+    }
+  }
+
+  li a.rss {
+    background-position: -120px 0;
+    &:hover {
+      background-position: -120px -24px;
     }
   }
+}
 
 /**
  * IE fallback 

assets/css/main.scss

@@ -31,6 +31,8 @@
  * header               - Site header
  * sidebar              - Sidebar & toggle
  * post/pages           - Post/Page articles
+ * post-banner          - Banner image/video
+ * comments             - Post comments
  */
 
 
@@ -587,4 +589,22 @@ img {
   @include MQ(M) {
     margin: -2em -2em 0 -2em;
   }
+}
+
+
+
+
+
+/*------------------------------------*\
+    #COMPONENTS-COMMENTS
+\*------------------------------------*/
+
+/*
+ * 
+ * Disqus comments 
+ */
+
+.comments {
+  border-top: 1px solid $gray-lighter;
+  padding: 1em 0;
 }

assets/js/gaya.js

@@ -82,6 +82,27 @@
 // Works with either jQuery or Zepto
 })( window.jQuery || window.Zepto );
 
-jQuery(document).ready(function(){
-    jQuery(".post").fitVids();
+jQuery(document).ready(function() {
+
+  jQuery(".post").fitVids();
+
+  // Load discus comment
+  function initDisqusComments(){
+
+    if(config.disqus_shortname != '') {
+      var disqus_shortname = config.disqus_shortname;
+      (function() {
+      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
+      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+      })();
+    }
+  }
+
+  $('.load-view').click(function(){
+    initDisqusComments();
+    $(this).fadeOut(200);
+  });
+
+
 });

index.html

@@ -8,9 +8,12 @@
 
     {% if post.banner_image %}
     <div class="banner-image">
+      <a href="{{ post.url | append: '/' | replace: '//', '/' | prepend: site.baseurl | prepend: site.url |  }}" 
+        title="{{ post.title }}">
       <img 
           src="{{ "/assets/images/" | append: post.banner_image | prepend: site.baseurl | prepend: site.url }}" 
-          alt="{{ post.banner_image_alt }}">
+          alt="{% if post.banner_image_alt %}{{ post.banner_image_alt }}{% else %}{{ post.title }} {% endif %}">
+      </a>
     </div>
     {% endif %}