Use pure components for blog, fix bug in sidebar

Author: leebyron

site/_core/BlogLayout.js

@@ -11,21 +11,12 @@ var Site = require('./Site');
 var BlogSidebar = require('./BlogSidebar');
 var BlogPost = require('./BlogPost');
 
-var BlogLayout = React.createClass({
-  render: function() {
-    var page = this.props.page;
-    var site = this.props.site;
-    return (
-      <Site section="blog" title={page.title} page={page}>
-        <section>
-          <div className="documentationContent">
-            <BlogPost post={page} isPermalink={true} />
-            <BlogSidebar site={site} page={page} />
-          </div>
-        </section>
-      </Site>
-    );
-  }
-});
-
-module.exports = BlogLayout;
+module.exports = ({ page, site }) =>
+  <Site section="blog" title={page.title} page={page}>
+    <section>
+      <div className="documentationContent">
+        <BlogPost post={page} isPermalink={true} />
+        <BlogSidebar site={site} page={page} />
+      </div>
+    </section>
+  </Site>

site/_core/BlogPost.js

@@ -9,22 +9,13 @@
 var React = require('react');
 var Marked = require('./Marked');
 
-var BlogPost = React.createClass({
-  render: function() {
-    var post = this.props.post;
-    var isPermalink = this.props.isPermalink;
-    return (
-      <div className="inner-content">
-        <h1>{isPermalink ? post.title : <a href={post.url}>{post.title}</a>}</h1>
-        <p>{new Date(post.date).toLocaleDateString()} by {post.byline}</p>
-        {post.guestBio ? null : <hr />}
-        {post.guestBio && <p className="guestBio">{
-          `This guest article contributed by ${post.byline}, ${post.guestBio}.`
-        }</p>}
-        <Marked>{post.content}</Marked>
-      </div>
-    );
-  }
-});
-
-module.exports = BlogPost;
+module.exports = ({ post, isPermalink }) =>
+  <div className="inner-content">
+    <h1>{isPermalink ? post.title : <a href={post.url}>{post.title}</a>}</h1>
+    <p>{new Date(post.date).toLocaleDateString()} by {post.byline}</p>
+    {post.guestBio ? null : <hr />}
+    {post.guestBio && <p className="guestBio">{
+      `This guest article contributed by ${post.byline}, ${post.guestBio}.`
+    }</p>}
+    <Marked>{post.content}</Marked>
+  </div>

site/_core/BlogSidebar.js

@@ -9,33 +9,23 @@
 var path = require('path');
 var React = require('react');
 
-var BlogSidebar = React.createClass({
-  render: function() {
-    var posts = this.props.site.files.blog
-      .filter(file => !file.draft && path.extname(file.relPath) === '.md')
-      .sort((a, b) => a.date < b.date);
-    return (
-      <div className="nav-docs">
-        <div className="nav-docs-section">
-          <h3>Subscribe</h3>
-          <a rel="home" type="application/rss+xml" href="/blog/rss.xml">RSS</a>
-        </div>
-        <div className="nav-docs-section">
-          <h3>Recent Posts</h3>
-          <ul>
-            {posts.map(post =>
-              <li key={post.permalink}>
-                {post === this.props.file ?
-                  post.title :
-                  <a href={post.url}>{post.title}</a>
-                }
-              </li>
-            )}
-          </ul>
-        </div>
-      </div>
-    );
-  }
-});
-
-module.exports = BlogSidebar;
+module.exports = ({ site, page }) =>
+  <div className="nav-docs">
+    <div className="nav-docs-section">
+      <h3>Subscribe</h3>
+      <a rel="home" type="application/rss+xml" href="/blog/rss.xml">RSS</a>
+    </div>
+    <div className="nav-docs-section">
+      <h3>Recent Posts</h3>
+      <ul>
+        {site.files.blog
+          .filter(file => !file.draft && path.extname(file.relPath) === '.md')
+          .sort((a, b) => a.date < b.date)
+          .map(post =>
+            <li key={post.permalink}>
+              {post === page ? post.title : <a href={post.url}>{post.title}</a>}
+            </li>
+        )}
+      </ul>
+    </div>
+  </div>