From 3fbd46c6d956f92fd236345ace082c0a2602a9d1 Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Sat, 30 Jan 2016 23:01:14 -0800 Subject: [PATCH] Cleanup Edit with GitHub Summary: - Now using a table layout. While having the link inside of the header worked well in the browser, the search API would put "Edit in GitHub" as part of the title -_- - Instead of putting the link inside of every section like Props, put it on the page header. This makes it less repetetitive and also works on API pages where the link was absent before - Remove "Run this example" link as there's a giant Run this example sidebar already. Closes https://github.com/facebook/react-native/pull/5643 Reviewed By: svcscm Differential Revision: D2883989 Pulled By: vjeux fb-gh-sync-id: e810e1677d5130692997dd301d6d59cfe04b948f --- website/core/HeaderWithGithub.js | 40 ++++++ website/layout/AutodocsLayout.js | 116 +++++++----------- website/layout/DocsLayout.js | 19 ++- website/server/extractDocs.js | 1 + website/src/react-native/css/react-native.css | 12 -- 5 files changed, 94 insertions(+), 94 deletions(-) create mode 100644 website/core/HeaderWithGithub.js diff --git a/website/core/HeaderWithGithub.js b/website/core/HeaderWithGithub.js new file mode 100644 index 000000000..7304caad4 --- /dev/null +++ b/website/core/HeaderWithGithub.js @@ -0,0 +1,40 @@ +/** + * Copyright (c) 2015-present, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. An additional grant + * of patent rights can be found in the PATENTS file in the same directory. + * + * @providesModule HeaderWithGithub + */ + +var H = require('Header'); +var React = require('React'); + +var HeaderWithGithub = React.createClass({ + render: function() { + return ( + + + + + + + +
+ + {this.props.title} + + + + Edit on GitHub + +
+ ); + } +}); + +module.exports = HeaderWithGithub; diff --git a/website/layout/AutodocsLayout.js b/website/layout/AutodocsLayout.js index c5dbb5445..e0b493ae1 100644 --- a/website/layout/AutodocsLayout.js +++ b/website/layout/AutodocsLayout.js @@ -12,6 +12,7 @@ var DocsSidebar = require('DocsSidebar'); var H = require('Header'); var Header = require('Header'); +var HeaderWithGithub = require('HeaderWithGithub'); var Marked = require('Marked'); var Prism = require('Prism'); var React = require('React'); @@ -233,10 +234,7 @@ var ComponentDoc = React.createClass({ {content.description} - + Props {this.renderProps(content.props, content.composes)} ); @@ -406,32 +404,45 @@ var APIDoc = React.createClass({ } }); -var HeaderWithGithub = React.createClass({ - - renderRunnableLink: function() { - if (this.props.metadata && this.props.metadata.runnable) { - return ( - - Run this example - - ); - } - }, - +var EmbeddedSimulator = React.createClass({ render: function() { + if (!this.props.shouldRender) { + return null; + } + + var metadata = this.props.metadata; + return ( - - - Edit on GitHub - - {this.renderRunnableLink()} - {this.props.title} - +
+

Run this example

+
+ Run example in simulator +
+ +
+ ); + } +}); + +var Modal = React.createClass({ + render: function() { + var appParams = {route: 'AlertIOS'}; + var encodedParams = encodeURIComponent(JSON.stringify(appParams)); + var url = `https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&scale=70&autoplay=false&orientation=portrait&deviceColor=white¶ms=${encodedParams}`; + + return ( +
+
+
+ +
+ +

Powered by appetize.io

+
+
+
+
+
); } }); @@ -486,7 +497,11 @@ var Autodocs = React.createClass({
-

{metadata.title}

+ {content} {this.renderFullDescription(docs)} {this.renderExample(docs, metadata)} @@ -504,47 +519,4 @@ var Autodocs = React.createClass({ } }); -var EmbeddedSimulator = React.createClass({ - render: function() { - if (!this.props.shouldRender) { - return null; - } - - var metadata = this.props.metadata; - - return ( - - ); - } -}); - -var Modal = React.createClass({ - render: function() { - var appParams = {route: 'AlertIOS'}; - var encodedParams = encodeURIComponent(JSON.stringify(appParams)); - var url = `https://appetize.io/embed/bypdk4jnjra5uwyj2kzd2aenv4?device=iphone5s&scale=70&autoplay=false&orientation=portrait&deviceColor=white¶ms=${encodedParams}`; - - return ( -
-
-
- -
- -

Powered by appetize.io

-
-
-
-
-
- ); - } -}); - module.exports = Autodocs; diff --git a/website/layout/DocsLayout.js b/website/layout/DocsLayout.js index b0cb69066..673496938 100644 --- a/website/layout/DocsLayout.js +++ b/website/layout/DocsLayout.js @@ -9,10 +9,12 @@ * @providesModule DocsLayout */ +var DocsSidebar = require('DocsSidebar'); +var HeaderWithGithub = require('HeaderWithGithub'); +var Marked = require('Marked'); var React = require('React'); var Site = require('Site'); -var Marked = require('Marked'); -var DocsSidebar = require('DocsSidebar'); + var DocsLayout = React.createClass({ render: function() { var metadata = this.props.metadata; @@ -23,14 +25,11 @@ var DocsLayout = React.createClass({
-

- {metadata.title} - - Edit on GitHub - -

+ {content}
{metadata.previous && ← Prev} diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js index 939e78018..2f88d9bfe 100644 --- a/website/server/extractDocs.js +++ b/website/server/extractDocs.js @@ -137,6 +137,7 @@ function componentsToMarkdown(type, json, filepath, i, styles) { 'next: ' + next, 'sidebar: ' + shouldDisplayInSidebar(componentName), 'runnable:' + isRunnable(componentName), + 'path:' + json.filepath, '---', JSON.stringify(json, null, 2), ].filter(function(line) { return line; }).join('\n'); diff --git a/website/src/react-native/css/react-native.css b/website/src/react-native/css/react-native.css index 1331e880f..83cf44113 100644 --- a/website/src/react-native/css/react-native.css +++ b/website/src/react-native/css/react-native.css @@ -1118,18 +1118,6 @@ div[data-twttr-id] iframe { margin-left: 26px; } -.edit-github { - font-size: 15px; - font-weight: normal; - float: right; -} - -.run-example { - font-size: 15px; - float: right; - margin-right: 20px; -} - #content { display: none; }