Add pagination to blog

vjeux · zpao · commit d91b23801575 · 2013-09-04T15:31:55.000-07:00
- 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
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -16,6 +16,8 @@ markdown: redcarpet
 react_version: 0.4.1
 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/docs/_css/react.scss b/docs/_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;
+  }
+}
diff --git a/docs/_includes/nav_blog.html b/docs/_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/docs/blog/all.html b/docs/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/docs/blog/index.html b/docs/blog/index.html
@@ -7,22 +7,28 @@
 <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>
