Implemented blog post pagination.

With the new design on the blog post index, listing all blog posts is not a viable option anymore. This adds pagination by year and displaying summary for the top 10 posts per page.
nodejs · Jan 1, 2016 · e3cd087 · e3cd087
1 parent afb299a
commit e3cd087
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 24 deletions.
diff --git a/build.js b/build.js
@@ -14,6 +14,7 @@ const markdown = require('metalsmith-markdown')
 const prism = require('metalsmith-prism')
 const stylus = require('metalsmith-stylus')
 const permalinks = require('metalsmith-permalinks')
+const pagination = require('metalsmith-yearly-pagination')
 const marked = require('marked')
 const path = require('path')
 const fs = require('fs')
@@ -126,6 +127,13 @@ function buildlocale (source, locale) {
         refer: false
       }
     }))
+    .use(pagination({
+      path: 'blog/page',
+      iteratee: (post, idx) => ({
+        post,
+        displaySummary: idx < 10
+      })
+    }))
     .use(markdown(markedOptions))
     .use(githubLinks({ locale: locale }))
     .use(prism())

diff --git a/layouts/blog-index.hbs b/layouts/blog-index.hbs
@@ -1,27 +1,40 @@
 <!DOCTYPE html>
-<html lang="{{site.locale}}">
+<html lang="{{ site.locale }}">
 {{> html-head }}
 
 <body>
     {{> header }}
 
     <div id="main">
         <div class="container">
+            <h2>News from {{ pagination.year }}</h2>
 
             <ul class="blog-index">
-                {{#each collections.blog}}
-                    {{#if title}}
-                        <li>
-                            <time datetime="{{ date }}">{{ strftime date "%d %b %y" }}</time>
-                            <a href="/{{../../site.locale}}/{{ path }}/">{{ title }}</a>
+                {{#each pagination.posts}}
+                    <li>
+                        <time datetime="{{ post.date }}">{{ strftime post.date "%d %b" }}</time>
+                        <a href="/{{ ../site.locale }}/{{ post.path }}/">{{ post.title }}</a>
+
+                        {{#if displaySummary}}
                             <div class="summary">
-                              {{{ summary contents ../../site.locale path }}}
+                              {{{ summary post.contents ../site.locale post.path }}}
                             <div>
-                        </li>
-                    {{/if}}
+                        {{/if}}
+                    </li>
                 {{/each}}
             </ul>
 
+            {{#if pagination}}
+                <nav class="pagination">
+                    {{#if pagination.prev.path}}
+                        <a href="/{{ site.locale }}/{{ pagination.prev.path }}">&lt; Newer</a>
+                    {{/if}}
+
+                    {{#if pagination.next.path}}
+                        <a href="/{{ site.locale }}/{{ pagination.next.path }}">Older &gt;</a>
+                    {{/if}}
+                </nav>
+            {{/if}}
         </div>
     </div>
 

diff --git a/layouts/css/page-modules/_blog-index.styl b/layouts/css/page-modules/_blog-index.styl
@@ -1,7 +1,11 @@
 .blog-index
+    list-style none
+    padding 0
+
     time
         margin-right 1em
         color $light-gray
 
     .summary
-      font-size: 75%
+        margin-left 1em
+        font-size: 75%
diff --git a/locale/en/blog/index.md b/locale/en/blog/index.md
@@ -1,3 +1,4 @@
 ---
 layout: blog-index.hbs
+paginate: blog
 ---
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "metalsmith-permalinks": "0.4.0",
     "metalsmith-prism": "2.1.1",
     "metalsmith-stylus": "1.0.0",
+    "metalsmith-yearly-pagination": "^1.0.2",
     "ncp": "2.0.0",
     "node-geocoder": "^3.4.1",
     "node-version-data": "1.0.0",

diff --git a/scripts/helpers/summary.js b/scripts/helpers/summary.js
@@ -2,25 +2,46 @@
 
 const cheerio = require('cheerio')
 
-const SUMMARY_LENGHT = 400
+const SUMMARY_MAX_LENGTH = 300
+const IGNORE_SELECTORS = ['.blogpost-header', '.anchor', 'h1', 'h2', 'h3', 'blockquote']
+
+/**
+ * Due to the nature of metalsmith and
+ * how the metalsmith-paginate plugin operates,
+ * this helper has to handle two different types of
+ * HTML contents:
+ *  - clean blog posts converted from markdown to HTML,
+ *    seen on the first page of blog posts
+ *  - the remaining paginated pages has gone
+ *    through the handlebars process and therefore has the
+ *    entire page layout (w/<html>, <head> and <body> etc)
+ *    wrapped around the actual blog contents :(
+ */
 
 module.exports = function (contents, locale, path) {
-  let $ = cheerio.load(contents)
+  const $ = cheerio.load(contents)
+  const $body = $('body')
+  const hasBody = $body.length > 0
+  const $elements = hasBody ? $body.find('article > *') : $('*')
 
   let summary = ''
 
-  $('*').each((i, elem) => {
-    if (summary.length > SUMMARY_LENGHT) {
-      summary += `<p><a href='/${locale}/${path}/'>Read more...</a></p>`
-      return false
-    }
-
-    if (elem.parent) {
-      return
-    }
-
-    summary += $.html(elem)
-  })
+  $elements
+    .not((i, elem) => IGNORE_SELECTORS.some((selector) => $(elem).is(selector)))
+    .each((i, elem) => {
+      if (summary.length > SUMMARY_MAX_LENGTH) {
+        summary += `<p><a href='/${locale}/${path}/'>Read more...</a></p>`
+        return false
+      }
+
+      // dont re-add nested elements when extracting summary
+      // from blog posts not contained in a complete HTML document
+      if (!hasBody && elem.parent) {
+        return
+      }
+
+      summary += $.html(elem)
+    })
 
   return summary
 }