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,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)
+→ <Link to={useBaseUrl("/docs/setup/crash-reporter-plugin")}>See setup instructions for the Crash Reporter</Link>
 
 
 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.

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)
+→ <Link to={useBaseUrl("/docs/setup/databases-plugin")}>See setup instructions for the Databases plugin</Link>
 
 The Databases plugin provides developers with read-write access to their databases:
 - browse your tables' data

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)
+→ <Link to={useBaseUrl("/docs/setup/images-plugin")}>See setup instructions for the images plugin</Link>
 
 The images plugin allows you to inspect what images were fetched, where they are
 coming from and selectively clear caches. Currently, the plugin supports

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 <Link to={useBaseUrl("/docs/extending/index")}>extend Flipper</Link> and build your own plugin. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React.

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)
+→ <Link to={useBaseUrl("/docs/setup/layout-plugin")}>See setup instructions for the Layout Inspector</Link>
 
 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.
 

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)
+→ <Link to={useBaseUrl("/docs/setup/leak-canary-plugin")}>See setup instructions for the LeakCanary</Link>
 
 The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library.
 

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)
+→ <Link to={useBaseUrl("/docs/setup/navigation-plugin")}>See setup instructions for the Navigation Plugin</Link>
 
 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.
 

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)
+→ <Link to={useBaseUrl("/docs/setup/network-plugin")}>See setup instructions for the Network plugin</Link>
 
 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.
 

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';
 
 <img alt="React Native + React DevTools" src={useBaseUrl("img/react-native-react.png")} />
 
 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)
+→ <Link to={useBaseUrl("/docs/getting-started/index#setup-your-react-native-app")}>See setup instructions for React Native</Link>
 
 <center>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/WltZTn3ODW4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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)
+→ <Link to={useBaseUrl("/docs/setup/sandbox-plugin")}>See setup instructions for the Sandbox plugin</Link>
 
 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. 

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)
+→ <Link to={useBaseUrl("/docs/setup/shared-preferences-plugin")}>See setup instructions for the Shared Preferences plugin</Link>
 
 Easily inspect and modify the data contained within your app's shared preferences.
 

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 <Link to={useBaseUrl("/docs/setup/network-plugin")}>Network Plugin</Link> and <Link to={useBaseUrl("/docs/setup/layout-plugin")}>Layout Inspector Plugin</Link> 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 <Link to={useBaseUrl("/docs/troubleshooting")}>troubleshooting page</Link> for help with known problems.

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 <Link to={useBaseUrl("/docs/setup/network-plugin")}>Network Plugin</Link> and <Link to={useBaseUrl("/docs/setup/layout-plugin")}>Layout Inspector Plugin</Link> 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 <Link to={useBaseUrl("/docs/troubleshooting")}>troubleshooting page</Link> for help with known problems.
 
 <div class="warning">
 

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 <Link to={useBaseUrl("/docs/tutorial/react-native")}>writing plugins for React Native</Link> tutorial!

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 <Link to={useBaseUrl("/docs/troubleshooting")}>troubleshooting page</Link> 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 <Link to={useBaseUrl("/docs/tutorial/react-native")}>writing plugins for React Native</Link> tutorial!

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 <Link to={useBaseUrl("/docs/tutorial/react-native")}>writing plugins for React Native</Link> 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.
 

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 <Link to={useBaseUrl("/docs/features/crash-reporter-plugin")}>here</Link>. 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
 

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 FlipperPlugin<State, any, PersistedState
 }
 ```
 
-You can see how we are styling our components using [emotion](https://emotion.sh/). To learn more about this, make sure to read our guide on [styling components](../extending/styling-components).
+You can see how we are styling our components using [emotion](https://emotion.sh/). To learn more about this, make sure to read our guide on <Link to={useBaseUrl("/docs/extending/styling-components")}>styling components</Link>.
 
 ## 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 <Link to={useBaseUrl("/docs/extending/js-plugin-api#persistedstate")}>persistedState</Link> in our guide.
 
 ```js
 static defaultPersistedState: PersistedState = {

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';
 
 <div class="warning">
 
@@ -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 <Link to={useBaseUrl("/docs/extending/create-plugin#background-plugins")}>background plugin</Link>, 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 <Link to={useBaseUrl("/docs/extending/create-plugin")}>Client Plugin API</Link> 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):