Adjust layout

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.
 
-<WebPlayer params="javascript">
+```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);
-</WebPlayer>
+```
 
 Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX.
 

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"
   }
 }

website/pages/en/index.js

@@ -131,23 +131,23 @@ class Features extends React.Component {
             </div>
             <Prism>
               {`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 (
-    <View>
-      <Text>
-        If you like React on the web, you'll like React Native.
-      </Text>
-      <Text>
-        You just use native components like 'View' and 'Text',
-        instead of web components like 'div' and 'span'.
-      </Text>
-    </View>
+      <View>
+        <Text>
+          If you like React on the web, you'll like React Native.
+        </Text>
+        <Text>
+          You just use native components like 'View' and 'Text',
+          instead of web components like 'div' and 'span'.
+        </Text>
+      </View>
     );
-    }
-    }`}
+  }
+}`}
             </Prism>
           </div>
         </Container>
@@ -163,30 +163,30 @@ class Features extends React.Component {
             </div>
             <Prism>
               {`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 (
-    <ScrollView>
-      <Image
-        source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
-        style={{width: 320, height:180}}
-      />
-      <Text>
-        On iOS, a React Native ScrollView uses a native UIScrollView.
-        On Android, it uses a native ScrollView.
+      <ScrollView>
+        <Image
+          source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
+          style={{width: 320, height:180}}
+        />
+        <Text>
+          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.
-      </Text>
-    </ScrollView>
+          React Native wraps the fundamental native components, giving you
+          the performance of a native app, plus the clean design of React.
+        </Text>
+      </ScrollView>
     );
-    }
-    }`}
+  }
+}`}
             </Prism>
           </div>
         </Container>
@@ -219,22 +219,22 @@ class Features extends React.Component {
             </div>
             <Prism>
               {`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 (
-    <View>
-      <TheGreatestComponentInTheWorld />
-      <Text>
-        TheGreatestComponentInTheWorld could use native Objective-C,
-        Java, or Swift - the product development process is the same.
-      </Text>
-    </View>
+      <View>
+        <TheGreatestComponentInTheWorld />
+        <Text>
+          TheGreatestComponentInTheWorld could use native Objective-C,
+          Java, or Swift - the product development process is the same.
+        </Text>
+      </View>
     );
-    }
-    }`}
+  }
+}`}
             </Prism>
 
           </div>

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'

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;
-}

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;
   }
-} */
+}

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;
 }