From f1ce6426fe2890d55e1d2e6b4a0fbf08b6429462 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A9ctor=20Ramos?= Date: Wed, 21 Sep 2016 16:40:49 -0700 Subject: [PATCH] Rename Support to Help, and re-style to better guide users to help themselves Summary: Duplicate of #9552 which failed to land internally. Closes https://github.com/facebook/react-native/pull/9796 Differential Revision: D3896927 Pulled By: hramos fbshipit-source-id: 98d60827b72a272331d4d4287be4726cca0c4422 --- docs/MoreResources.md | 2 +- website/core/HeaderLinks.js | 2 +- website/core/Site.js | 4 +- website/layout/BlogPostLayout.js | 2 +- website/src/react-native/css/react-native.css | 65 +++++++++ website/src/react-native/support.js | 130 +++++++++++++++--- 6 files changed, 179 insertions(+), 26 deletions(-) diff --git a/docs/MoreResources.md b/docs/MoreResources.md index 700e29f24..1b4286ed1 100644 --- a/docs/MoreResources.md +++ b/docs/MoreResources.md @@ -42,7 +42,7 @@ The [React Native Community](https://www.facebook.com/groups/react.native.commun [Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) is a Discord chat where a lot of React-related discussion happens, including React Native. Discord is just like Slack except it works better for open source projects with a zillion contributors. Check out the #react-native channel. -The [React Twitter account](https://twitter.com/reactjs) covers both React and React Native. Following that account is a pretty good way to find out what's happening in the world of React. +The [React Twitter account](https://twitter.com/reactjs) covers both React and React Native. Follow the React Native [Twitter account](https://twitter.com/reactnative) and [blog](/react-native/blog/) to find out what's happening in the world of React Native. There are a lot of [React Native Meetups](http://www.meetup.com/topics/react-native/) that happen around the world. Often there is React Native content in React meetups as well. diff --git a/website/core/HeaderLinks.js b/website/core/HeaderLinks.js index cbe31f822..2826d1d3b 100644 --- a/website/core/HeaderLinks.js +++ b/website/core/HeaderLinks.js @@ -15,7 +15,7 @@ var AlgoliaDocSearch = require('AlgoliaDocSearch'); var HeaderLinks = React.createClass({ linksInternal: [ {section: 'docs', href: 'docs/getting-started.html', text: 'Docs', target: '.nav-docs'}, - {section: 'support', href: '/react-native/support.html', text: 'Support'}, + {section: 'support', href: '/react-native/support.html', text: 'Help'}, {section: 'showcase', href: '/react-native/showcase.html', text: 'Showcase'}, {section: 'blog', href: '/react-native/blog/', text: 'Blog'}, ], diff --git a/website/core/Site.js b/website/core/Site.js index 3b3bd7333..e98d4e835 100644 --- a/website/core/Site.js +++ b/website/core/Site.js @@ -23,8 +23,6 @@ var Site = React.createClass({ var title = this.props.title ? this.props.title : 'React Native | A framework for building native apps using React'; - var twitterCardType = this.props.image? 'summary_large_image' : 'summary'; - var metaTags = [ { charSet: "utf-8" }, { @@ -66,7 +64,7 @@ var Site = React.createClass({ }, { name: "twitter:card", - content: twitterCardType, + content: "summary_large_image", }, ]; diff --git a/website/layout/BlogPostLayout.js b/website/layout/BlogPostLayout.js index 2267b5387..fbd95a7dd 100644 --- a/website/layout/BlogPostLayout.js +++ b/website/layout/BlogPostLayout.js @@ -28,7 +28,7 @@ var BlogPostLayout = React.createClass({ path={'blog/' + this.props.metadata.path} author={this.props.metadata.author} authorTwitter={this.props.metadata.authorTwitter} - image={this.props.metadata.hero} + image={this.props.metadata.hero ? 'http://facebook.github.io' + this.props.metadata.hero : 'http://facebook.github.io/react-native/img/opengraph.png' } >
diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 2e14574a2..b9cdfbce1 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -912,6 +912,10 @@ figure { width: 800px; } +.helpSection .inner-content { + width: 800px; +} + .nosidebar .inner-content { float: none; margin: 0 auto; @@ -1507,6 +1511,10 @@ div[data-twttr-id] iframe { .showcaseSection .inner-content { width: 100%; } + + .helpSection .inner-content { + width: 100%; + } } /** Algolia Doc Search **/ @@ -1816,3 +1824,60 @@ article li { height: 345px; } } + +/** Help **/ +.helpSection h2 { + font-size: 24px; +} + +.help-row { + margin: 50px 0; +} + +.help-row:after { + content: ""; + display: table; + clear: both; +} + +.help-col { + float: left; +} + +.help-col p { + font-size: 16px; +} + +.help-col h3 { + color: #2d2d2d; + font-size: 18px; + line-height: 28px; + font-weight: normal; +} + +@media (min-width: 600px) { + .help-col { + float: left; + margin-left: 40px; + width: 240px; + } + + .help-col:first-child { + margin-left: 0; + } +} + +.help-list { + padding: 0; + list-style: none; + margin: 1.25em 0 1em 0; +} + +.entry ul, li { + margin: 0; +} + +.help-list .help-list-entry { + padding: 16px 0; + border-top: 1px solid #f1eff0; +} diff --git a/website/src/react-native/support.js b/website/src/react-native/support.js index 457beb4ce..b27d6207d 100644 --- a/website/src/react-native/support.js +++ b/website/src/react-native/support.js @@ -22,37 +22,127 @@ var support = React.createClass({ }, render: function() { return ( - + -
-
+
+

Need help?

-

At Facebook, there are dozens of engineers who work on React Native full-time. But there are far more people in the community who make key contributions and fix things. So if you need help with your React Native app, the right place to go depends on the type of help that you need.

-

Technical Questions

-

If you're wondering how to solve a specific technical problem in React Native, the best place to ask is on Stack Overflow. You can check existing questions tagged with react-native, ask your own, or just Google it and click on the Stack Overflow answer that will inevitably come up.

+
+
-

Random Questions

-

If you have an open-ended question or you just want to get a general sense of what React Native folks talk about, check out the React Native Community Facebook group. It has thousands of developers and almost all posts get a response.

+

Browse the docs

+

+ Find what you're looking for in our detailed documentation and guides. +

-

Urgent Questions

-

If you need an answer right away, check out #react-native on the Reactiflux chat. There are usually a number of React Native experts there who can help out or point you to somewhere you might want to look.

+ +

Explore samples

+

+ Take apart these fully built applications, and get some inspiration for your own. +

-

Feature Requests

-

React Native uses Product Pains for feature requests. It has a voting system to surface which issues are most important to the community. So if you have a feature request, add it or upvote a similar one.

+ -