Add pagination to blog

Summary:It adds a list of article with pagination. I tested with 6 and 7 articles with perPage = 2 to make sure that there weren't any off by one errors.
Closes jestjs#792

Differential Revision: D3043450

fb-gh-sync-id: df1bf2f347cd52ddc533ac2fe5690ce7a38c5c67
shipit-source-id: df1bf2f347cd52ddc533ac2fe5690ce7a38c5c67

.gitignore

@@ -10,4 +10,4 @@ npm-debug.log
 build
 website/core/metadata*.js
 website/src/jest/docs
-website/src/jest/blog/2*
+website/src/jest/blog

website/core/HeaderLinks.js

@@ -11,9 +11,9 @@ var React = require('React');
 var HeaderLinks = React.createClass({
   linksInternal: [
     {section: 'docs', href: '/jest/docs/tutorial.html#content', text: 'docs'},
-    {section: 'support', href: '/jest/support.html', text: 'support'},
-    MetadataBlog.files.length > 0 && {section: 'blog', href: '/jest/blog/' + MetadataBlog.files[0].path, text: 'blog'},
-  ].filter(function(e) { return e; }),
+    {section: 'support', href: '/jest/support.html#content', text: 'support'},
+    {section: 'blog', href: '/jest/blog/#content', text: 'blog'},
+  ],
   linksExternal: [
     {section: 'github', href: 'https://github.com/facebook/jest', text: 'GitHub'},
   ],

website/layout/BlogPageLayout.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule BlogPageLayout
+ * @jsx React.DOM
+ */
+
+var BlogPost = require('BlogPost');
+var BlogSidebar = require('BlogSidebar');
+var MetadataBlog = require('MetadataBlog');
+var React = require('React');
+var Site = require('Site');
+
+var BlogPageLayout = React.createClass({
+  getPageURL: function(page) {
+    var url = '/jest/blog/';
+    if (page > 0) {
+      url += 'page' + (page + 1) + '/';
+    }
+    return url + '#content';
+  },
+
+  render: function() {
+    var perPage = this.props.metadata.perPage;
+    var page = this.props.metadata.page;
+    return (
+      <Site
+        section="blog"
+        title="Blog">
+        <section className="content wrap documentationContent">
+          <BlogSidebar />
+          <div className="inner-content">
+            {MetadataBlog.files
+              .slice(page * perPage, (page + 1) * perPage)
+              .map((post) => {
+                return <BlogPost post={post} content={post.content} />
+              })
+            }
+            <div className="docs-prevnext">
+              {page > 0 &&
+                <a className="docs-prev" href={this.getPageURL(page - 1)}>&larr; Prev</a>}
+              {MetadataBlog.files.length > (page + 1) * perPage &&
+                <a className="docs-next" href={this.getPageURL(page + 1)}>Next &rarr;</a>}
+            </div>
+          </div>
+        </section>
+      </Site>
+    );
+  }
+});
+
+module.exports = BlogPageLayout;

website/server/convert.js

@@ -60,24 +60,26 @@ function extractMetadata(content) {
   return {metadata: metadata, rawContent: both.content};
 }
 
-function buildFile(layout, rawContent, metadata) {
-  return (
-    '/**\n' +
-    ' * @generated\n' +
-    ' */\n' +
-    'var React = require("React");\n' +
-    'var Layout = require("' + layout + '");\n' +
-    'var content = ' + backtickify(rawContent) + '\n' +
-    'var Post = React.createClass({\n' +
-    '  statics: {\n' +
-    '    content: content\n' +
-    '  },\n' +
-    '  render: function() {\n' +
-    '    return <Layout metadata={' + JSON.stringify(metadata) + '}>{content}</Layout>;\n' +
-    '  }\n' +
-    '});\n' +
-    'module.exports = Post;\n'
-  );
+function buildFile(layout, metadata, rawContent) {
+  return [
+    '/**',
+    ' * @generated',
+    ' */',
+    'var React = require("React");',
+    'var Layout = require("' + layout + '");',
+    rawContent && 'var content = ' + backtickify(rawContent) + ';',
+    'var Post = React.createClass({',
+    rawContent && '  statics: { content: content },',
+    '  render: function() {',
+    '    return (',
+    '      <Layout metadata={' + JSON.stringify(metadata) + '}>',
+    rawContent && '        {content}',
+    '      </Layout>',
+    '    );',
+    '  }',
+    '});',
+    'module.exports = Post;'
+  ].filter(e => e).join('\n');
 }
 
 function writeFileAndCreateFolder(file, content) {
@@ -125,7 +127,7 @@ function execute() {
 
         writeFileAndCreateFolder(
           'src/jest/' + metadata.permalink.replace(/\.html$/, '.js'),
-          buildFile(layout, rawContent, metadata)
+          buildFile(layout, metadata, rawContent)
         );
       }
 
@@ -164,17 +166,25 @@ function execute() {
         .replace(/\-md$/, '.html');
 
       var res = extractMetadata(fs.readFileSync(file, {encoding: 'utf8'}));
-      var metadata = Object.assign({path: filePath}, res.metadata);
       var rawContent = res.rawContent;
+      var metadata = Object.assign({path: filePath, content: rawContent}, res.metadata);
 
       metadatas.files.push(metadata);
 
       writeFileAndCreateFolder(
         'src/jest/blog/' + filePath.replace(/\.html$/, '.js'),
-        buildFile('BlogPostLayout', rawContent, metadata)
+        buildFile('BlogPostLayout', metadata, rawContent)
       );
     });
 
+    var perPage = 5;
+    for (var page = 0; page < Math.ceil(metadatas.files.length / perPage); ++page) {
+      writeFileAndCreateFolder(
+        'src/jest/blog' + (page > 0 ? '/page' + (page + 1) : '') + '/index.js',
+        buildFile('BlogPageLayout', { page: page, perPage: perPage })
+      );
+    }
+
     fs.writeFileSync(
       'core/metadata-blog.js',
       '/**\n' +

website/src/jest/css/jest.css

@@ -921,12 +921,14 @@ div[data-twttr-id] iframe {
 }
 
 /** Blog Images **/
+
 img[alt="perf-basic-scheduling"], img[alt="perf-improved-scheduling"] {
   border: 2px solid #f2f2f2;
   border-radius: 4px;
   display: block;
   margin: 12px auto;
   width: 530px;
+  max-width: 100%;
 }
 
 /** Algolia Doc Search **/