react-native/website/core/BlogPostHeader.js
Héctor Ramos 777a9c0a0e Update Blog Layout
Summary:
Updated the blog's styling to make it more readable.

* BlogPageLayout (blog index) - Only excerpts from each article are now shown, as opposed to the entire article.
* BlogPost - Broken up into headers, footers. Reorder header so that the blog post title is closer to the content. Adds support for hero images (visible from the blog index). Adds Facebook, Twitter social share buttons. List items are properly spaced now.

Blog index:
![screencapture-localhost-8079-react-native-blog-1471905976431](https://cloud.githubusercontent.com/assets/165856/17874405/4ee4fc22-6880-11e6-8344-2ed823f6000e.png)

Single blog post:
![screencapture-localhost-8079-react-native-blog-2016-08-12-react-native-meetup-san-francisco-html-1471905997923](https://cloud.githubusercontent.com/assets/165856/17874407/52af9e7a-6880-11e6-99f0-91f90331aced.png)
Closes https://github.com/facebook/react-native/pull/9532

Differential Revision: D3758524

Pulled By: bestander

fbshipit-source-id: 6385a3e98a3a44343c3b1d3105a32023b748c2c6
2016-08-23 12:13:47 -07:00

43 lines
1021 B
JavaScript

/**
* 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 BlogPostHeader
*/
'use strict';
var React = require('React');
var BlogPostHeader = React.createClass({
render: function() {
var post = this.props.post;
var hero;
if (post.hero) {
hero = <img src={post.hero} />;
}
return (
<header className="entry-header">
{hero}
<h4 className="entry-authordate">
<a href={post.authorURL} target="_blank"
className="author">
{post.author}
</a>
{' — '}
<span className="date">{this.props.postedOnDate}</span>
</h4>
<h1 className="entry-title">{post.title}</h1>
</header>
);
}
});
module.exports = BlogPostHeader;