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
This commit is contained in:
Anton Nikolaev
2020-09-11 09:48:04 -07:00
committed by Facebook GitHub Bot
parent 1f62ce32bf
commit 12d7b48443
4 changed files with 66 additions and 10 deletions

View File

@@ -3,6 +3,7 @@ id: index
title: Desktop App title: Desktop App
--- ---
import useBaseUrl from '@docusaurus/useBaseUrl'; 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: 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. 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.
--- <FBContent
internal={() => require('./fb/using-flipper-at-facebook.mdx')}
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`. external={() => require('./using-flipper.mdx')}
/>
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.
<img alt="Logs plugin" src={useBaseUrl("img/initial.png")} />

View File

@@ -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.
<img alt="Logs plugin" src={useBaseUrl("img/initial.png")} />

View File

@@ -29,7 +29,6 @@ module.exports = {
}, },
setup: { setup: {
'Getting Started': [ 'Getting Started': [
...fbInternalOnly(['getting-started/fb/using-flipper-at-facebook']),
'getting-started/index', 'getting-started/index',
'getting-started/android-native', 'getting-started/android-native',
'getting-started/ios-native', 'getting-started/ios-native',

View File

@@ -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 (
<Tabs
defaultValue="internal-docs"
values={[
{label: 'FB Internal', value: 'internal-docs'},
{label: 'Open-Source', value: 'external-docs'},
]}>
<TabItem value="internal-docs">{createElement(internal)}</TabItem>
<TabItem value="external-docs">{createElement(external)}</TabItem>
</Tabs>
);
} else {
return createElement(internal || external);
}
}
export default FBContent;