Force trailing slash for flipper website

Summary: Use docusaurus new config option to force trailing slashes for all routes and fail build when extensions are not specified in markdown links to prevent flapping urls that lead to 404 in certain situations.

Reviewed By: jknoxville

Differential Revision: D32533292

fbshipit-source-id: a2d5fdff396b3bb4319893634dd637275ea9f598

docs/extending/architecture.mdx

@@ -10,7 +10,7 @@ Flipper is built to be a universal pluggable platform for development tools. Cur
 ### Overview
 Flipper consists of a desktop interface built with javascript on top of Electron so that it can be packaged to run on any operating system.
 
-This desktop app connects over a [tcp connection](establishing-a-connection) to applications running on simulators and connected devices. An application running on a device or simulator is what we refer to as a client.
+This desktop app connects over a [tcp connection](establishing-a-connection.mdx) to applications running on simulators and connected devices. An application running on a device or simulator is what we refer to as a client.
 
 The connection is bi-directional, allowing the desktop to query information from the client as well as the client to push updates directly to the desktop.
 
@@ -19,4 +19,4 @@ There are two kinds of plugins in Flipper, client plugins and desktop plugins. C
 
 ### Architecture - React Native
 Simplified visualization of Flipper architecture, when used with React Native.
-<img alt="Flipper communication diagram" src={useBaseUrl("img/flipper-communication-diagram.png")} />
+<img alt="Flipper communication diagram" src={useBaseUrl("img/flipper-communication-diagram.png")} />

docs/extending/create-plugin.mdx

@@ -411,7 +411,7 @@ For React Native and JavaScript we have a simple game of Tic Tac Toe:
 
 ## Background Plugins
 
-In some cases you may want to provide data to Flipper even when your plugin is not currently active. Returning true in `runInBackground()` will result in `onConnect` being called as soon as Flipper connects, and allow you to use the connection at any time. See the [Client Plugin Lifecycle](client-plugin-lifecycle) for more details.
+In some cases you may want to provide data to Flipper even when your plugin is not currently active. Returning true in `runInBackground()` will result in `onConnect` being called as soon as Flipper connects, and allow you to use the connection at any time. See the [Client Plugin Lifecycle](client-plugin-lifecycle.mdx) for more details.
 
 The benefit is that the desktop plugin can process this data in the background and fire notifications. It also reduces the number of renders and time taken to display the data when the plugin becomes active.
 

docs/extending/deeplinks.mdx

@@ -29,6 +29,6 @@ Using this deeplink format will make sure that:
 
 ### Handling deeplinks in the plugin
 
