mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 01:25:39 +00:00
777a9c0a0e
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
64 lines
1.8 KiB
JavaScript
64 lines
1.8 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 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 (
|
|
<div>
|
|
<BlogPost post={post} content={post.content} excerpt={true} />
|
|
<hr />
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
<div className="docs-prevnext">
|
|
{page > 0 &&
|
|
<a className="docs-prev" href={this.getPageURL(page - 1)}>← Prev</a>}
|
|
{MetadataBlog.files.length > (page + 1) * perPage &&
|
|
<a className="docs-next" href={this.getPageURL(page + 1)}>Next →</a>}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</Site>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = BlogPageLayout;
|