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.
 

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).

docs/features/index.mdx

@@ -4,7 +4,7 @@ title: Features
 ---
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](plugins/device-logs), [Layout Inspector](plugins/inspector) and [Network Inspector](plugins/network) 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.
+Flipper itself only provides the architectural platform. What makes it useful are the plugins built on top of it: [Logs](plugins/device-logs.mdx), [Layout Inspector](plugins/inspector.mdx) and [Network Inspector](plugins/network.mdx) 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.
 
 <img alt="Plugins" src={useBaseUrl('img/plugins.png')} />
 

docs/troubleshooting.mdx

@@ -212,7 +212,7 @@ Another way to fix this is to set the `resolutions` field in the `package.json`
 
 #### iOS Build errors in React Native
 
-First, make sure your cocoapods is up to date (`sudo gem install cocoapods`), and that you are using the [latest FlipperKit](getting-started/react-native#using-the-latest-flipper-sdk).
+First, make sure your cocoapods is up to date (`sudo gem install cocoapods`), and that you are using the [latest FlipperKit](getting-started/react-native.mdx#using-the-latest-flipper-sdk).
 
 For inexplainable build errors, clone and verify if our [reference project](https://github.com/facebook/flipper/tree/main/react-native/ReactNativeFlipperExample) builds and runs locally. If it does, we recommend to compare the `package.json` and `ios/Podfile` files with yours. If that doesn't yield anything, compare the `ios/Podfile.lock` as well to verify any transitive pod dependencies need updating.
 
@@ -228,7 +228,7 @@ For inexplainable build errors, clone and verify if our [reference project](http
 
 ####  Swift errors
 
-If you experience errors such as `Undefined symbol: associated type descriptor for FloatLiteralType` or `Undefined symbol: __swift_FORCE_LOAD_$_swiftCompatibility50` after going through the [Getting Started](getting-started/index) tutorial you must do as follows:
+If you experience errors such as `Undefined symbol: associated type descriptor for FloatLiteralType` or `Undefined symbol: __swift_FORCE_LOAD_$_swiftCompatibility50` after going through the [Getting Started](getting-started/index.mdx) tutorial you must do as follows:
 
 1. Open your project in Xcode;
 1. Click in your project's name on the left side;

docs/tutorial/js-custom.mdx

@@ -80,7 +80,7 @@ and determines the events available for `client.onMessage` (see below).
 In our example, only one event can occur, `newRow`, as defined at `(2)`.
 But typically there are more.
 The data provided by this `newRow` event is described with the `Row` type, as defined at `(3)`.
-The event names and data structures should correspond with the data that is send using [`connection.send`](../extending/create-plugin#push-data-to-the-desktop) from the client.
+The event names and data structures should correspond with the data that is send using [`connection.send`](../extending/create-plugin.mdx#push-data-to-the-desktop) from the client.
 
 From our `plugin` function, as shown at `(4)`, we have to return an object that captures the entire API we want to expose from our plugin to our UI components and unit tests.
 In this case, we return the state atoms `rows` and `selectedID`, and expose the `setSelection` method.
@@ -89,7 +89,7 @@ In this case, we return the state atoms `rows` and `selectedID`, and expose the
 
 Since the `plugin` function will execute only once during the entire life-cycle of the plugin, we can use local variables in the function body to preserve state.
 In our example, we create two pieces of state, the set of rows available, `rows`, and the current selection: `selectionID`. See `(5)`.
-For larger data collections, we strongly recommend to leverage the better optimized [`createDataSource`](../extending/flipper-plugin#createdatasource), but in this simple example `createState` will suffice for the small data set.
+For larger data collections, we strongly recommend to leverage the better optimized [`createDataSource`](../extending/flipper-plugin.mdx#createdatasource), but in this simple example `createState` will suffice for the small data set.
 
 It is possible to store state directly in `let` declarations, but `createState` creates a storage container that gives us a few advantages.
 Most importantly, state created using `createState` can be subscribed to by our UI components using the `useValue` hook.

docs/tutorial/js-setup.mdx

@@ -39,4 +39,4 @@ Now that our package has been set up, we are ready to build a UI for our plugin.
 
 </OssOnly>
 
-For more background on the generated files and overal plugin structure, see the [Plugin Structure](../extending/desktop-plugin-structure) page.
+For more background on the generated files and overal plugin structure, see the [Plugin Structure](../extending/desktop-plugin-structure.mdx) page.

docs/tutorial/js-table.mdx

@@ -77,7 +77,7 @@ The string `"newRow"` that is used here refers back to identifier we used with `
 
 The `key` property is optional, but by setting it the `'id'` field will be used as identifier. As a result, once a `newRow` message arrives with an existing `id`, it will overwrite the old entry, rather than appending a new one.
 
-The `createTablePlugin` API supports more options, which are documented [here](../extending/flipper-plugin#createtableplugin).
+The `createTablePlugin` API supports more options, which are documented [here](../extending/flipper-plugin.mdx#createtableplugin).
 
 And that's it! Starting Flipper will now compile your
 plugin and connect to the native side. It's a good

website/docusaurus.config.js

@@ -23,6 +23,7 @@ const siteConfig = {
     external: 'https://fbflipper.com/',
   }),
   baseUrl: '/',
+  trailingSlash: true,
   projectName: 'flipper',
   // TODO: T69061026 enable once sandy docs are complete: external_domain: 'fbflipper.com',
   themeConfig: {