From a971ca4e53feaf455c9ffb9c82c0f0027da3a3c9 Mon Sep 17 00:00:00 2001
From: Vjeux <vjeuxx@gmail.com>
Date: Tue, 27 Aug 2013 01:30:46 +0200
Subject: [PATCH] Add pagination to blog

- Add pagination
- Display full content in /blog
- Truncate Recent posts
- Add permalink that lists all the blog posts
- Add spacing and bullet around recent posts to make it more readable
---
 _config.yml             |  2 ++
 _css/react.scss         | 32 +++++++++++++++++++++++++-------
 _includes/nav_blog.html |  9 +++++----
 blog/all.html           | 15 +++++++++++++++
 blog/index.html         | 26 ++++++++++++++++----------
 5 files changed, 63 insertions(+), 21 deletions(-)
 create mode 100644 blog/all.html

diff --git a/_config.yml b/_config.yml
index 4e51347e..3cd9eaf8 100644
--- a/_config.yml
+++ b/_config.yml
@@ -16,6 +16,8 @@ markdown: redcarpet
 react_version: 0.4.0
 description: A JavaScript library for building user interfaces
 relative_permalinks: true
+paginate: 5
+paginate_path: /blog/page:num
 nav_docs_sections:
 - title: Quick Start
   items:
diff --git a/_css/react.scss b/_css/react.scss
index 68bfe87e..8c79fbe0 100644
--- a/_css/react.scss
+++ b/_css/react.scss
@@ -248,6 +248,12 @@ li {
 
 }
 
+.nav-blog {
+  li {
+    margin-bottom: 5px;
+  }
+}
+
 // Home Page specifics
 
 .home-section {
@@ -285,14 +291,14 @@ li {
   margin-right: 0;
 }
 
-#examples {
-  h3 {
-    color: $darkColor;
-    font-size: 24px;
-    font-weight: normal;
-    margin-bottom: 5px;
-  }
+#examples h3, .home-presentation h3 {
+  color: $darkColor;
+  font-size: 24px;
+  font-weight: normal;
+  margin-bottom: 5px;
+}
 
+#examples {
   p {
     margin: 0 0 25px 0;
     max-width: $twoColumnWidth;
@@ -685,3 +691,15 @@ p code {
 .post {
   margin-bottom: 30px;
 }
+
+.pagination {
+  margin-bottom: 30px;
+
+  /* Trick to get the wrapper to expand to fit floating elements */
+  width: 100%;
+  overflow: hidden;
+
+  .next {
+    float: right;
+  }
+}
\ No newline at end of file
diff --git a/_includes/nav_blog.html b/_includes/nav_blog.html
index 3cc9ec8b..75ff77e5 100644
--- a/_includes/nav_blog.html
+++ b/_includes/nav_blog.html
@@ -1,10 +1,11 @@
-<div class="nav-docs">
+<div class="nav-docs nav-blog">
   <div class="nav-docs-section">
     <h3>Recent posts</h3>
     <ul>
-    {% for post in site.posts %}
-      <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
-    {% endfor %}
+      {% for post in site.posts limit:10 %}
+        <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
+      {% endfor %}
+      <li><a href="/react/blog/all.html">All posts ...</a></li>
     </ul>
   </div>
 </div>
diff --git a/blog/all.html b/blog/all.html
new file mode 100644
index 00000000..553ea254
--- /dev/null
+++ b/blog/all.html
@@ -0,0 +1,15 @@
+---
+title: Blog
+layout: default
+sectionid: blog
+id: all-posts
+---
+
+<section class="content wrap documentationContent nosidebar">
+  <div class="inner-content">
+    <h1>All Posts</h1>
+    {% for page in site.posts %}
+      <p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
+    {% endfor %}
+  </div>
+</section>
diff --git a/blog/index.html b/blog/index.html
index 09925c3b..acc49a62 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -7,22 +7,28 @@ sectionid: blog
 <section class="content wrap blogContent">
   {% include nav_blog.html %}
   <div class="inner-content">
-    {% for page in site.posts %}
+    {% for page in paginator.posts %}
       <div class="post-list-item">
         <h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
         <p class="meta">{{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
-
-        <hr>
-
+        <hr />
         <div class="post">
-         {{ page.excerpt }}
-         {% if page.excerpt != page.content %}
-           <p>
-             <a href="/react{{ page.url }}">Continue Reading &rarr;</a>
-          </p>
-         {% endif %}
+         {{ page.content }}
         </div>
       </div>
     {% endfor %}
+
+    <div class="pagination">
+      {% if paginator.previous_page %}
+        <a href="/react/blog/{{ paginator.previous_page_path }}" class="previous">
+          &laquo; Previous Page
+        </a>
+      {% endif %}
+      {% if paginator.next_page %}
+        <a href="/react/blog/{{ paginator.next_page_path }}" class="next">
+          Next Page &raquo;
+        </a>
+      {% endif %}
+    </div>
   </div>
 </section>