Move plugin docs to plugin folders

Summary: Moved plugin documentation and related assets to plugin folders, fixed links and configured redirects where required. Now these docs are used for both showing docs in Flipper and generating Flipper docs website.

Reviewed By: passy

Differential Revision: D29465567

fbshipit-source-id: 3ec4240b215b0d5baea5154f64266a9ba7ead3a5

desktop/plugins/public/crash_reporter/docs/overview.mdx

@@ -1,12 +1,5 @@
----
-id: crash-reporter-plugin
-title: Crash Reporter
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-→ [See setup instructions for the Crash Reporter](../setup/crash-reporter-plugin.mdx)
-
-
 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.
 
 <img alt="UI" src={useBaseUrl("img/crashreporterplugin.png")} />

desktop/plugins/public/crash_reporter/docs/setup.mdx

@@ -1,12 +1,7 @@
----
-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 <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.
+You do not have to instantiate it in your app in order to use its basic functionality mentioned <Link to={useBaseUrl("/docs/features/plugins/crash-reporter")}>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
 

desktop/plugins/public/databases/docs/overview.mdx

@@ -1,11 +1,5 @@
----
-id: databases-plugin
-title: Databases
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-→ [See setup instructions for the Databases plugin](../setup/databases-plugin.mdx)
-
 The Databases plugin provides developers with read-write access to their databases:
 - browse your tables' data
 - see your tables' structure

desktop/plugins/public/databases/docs/setup.mdx

@@ -1,9 +1,3 @@
----
-id: databases-plugin
-title: Databases Plugin Setup
-sidebar_label: Databases
----
-
 To use the databases plugin, you need to add the plugin to your Flipper client instance. The plugin is currently only available for Android.
 
 ## Android

desktop/plugins/public/fresco/docs/overview.mdx

