Skip to content

Commit 75eb550

Browse files
hramosfacebook-github-bot
hramos
authored and
facebook-github-bot
committed
Increase text size, rename Tutorial, update nav...
Summary: Several things here. See commits. Closes #14757 Differential Revision: D5332034 Pulled By: hramos fbshipit-source-id: 6ff9e33c0bc9d2ea3dd5b1a4752621ce7e83f9bb
1 parent 7ee051d commit 75eb550

File tree

9 files changed

+57
-37
lines changed

9 files changed

+57
-37
lines changed

‎docs/Tutorial.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
id: tutorial
3-
title: Tutorial
3+
title: Learn the Basics
44
layout: docs
55
category: The Basics
66
permalink: docs/tutorial.html

‎website/core/HeaderLinks.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ var HeaderLinks = React.createClass({
1717
linksInternal: [
1818
{section: 'docs', href: 'docs/getting-started.html', text: 'Docs', target: '.nav-docs'},
1919
{section: 'support', href: '/react-native/support.html', text: 'Help'},
20-
{section: 'showcase', href: '/react-native/showcase.html', text: 'Showcase'},
2120
{section: 'blog', href: '/react-native/blog/', text: 'Blog'},
2221
],
2322
linksExternal: [

‎website/core/Site.js

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -204,11 +204,11 @@ var Site = React.createClass({
204204
<a href="docs/getting-started.html">
205205
Getting Started
206206
</a>
207-
<a href="docs/tutorial.html">Tutorial</a>
207+
<a href="docs/tutorial.html">Learn the Basics</a>
208208
<a
209-
href="docs/integration-with-existing-apps.html"
209+
href="docs/components-and-apis.html"
210210
>
211-
Integration With Existing Apps
211+
Components and APIs
212212
</a>
213213
<a href="docs/more-resources.html">
214214
More Resources
@@ -221,13 +221,13 @@ var Site = React.createClass({
221221
</a>
222222
</h5>
223223
<a href="/react-native/showcase.html">
224-
Showcase
224+
Who's using React Native?
225225
</a>
226226
<a
227227
href="http://www.meetup.com/topics/react-native/"
228228
target="_blank"
229229
>
230-
Upcoming Events
230+
Meetups
231231
</a>
232232
<a
233233
href="https://www.facebook.com/groups/react.native.community"
@@ -276,17 +276,30 @@ var Site = React.createClass({
276276
<h5>More</h5>
277277
<a href="/react-native/blog">Blog</a>
278278
<a
279-
href="https://github.com/facebook/react-native"
279+
href="http://facebook.github.io/react/"
280280
target="_blank"
281281
>
282-
GitHub
282+
React
283283
</a>
284284
<a
285-
href="http://facebook.github.io/react/"
285+
href="https://github.com/facebook/react-native"
286286
target="_blank"
287287
>
288-
React
288+
GitHub
289289
</a>
290+
<div className="githubButton">
291+
<a
292+
className="github-button"
293+
href="https://github.com/facebook/react-native"
294+
data-icon="octicon-star"
295+
data-count-href="/facebook/react-native/stargazers"
296+
data-count-api="/repos/facebook/react-native#stargazers_count"
297+
data-count-aria-label="# stargazers on GitHub"
298+
aria-label="Star facebook/react-native on GitHub"
299+
>
300+
Star
301+
</a>
302+
</div>
290303
</div>
291304
</section>
292305
<section className="newsletter">
@@ -405,6 +418,11 @@ var Site = React.createClass({
405418
type="text/javascript"
406419
src="https://snack.expo.io/embed.js"
407420
/>
421+
<script
422+
async
423+
defer
424+
src="https://buttons.github.io/buttons.js"
425+
/>
408426
</body>
409427
</html>
410428
);

‎website/layout/BlogPostLayout.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ var BlogPostLayout = React.createClass({
3131
authorTwitter={this.props.metadata.authorTwitter}
3232
image={this.props.metadata.hero ? 'https://facebook.github.io' + this.props.metadata.hero : 'https://facebook.github.io/react-native/img/opengraph.png' }
3333
>
34-
<Hero title="React Native Blog" subtitle="Stay up-to-date with the latest React Native news and events." />
3534
<section className="content wrap documentationContent">
3635
<BlogPost
3736
post={this.props.metadata}

‎website/layout/DocsLayout.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ var DocsLayout = React.createClass({
4848
{(metadata.banner === 'ejected') ? <EjectBanner/> : null}
4949
<Marked>{content}</Marked>
5050
<div className="docs-prevnext">
51-
{metadata.previous && <a className="docs-prev" href={'docs/' + metadata.previous + '.html#content'}>&larr; Prev</a>}
52-
{metadata.next && <a className="docs-next" href={'docs/' + metadata.next + '.html#content'}>Next &rarr;</a>}
51+
{metadata.previous && <a className="docs-prev btn" href={'docs/' + metadata.previous + '.html#content'}>&larr; Previous</a>}
52+
{metadata.next && <a className="docs-next btn" href={'docs/' + metadata.next + '.html#content'}>Continue Reading &rarr;</a>}
5353
</div>
5454
<Footer path={'docs/' + metadata.filename} />
5555
</div>

‎website/showcase.json

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"icon": "http://is5.mzstatic.com/image/thumb/Purple111/v4/5f/e9/00/5fe90072-c9ce-87c3-bdfe-8611f9325f0e/source/175x175bb.jpg",
7474
"infoLink": "https://eng.uber.com/ubereats-react-native/",
7575
"infoTitle": "Powering UberEATS with React Native and Uber Engineering",
76-
"pinned": true
76+
"pinned": false
7777
},
7878
{
7979
"name": "Baidu Mobile (手机百度)",
@@ -82,7 +82,7 @@
8282
"linkAppStore": "https://itunes.apple.com/us/app/%E6%89%8B%E6%9C%BA%E7%99%BE%E5%BA%A6-%E7%99%BE%E5%BA%A6%E4%B8%80%E4%B8%8B%E4%BD%A0%E5%B0%B1%E5%BE%97%E5%88%B0/id382201985?mt=8",
8383
"infoLink": "http://baike.baidu.com/link?url=TW8YhcVN4tO_Jz5VqMclCjGhf12EEqMD_TeVC6efe2REZlx80r6T0dX96hdmNl36XogLyExXzrvFU9rFeqxg_K",
8484
"infoTitle": "Baidu Mobile is a search engine used by over 600 million people in China",
85-
"pinned": true
85+
"pinned": false
8686
},
8787
{
8888
"name": "Bloomberg",
@@ -91,47 +91,47 @@
9191
"linkPlayStore": "https://play.google.com/store/apps/details?id=com.bloomberg.android.plus&hl=en",
9292
"infoLink": "https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/",
9393
"infoTitle": "How Bloomberg Used React Native to Develop its new Consumer App",
94-
"pinned": true
94+
"pinned": false
9595
},
9696
{
9797
"name": "Vogue",
9898
"icon": "http://a2.mzstatic.com/us/r30/Purple30/v4/06/24/92/0624927f-a389-746c-27f9-e2466d59e55b/icon175x175.jpeg",
9999
"linkAppStore": "https://itunes.apple.com/app/apple-store/id1087973225?pt=45076&ct=site-promo&mt=8",
100100
"infoLink": "http://www.vogue.com/app",
101101
"infoTitle": "",
102-
"pinned": true
102+
"pinned": false
103103
},
104104
{
105105
"name": "li.st",
106106
"icon": "https://lh3.googleusercontent.com/tXt0HgJ7dCgOnuQ-lQr1P7E57mnOYfwXhRsV9lGcPwHPVvrDAN6YmpLVFgy88qKrkFI=w300",
107107
"linkPlayStore": "https://play.google.com/store/apps/details?id=st.li.listapp",
108108
"infoLink": "https://www.youtube.com/watch?v=cI9bDvDEsYE",
109109
"infoTitle": "Building li.st for Android with React Native",
110-
"pinned": true
110+
"pinned": false
111111
},
112112
{
113113
"name": "Discord",
114114
"icon": "http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg",
115115
"linkAppStore": "https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8",
116116
"infoLink": "https://blog.discordapp.com/using-react-native-one-year-later-91fd5e949933",
117117
"infoTitle": "Using React Native: One Year Later",
118-
"pinned": true
118+
"pinned": false
119119
},
120120
{
121121
"name": "Gyroscope",
122122
"icon": "https://media.gyrosco.pe/images/magneto/180x180.png",
123123
"linkAppStore": "https://itunes.apple.com/app/apple-store/id1104085053?pt=117927205&ct=website&mt=8",
124124
"infoLink": "https://blog.gyrosco.pe/building-the-app-1dac1a97d253",
125125
"infoTitle": "Building a visualization experience with React Native",
126-
"pinned": true
126+
"pinned": false
127127
},
128128
{
129129
"name": "Townske",
130130
"icon": "http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png",
131131
"linkAppStore": "https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8",
132132
"infoLink": "https://hackernoon.com/townske-app-in-react-native-6ad557de7a7c",
133133
"infoTitle": "The experience of a web developer building an app using React Native",
134-
"pinned": true
134+
"pinned": false
135135
},
136136
{
137137
"name": "SoundCloud Pulse",

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -443,7 +443,7 @@ h1, h2, h3, h4 {
443443
line-height: 40px; }
444444

445445
h1 {
446-
font-size: 39px; }
446+
font-size: 40px; }
447447

448448
h2 {
449449
font-size: 31px; }
@@ -506,6 +506,9 @@ html * {
506506
color-profile: sRGB;
507507
rendering-intent: auto; }
508508

509+
.content {
510+
font-size: 18px;
511+
}
509512
.subHeader {
510513
font-size: 21px;
511514
font-weight: 300;
@@ -605,7 +608,9 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
605608
text-decoration: none; }
606609

607610
.nav-main .nav-site-wrapper {
608-
display: inline; }
611+
display: inline;
612+
float: right;
613+
}
609614

610615
.nav-main .nav-site-internal {
611616
margin: 0 0 0 20px; }
@@ -719,7 +724,7 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
719724
padding-bottom: 0; }
720725
.nav-docs-section h3 {
721726
color: white;
722-
font-size: 16px;
727+
font-size: 18px;
723728
font-weight: 400;
724729
line-height: 20px;
725730
margin-top: 0;
@@ -928,7 +933,8 @@ h1:hover .hash-link, h2:hover .hash-link, h3:hover .hash-link, h4:hover .hash-li
928933
margin-bottom: 60px; }
929934

930935
.docs-nextprev {
931-
*zoom: 1; }
936+
*zoom: 1;
937+
}
932938

933939
.docs-nextprev:before, .docs-nextprev:after {
934940
content: " ";
@@ -1002,7 +1008,7 @@ h2 {
10021008
.docs-prevnext {
10031009
min-width: 320px;
10041010
max-width: 640px;
1005-
margin: 0 auto 40px;
1011+
margin: 40px auto;
10061012
padding-bottom: 20px; }
10071013

10081014
.button {
@@ -1534,7 +1540,7 @@ table.versions {
15341540

15351541
.edit-page-block {
15361542
padding: 5px;
1537-
margin-bottom: 40px;
1543+
margin: 40px auto;
15381544
font-size: 12px;
15391545
color: #887766;
15401546
text-align: center;
@@ -1987,7 +1993,7 @@ article li {
19871993
padding: 9px 18px;
19881994
border-radius: 4px;
19891995
text-align: center;
1990-
font-size: 12px; }
1996+
}
19911997

19921998
.btn a {
19931999
text-decoration: none !important; }
@@ -2019,7 +2025,7 @@ article li {
20192025
footer.nav-footer {
20202026
box-sizing: border-box;
20212027
border: none;
2022-
font-weight: 300;
2028+
font-weight: normal;
20232029
color: #202020;
20242030
font-size: 15px;
20252031
line-height: 24px;
@@ -2085,7 +2091,8 @@ footer .sitemap h6,
20852091
footer .sitemap h5 > a,
20862092
footer .sitemap h6 > a {
20872093
color: #05A5D1;
2088-
font-weight: 900; }
2094+
font-size: 15px;
2095+
}
20892096

20902097
footer .sitemap h5 > a,
20912098
footer .sitemap h6 > a {

‎website/src/react-native/index.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const index = React.createClass({
4747
<Hero title="React Native" subtitle="Learn once, write anywhere: Build mobile apps with React">
4848
<div className="buttons-unit">
4949
<a href="docs/getting-started.html" className="button">Get Started</a>
50-
<a href="docs/tutorial.html" className="button">Take the Tutorial</a>
50+
<a href="docs/tutorial.html" className="button">Learn the Basics</a>
5151
</div>
5252
</Hero>
5353

@@ -117,7 +117,7 @@ class AwkwardScrollingImageWithText extends Component {
117117

118118
<h2>Don't waste time recompiling</h2>
119119
<p>
120-
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
120+
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With <a href="/react-native/blog/2016/03/24/introducing-hot-reloading.html">Hot Reloading</a>, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
121121
</p>
122122
<br />
123123
<img src="https://media.giphy.com/media/13WZniThXy0hSE/giphy.gif" />
@@ -160,9 +160,6 @@ class SomethingFast extends Component {
160160
Thousands of apps are using React Native, from established Fortune 500 companies to hot new startups. If you're curious to see what can be accomplished with React Native, check out these apps!
161161
</p>
162162
<AppList apps={pinnedApps} />
163-
<p className="footnote">
164-
Some of these are hybrid native/React Native apps.
165-
</p>
166163
<div className="buttons-unit">
167164
<a href="/react-native/showcase.html" className="button">More React Native apps</a>
168165
</div>

‎website/src/react-native/support.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ var support = React.createClass({
141141
>
142142
open source
143143
</a>
144-
! If you want to contribute, take a look at the
144+
! If you want to contribute, read the <a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">contributor guidelines</a>, then take a look at the
145145
{' '}
146146
<a
147147
href="https://github.com/facebook/react-native/wiki/Roadmap"

0 commit comments

Comments
 (0)