From 12d7b4844381ee09d7da1f3e266b307b9850a800 Mon Sep 17 00:00:00 2001 From: Anton Nikolaev Date: Fri, 11 Sep 2020 09:48:04 -0700 Subject: [PATCH] Show FB internal instructions by default on "Getting Started" page Summary: Show internal instructions for Flipper setup by default on "Getting Started" page. This is a follow up to https://fb.workplace.com/groups/flippersupport/permalink/955763464904312/. I used tabs component to show both internal and external content in tabs. By default, internal content is shown, but it is possible to also switch to external. Reviewed By: jknoxville Differential Revision: D23649955 fbshipit-source-id: c4f956e0ee9fec69cf861d96a447f934f746dd7f --- docs/getting-started/index.mdx | 14 +++----- docs/getting-started/using-flipper.mdx | 13 +++++++ website/sidebars.js | 1 - website/src/components/FBContent.jsx | 48 ++++++++++++++++++++++++++ 4 files changed, 66 insertions(+), 10 deletions(-) create mode 100644 docs/getting-started/using-flipper.mdx create mode 100644 website/src/components/FBContent.jsx diff --git a/docs/getting-started/index.mdx b/docs/getting-started/index.mdx index e8d9de590..6e24119b8 100644 --- a/docs/getting-started/index.mdx +++ b/docs/getting-started/index.mdx @@ -3,6 +3,7 @@ id: index title: Desktop App --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import FBContent from '../../website/src/components/FBContent'; Flipper helps you debug Android and iOS apps running in an emulator/simulator or connected physical development devices. Flipper consists of two parts: @@ -11,12 +12,7 @@ Flipper helps you debug Android and iOS apps running in an emulator/simulator or To use Flipper, you need to add the mobile SDK to your app. If you are using React Native 0.62 or higher, this is largely done automatically for you. ---- - -The desktop part of Flipper doesn't need any particular setup. Simply download the latest build for [Mac](https://www.facebook.com/fbflipper/public/mac), [Linux](https://www.facebook.com/fbflipper/public/linux) or [Windows](https://www.facebook.com/fbflipper/public/windows) and launch it. In order to work properly, Flipper requires a working installation of the Android and (if where applicable) iOS development tools on your system, as well as the [OpenSSL](https://www.openssl.org) binary on your `$PATH`. - -OpenSSL for Windows can be downloaded [here](https://slproweb.com/products/Win32OpenSSL.html). - -Once you start Flipper and launch an emulator/simulator or connect a device, you will already be able to see the device logs in Flipper. To see app specific data, you need to integrate our native SDKs with your app. - -Logs plugin + require('./fb/using-flipper-at-facebook.mdx')} + external={() => require('./using-flipper.mdx')} +/> diff --git a/docs/getting-started/using-flipper.mdx b/docs/getting-started/using-flipper.mdx new file mode 100644 index 000000000..bbe228520 --- /dev/null +++ b/docs/getting-started/using-flipper.mdx @@ -0,0 +1,13 @@ +--- +id: using-flipper +title: Desktop App +--- +import useBaseUrl from '@docusaurus/useBaseUrl'; + +The desktop part of Flipper doesn't need any particular setup. Simply download the latest build for [Mac](https://www.facebook.com/fbflipper/public/mac), [Linux](https://www.facebook.com/fbflipper/public/linux) or [Windows](https://www.facebook.com/fbflipper/public/windows) and launch it. In order to work properly, Flipper requires a working installation of the Android and (if where applicable) iOS development tools on your system, as well as the [OpenSSL](https://www.openssl.org) binary on your `$PATH`. + +OpenSSL for Windows can be downloaded [here](https://slproweb.com/products/Win32OpenSSL.html). + +Once you start Flipper and launch an emulator/simulator or connect a device, you will already be able to see the device logs in Flipper. To see app specific data, you need to integrate our native SDKs with your app. + +Logs plugin diff --git a/website/sidebars.js b/website/sidebars.js index 6b51f5a6d..cfa8afd21 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -29,7 +29,6 @@ module.exports = { }, setup: { 'Getting Started': [ - ...fbInternalOnly(['getting-started/fb/using-flipper-at-facebook']), 'getting-started/index', 'getting-started/android-native', 'getting-started/ios-native', diff --git a/website/src/components/FBContent.jsx b/website/src/components/FBContent.jsx new file mode 100644 index 000000000..dbc88f8b3 --- /dev/null +++ b/website/src/components/FBContent.jsx @@ -0,0 +1,48 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import React from 'react'; +import {isInternal} from 'internaldocs-fb-helpers'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +function createElement(createElement) { + if (!createElement) return undefined; + if (React.isValidElement(createElement)) { + return createElement; + } + const element = createElement(); + if (React.isValidElement(element)) { + return element; + } + return React.createElement(element.default || element, {}); +} + +function FBContent({internal, external}) { + if (!isInternal()) { + return createElement(external); + } + if (internal && external) { + return ( + + {createElement(internal)} + {createElement(external)} + + ); + } else { + return createElement(internal || external); + } +} + +export default FBContent;