From 52a87d07ea8d4707d7ab9b94680c5c40259e332b Mon Sep 17 00:00:00 2001
From: Francisco Baio Dias <xicombd@gmail.com>
Date: Sat, 12 Sep 2015 13:58:43 +0100
Subject: [PATCH 1/5] Added basic helper

---
 build.js                   | 3 ++-
 layouts/blog-index.hbs     | 3 ++-
 scripts/helpers/summary.js | 5 +++++
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 scripts/helpers/summary.js

diff --git a/build.js b/build.js
index a75d519c76f2b..6457ced0077e3 100755
--- a/build.js
+++ b/build.js
@@ -182,7 +182,8 @@ function buildlocale (source, locale) {
         changeloglink: require('./scripts/helpers/changeloglink.js'),
         strftime: require('./scripts/helpers/strftime.js'),
         apidocslink: require('./scripts/helpers/apidocslink.js'),
-        majorapidocslink: require('./scripts/helpers/majorapidocslink.js')
+        majorapidocslink: require('./scripts/helpers/majorapidocslink.js'),
+        summary: require('./scripts/helpers/summary.js')
       }
     }))
     // Pipes the generated files into their respective subdirectory in the build
diff --git a/layouts/blog-index.hbs b/layouts/blog-index.hbs
index f284be248f364..927bc7874a6c8 100644
--- a/layouts/blog-index.hbs
+++ b/layouts/blog-index.hbs
@@ -13,7 +13,8 @@
                     {{#if title}}
                         <li>
                             <time datetime="{{ date }}">{{ strftime date "%d %b %y" }}</time>
-                            <a href="/{{../site.locale}}/{{ path }}/">{{ title }}</a>
+                            <a href="/{{../../site.locale}}/{{ path }}/">{{ title }}</a>
+                            {{{ summary contents }}}
                         </li>
                     {{/if}}
                 {{/each}}
diff --git a/scripts/helpers/summary.js b/scripts/helpers/summary.js
new file mode 100644
index 0000000000000..1e56ca654ddd8
--- /dev/null
+++ b/scripts/helpers/summary.js
@@ -0,0 +1,5 @@
+'use strict'
+
+module.exports = function (contents) {
+    return contents;
+};

From 9096e0516417183da739452ac32551cdde57c014 Mon Sep 17 00:00:00 2001
From: Elin <elinnet@gmail.com>
Date: Sat, 12 Sep 2015 14:34:26 +0100
Subject: [PATCH 2/5] broken summary of first para from blog

---
 scripts/helpers/summary.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/scripts/helpers/summary.js b/scripts/helpers/summary.js
index 1e56ca654ddd8..1b1a2e378c961 100644
--- a/scripts/helpers/summary.js
+++ b/scripts/helpers/summary.js
@@ -1,5 +1,16 @@
 'use strict'
 
+const cheerio = require('cheerio');
+
 module.exports = function (contents) {
-    return contents;
+    var $ = cheerio.load('<div>'+contents+'</div>');
+
+    var summary = $(':nth-child(1)').html();
+    console.log(contents);
+
+    console.log("hello");
+
+    return summary;
 };
+
+// module.exports('<h2 class="title">Hello world</h2><h2>asdfasd</h2>');

From d2c4f13e28371298356730837d107edbd5afb834 Mon Sep 17 00:00:00 2001
From: Francisco Baio Dias <xicombd@gmail.com>
Date: Sat, 12 Sep 2015 16:09:28 +0100
Subject: [PATCH 3/5] Looks like it's working

---
 layouts/blog-index.hbs                    |  4 +++-
 layouts/css/page-modules/_blog-index.styl |  3 +++
 scripts/helpers/summary.js                | 27 ++++++++++++++++-------
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/layouts/blog-index.hbs b/layouts/blog-index.hbs
index 927bc7874a6c8..7077a1d25c161 100644
--- a/layouts/blog-index.hbs
+++ b/layouts/blog-index.hbs
@@ -14,7 +14,9 @@
                         <li>
                             <time datetime="{{ date }}">{{ strftime date "%d %b %y" }}</time>
                             <a href="/{{../../site.locale}}/{{ path }}/">{{ title }}</a>
-                            {{{ summary contents }}}
+                            <div class="summary">
+                              {{{ summary contents ../../site.locale path }}}
+                            <div>
                         </li>
                     {{/if}}
                 {{/each}}
diff --git a/layouts/css/page-modules/_blog-index.styl b/layouts/css/page-modules/_blog-index.styl
index ab6972c2513e8..af1bae7d5893d 100644
--- a/layouts/css/page-modules/_blog-index.styl
+++ b/layouts/css/page-modules/_blog-index.styl
@@ -2,3 +2,6 @@
     time
         margin-right 1em
         color $light-gray
+
+    .summary
+      font-size: 75%
diff --git a/scripts/helpers/summary.js b/scripts/helpers/summary.js
index 1b1a2e378c961..db3326d9f5a0b 100644
--- a/scripts/helpers/summary.js
+++ b/scripts/helpers/summary.js
@@ -2,15 +2,26 @@
 
 const cheerio = require('cheerio');
 
-module.exports = function (contents) {
-    var $ = cheerio.load('<div>'+contents+'</div>');
+const SUMMARY_LENGHT = 400;
 
-    var summary = $(':nth-child(1)').html();
-    console.log(contents);
+module.exports = function (contents, locale, path) {
+    let $ = cheerio.load(contents);
 
-    console.log("hello");
+    let summary = '';
+    let child = 1;
 
-    return 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;
+        }
 
-// module.exports('<h2 class="title">Hello world</h2><h2>asdfasd</h2>');
+        summary += $.html(elem);
+    })
+
+    return `${summary}`;
+};

