mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 01:25:39 +00:00
e22abd91bf
Summary: Similar to the Hero image functionality. If a video URL is present in the post metadata, it will be displayed instead of a Hero image. This will be useful when highlighting videos in blog posts. Renamed ReadMoreLink into a more generic ExceptLink which will display "Watch video" when the blog post category is "videos". Currently there is no way of listing blog posts by categories, but it may be useful to do so later once we have a larger catalog of content. Closes https://github.com/facebook/react-native/pull/9794 Differential Revision: D3828862 Pulled By: mkonicek fbshipit-source-id: 1a88aab5edcdf7c84bb679263d6b97d52cf201a2
58 lines
1.5 KiB
JavaScript
58 lines
1.5 KiB
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} width="650"/>;
|
|
}
|
|
|
|
var title = post.title;
|
|
var href = "/react-native/blog/" + post.path;
|
|
if (this.props.excerpt) {
|
|
title = <a href={href}>{post.title}</a>;
|
|
hero = <a href={href}>{hero}</a>;
|
|
}
|
|
|
|
if (post.youtube_video) {
|
|
hero = <div className="video-container youtube">
|
|
<iframe id="ytplayer" type="text/html" width="650" height="345"
|
|
src={post.youtube_video}
|
|
frameBorder="0"></iframe>
|
|
</div>;
|
|
}
|
|
|
|
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">{title}</h1>
|
|
</header>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = BlogPostHeader;
|