From b2e8070af2410c8c18666899c50d9b0606d68610 Mon Sep 17 00:00:00 2001 From: Pascal Hartig Date: Fri, 26 Jun 2020 05:11:32 -0700 Subject: [PATCH] Fix relative links Summary: Translated all cases where we had a parent-relative link to use the base URL instead. Reviewed By: jknoxville Differential Revision: D22256229 fbshipit-source-id: 81ee6fecb77dbaa19d112cb319771c22ff66d02a --- docs/features/crash-reporter-plugin.mdx | 3 ++- docs/features/databases-plugin.mdx | 3 ++- docs/features/images-plugin.mdx | 3 ++- docs/features/index.mdx | 3 ++- docs/features/layout-plugin.mdx | 3 ++- docs/features/leak-canary-plugin.mdx | 4 +++- docs/features/navigation-plugin.mdx | 3 ++- docs/features/network-plugin.mdx | 3 ++- docs/features/react-native.mdx | 3 ++- docs/features/sandbox-plugin.mdx | 4 +++- docs/features/shared-preferences-plugin.mdx | 3 ++- docs/getting-started/android-native.mdx | 6 ++++-- docs/getting-started/ios-native.mdx | 6 ++++-- docs/getting-started/react-native-android.mdx | 4 +++- docs/getting-started/react-native-ios.mdx | 6 ++++-- docs/getting-started/react-native.mdx | 3 ++- docs/setup/crash-reporter-plugin.mdx | 4 +++- docs/tutorial/js-custom.mdx | 5 +++-- docs/tutorial/react-native.mdx | 6 ++++-- 19 files changed, 51 insertions(+), 24 deletions(-) diff --git a/docs/features/crash-reporter-plugin.mdx b/docs/features/crash-reporter-plugin.mdx index 2f4c626d1..616291e84 100644 --- a/docs/features/crash-reporter-plugin.mdx +++ b/docs/features/crash-reporter-plugin.mdx @@ -3,8 +3,9 @@ id: crash-reporter-plugin title: Crash Reporter --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the Crash Reporter](../setup/crash-reporter-plugin) +→ See setup instructions for the Crash Reporter The Crash Reporter Plugin shows a notification in Flipper whenever an app crashes. You can click on the notification to see crash information like stacktrace and other metadata. For Android, you can click the "Open in Logs" button to jump to the row in the Logs plugin with the crash information. diff --git a/docs/features/databases-plugin.mdx b/docs/features/databases-plugin.mdx index 4e8d2b222..a633b8a63 100644 --- a/docs/features/databases-plugin.mdx +++ b/docs/features/databases-plugin.mdx @@ -3,8 +3,9 @@ id: databases-plugin title: Databases --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the Databases plugin](../setup/databases-plugin) +→ See setup instructions for the Databases plugin The Databases plugin provides developers with read-write access to their databases: - browse your tables' data diff --git a/docs/features/images-plugin.mdx b/docs/features/images-plugin.mdx index 91d1a4506..388b20ca9 100644 --- a/docs/features/images-plugin.mdx +++ b/docs/features/images-plugin.mdx @@ -3,8 +3,9 @@ id: images-plugin title: Images --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the images plugin](../setup/images-plugin) +→ See setup instructions for the images plugin The images plugin allows you to inspect what images were fetched, where they are coming from and selectively clear caches. Currently, the plugin supports diff --git a/docs/features/index.mdx b/docs/features/index.mdx index 69a051bfa..c5d2e0e10 100644 --- a/docs/features/index.mdx +++ b/docs/features/index.mdx @@ -3,6 +3,7 @@ id: index title: Features --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](logs-plugin), [Layout Inspector](layout-plugin) and [Network Inspector](network-plugin) are all plugins. Plugins can be built very specific to your business logic and the use-cases you have in your app. We are shipping Flipper with a couple of built-in all-purpose plugins, but we encourage you to build your own. Each plugin needs to be enabled individually. @@ -12,4 +13,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 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/layout-plugin.mdx b/docs/features/layout-plugin.mdx index 9e940e2c5..990dfcad8 100644 --- a/docs/features/layout-plugin.mdx +++ b/docs/features/layout-plugin.mdx @@ -3,8 +3,9 @@ id: layout-plugin title: Layout Inspector --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the Layout Inspector](../setup/layout-plugin) +→ See setup instructions for the Layout Inspector The Layout Inspector in Flipper is useful for a ton of different debugging scenarios. First of all, you can inspect what views the hierarchy is made up of as well as what properties each view has. This is incredibly useful when debugging issues with your product. diff --git a/docs/features/leak-canary-plugin.mdx b/docs/features/leak-canary-plugin.mdx index 9916dba9a..03ae2f129 100644 --- a/docs/features/leak-canary-plugin.mdx +++ b/docs/features/leak-canary-plugin.mdx @@ -2,8 +2,10 @@ id: leak-canary-plugin title: LeakCanary --- +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the LeakCanary](../setup/leak-canary-plugin) +→ See setup instructions for the LeakCanary The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library. diff --git a/docs/features/navigation-plugin.mdx b/docs/features/navigation-plugin.mdx index a086a14ed..3c9be11fb 100644 --- a/docs/features/navigation-plugin.mdx +++ b/docs/features/navigation-plugin.mdx @@ -3,8 +3,9 @@ id: navigation-plugin title: Navigation --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the Navigation Plugin](../setup/navigation-plugin) +→ See setup instructions for the Navigation Plugin The Navigation Plugin allows users to quickly navigate to deep links within their mobile applications to help speed up the development cycle. The plugin is designed to integrate easily within your existing navigation framework or as a stand alone tool. Users can bookmark deep links and jump to them via the button in the tool bar. diff --git a/docs/features/network-plugin.mdx b/docs/features/network-plugin.mdx index 436f7db87..1ce84b65c 100644 --- a/docs/features/network-plugin.mdx +++ b/docs/features/network-plugin.mdx @@ -3,8 +3,9 @@ id: network-plugin title: Network --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the Network plugin](../setup/network-plugin) +→ See setup instructions for the Network plugin Use the Network inspector to inspect outgoing network traffic in your apps. You can easily browse all requests being made and their responses. The plugin also supports gzipped responses. diff --git a/docs/features/react-native.mdx b/docs/features/react-native.mdx index ac6085e0a..536ac531a 100644 --- a/docs/features/react-native.mdx +++ b/docs/features/react-native.mdx @@ -3,13 +3,14 @@ id: react-native title: React Native Support --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; React Native + React DevTools The React Native and Developer tooling teams at Facebook work in close collaboration to make sure Flipper offers top-notch value out of the box for React Native development. Integration between React Native and Flipper is enabled out of the box in React Native version 0.62 and higher. -→ [See setup instructions for React Native](../getting-started/index#setup-your-react-native-app) +→ See setup instructions for React Native
diff --git a/docs/features/sandbox-plugin.mdx b/docs/features/sandbox-plugin.mdx index 447fed6a2..e2127406f 100644 --- a/docs/features/sandbox-plugin.mdx +++ b/docs/features/sandbox-plugin.mdx @@ -2,7 +2,9 @@ id: sandbox-plugin title: Sandbox --- +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the Sandbox plugin](../setup/sandbox-plugin) +→ See setup instructions for the Sandbox plugin The sandbox plugin allows developers to test changes in their apps by pointing them to a sandbox environment. It provides a simple UI to set and modify the URL to a development host that acts as a sandbox directly on the desktop, which prevents you from entering potentially long and complicated URL inside your app. diff --git a/docs/features/shared-preferences-plugin.mdx b/docs/features/shared-preferences-plugin.mdx index 0e47d8a5c..da1ba5934 100644 --- a/docs/features/shared-preferences-plugin.mdx +++ b/docs/features/shared-preferences-plugin.mdx @@ -3,8 +3,9 @@ id: shared-preferences-plugin title: Shared Preferences --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -→ [See setup instructions for the Shared Preferences plugin](../setup/shared-preferences-plugin) +→ See setup instructions for the Shared Preferences plugin Easily inspect and modify the data contained within your app's shared preferences. diff --git a/docs/getting-started/android-native.mdx b/docs/getting-started/android-native.mdx index 08934bfe5..e5f3e1830 100644 --- a/docs/getting-started/android-native.mdx +++ b/docs/getting-started/android-native.mdx @@ -3,6 +3,8 @@ id: android-native title: Set up your Android app sidebar_label: Android --- +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; To set up Flipper for Android, you need to add the neccessary dependencies to your app, initialize the Flipper client and enable the plugins you want to use. Optionally, @@ -108,8 +110,8 @@ dependencies { ## Enabling plugins -Finally, you need to add plugins to your Flipper client. Above, we have only added the Layout Inspector plugin to get you started. See [Network Plugin](../setup/network-plugin) and [Layout Inspector Plugin](../setup/layout-plugin) for information on how to add them, and also enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins. +Finally, you need to add plugins to your Flipper client. Above, we have only added the Layout Inspector plugin to get you started. See Network Plugin and Layout Inspector Plugin for information on how to add them, and also enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins. ## Having trouble? -See the [troubleshooting page](../troubleshooting) for help with known problems. +See the troubleshooting page for help with known problems. diff --git a/docs/getting-started/ios-native.mdx b/docs/getting-started/ios-native.mdx index ccaf8ed53..cf936d95e 100644 --- a/docs/getting-started/ios-native.mdx +++ b/docs/getting-started/ios-native.mdx @@ -3,6 +3,8 @@ id: ios-native title: Set up your iOS app sidebar_label: iOS --- +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; We support both Swift and Objective-C for Flipper with CocoaPods as build and distribution mechanism. @@ -141,11 +143,11 @@ class AppDelegate: UIResponder, UIApplicationDelegate { ## Enabling plugins -Finally, you need to add plugins to your Flipper client. Above, we have only added the Layout Inspector plugin to get you started. See [Network Plugin](../setup/network-plugin) and [Layout Inspector Plugin](../setup/layout-plugin) for information on how to add them, and also enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins. +Finally, you need to add plugins to your Flipper client. Above, we have only added the Layout Inspector plugin to get you started. See Network Plugin and Layout Inspector Plugin for information on how to add them, and also enable Litho or ComponentKit support. You can check the sample apps in the [GitHub repo](https://github.com/facebook/flipper) for examples of integrating other plugins. ## Having trouble? -See the [troubleshooting page](../troubleshooting) for help with known problems. +See the troubleshooting page for help with known problems.
diff --git a/docs/getting-started/react-native-android.mdx b/docs/getting-started/react-native-android.mdx index 8d4b0d375..03b5a24db 100644 --- a/docs/getting-started/react-native-android.mdx +++ b/docs/getting-started/react-native-android.mdx @@ -3,6 +3,8 @@ id: react-native-android title: Manually set up your React Native Android App sidebar_label: React Native for Android --- +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; These instructions are aimed at people manually adding Flipper to a React Native 0.62+ app. This should only be necessary if you have an existing app that cannot be upgraded with the @@ -114,4 +116,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! diff --git a/docs/getting-started/react-native-ios.mdx b/docs/getting-started/react-native-ios.mdx index a850a74a4..99edcb6c9 100644 --- a/docs/getting-started/react-native-ios.mdx +++ b/docs/getting-started/react-native-ios.mdx @@ -3,6 +3,8 @@ id: react-native-ios title: Manually set up your React Native iOS App sidebar_label: React Native for iOS --- +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; These instructions are aimed at people manually adding Flipper to a React Native 0.62+ app. This should only be necessary if you have an existing app that cannot be upgraded with the @@ -163,8 +165,8 @@ Lastly, open the Flipper desktop app, and run `yarn ios` in your terminal. ## Troubleshooting -See the [troubleshooting page](../troubleshooting) for help with known problems. +See the troubleshooting page for help with known problems. ## 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! diff --git a/docs/getting-started/react-native.mdx b/docs/getting-started/react-native.mdx index f4d7d9743..2e253e1a4 100644 --- a/docs/getting-started/react-native.mdx +++ b/docs/getting-started/react-native.mdx @@ -4,6 +4,7 @@ title: Set up your React Native App sidebar_label: React Native --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; Starting with React Native 0.62, after generating your project with `react-native init`, the Flipper integration is ready out of the box for debug builds: @@ -23,7 +24,7 @@ By default, the following plugins will be available: Additional plugins can be installed through the plugin manager. -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! To update the Flipper SDK in your project, you bump the version in the `ios/Podfile` and `android/gradle.properties` files of your project. diff --git a/docs/setup/crash-reporter-plugin.mdx b/docs/setup/crash-reporter-plugin.mdx index c59722d49..3ace5021a 100644 --- a/docs/setup/crash-reporter-plugin.mdx +++ b/docs/setup/crash-reporter-plugin.mdx @@ -3,8 +3,10 @@ id: crash-reporter-plugin title: Crash Reporter Setup sidebar_label: Crash Reporter --- +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; -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. 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 cd33c5d73..350b15f7b 100644 --- a/docs/tutorial/js-custom.mdx +++ b/docs/tutorial/js-custom.mdx @@ -4,6 +4,7 @@ title: Building Custom UI sidebar_label: Custom UI --- import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link'; Displaying your data in a table might work for many use-cases. However, depending on your plugin and data it might make sense to customize the way your data is visualized. Flipper uses React to render the plugins and provides a variety of ready-to-use UI components that can be used to build custom plugin UIs. @@ -35,13 +36,13 @@ export default class SeaMammals extends FlipperPluginstyling components. ## Adding data handling The plugin is quite useless when we don't display any actual data. We are adding two static properties to our plugin class for data handling. `defaultPersistedState` defines the default state before we received any data. In `persistedStateReducer` we define how new data is merged with the existing data. -For the default state we define an empty object because we don't have any data, yet. When receiving data, we simply add it to the existing object, using the ID as a key. Learn more about [persistedState](../extending/js-plugin-api#persistedstate) in our guide. +For the default state we define an empty object because we don't have any data, yet. When receiving data, we simply add it to the existing object, using the ID as a key. Learn more about persistedState in our guide. ```js static defaultPersistedState: PersistedState = { diff --git a/docs/tutorial/react-native.mdx b/docs/tutorial/react-native.mdx index 775cdea44..156a2024e 100644 --- a/docs/tutorial/react-native.mdx +++ b/docs/tutorial/react-native.mdx @@ -2,6 +2,8 @@ id: react-native title: Building a React Native Plugin --- +import useBaseUrl from '@docusaurus/useBaseUrl'; +import Link from '@docusaurus/Link';
@@ -17,7 +19,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#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, 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 +46,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](../extending/create-plugin) for details. +The `connection` object can also be used to listen to messages coming from the Desktop plugin. See Client Plugin API 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):