@@ -1,11 +1,5 @@
----
-id: images-plugin
-title: Images
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-→ [See setup instructions for the images plugin](../setup/images-plugin.mdx)
-
 The images plugin allows you to inspect what images were fetched, where they are
 coming from and selectively clear caches. Currently, the plugin supports
 [Fresco](https://github.com/facebook/fresco/) as backend.

desktop/plugins/public/fresco/docs/setup.mdx

@@ -1,9 +1,3 @@
----
-id: images-plugin
-title: Images Setup
-sidebar_label: Images
----
-
 Currently, the images plugin only supports [Fresco](https://frescolib.org/) for Android as backend, but just like the network plugin, support for other image loading libraries
 could easily be added. Send us a PR!
 

desktop/plugins/public/layout/docs/overview.mdx

@@ -1,11 +1,5 @@
----
-id: layout-plugin
-title: Layout Inspector
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-→ [See setup instructions for the Layout Inspector](../setup/layout-plugin.mdx)
-
 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.
 
 The Layout tab supports [Litho](https://fblitho.com) and [ComponentKit](https://componentkit.org) components as well. We integrate with these frameworks to present components in the hierarchy just as if they were native views. We show you all the layout properties, props, and state of the components. The layout inspector is further extensible to support other UI frameworks.

desktop/plugins/public/layout/docs/setup.mdx

@@ -1,9 +1,3 @@
----
-id: layout-plugin
-title: Layout Inspector Setup
-sidebar_label: Layout Inspector
----
-
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 

desktop/plugins/public/leak_canary/docs/overview.mdx

@@ -1,11 +1,5 @@
----
-id: leak-canary-plugin
-title: LeakCanary
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-→ See setup instructions for [LeakCanary 1](../setup/leak-canary-plugin.mdx) or [LeakCanary 2](../setup/leak-canary-2-plugin.mdx)
-
 The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library.
 
 Leaks detected by LeakCanary will appear automatically in Flipper. Each leak will display a hierarchy of objects, beginning from the garbage collector root and ending at the leaked class.

desktop/plugins/public/leak_canary/docs/setup.mdx

@@ -1,9 +1,3 @@
----
-id: leak-canary-2-plugin
-title: LeakCanary 2 Setup
-sidebar_label: LeakCanary 2
----
-
 Ensure that you already have an explicit dependency in your application's
 `build.gradle` including the plugin dependency, e.g.
 

desktop/plugins/public/logs/docs/overview.mdx

@@ -1,7 +1,3 @@
----
-id: logs-plugin
-title: Logs
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 The Logs plugin shows device logs without any additional setup. This is a device plugin, meaning that it is not tied to any specific app and there is no additional setup needed to see the logs.

desktop/plugins/public/navigation/docs/overview.mdx

@@ -1,11 +1,5 @@
----
-id: navigation-plugin
-title: Navigation
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-→ [See setup instructions for the Navigation Plugin](../setup/navigation-plugin.mdx)
-
 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.
 
 <img alt="Navigation Plugin Button" src={useBaseUrl("img/navigation-plugin-1.png")} />

desktop/plugins/public/navigation/docs/setup.mdx

@@ -1,10 +1,4 @@
----
+import FbNavigationPluginSetup from './fb/setup.mdx';
-id: navigation-plugin
-title: Navigation Plugin Setup
-sidebar_label: Navigation
----
-
-import FbNavigationPluginSetup from '../fb/Navigation-Plugin.mdx';
 
 <FbInternalOnly>
 

desktop/plugins/public/network/docs/protobuf-retrofit.mdx

@@ -1,10 +1,4 @@
----
+### Gradle Dependencies
-id: protobuf-retrofit-plugin
-title: Protobut + Retrofit Setup
-sidebar_label: Protobut + Retrofit
----
-
-## Gradle Dependencies
 
 Ensure that you already have an explicit dependency in your application's
 `build.gradle` including the plugin dependency, e.g.
@@ -15,17 +9,11 @@ dependencies {
   implementation "com.squareup.retrofit2:converter-protobuf:2.9.0"
   
   // update version below to match latest Flipper client app
-  debugImplementation "com.facebook.flipper:flipper:0.84.0"
-  debugImplementation "com.facebook.flipper:flipper-network-plugin:0.84.0"
   debugImplementation "com.facebook.flipper:flipper-retrofit2-protobuf-plugin:0.84.0"
 }
 ```
 
-## Network Plugin Requirement
+### Sending Retrofit Service
-
-Ensure that `NetworkFlipperPlugin` is added as shown in the [Network setup guide](https://fbflipper.com/docs/setup/network-plugin#android)
-
-## Sending Retrofit Service
 
 Suppose you have a Retrofit service interface `PersonService` which has Protobuf body or return types. At the time you create your implementation, call the plugin with your `baseUrl` and service class:
 

desktop/plugins/public/network/docs/setup.mdx

@@ -1,5 +1,6 @@
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import ProtobufRetrofitSetup from './protobuf-retrofit.mdx';
 
 To use the network plugin, you need to add the plugin to your Flipper client instance.
 
@@ -94,3 +95,7 @@ client?.add(FlipperKitNetworkPlugin(networkAdapter: SKIOSNetworkAdapter()))
 
 </TabItem>
 </Tabs>
+
+## Protobut + Retrofit Setup
+
+<ProtobufRetrofitSetup />

desktop/plugins/public/sandbox/docs/overview.mdx

@@ -1,9 +1,3 @@
----
-id: sandbox-plugin
-title: Sandbox
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-→ [See setup instructions for the Sandbox plugin](../setup/sandbox-plugin.mdx)
-
 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. 

desktop/plugins/public/sandbox/docs/setup.mdx

@@ -1,9 +1,3 @@
----
-id: sandbox-plugin
-title: Sandbox Setup
-sidebar_label: Sandbox
----
-
 To use the sandbox plugin, you need to add the plugin to your Flipper client instance. Currently the plugin is only supported on Android.
 
 ## Android

desktop/plugins/public/shared_preferences/docs/overview.mdx

@@ -1,11 +1,5 @@
----
-id: shared-preferences-plugin
-title: Shared Preferences
----
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
-→ [See setup instructions for the Shared Preferences plugin](../setup/shared-preferences-plugin.mdx)
-
 Easily inspect and modify the data contained within your app's shared preferences.
 
 <img alt="Shared Preferences Plugin" src={useBaseUrl("img/shared-preferences.png")} />

desktop/plugins/public/shared_preferences/docs/setup.mdx

@@ -1,9 +1,3 @@
----
-id: shared-preferences-plugin
-title: Shared Preferences Setup
-sidebar_label: Shared Preferences
----
-
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 

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](logs-plugin), [Layout Inspector](layout-plugin) 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), [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.
 
 <img alt="Plugins" src={useBaseUrl('img/plugins.png')} />
 

docs/setup/leak-canary-plugin.mdx

@@ -1,39 +0,0 @@
----
-id: leak-canary-plugin
-title: LeakCanary Setup
-sidebar_label: LeakCanary
----
-
-Ensure that you already have an explicit dependency in your application's
-`build.gradle` including the plugin dependency, e.g.
-
-```groovy
-dependencies {
-  debugImplementation 'com.facebook.flipper:flipper-leakcanary-plugin:0.95.0'
-  debugImplementation 'com.squareup.leakcanary:leakcanary-android:1.6.1'
-  releaseImplementation 'com.squareup.leakcanary:leakcanary-android-no-op:1.6.1'
-}
-```
-
-First, add the plugin to your Flipper client instance:
-```java
-import com.facebook.flipper.plugins.leakcanary.LeakCanaryFlipperPlugin;
-
-client.addPlugin(new LeakCanaryFlipperPlugin());
-```
-
-Next, build a custom RefWatcher using RecordLeakService: (see [LeakCanary docs](https://github.com/square/leakcanary/wiki/Customizing-LeakCanary#uploading-to-a-server) for more information on RefWatcher)
-```java
-import com.facebook.flipper.plugins.leakcanary.RecordLeakService;
-
-RefWatcher refWatcher = LeakCanary.refWatcher(this)
-    .listenerServiceClass(RecordLeakService.class)
-    .buildAndInstall();
-```
-
-
-Then, add the `RecordLeakService` in your debug variant AndroidManifest.xml.
-
-```xml
-<service android:name="com.facebook.flipper.plugins.leakcanary.RecordLeakService" />
-```

website/docusaurus.config.js

@@ -238,6 +238,33 @@ const siteConfig = {
             to: '/docs/getting-started/index',
             from: ['/docs/fb/index'],
           },
+          { from: ['/docs/features/network-plugin'], to: '/docs/features/plugins/network' },          
+          { from: ['/docs/features/logs-plugin'], to: '/docs/features/plugins/device-logs' },
+          { from: ['/docs/features/layout-plugin'], to: '/docs/features/plugins/inspector' },
+          { from: ['/docs/features/navigation-plugin'], to: '/docs/features/plugins/navigation' },
+          { from: ['/docs/features/databases-plugin'], to: '/docs/features/plugins/databases' },
+          { from: ['/docs/features/images-plugin'], to: '/docs/features/plugins/fresco' },
+          { from: ['/docs/features/sandbox-plugin'], to: '/docs/features/plugins/sandbox' },
+          { from: ['/docs/features/shared-preferences-plugin'], to: '/docs/features/plugins/preferences' },
+          { from: ['/docs/features/leak-canary-plugin'], to: '/docs/features/plugins/leak-canary' },
+          { from: ['/docs/features/crash-reporter-plugin'], to: '/docs/features/plugins/crash-reporter' },
+          { from: ['/docs/setup/network-plugin'], to: '/docs/setup/plugins/network' },
+          { from: ['/docs/setup/layout-plugin'], to: '/docs/setup/plugins/inspector'},
+          { from: ['/docs/setup/navigation-plugin'], to: '/docs/setup/plugins/navigation'},
+          { from: ['/docs/setup/databases-plugin'], to: '/docs/setup/plugins/databases'},
+          { from: ['/docs/setup/images-plugin'], to: '/docs/setup/plugins/fresco'},
+          { from: ['/docs/setup/sandbox-plugin'], to: '/docs/setup/plugins/sandbox'},
+          { from: ['/docs/setup/shared-preferences-plugin'], to: '/docs/setup/plugins/preferences'},
+          { from: ['/docs/setup/leak-canary-plugin'], to: '/docs/setup/plugins/leak-canary'},
+          { from: ['/docs/setup/leak-canary-2-plugin'], to: '/docs/setup/plugins/leak-canary'},
+          { from: ['/docs/setup/crash-reporter-plugin'], to: '/docs/setup/plugins/crash-reporter'},
+          ...fbInternalOnly([
+            { from: ['/docs/fb/Memory-Tools'], to: '/docs/features/plugins/memory-tools' },
+            { from: ['/docs/fb/supporting-feed-inspector'], to: '/docs/features/plugins/feed-inspector' },
+            { from: ['/docs/fb/sections'], to: '/docs/features/plugins/sections' },
+            { from: ['/docs/fb/Trace'], to: '/docs/features/plugins/tracery' },
+            { from: ['/docs/fb/mobile-config'], to: '/docs/features/plugins/mobile-config' },
+            ]),
         ],
       },
     ],

website/generate-plugin-docs.ts

@@ -51,7 +51,6 @@ async function generatePluginDocs() {
   const publicDirs = (await fs.readdir(pluginsDir)).map(dir => path.join(pluginsDir, dir));
   const fbDirs = process.env.FB_INTERNAL ? (await fs.readdir(fbPluginsDir)).map(dir => path.join(fbPluginsDir, dir)) : [];
   const allDirs = [...publicDirs, ...fbDirs];
-  console.log(allDirs.length);
   for (const pluginSourceDir of allDirs) {
     const pluginSourceDocsDir = path.join(pluginSourceDir, 'docs');    
     const packageJsonPath = path.join(pluginSourceDir, 'package.json');

website/sidebars.js

@@ -13,23 +13,9 @@ module.exports = {
   features: {
     Features: [
       'features/index',
-      'features/logs-plugin',
-      'features/layout-plugin',
-      'features/navigation-plugin',
-      'features/databases-plugin',
-      'features/images-plugin',
-      'features/sandbox-plugin',
-      'features/shared-preferences-plugin',
-      'features/leak-canary-plugin',
-      'features/crash-reporter-plugin',
       'features/share-flipper-data',
       'features/react-native',
       ...fbInternalOnly([                        
-        'fb/Memory-Tools',
-        'fb/supporting-feed-inspector',
-        'fb/sections',
-        'fb/Trace',
-        'fb/mobile-config',
         'fb/plugins',
       ]),
     ],
@@ -85,17 +71,6 @@ module.exports = {
       },
     ],
     'Plugin Setup': [
-      'setup/layout-plugin',
-      'setup/navigation-plugin',
-      'setup/databases-plugin',
-      'setup/images-plugin',
-      'setup/sandbox-plugin',
-      'setup/shared-preferences-plugin',
-      'setup/leak-canary-plugin',
-      'setup/leak-canary-2-plugin',
-      'setup/crash-reporter-plugin',
-    ],
-    Plugins: [
       {
         type: 'autogenerated',
         dirName: 'setup/plugins',