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
olakara · Jun 25, 2014 · e0879dc · e0879dc
1 parent f897d90
commit e0879dc
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 34 deletions.
diff --git a/_config.yml b/_config.yml
@@ -31,4 +31,4 @@ navigation:
   url: /about/
 
 # Custom vars
-version:          0.2.0
+version:          0.5.0
diff --git 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>
+	<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>
diff --git 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
@@ -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,23 +33,22 @@ <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 %}
     </div>
     <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>