Introduce blog

Ported the infrastructure from jest.

Author: vjeux

blog/2016-03-24-test.md

@@ -0,0 +1,6 @@
+---
+title: Test
+author: vjeux
+---
+
+This is a test

website/.gitignore

@@ -1,4 +1,5 @@
 src/react-native/docs/**
+src/react-native/blog/**
 core/metadata.js
 *.log
 /build/

website/core/BlogPost.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlogPost
+ */
+
+'use strict';
+
+var Marked = require('Marked');
+var React = require('React');
+
+var BlogPost = React.createClass({
+  render: function() {
+    var post = this.props.post;
+    var content = this.props.content;
+
+    var match = post.path.match(/([0-9]+)\/([0-9]+)\/([0-9]+)/);
+    // Because JavaScript sucks at date handling :(
+    var year = match[1];
+    var month = [
+      'January', 'February', 'March', 'April', 'May', 'June', 'July',
+      'August', 'September', 'October', 'November', 'December'
+    ][parseInt(match[2], 10) - 1];
+    var day = parseInt(match[3], 10);
+
+    return (
+      <div>
+        <h1>{post.title}</h1>
+        <p className="meta">
+          {month} {day}, {year} by{' '}
+          <a href={post.authorURL} target="_blank">{post.author}</a>
+        </p>
+        <hr />
+        <Marked>{content}</Marked>
+      </div>
+    );
+  }
+});
+
+module.exports = BlogPost;

website/core/BlogSidebar.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlogSidebar
+ */
+
+'use strict';
+
+var MetadataBlog = require('MetadataBlog');
+var React = require('React');
+
+var BlogSidebar = React.createClass({
+  render: function() {
+    return (
+      <div className="nav-docs">
+        <div className="nav-docs-section">
+          <h3>Recent Posts</h3>
+          <ul>
+            {MetadataBlog.files.map(function(post) {
+              return (
+                <li key={post.path}>
+                  <a
+                    className={this.props.title === post.title ? 'active' : ''}
+                    href={'/react-native/blog/' + post.path}>
+                    {post.title}
+                  </a>
+                </li>
+              );
+            }.bind(this))}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = BlogSidebar;

website/core/HeaderLinks.js

@@ -18,6 +18,7 @@ var HeaderLinks = React.createClass({
     {section: 'support', href: 'support.html', text: 'Support'},
     {section: 'newsletter', href: 'http://reactnative.cc', text: 'Newsletter'},
     {section: 'showcase', href: 'showcase.html', text: 'Showcase'},
+    {section: 'blog', href: 'blog/', text: 'Blog'},
   ],
   linksExternal: [
     {section: 'github', href: 'https://github.com/facebook/react-native', text: 'GitHub'},

website/core/metadata-blog.js

@@ -0,0 +1,14 @@
+/**
+ * @generated
+ * @providesModule MetadataBlog
+ */
+module.exports = {
+  "files": [
+    {
+      "path": "2016/03/23/introducing-hot-reloading.html",
+      "content": "\nThis is a test\n",
+      "title": "Introducing Hot Reloading",
+      "author": "Martín Bigio"
+    }
+  ]
+};

website/layout/BlogPageLayout.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlogPageLayout
+ */
+
+'use strict';
+
+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/layout/BlogPostLayout.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BlogPostLayout
+ */
+
+'use strict';
+
+var BlogPost = require('BlogPost');
+var BlogSidebar = require('BlogSidebar');
+var Marked = require('Marked');
+var MetadataBlog = require('MetadataBlog');
+var React = require('React');
+var Site = require('Site');
+
+var BlogPostLayout = React.createClass({
+  render: function() {
+    return (
+      <Site
+        section="blog"
+        title={this.props.metadata.title}
+        description={this.props.children.trim().split('\n')[0]}>
+        <section className="content wrap documentationContent">
+          <BlogSidebar title={this.props.metadata.title} />
+          <div className="inner-content">
+            <BlogPost post={this.props.metadata} content={this.props.children} />
+          </div>
+        </section>
+      </Site>
+    );
+  }
+});
+
+module.exports = BlogPostLayout;