From 777a9c0a0e396924283bb7b9675937c4bb4a9368 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ramos?= Date: Tue, 23 Aug 2016 11:59:26 -0700 Subject: [PATCH] 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 --- blog/2016-03-24-introducing-hot-reloading.md | 1 + .../2016-07-06-toward-better-documentation.md | 1 + ...08-12-react-native-meetup-san-francisco.md | 4 +- website/core/BlogPost.js | 32 +++-- website/core/BlogPostFooter.js | 48 ++++++++ website/core/BlogPostHeader.js | 42 +++++++ website/core/ReadMoreLink.js | 28 +++++ website/core/Site.js | 3 +- website/layout/BlogPageLayout.js | 7 +- website/layout/BlogPostLayout.js | 4 +- website/src/react-native/css/react-native.css | 115 +++++++++++++++++- 11 files changed, 269 insertions(+), 16 deletions(-) create mode 100644 website/core/BlogPostFooter.js create mode 100644 website/core/BlogPostHeader.js create mode 100644 website/core/ReadMoreLink.js diff --git a/blog/2016-03-24-introducing-hot-reloading.md b/blog/2016-03-24-introducing-hot-reloading.md index f9121d48f6aa31..e230a603665424 100644 --- a/blog/2016-03-24-introducing-hot-reloading.md +++ b/blog/2016-03-24-introducing-hot-reloading.md @@ -2,6 +2,7 @@ title: Introducing Hot Reloading author: Martín Bigio authorURL: https://twitter.com/martinbigio +authorTwitter: martinbigio --- 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. diff --git a/blog/2016-07-06-toward-better-documentation.md b/blog/2016-07-06-toward-better-documentation.md index 80dc604c5ef794..08fae9fddaa24a 100644 --- a/blog/2016-07-06-toward-better-documentation.md +++ b/blog/2016-07-06-toward-better-documentation.md @@ -2,6 +2,7 @@ title: Toward Better Documentation author: Kevin Lacker authorURL: https://twitter.com/lacker +authorTwitter: lacker --- 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. diff --git a/blog/2016-08-12-react-native-meetup-san-francisco.md b/blog/2016-08-12-react-native-meetup-san-francisco.md index 7a4a989e6b78ca..40d9f639fe1124 100644 --- a/blog/2016-08-12-react-native-meetup-san-francisco.md +++ b/blog/2016-08-12-react-native-meetup-san-francisco.md @@ -2,10 +2,10 @@ title: San Francisco Meetup Recap author: Héctor Ramos authorURL: https://twitter.com/hectorramos +authorTwitter: hectorramos +hero: /react-native/blog/img/rnmsf-august-2016-hero.jpg --- -![](/react-native/blog/img/rnmsf-august-2016-hero.jpg) - 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. I was particularly interested in learning more about how React and React Native are used at companies like Zynga, Netflix, and Airbnb. The agenda for the night would be as follows: diff --git a/website/core/BlogPost.js b/website/core/BlogPost.js index c158285bbedc9e..ebd5bb1bd7b0c2 100644 --- a/website/core/BlogPost.js +++ b/website/core/BlogPost.js @@ -13,6 +13,9 @@ var Marked = require('Marked'); var React = require('React'); +var BlogPostHeader = require('BlogPostHeader'); +var BlogPostFooter = require('BlogPostFooter'); +var ReadMoreLink = require('ReadMoreLink'); var BlogPost = React.createClass({ render: function() { @@ -28,16 +31,27 @@ var BlogPost = React.createClass({ ][parseInt(match[2], 10) - 1]; var day = parseInt(match[3], 10); + var postedOnDate = month + ' ' + day + ', ' + year; + + var footer = ; + + if (this.props.excerpt) { + var excerptLength = 50; + var words = content.trim().split(' '); + if (words.length > excerptLength) { + content = words.slice(0,excerptLength).join(' ') + '...'; + footer = ; + } + } + return ( -
-

{post.title}

-

- {month} {day}, {year} by{' '} - {post.author} -

-
- {content} -
+
+ +
+ {content} +
+ {footer} +
); } }); diff --git a/website/core/BlogPostFooter.js b/website/core/BlogPostFooter.js new file mode 100644 index 00000000000000..c35c85ed74a1ac --- /dev/null +++ b/website/core/BlogPostFooter.js @@ -0,0 +1,48 @@ +/** + * 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 BlogPostFooter + */ + +'use strict'; + +var React = require('React'); + +var BlogPostFooter = React.createClass({ + render: function() { + var post = this.props.post; + + return ( +
+ + +
+ ); + } +}); + +module.exports = BlogPostFooter; diff --git a/website/core/BlogPostHeader.js b/website/core/BlogPostHeader.js new file mode 100644 index 00000000000000..cc67c5361a606a --- /dev/null +++ b/website/core/BlogPostHeader.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 BlogPostHeader + */ + +'use strict'; + +var React = require('React'); + +var BlogPostHeader = React.createClass({ + render: function() { + var post = this.props.post; + + var hero; + if (post.hero) { + hero = ; + } + + return ( +
+ {hero} +

+ + {post.author} + + {' — '} + {this.props.postedOnDate} +

+

{post.title}

+
+ ); + } +}); + +module.exports = BlogPostHeader; diff --git a/website/core/ReadMoreLink.js b/website/core/ReadMoreLink.js new file mode 100644 index 00000000000000..27a372789a287c --- /dev/null +++ b/website/core/ReadMoreLink.js @@ -0,0 +1,28 @@ +/** + * 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 ReadMoreLink + */ + +'use strict'; + +var React = require('React'); + +var ReadMoreLink = React.createClass({ + render: function() { + return ( + + ); + } +}); + +module.exports = ReadMoreLink; diff --git a/website/core/Site.js b/website/core/Site.js index cb2e7e7b701a62..3a1b3962d5218b 100644 --- a/website/core/Site.js +++ b/website/core/Site.js @@ -46,7 +46,8 @@ var Site = React.createClass({ - +