diff --git a/docs/Props.md b/docs/Props.md
index 2a66422cfe2..e65a926f707 100644
--- a/docs/Props.md
+++ b/docs/Props.md
@@ -8,7 +8,7 @@ Most components can be customized when they are created, with different paramete
For example, one basic React Native component is the `Image`. When you
create an image, you can use a prop named `source` to control what image it shows.
-
+```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
@@ -25,7 +25,7 @@ export default class Bananas extends Component {
// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Bananas);
-
+```
Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX.
diff --git a/website/package.json b/website/package.json
index a7eb5905009..bdc1d5c3c56 100644
--- a/website/package.json
+++ b/website/package.json
@@ -4,8 +4,5 @@
"build": "docusaurus-build",
"publish-gh-pages": "docusaurus-publish",
"examples": "docusaurus-examples"
- },
- "devDependencies": {
- "docusaurus": "^1.0.0-alpha.35"
}
}
diff --git a/website/pages/en/index.js b/website/pages/en/index.js
index 3420782ab07..ba0e0af76e0 100755
--- a/website/pages/en/index.js
+++ b/website/pages/en/index.js
@@ -131,23 +131,23 @@ class Features extends React.Component {
{`import React, { Component } from 'react';
- import { Text, View } from 'react-native';
+import { Text, View } from 'react-native';
- class WhyReactNativeIsSoGreat extends Component {
- render() {
+class WhyReactNativeIsSoGreat extends Component {
+ render() {
return (
-
-
- If you like React on the web, you'll like React Native.
-
-
- You just use native components like 'View' and 'Text',
- instead of web components like 'div' and 'span'.
-
-
+
+
+ If you like React on the web, you'll like React Native.
+
+
+ You just use native components like 'View' and 'Text',
+ instead of web components like 'div' and 'span'.
+
+
);
- }
- }`}
+ }
+}`}
@@ -163,30 +163,30 @@ class Features extends React.Component {
{`import React, { Component } from 'react';
- import { Image, ScrollView, Text } from 'react-native';
+import { Image, ScrollView, Text } from 'react-native';
- class AwkwardScrollingImageWithText extends Component {
- render() {
+class AwkwardScrollingImageWithText extends Component {
+ render() {
return (
-
-
-
- On iOS, a React Native ScrollView uses a native UIScrollView.
- On Android, it uses a native ScrollView.
+
+
+
+ On iOS, a React Native ScrollView uses a native UIScrollView.
+ On Android, it uses a native ScrollView.
- On iOS, a React Native Image uses a native UIImageView.
- On Android, it uses a native ImageView.
+ On iOS, a React Native Image uses a native UIImageView.
+ On Android, it uses a native ImageView.
- React Native wraps the fundamental native components, giving you
- the performance of a native app, plus the clean design of React.
-
-
+ React Native wraps the fundamental native components, giving you
+ the performance of a native app, plus the clean design of React.
+
+
);
- }
- }`}
+ }
+}`}
@@ -219,22 +219,22 @@ class Features extends React.Component {
{`import React, { Component } from 'react';
- import { Text, View } from 'react-native';
- import { TheGreatestComponentInTheWorld } from './your-native-code';
+import { Text, View } from 'react-native';
+import { TheGreatestComponentInTheWorld } from './your-native-code';
- class SomethingFast extends Component {
- render() {
+class SomethingFast extends Component {
+ render() {
return (
-
-
-
- TheGreatestComponentInTheWorld could use native Objective-C,
- Java, or Swift - the product development process is the same.
-
-
+
+
+
+ TheGreatestComponentInTheWorld could use native Objective-C,
+ Java, or Swift - the product development process is the same.
+
+
);
- }
- }`}
+ }
+}`}
diff --git a/website/siteConfig.js b/website/siteConfig.js
index f97e403d908..5b6185f0287 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -50,8 +50,12 @@ const siteConfig = {
/* remove this section to disable search bar */
algolia: {
apiKey:
- "0f9f28b9ab9efae89810921a351753b5" /* use your search-only api key */,
- indexName: "github"
+ "2c98749b4a1e588efec53b2acec13025" /* use your search-only api key */,
+ indexName: "react-native-versions",
+ algoliaOptions: {
+ facetFilters: [ "tags:VERSION" ],
+ hitsPerPage: 5
+ }
},
facebookAppId: '1677033832619985',
twitter: 'reactnative'
diff --git a/website/static/css/prism.css b/website/static/css/prism.css
index 762b9adf8e1..e69de29bb2d 100644
--- a/website/static/css/prism.css
+++ b/website/static/css/prism.css
@@ -1,21 +0,0 @@
-.prism {
- border-left: 4px solid $secondaryColor;
-}
-
-.token.keyword {
- color: #1990b8;
-}
-
-.token.string,
-.token.regex {
- color: #2f9c0a;
-}
-
-.token.boolean,
-.token.number {
- color: #c92c2c;
-}
-
-.token.comment {
- color: #7d8b99;
-}
diff --git a/website/static/css/react-native.css b/website/static/css/react-native.css
index f36d33501f8..398d2fb87a6 100644
--- a/website/static/css/react-native.css
+++ b/website/static/css/react-native.css
@@ -121,6 +121,10 @@ code {
}
}
+.wrapper {
+ max-width: 1200px;
+}
+
.container {
max-width: 900px;
}
@@ -198,8 +202,23 @@ p {
max-width: 800px;
}
-/* @media only screen and (min-device-width: 768px) {
- .container {
- margin-right: 0;
+.prism {
+ white-space: pre-wrap;
+ font-family: 'source-code-pro', Menlo, 'Courier New', Consolas, monospace;
+ font-size: 13px;
+ line-height: 20px;
+ border-left: 4px solid #05A5D1;
+ padding: 5px 10px;
+ background-color: rgba(5, 165, 209, 0.05);
+ overflow: auto; }
+
+.prism + .prism {
+ margin-top: 10px; }
+
+@media only screen and (max-device-width: 1024px) {
+ .prism {
+ padding: 4px 8px;
+ margin-left: -12px;
+ font-size: 11px;
}
-} */
+}
diff --git a/website/static/css/showcase.css b/website/static/css/showcase.css
index 5f3c842f9eb..3e837c36f72 100644
--- a/website/static/css/showcase.css
+++ b/website/static/css/showcase.css
@@ -77,8 +77,13 @@
color: #484848;
}
+@media only screen and (min-device-width: 736px) {
+ .showcaseSection .showcase img {
+ width: 100px;
+ }
+}
+
.showcaseSection .showcase img {
- width: 100px;
height: 100px;
border-radius: 20px;
}