[Docs] Re-imagining the showcase 😇

This commit is contained in:
Brent Vatne 2015-11-25 14:10:03 -08:00
parent a00bd33295
commit 0d2eb748f7
2 changed files with 197 additions and 112 deletions

View File

@ -701,6 +701,10 @@ figure {
width: 650px;
}
.showcaseSection .inner-content {
width: 800px;
}
.nosidebar .inner-content {
float: none;
margin: 0 auto;
@ -1084,18 +1088,17 @@ div[data-twttr-id] iframe {
}
.showcaseHeader {
text-align: center;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
}
.showcase {
margin: 30px auto;
margin: 30px auto 10px auto;
width: 100%;
display: inline-block;
text-align: center;
vertical-align: top;
transition: 0.2s opacity ease-in;
}
@media only screen
@ -1109,7 +1112,7 @@ div[data-twttr-id] iframe {
@media only screen
and (min-device-width: 1024px) {
.showcase {
width: 25%;
width: 20%;
}
}

View File

@ -11,13 +11,111 @@ var React = require('React');
var Site = require('Site');
var center = require('center');
var apps = [
var featured = [
{
name: 'AIGA Design Conference 2015: New Orleans',
name: 'Facebook Groups',
icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png',
link: 'https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8',
author: 'Facebook',
},
{
name: 'Facebook Ads Manager',
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png',
linkAppStore: 'https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8',
linkPlayStore: 'https://play.google.com/store/apps/details?id=com.facebook.adsmanager',
author: 'Facebook',
blogs: [
"https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/",
"https://code.facebook.com/posts/1189117404435352/react-native-for-android-how-we-built-the-first-cross-platform-react-native-app/",
"https://code.facebook.com/posts/435862739941212/making-react-native-apps-accessible/",
],
},
{
name: 'AIGA Design Conference 2015',
icon: 'http://a5.mzstatic.com/us/r30/Purple69/v4/b0/4b/29/b04b2939-88d2-f61f-dec9-24fae083d8b3/icon175x175.png',
link: 'https://itunes.apple.com/us/app/aiga-design-conference-2015/id1038145272?ls=1&mt=8',
author: 'W&Co',
},
{
name: 'Discord',
icon: 'http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg',
link: 'https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8',
author: 'Hammer & Chisel',
},
{
name: 'Discovery VR',
icon: 'http://a2.mzstatic.com/us/r30/Purple6/v4/d1/d5/f4/d1d5f437-9f6b-b5aa-5fe7-47bd19f934bf/icon175x175.png',
link: 'https://itunes.apple.com/us/app/discovery-vr/id1030815031?mt=8',
author: 'Discovery Communications',
blog: [
"https://medium.com/ios-os-x-development/an-ios-developer-on-react-native-1f24786c29f0",
],
},
{
name: 'Exponent',
icon: 'http://a4.mzstatic.com/us/r30/Purple2/v4/3a/d3/c9/3ad3c96c-5e14-f988-4bdd-0fdc95efd140/icon175x175.png',
link: 'http://exponentjs.com/',
author: 'Exponent',
},
{
name: 'Lrn',
icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple1/v4/41/a9/e9/41a9e9b6-7801-aef7-2400-2eca14923321/mzl.adyswxad.png',
link: 'https://itunes.apple.com/us/app/lrn-learn-to-code-at-your/id1019622677',
author: 'Lrn Labs, Inc',
},
{
name: 'Myntra',
icon: 'http://a5.mzstatic.com/us/r30/Purple6/v4/9c/78/df/9c78dfa6-0061-1af2-5026-3e1d5a073c94/icon350x350.png',
link: 'https://itunes.apple.com/in/app/myntra-fashion-shopping-app/id907394059',
author: 'Myntra Designs',
},
{
name: 'React Native Playground',
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/20/ec/8e/20ec8eb8-9e12-6686-cd16-7ac9e3ef1d52/mzl.ngvuoybx.png',
linkAppStore: 'https://itunes.apple.com/us/app/react-native-playground/id1002032944?mt=8',
linkPlayStore: 'https://play.google.com/store/apps/details?id=org.rnplay.playground',
author: 'Joshua Sierles',
},
{
name: 'Running',
icon: 'http://a1.mzstatic.com/us/r30/Purple3/v4/33/eb/4f/33eb4f73-c7e3-8659-9285-f758e403485b/icon175x175.jpeg',
link: 'https://gyrosco.pe/running/',
author: 'Gyroscope Innovations',
blogs: [
'https://blog.gyrosco.pe/the-making-of-gyroscope-running-a4ad10acc0d0',
],
},
{
name: 'Squad',
icon: 'http://a4.mzstatic.com/us/r30/Purple69/v4/e8/5b/3f/e85b3f52-72f3-f427-a32e-a73efe2e9682/icon175x175.jpeg',
link: 'https://itunes.apple.com/us/app/squad-snaps-for-groups-friends/id1043626975?mt=8',
author: 'Tackk Inc.',
},
{
name: 'Start - medication manager for depression',
icon: 'http://a1.mzstatic.com/us/r30/Purple49/v4/de/9b/6f/de9b6fe8-84ea-7a12-ba2c-0a6d6c7b10b0/icon175x175.png',
link: 'https://itunes.apple.com/us/app/start-medication-manager-for/id1012099928?mt=8',
author: 'Iodine Inc.',
},
{
name: 'Townske',
icon: 'http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png',
link: 'https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8',
author: 'Townske PTY LTD',
},
{
name: 'Tucci',
icon: 'http://a3.mzstatic.com/us/r30/Purple3/v4/c0/0c/95/c00c95ce-4cc5-e516-db77-5c5164b89189/icon175x175.jpeg',
link: 'https://itunes.apple.com/app/apple-store/id1039661754?mt=8',
author: 'Clay Allsopp & Tiffany Young',
blogs: [
'https://medium.com/@clayallsopp/making-tucci-what-is-it-and-why-eaa2bf94c1df#.lmm3dmkaf',
'https://medium.com/@clayallsopp/making-tucci-the-technical-details-cc7aded6c75f#.wf72nq372',
],
},
];
var apps = [
{
name: 'Beetroot',
icon: 'http://is1.mzstatic.com/image/pf/us/r30/Purple5/v4/66/fd/dd/66fddd70-f848-4fc5-43ee-4d52197ccab8/pr_source.png',
@ -44,54 +142,17 @@ var apps = [
author: 'The Formations Factory Ltd',
},
{
name: 'DareU - dare your friends, dare the world',
name: 'DareU',
icon: 'http://a3.mzstatic.com/us/r30/Purple6/v4/10/fb/6a/10fb6a50-57c8-061a-d865-503777bf7f00/icon175x175.png',
link: 'https://itunes.apple.com/us/app/dareu-dare-your-friends-dare/id1046434563?mt=8',
author: 'Rishabh Mehan',
},
{
name: 'Discord',
icon: 'http://a5.mzstatic.com/us/r30/Purple5/v4/c1/2f/4c/c12f4cba-1d9a-f6bf-2240-04085d3470ec/icon175x175.jpeg',
link: 'https://itunes.apple.com/us/app/discord-chat-for-gamers/id985746746?mt=8',
author: 'Hammer & Chisel',
},
{
name: 'Discovery VR',
icon: 'http://a2.mzstatic.com/us/r30/Purple6/v4/d1/d5/f4/d1d5f437-9f6b-b5aa-5fe7-47bd19f934bf/icon175x175.png',
link: 'https://itunes.apple.com/us/app/discovery-vr/id1030815031?mt=8',
author: 'Discovery Communications',
},
{
name: 'DropBot',
icon: 'http://a2.mzstatic.com/us/r30/Purple69/v4/fb/df/73/fbdf73e0-22d2-c936-3115-1defa195acba/icon175x175.png',
link: 'https://itunes.apple.com/us/app/dropbot-phone-replacement/id1000855694?mt=8',
author: 'Peach Labs',
},
{
name: 'Exponent',
icon: 'http://a4.mzstatic.com/us/r30/Purple2/v4/3a/d3/c9/3ad3c96c-5e14-f988-4bdd-0fdc95efd140/icon175x175.png',
link: 'https://itunes.apple.com/ca/app/exponent/id982107779?mt=8',
author: 'Exponent',
},
{
name: 'F8',
icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple5/v4/bf/d9/50/bfd9504e-a1bd-67c5-b50b-24e97016dae9/pr_source.jpg',
link: 'https://itunes.apple.com/us/app/f8/id853467066?mt=8',
author: 'Facebook',
},
{
name: 'Facebook Groups',
icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple69/v4/57/f8/4c/57f84c0c-793d-5f9a-95ee-c212d0369e37/mzl.ugjwfhzx.png',
link: 'https://itunes.apple.com/us/app/facebook-groups/id931735837?mt=8',
author: 'Facebook',
},
{
name: 'Facebook Ads Manager',
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple5/v4/9e/16/86/9e1686ef-cc55-805a-c977-538ddb5e6832/mzl.gqbhwitj.png',
linkAppStore: 'https://itunes.apple.com/us/app/facebook-ads-manager/id964397083?mt=8',
linkPlayStore: 'https://play.google.com/store/apps/details?id=com.facebook.adsmanager',
author: 'Facebook',
},
{
name: 'Fan of it',
icon: 'http://a4.mzstatic.com/us/r30/Purple3/v4/c9/3f/e8/c93fe8fb-9332-e744-f04a-0f4f78e42aa8/icon350x350.png',
@ -159,12 +220,6 @@ var apps = [
link: 'https://itunes.apple.com/us/app/loaddocs/id1041596066',
author: 'LoadDocs',
},
{
name: 'Lrn',
icon: 'http://is4.mzstatic.com/image/pf/us/r30/Purple1/v4/41/a9/e9/41a9e9b6-7801-aef7-2400-2eca14923321/mzl.adyswxad.png',
link: 'https://itunes.apple.com/us/app/lrn-learn-to-code-at-your/id1019622677',
author: 'Lrn Labs, Inc',
},
{
name: 'Lumpen Radio',
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/46/43/00/464300b1-fae3-9640-d4a2-0eb050ea3ff2/mzl.xjjawige.png',
@ -180,13 +235,8 @@ var apps = [
{
name: 'MaxReward - Android',
icon: 'https://lh3.googleusercontent.com/yynCUCdEnyW6T96xCto8KzWQr4Yeiy0M6c2p8auYMIyFgAZVBsjf4JCEX7QkPijhBg=w175-rw',
link: 'https://play.google.com/store/apps/details?id=com.bitstrek.maxreward&hl=en',
author: 'Neil Ma',
},
{
name: 'MaxReward - iOS',
icon: 'https://lh3.googleusercontent.com/yynCUCdEnyW6T96xCto8KzWQr4Yeiy0M6c2p8auYMIyFgAZVBsjf4JCEX7QkPijhBg=w175-rw',
link: 'https://itunes.apple.com/us/app/maxreward/id1050479192?ls=1&mt=8',
linkAppStore: 'https://itunes.apple.com/us/app/maxreward/id1050479192?ls=1&mt=8',
linkPlayStore: 'https://play.google.com/store/apps/details?id=com.bitstrek.maxreward&hl=en',
author: 'Neil Ma',
},
{
@ -201,12 +251,6 @@ var apps = [
link: 'https://itunes.apple.com/us/app/mr.-dapper-men-fashion-app/id989735184?ls=1&mt=8',
author: 'wei ping woon',
},
{
name: 'Myntra',
icon: 'http://a5.mzstatic.com/us/r30/Purple6/v4/9c/78/df/9c78dfa6-0061-1af2-5026-3e1d5a073c94/icon350x350.png',
link: 'https://itunes.apple.com/in/app/myntra-fashion-shopping-app/id907394059',
author: 'Myntra Designs',
},
{
name: 'Nalathe Kerala',
icon: 'https://lh3.googleusercontent.com/5N0WYat5WuFbhi5yR2ccdbqmiZ0wbTtKRG9GhT3YK7Z-qRvmykZyAgk0HNElOxD2JOPr=w300-rw',
@ -267,13 +311,6 @@ var apps = [
link: 'https://itunes.apple.com/us/app/repairshopr-payments-lite/id1023262888?mt=8',
author: 'Jed Tiotuico',
},
{
name: 'RN Playground',
icon: 'http://is5.mzstatic.com/image/pf/us/r30/Purple1/v4/20/ec/8e/20ec8eb8-9e12-6686-cd16-7ac9e3ef1d52/mzl.ngvuoybx.png',
linkAppStore: 'https://itunes.apple.com/us/app/react-native-playground/id1002032944?mt=8',
linkPlayStore: 'https://play.google.com/store/apps/details?id=org.rnplay.playground',
author: 'Joshua Sierles',
},
{
name: 'Rota Employer - Hire On Demand',
link: 'https://itunes.apple.com/us/app/rota-employer-hire-on-demand/id1042270305?mt=8',
@ -298,18 +335,6 @@ var apps = [
link: 'https://geo.itunes.apple.com/us/app/spero-for-cancer/id1033923573?mt=8',
author: 'Spero.io',
},
{
name: 'Squad',
icon: 'http://a4.mzstatic.com/us/r30/Purple69/v4/e8/5b/3f/e85b3f52-72f3-f427-a32e-a73efe2e9682/icon175x175.jpeg',
link: 'https://itunes.apple.com/us/app/squad-snaps-for-groups-friends/id1043626975?mt=8',
author: 'Tackk Inc.',
},
{
name: 'Start - medication manager for depression',
icon: 'http://a1.mzstatic.com/us/r30/Purple49/v4/de/9b/6f/de9b6fe8-84ea-7a12-ba2c-0a6d6c7b10b0/icon175x175.png',
link: 'https://itunes.apple.com/us/app/start-medication-manager-for/id1012099928?mt=8',
author: 'Iodine Inc.',
},
{
name: 'Tabtor Parent',
icon: 'http://a1.mzstatic.com/us/r30/Purple4/v4/80/50/9d/80509d05-18f4-a0b8-0cbb-9ba927d04477/icon175x175.jpeg',
@ -322,12 +347,6 @@ var apps = [
link: 'https://itunes.apple.com/cn/app/tong-xing-wang/id914254459?mt=8',
author: 'Ho Yin Tsun Eugene',
},
{
name: 'Townske - Stunning City Guides Made By Locals & Traveller',
icon: 'http://a3.mzstatic.com/us/r30/Purple69/v4/8b/42/20/8b4220af-5165-91fd-0f05-014332df73ef/icon175x175.png',
link: 'https://itunes.apple.com/us/app/townske-stunning-city-guides/id1018136179?ls=1&mt=8',
author: 'Townske PTY LTD',
},
{
name: 'WOOP',
icon: 'http://a4.mzstatic.com/us/r30/Purple6/v4/b0/44/f9/b044f93b-dbf3-9ae5-0f36-9b4956628cab/icon350x350.jpeg',
@ -366,39 +385,102 @@ var apps = [
},
];
var showcase = React.createClass({
renderLinks: function(app) {
return (
<p><a href={app.linkAppStore} target="blank">iOS</a> - <a href={app.linkPlayStore} target="blank">Android</a></p>
);
},
var AppList = React.createClass({
render: function() {
return (
<Site section="showcase" title="Showcase">
<section className="content wrap documentationContent nosidebar">
<div className="inner-content showcaseHeader">
<h1>Apps using React Native</h1>
<div className="subHeader"></div>
<p>
Here is a list of apps using <strong>React Native</strong>. Submit a pull request on <a href="https://github.com/facebook/react-native">GitHub</a> to list your app.
</p>
<div>
{this.props.apps.map(this._renderApp)}
</div>
{
apps.map((app, i) => {
)
},
_renderApp: function(app, i) {
var inner = (
<div>
<img src={app.icon} alt={app.name} />
<h3>{app.name}</h3>
{app.linkAppStore && app.linkPlayStore ? this.renderLinks(app) : null}
{app.linkAppStore && app.linkPlayStore ? this._renderLinks(app) : null}
<p>By {app.author}</p>
{this._renderBlogPosts(app)}
</div>
);
if (app.linkAppStore && app.linkPlayStore) {
return (<div className="showcase" key={i}>{inner}</div>);
}
return (<a href={app.link} className="showcase" key={i} target="blank">{inner}</a>);
})
return (
<div className="showcase" key={i}>
<a href={app.link} target="blank">
{inner}
</a>
</div>
);
},
_renderBlogPosts: function(app) {
if (!app.blogs) {
return;
}
if (app.blogs.length === 1) {
return (
<p><a href={app.blogs[0]} target="blank">Blog post</a></p>
);
} else if (app.blogs.length > 1) {
return (
<p>Blog posts: {app.blogs.map(this._renderBlogPost)}</p>
);
}
},
_renderBlogPost: function(url, i) {
return (
<a href={url} target="blank">
{i + 1}&nbsp;
</a>
);
},
_renderLinks: function(app) {
return (
<p>
<a href={app.linkAppStore} target="blank">iOS</a> -
<a href={app.linkPlayStore} target="blank">Android</a>
</p>
);
},
});
var showcase = React.createClass({
render: function() {
return (
<Site section="showcase" title="Showcase">
<section className="content wrap documentationContent nosidebar showcaseSection">
<div className="inner-content showcaseHeader">
<h1 style={{textAlign: 'center'}}>Apps using React Native</h1>
<div className="subHeader"></div>
<p>The following is a list of some of the public apps using <strong>React Native</strong> and are published on the Apple App Store or the Google Play Store. Not all are implemented 100% in React Native -- many are hybrid native/React Native. Can you tell which parts are which? :)</p>
<p>Want to add your app? Found an app that no longer works or no longer uses React Native? Please submit a pull request on <a href="https://github.com/facebook/react-native">GitHub</a> to update this page!</p>
</div>
<div className="inner-content showcaseHeader">
<h1 style={{textAlign: 'center'}}>Featured Apps</h1>
<div className="subHeader"></div>
<p>These are some of the most well-crafted React Native apps that we have come across.<br/>Be sure to check them out to get a feel for what React Native is capable of!</p>
</div>
<div className="inner-content">
<AppList apps={featured} />
</div>
<div className="inner-content showcaseHeader">
<h1 style={{textAlign: 'center'}}>All Apps</h1>
<p>Not all apps can be featured, otherwise we would have to create some other category like &quot;super featured&quot; and that's just silly. But that doesn't mean you shouldn't check these apps out!</p>
</div>
<div className="inner-content">
<AppList apps={apps} />
</div>
</section>
</Site>
);