From a282be9a18b09e8f4245df94c117a6f1d30110c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ramos?= Date: Thu, 25 Aug 2016 11:02:27 -0700 Subject: [PATCH] Link to individual blog posts from post title Summary: Linkify the blog post title when the excerpt is displayed in the blog index. Update Facebook OpenGraph meta tags for individual blog posts to fix sharing previews. Closes https://github.com/facebook/react-native/pull/9590 Differential Revision: D3771630 Pulled By: bestander fbshipit-source-id: dc428ecc2d7939c143f000b8af9d4df9b512d0fc --- website/core/BlogPost.js | 5 ++++- website/core/BlogPostHeader.js | 8 +++++++- website/core/HeaderLinks.js | 2 +- website/core/Site.js | 8 ++++++-- website/layout/BlogPostLayout.js | 4 +++- website/src/react-native/css/react-native.css | 2 +- 6 files changed, 22 insertions(+), 7 deletions(-) diff --git a/website/core/BlogPost.js b/website/core/BlogPost.js index ebd5bb1bd..2df292687 100644 --- a/website/core/BlogPost.js +++ b/website/core/BlogPost.js @@ -46,7 +46,10 @@ var BlogPost = React.createClass({ return (
- +
{content}
diff --git a/website/core/BlogPostHeader.js b/website/core/BlogPostHeader.js index cc67c5361..fb83fc062 100644 --- a/website/core/BlogPostHeader.js +++ b/website/core/BlogPostHeader.js @@ -22,6 +22,12 @@ var BlogPostHeader = React.createClass({ hero = ; } + var title = post.title; + var href = "/react-native/blog/" + post.path; + if (this.props.excerpt) { + title = {post.title} + } + return (
{hero} @@ -33,7 +39,7 @@ var BlogPostHeader = React.createClass({ {' — '} {this.props.postedOnDate} -

{post.title}

+

{title}

); } diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js index 2cb72850b..93f594849 100644 --- a/website/core/HeaderLinks.js +++ b/website/core/HeaderLinks.js @@ -17,7 +17,7 @@ var HeaderLinks = React.createClass({ {section: 'docs', href: 'docs/getting-started.html', text: 'Docs', target: '.nav-docs'}, {section: 'support', href: 'support.html', text: 'Support'}, {section: 'showcase', href: 'showcase.html', text: 'Showcase'}, - {section: 'blog', href: 'blog/', text: 'Blog'}, + {section: 'blog', href: '/react-native/blog/', text: 'Blog'}, ], linksExternal: [ {section: 'github', href: 'https://github.com/facebook/react-native', text: 'GitHub'}, diff --git a/website/core/Site.js b/website/core/Site.js index 3a1b3962d..db6810da7 100644 --- a/website/core/Site.js +++ b/website/core/Site.js @@ -22,6 +22,10 @@ var Site = React.createClass({ var title = this.props.title ? this.props.title + ' – ' : ''; var currentYear = (new Date()).getFullYear(); title += 'React Native | A framework for building native apps using React'; + var description = this.props.description ? this.props.description : 'A framework for building native apps using React'; + var shareURL = 'https://facebook.github.io/react-native/'; + shareURL += this.props.path ? this.props.path : 'index.html'; + return ( @@ -31,9 +35,9 @@ var Site = React.createClass({ - + - + diff --git a/website/layout/BlogPostLayout.js b/website/layout/BlogPostLayout.js index bdafd2c7f..2744c777a 100644 --- a/website/layout/BlogPostLayout.js +++ b/website/layout/BlogPostLayout.js @@ -24,7 +24,9 @@ var BlogPostLayout = React.createClass({ + description={this.props.children.trim().split('\n')[0]} + path={'blog/' + this.props.metadata.path} + >
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 3588c7fff..33fa81050 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -1660,7 +1660,7 @@ input#algolia-doc-search:focus { } .entry-header h4 { - margin: 0; + margin: 0 0 10px; font-size: 12px; line-height: 16px; }