From afb299a89a320640b6a07e5fc8cbf9cc3645e775 Mon Sep 17 00:00:00 2001
From: Phillip Johnsen <johphi@gmail.com>
Date: Sun, 11 Oct 2015 16:00:31 +0200
Subject: [PATCH 4/5] Cheerio as dep and fixed style issues for blog
 reformatting

---
 package.json               |  1 +
 scripts/helpers/summary.js | 33 ++++++++++++++++-----------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 4a5566fddb96d..4dd384306c74d 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
   "dependencies": {
     "autoprefixer-stylus": "0.8.1",
     "changelog-url": "1.0.0",
+    "cheerio": "0.19.0",
     "chokidar": "1.2.0",
     "handlebars": "4.0.4",
     "html-to-text": "^1.5.0",
diff --git a/scripts/helpers/summary.js b/scripts/helpers/summary.js
index db3326d9f5a0b..80822e3bdbedb 100644
--- a/scripts/helpers/summary.js
+++ b/scripts/helpers/summary.js
@@ -1,27 +1,26 @@
 'use strict'
 
-const cheerio = require('cheerio');
+const cheerio = require('cheerio')
 
-const SUMMARY_LENGHT = 400;
+const SUMMARY_LENGHT = 400
 
 module.exports = function (contents, locale, path) {
-    let $ = cheerio.load(contents);
+  let $ = cheerio.load(contents)
 
-    let summary = '';
-    let child = 1;
+  let summary = ''
 
-    $('*').each((i, elem) => {
-        if (summary.length > SUMMARY_LENGHT) {
-            summary += `<p><a href='/${locale}/${path}/'>Read more...</a></p>`;
-            return false;
-        }
+  $('*').each((i, elem) => {
+    if (summary.length > SUMMARY_LENGHT) {
+      summary += `<p><a href='/${locale}/${path}/'>Read more...</a></p>`
+      return false
+    }
 
-        if (elem.parent) {
-            return;
-        }
+    if (elem.parent) {
+      return
+    }
 
-        summary += $.html(elem);
-    })
+    summary += $.html(elem)
+  })
 
-    return `${summary}`;
-};
+  return summary
+}

From 8399dcf0886383bbcf2f0cff6653f203d9e46357 Mon Sep 17 00:00:00 2001
From: Phillip Johnsen <johphi@gmail.com>
Date: Tue, 17 Nov 2015 21:41:27 +0100
Subject: [PATCH 5/5] 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.
---
 build.js                                  |  8 ++++
 layouts/blog-index.hbs                    | 31 +++++++++-----
 layouts/css/page-modules/_blog-index.styl |  6 ++-
 locale/en/blog/index.md                   |  1 +
 package.json                              |  1 +
 scripts/helpers/summary.js                | 49 ++++++++++++++++-------
 6 files changed, 72 insertions(+), 24 deletions(-)

diff --git a/build.js b/build.js
index 6457ced0077e3..a16c4d21f6abb 100755
--- 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/year',
+      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
index 7077a1d25c161..305e97b34007b 100644
--- a/layouts/blog-index.hbs
+++ b/layouts/blog-index.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{site.locale}}">
+<html lang="{{ site.locale }}">
 {{> html-head }}
 
 <body>
@@ -7,21 +7,34 @@
 
     <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
index af1bae7d5893d..3713b24edc19f 100644
--- 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
index b1a0378e971ad..24248de1867d0 100644
--- 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
index 4dd384306c74d..b611c0ab724c6 100644
--- 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": "2.0.0",
     "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
index 80822e3bdbedb..c1222e72107d8 100644
--- 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
 }