From e0879dc76640478f412b3cabd98ee2af5f874654 Mon Sep 17 00:00:00 2001
From: Abdel Olakara <olakara@gmail.com>
Date: Wed, 25 Jun 2014 19:25:55 +0400
Subject: [PATCH] Completed basic functionality of blog, post page

1. Completed basic layout of blog home page and post page.
2. Added Disqus widget to post page
3. Added tags to the post page
---
 _config.yml        |  2 +-
 _layouts/post.html | 76 ++++++++++++++++++++++++++++++++++------------
 assets/css/app.css | 18 ++++++++---
 blog/index.html    | 21 +++++++------
 4 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/_config.yml b/_config.yml
index 61527c1..225a901 100644
--- a/_config.yml
+++ b/_config.yml
@@ -31,4 +31,4 @@ navigation:
   url: /about/
   
 # Custom vars
-version:          0.2.0
\ No newline at end of file
+version:          0.5.0
\ No newline at end of file
diff --git a/_layouts/post.html b/_layouts/post.html
index f2ba6b3..dd76709 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,24 +2,60 @@
 layout: master
 ---
 
-<div class="post">
-  <h1 class="post-title">{{ page.title }}</h1>
-  <span class="post-date">{{ page.date | date_to_string }}</span>
-  {{ content }}
-</div>
+<div class="container">
 
-<div class="related">
-  <h2>Related Posts</h2>
-  <ul class="related-posts">
-    {% for post in site.related_posts limit:3 %}
-      <li>
-        <h3>
-          <a href="{{ post.url }}">
-            {{ post.title }}
-            <small>{{ post.date | date_to_string }}</small>
-          </a>
-        </h3>
-      </li>
-    {% endfor %}
-  </ul>
-</div>
\ No newline at end of file
+	<header class="row">
+	  <div class="col-md-12">
+	    <h1><a href="{{site.baseurl}}" class="fa fa-arrow-circle-o-left"></a>&nbsp;&nbsp;&nbsp;Abdel Raoof's Blog</h1>
+	  </div>
+	</header>	
+
+  <div class="row">
+    <article class="col-md-12 justified">
+      <h1 class="post-title">{{ page.title }}</h1>
+      <div class="publish-tag">
+        <span class="fa fa-calendar"></span>&nbsp;Published On {{ page.date | date: "%B %d, %Y" }}
+      </div>
+      {{ content }}
+      <br/>
+      <span class="fa fa-tag"></span>Tags:
+      {% if page.tags %}
+        {% for tag in page.tags %}		
+          <span class="label label-primary"><a href="/tags/{{tag}}">{{tag}}</a></span>
+        {% endfor %}
+      {% else %}  
+        None
+      {% endif %}  
+        <div id="disqus_thread"></div>
+      <script type="text/javascript">
+        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
+        var disqus_shortname = 'testingblogo'; // required: replace example with your forum shortname
+
+        /* * * DON'T EDIT BELOW THIS LINE * * */
+        (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);
+        })();
+    </script>
+    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
+    
+    </article>
+  </div>
+  
+  <div class="related">
+    <h2>Related Posts</h2>
+    <ul class="related-posts">
+      {% for post in site.related_posts limit:3 %}
+        <li>
+          <h3>
+            <a href="{{ post.url }}">
+              {{ post.title }}
+              <small>{{ post.date | date_to_string }}</small>
+            </a>
+          </h3>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
\ No newline at end of file
diff --git a/assets/css/app.css b/assets/css/app.css
index c906ac7..962a43b 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -1,3 +1,17 @@
+.justified {
+    text-align: justify;
+}
+
+.publish-tag {
+    font-variant: small-caps;    
+    color: #aaa;
+    padding-bottom: 10px;
+}
+
+.btn-back {
+    margin-left: -46px;
+    text-decoration:none !important;
+}
 
 .fa-2 {
   font-size: 3em;
@@ -16,10 +30,6 @@
 }
 
 .container > header {
-	width: 90%;
-	max-width: 69em;
-	margin: 0 auto;
-	padding: 2.875em 1.875em 3.875em 1.875em;
 	color: #2672EC;
 }
 
diff --git a/blog/index.html b/blog/index.html
index db5035d..0efb2f0 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -6,19 +6,23 @@
 
 <div class="container">
 
-	<header class="clearfix header">
-		<a href="{{site.baseurl}}"><span class="fa fa-arrow-circle-o-left fa-6">&nbsp;</span></a>&nbsp;&nbsp;&nbsp;<h1>Abdel Raoof's Blog</h1>				
+	<header class="row">
+	  <div class="col-md-12">
+	    <h1><a href="{{site.url}}" class="fa fa-arrow-circle-o-left"></a>&nbsp;&nbsp;&nbsp;Abdel Raoof's Blog</h1>
+	  </div>
 	</header>	
 	
-  <div class="posts">
+  <div class="row">
     {% for post in paginator.posts %}
-    <article class="post">
+    <article class="col-md-12 justified">
       <h1 class="post-title">
         <a href="{{site.baseurl}}{{ post.url }}">
           {{ post.title }}
         </a>
       </h1>
-      <span class="post-date">{{ post.date | date_to_string }}</span>
+      <div class="publish-tag">
+        <span class="fa fa-calendar"></span>&nbsp;PUBLISHED ON {{ post.date | date_to_string }}
+      </div>
       <br/>
       {{ post.content }}
     </article>
@@ -29,7 +33,7 @@ <h1 class="post-title">
   <div class="row">
     <div class="col-sm-6 text-left">
         {% if paginator.next_page %}
-        <a class="btn btn-primary" href="{{paginate_path}}/{{paginator.next_page}}">Older</a>
+        <a class="btn btn-primary" href="{{paginator.next_page_path}}">Older</a>
         {% else %}
         <span class="btn btn-primary disabled">Older</span>
         {% endif %}
@@ -37,15 +41,14 @@ <h1 class="post-title">
     <div class="col-sm-6 text-right">
         {% if paginator.previous_page %}
           {% if paginator.page == 2 %}
-            <a class="btn btn-primary" href="/">Newer</a>
+            <a class="btn btn-primary" href="/blog/">Newer</a>
           {% else %}
-            <a class="btn btn-primary" href="/page{{paginator.previous_page}}">Newer</a>
+            <a class="btn btn-primary" href="{{paginator.previous_page_path}}">Newer</a>
           {% endif %}
         {% else %}
           <span class="btn btn-primary disabled">Newer</span>
         {% endif %}
     </div>
   </div>
-  
 </div>