Support for guest posts

Author: leebyron

site/_core/BlogLayout.js

@@ -6,11 +6,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var path = require('path');
 var React = require('react');
 var Site = require('./Site');
-var Marked = require('./Marked');
 var BlogSidebar = require('./BlogSidebar');
+var BlogPost = require('./BlogPost');
 
 var BlogLayout = React.createClass({
   render: function() {
@@ -20,12 +19,7 @@ var BlogLayout = React.createClass({
       <Site section="blog" title={page.title}>
         <section className="content wrap documentationContent">
           <BlogSidebar site={site} page={page} />
-          <div className="inner-content">
-            <h1>{page.title}</h1>
-            <p>{new Date(page.date).toLocaleDateString()} by {page.byline}</p>
-            <hr />
-            <Marked>{page.content}</Marked>
-          </div>
+          <BlogPost post={page} isPermalink={true} />
         </section>
       </Site>
     );

site/_core/BlogPost.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+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 ? <hr /> : null}
+        {post.guestBio && <p className="guestBio">{
+          `This guest article contributed by ${post.byline}, ${post.guestBio}.`
+        }</p>}
+        <Marked>{post.content}</Marked>
+      </div>
+    );
+  }
+});
+
+module.exports = BlogPost;

site/blog/index.html.js

@@ -11,6 +11,7 @@ var React = require('react');
 var Site = require('../_core/Site');
 var Marked = require('../_core/Marked');
 var BlogSidebar = require('../_core/BlogSidebar');
+var BlogPost = require('../_core/BlogPost');
 
 var BlogIndex = React.createClass({
   render: function() {
@@ -24,12 +25,7 @@ var BlogIndex = React.createClass({
         <section className="content wrap documentationContent">
           <BlogSidebar site={site} />
           {posts.map(post =>
-            <div className="inner-content" key={post.permalink}>
-              <h1><a href={post.url}>{post.title}</a></h1>
-              <p>{new Date(post.date).toLocaleDateString()} by {post.byline}</p>
-              <hr />
-              <Marked url={post.url}>{post.content}</Marked>
-            </div>
+            <BlogPost post={post} isPermalink={false} key={post.permalink} />
           )}
         </section>
       </Site>

site/css/graphql.css

@@ -520,6 +520,14 @@ section.black content {
   padding-bottom: 18px;
 }
 
+.guestBio {
+  background: #f9f0f3;
+  border-top: solid 2px #e0c3c8;
+  font-style: italic;
+  margin: 1em -10px;
+  padding: 10px;
+}
+
 .blogContent {
   *zoom: 1;
   padding-top: 20px;