Add support for video embeds in blog posts.

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

blog/2016-03-24-introducing-hot-reloading.md

@@ -5,6 +5,7 @@ authorTitle: Software Engineer at Instagram
 authorURL: https://twitter.com/martinbigio
 authorImage: https://avatars3.githubusercontent.com/u/535661?v=3&s=128
 authorTwitter: martinbigio
+category: announcements
 ---
 
 React Native's goal is to give you the best possible developer experience. A big part of it is the time it takes between you save a file and be able to see the changes. Our goal is to get this feedback loop to be under 1 second, even as your app grows.

blog/2016-07-06-toward-better-documentation.md

@@ -5,6 +5,7 @@ authorTitle: Engineering Manager at Facebook
 authorURL: https://twitter.com/lacker
 authorImage: http://www.gravatar.com/avatar/9b790592be15d4f55a5ed7abb5103304?s=128
 authorTwitter: lacker
+category: announcements
 ---
 
 Part of having a great developer experience is having great documentation. A lot goes into creating good docs - the ideal documentation is concise, helpful, accurate, complete, and delightful. Recently we've been working hard to make the docs better based on your feedback, and we wanted to share some of the improvements we've made.

blog/2016-08-12-react-native-meetup-san-francisco.md

@@ -6,6 +6,7 @@ authorURL: https://twitter.com/hectorramos
 authorImage: https://s.gravatar.com/avatar/f2223874e66e884c99087e452501f2da?s=128
 authorTwitter: hectorramos
 hero: /react-native/blog/img/rnmsf-august-2016-hero.jpg
+category: events
 ---
 
 Last week I had the opportunity to attend the [React Native Meetup](http://www.meetup.com/React-Native-San-Francisco/photos/27168649/#452793854) at Zynga’s San Francisco office. With around 200 people in attendance, it served as a great place to meet other developers near me that are also interested in React Native.

blog/2016-08-19-right-to-left-support-for-react-native-apps.md

@@ -4,6 +4,7 @@ author: Mengjue (Mandy) Wang
 authorTitle: Software Engineer Intern at Facebook
 authorURL: https://github.com/MengjueW
 authorImage: https://avatars0.githubusercontent.com/u/13987140?v=3&s=128
+category: engineering
 ---
 After launching an app to the app stores, internationalization is the next step to further your audience reach. Over 20 countries and numerous people around the world use Right-to-Left (RTL) languages. Thus, making your app support RTL for them is necessary.
 

website/core/BlogPost.js

@@ -15,7 +15,7 @@ var Marked = require('Marked');
 var React = require('React');
 var BlogPostHeader = require('BlogPostHeader');
 var BlogPostFooter = require('BlogPostFooter');
-var ReadMoreLink = require('ReadMoreLink');
+var ExcerptLink = require('ExcerptLink');
 
 var BlogPost = React.createClass({
   render: function() {
@@ -37,7 +37,7 @@ var BlogPost = React.createClass({
 
     if (this.props.excerpt) {
       content = content.trim().split('\n')[0];
-      footer = <ReadMoreLink href={'/react-native/blog/' + post.path} />;
+      footer = <ExcerptLink href={'/react-native/blog/' + post.path} category={post.category} />;
     }
 
     return (

website/core/BlogPostHeader.js

@@ -29,6 +29,14 @@ var BlogPostHeader = React.createClass({
       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}

website/core/ExcerptLink.js

@@ -6,23 +6,29 @@
  * 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 ReadMoreLink
+ * @providesModule ExcerptLink
  */
 
 'use strict';
 
 var React = require('React');
 
-var ReadMoreLink = React.createClass({
+var ExcerptLink = React.createClass({
   render: function() {
+    var cta = "Read more";
+
+    if (this.props.category === "videos") {
+      cta = "Watch video";
+    }
+
     return (
       <footer className="entry-readmore">
         <a href={this.props.href} className="btn">
-          Read more
+          {cta}
         </a>
       </footer>
     );
   }
 });
 
-module.exports = ReadMoreLink;
+module.exports = ExcerptLink;

website/src/react-native/css/react-native.css

@@ -1793,3 +1793,22 @@ article li {
 .btn:hover {
   text-decoration: none !important;
 }
+
+.video-container {
+  border-radius: 4px;
+  background-clip: padding-box;
+  margin: 0 0 18px;
+  height: 180px;
+  width: 100%;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+  height: 0;
+  overflow: hidden;
+}
+
+@media (min-width: 760px) {
+  .video-container {
+    height: 345px;
+  }
+}