-If a plugin is opened through a deeplink, for which a `payload` was set, the [`onDeepLink`](flipper-plugin#ondeeplink) handler will be triggered directly after initializing and rendering the plugin.
+If a plugin is opened through a deeplink, for which a `payload` was set, the [`onDeepLink`](flipper-plugin.mdx#ondeeplink) handler will be triggered directly after initializing and rendering the plugin.
 
-Note that the same payload format can also be used to open other plugins programmatically from inside another plugin, by passing the payload as second argument to [`selectPlugin`](flipper-plugin#selectplugin).
+Note that the same payload format can also be used to open other plugins programmatically from inside another plugin, by passing the payload as second argument to [`selectPlugin`](flipper-plugin.mdx#selectplugin).

docs/extending/dev-setup.mdx

@@ -48,7 +48,7 @@ When developing Flipper plugins we strongly recommend to run from Flipper itself
 - Automatic transpilation and bundling of loaded plugins: ES6, TypeScript, JSX.
 - Automatic refresh after code changes.
 - React and Redux Dev Tools.
-- [Debugging](debugging) using Chrome Dev Tools or Visual Studio Code.
+- [Debugging](debugging.mdx) using Chrome Dev Tools or Visual Studio Code.
 - Additional debug information like React warnings and performance metrics.
 
 Prerequisites for Flipper development build:
@@ -166,6 +166,6 @@ To start Flipper against a specific OnDemand instance, set FB_ONDEMAND flag, e.g
 
 Make sure your new functionality is covered with tests, and run `yarn test` or `yarn test --watch` in the `desktop/` directory to verify that they pass.
 
-See the [testing](testing) page for more details on writing and running test.
+See the [testing](testing.mdx) page for more details on writing and running test.
 
 To make sure you don't get any lint/formatting errors, run `yarn lint` before submitting your diff. Some errors (especially formatting errors can be auto-fixed by running `yarn fix`

docs/extending/establishing-a-connection.mdx

@@ -42,7 +42,7 @@ To get the desktop app to generate a client certificate for your client, and the
 
 Use an RSocket client to connect (insecurely) to the following URL:
 
-(Parameters are defined in [Implementing a Flipper Client](new-clients))
+(Parameters are defined in [Implementing a Flipper Client](new-clients.mdx))
 ```
 localhost:8089/sonar?os={OS}
                      &device={DEVICE}

docs/extending/flipper-plugin.mdx

@@ -71,7 +71,7 @@ In contrast, `isConnected` returns a boolean that merely captures the current st
 
 Usage: `client.onMessage(event: string, callback: (params) => void)`
 
-This subscribes the plugin to a specific event that is fired from the client plugin (using [`connection.send`](../extending/create-plugin#push-data-to-the-desktop)).
+This subscribes the plugin to a specific event that is fired from the client plugin (using [`connection.send`](../extending/create-plugin.mdx#push-data-to-the-desktop)).
 Typically used to update some of the [state](#createstate).
 For background plugins that are currently not active in the UI, messages won't arrive immediately, but are queued until the user opens the plugin.
 
@@ -99,7 +99,7 @@ export function plugin(client: PluginClient<Events, {}>) {
 }
 ```
 
-The Flipper Sample application contains a plugin that demonstrates these API, see [bi-directional-communication-demo](create-plugin#bi-directional-communication-demo).
+The Flipper Sample application contains a plugin that demonstrates these API, see [bi-directional-communication-demo](create-plugin.mdx#bi-directional-communication-demo).
 
 #### `onUnhandledMessage`
 
@@ -128,7 +128,7 @@ Usage: `client.onConnect(callback: () => void)`
 
 Triggered once the connection with the plugin on the client is established, and for example [`send`](#send) can be called safely.
 Typically, this happens when the plugin is activated (opened) in the Flipper Desktop.
-However, for [background plugins](create-plugin#background-plugins), this happens immediately after the plugin has been instantiated.
+However, for [background plugins](create-plugin.mdx#background-plugins), this happens immediately after the plugin has been instantiated.
 For archived / imported devices, this lifecycle is never triggered.
 
 #### `onDisconnect`
@@ -137,7 +137,7 @@ Usage: `client.onDisconnect(callback: () => void)`
 
 Triggered once the connection with the plugin on the client has been lost.
 Typically, this happens when the user leaves the plugin in the Flipper Desktop, when the plugin is disabled, or when the app or device has disconnected.
-However, for [background plugins](create-plugin#background-plugins), this event won't fire when the user merely navigates somewhere else.
+However, for [background plugins](create-plugin.mdx#background-plugins), this event won't fire when the user merely navigates somewhere else.
 In that case, [`onDeactivate`](#ondeactivate) can be used instead.
 
 #### `onDestroy`
@@ -207,7 +207,7 @@ If a plugin has complex initialization logic it is recommended to put it in the
 
 Usage: `client.send(method: string, params: object): Promise<object>`
 
-If the plugin is connected, `send` can be used to invoke a [method](create-plugin#[background-plugins#using-flipperconnection) on the client implementation of the plugin.
+If the plugin is connected, `send` can be used to invoke a [method](create-plugin.mdx#[background-plugins#using-flipperconnection) on the client implementation of the plugin.
 
 Note that if `client.isConnected` returns `false`, calling `client.send` will throw an exception. This is the case if for example the connection with the device or application was lost.
 Generally one should guard `client.send` calls with a check to `client.isConnected`.
@@ -237,7 +237,7 @@ export function plugin(client: PluginClient<{}, Methods>) {
 }
 ```
 
-The Flipper Sample application contains a plugin that demonstrates these API, see [bi-directional-communication-demo](create-plugin#bi-directional-communication-demo).
+The Flipper Sample application contains a plugin that demonstrates these API, see [bi-directional-communication-demo](create-plugin.mdx#bi-directional-communication-demo).
 
 #### `addMenuEntry`
 
@@ -414,7 +414,7 @@ See the similarly named method under [`PluginClient`](#pluginclient).
 ## Device
 
 `Device` captures the metadata of the device the plugin is currently connected to.
-Device objects are passed into the [`supportsDevice` method](../tutorial/js-custom#creating-a-device-plugin) of a device plugin, and available as `device` field on a [`DevicePluginClient`](#devicepluginclient).
+Device objects are passed into the [`supportsDevice` method](../tutorial/js-custom.mdx#creating-a-device-plugin) of a device plugin, and available as `device` field on a [`DevicePluginClient`](#devicepluginclient).
 
 ### Properties
 
@@ -737,14 +737,14 @@ Usage: `const instance = usePlugin(plugin)`
 Can be used by any component in the plugin, and gives the current `instance` that corresponds with the currently loaded plugin.
 The `plugin` parameter isn't actually used, but used to verify that a component is used correctly inside a mounted component, and helps with type inference.
 The returned `instance` method corresponds to the object that is returned from the `plugin` / `devicePlugin` definition.
-See the [tutorial](../tutorial/js-custom#building-an-user-interface-for-the-plugin) for how this hook is used in practice.
+See the [tutorial](../tutorial/js-custom.mdx#building-an-user-interface-for-the-plugin) for how this hook is used in practice.
 
 ### useValue
 
 Usage: `const currentValue = useValue(stateAtom)`
 
 Returns the current value of a state atom, and also subscribes the current component to future changes of the atom (in contrast to using `stateAtom.get()` directly).
-See the [tutorial](../tutorial/js-custom#building-an-user-interface-for-the-plugin) for how this hook is used in practice.
+See the [tutorial](../tutorial/js-custom.mdx#building-an-user-interface-for-the-plugin) for how this hook is used in practice.
 
 ### useLogger
 
@@ -1059,7 +1059,7 @@ Given a string or React element, returns a text representation of that element,
 
 The object `TestUtils` as exposed from `flipper-plugin` exposes utilities to write unit tests for Sandy plugins.
 Different utilities are exposed depending on whether you want to test a client or device plugin, and whether or not the component should be rendered or only the logic itself is going to be tested.
-It is recommended to follow the [tutorial](../tutorial/js-custom) first, as it explains how unit tests should be setup.
+It is recommended to follow the [tutorial](../tutorial/js-custom.mdx) first, as it explains how unit tests should be setup.
 
 ### Starting a plugin
 

docs/extending/loading-custom-plugins.mdx

@@ -36,9 +36,9 @@ Plugin File example structure:
 
 <OssOnly>
 
-Note: when using `npx flipper-pkg init` for scaffolding, as explained in the [tutorial](../tutorial/intro) or on the next page, the path should be configured automatically for you in most cases.
+Note: when using `npx flipper-pkg init` for scaffolding, as explained in the [tutorial](../tutorial/intro.mdx) or on the next page, the path should be configured automatically for you in most cases.
 
 </OssOnly>
 
 Typically, the above setup is only needed if you are developing plugins. 
-To consume plugins, it is recommended to use one of the existing [distribution mechanisms](plugin-distribution) instead.
+To consume plugins, it is recommended to use one of the existing [distribution mechanisms](plugin-distribution.mdx) instead.

docs/extending/plugin-distribution.mdx

@@ -11,7 +11,7 @@ import FbPluginReleases from './fb/desktop-plugin-releases.mdx'
 
 Flipper plugins are essentially standard npm packages. So you can publish them by executing `yarn publish` or `npm publish` in the plugin directory. The only requirements are:
 
-1. `package.json` and code [must follow the Flipper plugin specification](desktop-plugin-structure#plugin-definition)
+1. `package.json` and code [must follow the Flipper plugin specification](desktop-plugin-structure.mdx#plugin-definition)
 2. code must be bundled using "flipper-pkg" before packing or publishing. This can be done by executing `flipper-pkg bundle` on `prepack` step:
     ```json
     {

docs/extending/testing.mdx

@@ -16,9 +16,9 @@ Developer tools are only used if they work. We have built APIs to test plugins.
 
 Flipper uses [Jest](https://jestjs.io/) as unit testing framework.
 
-Writing unit tests for Flipper Desktop plugins is covered in detail in the [tutorial](../../docs/tutorial/js-custom#testing-plugin-logic).
+Writing unit tests for Flipper Desktop plugins is covered in detail in the [tutorial](../../docs/tutorial/js-custom.mdx#testing-plugin-logic).
 
-The `flipper-plugin` package provide several [test utilities](../../docs/extending/flipper-plugin#testutils) to make testing more convenient.
+The `flipper-plugin` package provide several [test utilities](../../docs/extending/flipper-plugin.mdx#testutils) to make testing more convenient.
 
 ## Client plugins
 
@@ -190,4 +190,4 @@ Then click the <-> icon  in xcode and you can run them there.
 
 ### React Native
 
-See [testing React Native](testing-rn).
+See [testing React Native](testing-rn.mdx).