diff --git a/docs/extending/establishing-a-connection.mdx b/docs/extending/establishing-a-connection.mdx index 1ccb75112..10599912e 100644 --- a/docs/extending/establishing-a-connection.mdx +++ b/docs/extending/establishing-a-connection.mdx @@ -60,4 +60,4 @@ This will ask Flipper desktop to generate a client certificate, using the CSR pr Depending on the client, `destination` can have a different meaning. A basic example would be a file path, that both the desktop and the client have access to. With this Flipper desktop could write the certificate to that path. A more involved example is that of the Android Client, where destination specifies a relative path inside an app container. And the Subject Common Name determines which app container. Together these two pieces of information form an absolute file path inside an android device. -For Flipper desktop to work with a given Client type, it needs to be modified to know how to correctly interpret the `destination` argument, and deploy certificates to it. You can see the current implementations in [CertificateProvider.tsx](https://github.com/facebook/flipper/blob/master/desktop/src/utils/CertificateProvider.tsx). +For Flipper desktop to work with a given Client type, it needs to be modified to know how to correctly interpret the `destination` argument, and deploy certificates to it. You can see the current implementations in [CertificateProvider.tsx](https://github.com/facebook/flipper/blob/master/desktop/app/src/utils/CertificateProvider.tsx). diff --git a/docs/extending/styling-components.mdx b/docs/extending/styling-components.mdx index ea36c4edd..a37b2ae5d 100644 --- a/docs/extending/styling-components.mdx +++ b/docs/extending/styling-components.mdx @@ -65,7 +65,7 @@ Pseudo-classes can be used like this: ## Colors -The colors module contains all standard colors used by Flipper. All the available colors are defined in [`desktop/src/ui/components/colors.tsx`](https://github.com/facebook/flipper/blob/master/desktop/src/ui/components/colors.tsx) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this: +The colors module contains all standard colors used by Flipper. All the available colors are defined in [`desktop/src/ui/components/colors.tsx`](https://github.com/facebook/flipper/blob/master/desktop/app/src/ui/components/colors.tsx) with comments about suggested usage of them. And we strongly encourage to use them. They can be required like this: ```javascript import {colors} from 'flipper' diff --git a/docs/features/index.mdx b/docs/features/index.mdx index 3d9946cf0..69a051bfa 100644 --- a/docs/features/index.mdx +++ b/docs/features/index.mdx @@ -12,4 +12,4 @@ Flipper itself only provides the architectural platform. What makes it useful ar The Flipper desktop app and the mobile native SDK establish a connection which is used to send data to and from the device. Flipper does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop. -If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [extend Flipper](extending/index) and build your own plugin. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React. +If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [extend Flipper](../extending/index) and build your own plugin. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React. diff --git a/docs/features/react-native.mdx b/docs/features/react-native.mdx index b30d0b443..557e4b410 100644 --- a/docs/features/react-native.mdx +++ b/docs/features/react-native.mdx @@ -45,8 +45,8 @@ _Example Flipper plugin: playing a game of Tic Tac Toe using Flipper and some em If you would love to build a specific (or generic) extension for Flipper check out the following pointers! Plugins for Flipper can be distributed through NPM so sharing them is trivial. -→ Creating a React Native Flipper Plugin https://fbflipper.com/docs/tutorial/react-native.html -→ Create a Flipper Desktop Plugin https://fbflipper.com/docs/tutorial/js-setup.html +→ Creating a React Native Flipper Plugin https://fbflipper.com/docs/tutorial/react-native +→ Create a Flipper Desktop Plugin https://fbflipper.com/docs/tutorial/js-setup ### Community React Native plugins for Flipper diff --git a/docs/getting-started/android-native.mdx b/docs/getting-started/android-native.mdx index 3f2657679..55caf257f 100644 --- a/docs/getting-started/android-native.mdx +++ b/docs/getting-started/android-native.mdx @@ -112,4 +112,4 @@ Finally, you need to add plugins to your Flipper client. Above, we have only add ## Having trouble? -See the [troubleshooting page](troubleshooting.html) for help with known problems. +See the [troubleshooting page](../troubleshooting) for help with known problems. diff --git a/docs/getting-started/react-native-android.mdx b/docs/getting-started/react-native-android.mdx index a1501d07d..8d4b0d375 100644 --- a/docs/getting-started/react-native-android.mdx +++ b/docs/getting-started/react-native-android.mdx @@ -114,4 +114,4 @@ public class MainApplication extends Application implements ReactApplication { ## Further Steps -To create your own plugins and integrate with Flipper using JavaScript, check out our [writing plugins for React Native](tutorial/react-native) tutorial! +To create your own plugins and integrate with Flipper using JavaScript, check out our [writing plugins for React Native](../tutorial/react-native) tutorial! diff --git a/docs/setup/crash-reporter-plugin.mdx b/docs/setup/crash-reporter-plugin.mdx index ec90cfd94..c59722d49 100644 --- a/docs/setup/crash-reporter-plugin.mdx +++ b/docs/setup/crash-reporter-plugin.mdx @@ -4,7 +4,7 @@ title: Crash Reporter Setup sidebar_label: Crash Reporter --- -You do not have to instantiate it in your app in order to use its basic functionality mentioned [here](features/crash-reporter-plugin). You can also use crash reporter plugin to send the notifications for the exception which you suppress in your Android application. You could even use it to send the notifications when the [Litho Error Boundary](https://fblitho.com/docs/error-boundaries) is triggered. In order to send your custom notification you will have to follow the following steps. +You do not have to instantiate it in your app in order to use its basic functionality mentioned [here](../features/crash-reporter-plugin). You can also use crash reporter plugin to send the notifications for the exception which you suppress in your Android application. You could even use it to send the notifications when the [Litho Error Boundary](https://fblitho.com/docs/error-boundaries) is triggered. In order to send your custom notification you will have to follow the following steps. ## Android diff --git a/docs/tutorial/js-custom.mdx b/docs/tutorial/js-custom.mdx index d5875e1ab..cd33c5d73 100644 --- a/docs/tutorial/js-custom.mdx +++ b/docs/tutorial/js-custom.mdx @@ -35,13 +35,13 @@ export default class SeaMammals extends FlipperPlugin diff --git a/docs/tutorial/js-table.mdx b/docs/tutorial/js-table.mdx index 2418516a8..3f2457ba3 100644 --- a/docs/tutorial/js-table.mdx +++ b/docs/tutorial/js-table.mdx @@ -130,7 +130,7 @@ export default createTablePlugin({ buildRow, }); ``` -*See [index.tsx](https://github.com/facebook/flipper/blob/master/desktop/plugins/seamammals/index.tsx)* +*See [index.tsx](https://github.com/facebook/flipper/blob/master/desktop/plugins/seamammals/src/index.tsx)* The `method` we define here corresponds to the name of the function we call on the native side to inform diff --git a/docs/tutorial/react-native.mdx b/docs/tutorial/react-native.mdx index fe823c3e1..bc5638d8c 100644 --- a/docs/tutorial/react-native.mdx +++ b/docs/tutorial/react-native.mdx @@ -17,7 +17,7 @@ To expose Flipper to the JavaScript world, the React Native Native Module `react Registering a new plugin is done by importing `addPlugin` from `"react-native-flipper"` and providing it an object that at least implements the method `getId` (the plugin id that should be used in the desktop plugin as well to make the connection) and two event handlers for the `onConnect` and `onDisconnect` events. These `onConnect` and `onDisconnect` events are triggered every time the plugin becomes (in)active in the Flipper desktop application. -If the plugin is a [background plugin](../extending/create-plugin.md#background-plugins), these events are triggered typically only once (they might be triggered never, if the Desktop user didn't enable the plugin, or multiple times if they enabled or disabled the plugin a few times). +If the plugin is a [background plugin](../extending/create-plugin#background-plugins), these events are triggered typically only once (they might be triggered never, if the Desktop user didn't enable the plugin, or multiple times if they enabled or disabled the plugin a few times). The `onConnect` callback receive a `connection` which can be used to communicate with the backend: @@ -44,7 +44,7 @@ addPlugin({ You might want to store the connection somewhere to be able to send more events as long as `onDisconnect` event hasn't been fired. -The `connection` object can also be used to listen to messages coming from the Desktop plugin. See [Client Plugin API](create-plugin) for details. +The `connection` object can also be used to listen to messages coming from the Desktop plugin. See [Client Plugin API](../extending/create-plugin) for details. An example plugin to play a little Tic-Tac-Toe between the Flipper Desktop and a React Native app can be found inside this repository as well (run `yarn && yarn android` in `react-native/ReactNativeFlipperExample` to start the test project): diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 0e3f65a49..13dfb481e 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -43,7 +43,7 @@ const siteConfig = { { title: 'Plugins', items: [ - {label: 'Core Plugins', to: 'docs/features'}, + {label: 'Core Plugins', to: 'docs/features/index'}, { label: 'Community Plugins', to: 'https://www.npmjs.com/search?q=keywords:flipper-plugin', diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 4da66d5ea..26fb0661a 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -3,6 +3,8 @@ * * 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'; @@ -10,8 +12,8 @@ import Layout from '@theme/Layout'; import useBaseUrl from '@docusaurus/useBaseUrl'; export default function Index() { - return ( - + return ( +
@@ -43,16 +45,24 @@ export default function Index() { href="https://www.facebook.com/fbflipper/public/windows"> Windows - + Learn more
- - - + + +
@@ -62,8 +72,10 @@ export default function Index() {
@@ -75,7 +87,7 @@ export default function Index() { useful tools including a log viewer, interactive layout inspector, and network inspector.

- + Learn more
@@ -91,22 +103,26 @@ export default function Index() { data back and forth, calling functions, and listening for events on the mobile app.

- + Learn more
@@ -128,7 +144,9 @@ export default function Index() {
- - ); + + ); }