Add Setup and Extending top level navs

Summary: Distinguish between integrating flipper, and developing plugins.

Reviewed By: passy

Differential Revision: D15148448

fbshipit-source-id: 7c772fa1cea7d5ed789a984039afc37bc0b8a927

docs/extending/architecture.md

@@ -1,7 +1,6 @@
 ---
 id: arch
 title: Architecture
-sidebar_label: Architecture
 ---
 
 Flipper is built to be a universal pluggable platform for development tools. Currently Flipper focuses on Android and iOS development but its design does not limit it to these platforms. Another way to think of Flipper is a more general purpose implementation of Chrome DevTools.

docs/extending/create-plugin.md

@@ -1,7 +1,6 @@
 ---
 id: create-plugin
 title: Mobile Setup
-sidebar_label: Mobile Setup
 ---
 
 ## Implement FlipperPlugin

docs/extending/create-table-plugin.md

@@ -1,7 +1,6 @@
 ---
 id: create-table-plugin
 title: Create Table Plugin
-sidebar_label: Create Table Plugin
 ---
 
 A very common kind of Flipper plugin is a plugin which fetches some structured data from the device and presents it in a table.

docs/extending/error-handling.md

@@ -1,7 +1,6 @@
 ---
 id: error-handling
 title: Error Handling
-sidebar_label: Error Handling
 ---
 
 Errors in Flipper plugins should be hidden from the user while providing actionable data to the plugin developer.

docs/extending/establishing-a-connection.md

@@ -1,7 +1,6 @@
 ---
 id: establishing-a-connection
 title: Establishing a connection
-sidebar_label: Establishing a connection
 ---
 
 Below is an outline of how a connection is established between an app with with our SDK integrated, and the desktop app. This all goes on behind the scenes inside the mobile SDK, so users shouldn't need to worry about it.

docs/extending/index.md

@@ -0,0 +1,8 @@
+---
+id: index
+title: Clients and Plugins
+---
+
+Flipper was designed with extensibility in mind from the start, to enable engineers to quickly build quality, easy-to-use tools for their own needs and applications.
+
+In addition to building plugins for the existing platforms, you can also extend the capabilities of Flipper to other platforms by conforming to the `FlipperClient` API. After this, you can make use of the existing desktop plugins by writing client plugins that conform to the same API.

docs/extending/jssetup.md

@@ -1,7 +1,6 @@
 ---
 id: js-setup
 title: JavaScript Setup
-sidebar_label: JavaScript Setup
 ---
 
 ## Creating the plugin UI

docs/extending/send-data.md

@@ -1,7 +1,6 @@
 ---
 id: send-data
 title: Sending Data to Plugins
-sidebar_label: Send Data
 ---
 
 It is often useful to get an instance of a Flipper plugin to send data to it. Flipper makes this simple with built-in support.

docs/extending/styling-components.md

@@ -1,7 +1,6 @@
 ---
 id: styling-components
 title: Styling Components
-sidebar_label: Styling Components
 ---
 
 We are using [emotion](https://emotion.sh) to style our components. For more details on how this works, please refer to emotion's documentation. We heavily use their [Styled Components](https://emotion.sh/docs/styled) approach, which allows you to extend our built-in components.

docs/extending/testing.md

@@ -1,7 +1,6 @@
 ---
 id: testing
 title: Testing
-sidebar_label: Testing
 ---
 
 Developer tools are only used if they work. We have built APIs to test plugins.

docs/extending/writing-a-plugin.md

@@ -1,7 +1,6 @@
 ---
 id: writing-a-plugin
 title: Writing a plugin in JavaScript
-sidebar_label: Writing a plugin
 ---
 
 Every plugin needs to be self-contained in its own folder. At the root-level of this folder we are expecting a `package.json` for your plugin and an `index.js` file which is the entry-point to your plugin. To learn more about the basic setup of a plugin, have a look at [JavaScript Setup](jssetup.md).

docs/getting-started.md

@@ -279,7 +279,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
 
 ## Ready for takeoff
 
-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](network-plugin.md) and [Layout Inspector Plugin](layout-plugin.md) 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](setup/network-plugin.md) and [Layout Inspector Plugin](setup/layout-plugin.md) 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?
 

website/i18n/en.json

@@ -5,33 +5,46 @@
     "previous": "Previous",
     "tagline": "Extensible mobile app debugging",
     "docs": {
-      "arch": {
-        "title": "Architecture",
-        "sidebar_label": "Architecture"
-      },
       "communicating": {
         "title": "Device Communication",
         "sidebar_label": "Device Communication"
       },
-      "create-plugin": {
-        "title": "Mobile Setup",
-        "sidebar_label": "Mobile Setup"
-      },
-      "create-table-plugin": {
-        "title": "Create Table Plugin",
-        "sidebar_label": "Create Table Plugin"
-      },
       "custom-ports": {
         "title": "Running Flipper with different ports",
         "sidebar_label": "Using different ports"
       },
-      "error-handling": {
+      "extending/arch": {
-        "title": "Error Handling",
+        "title": "Architecture"
-        "sidebar_label": "Error Handling"
       },
-      "establishing-a-connection": {
+      "extending/create-plugin": {
-        "title": "Establishing a connection",
+        "title": "Mobile Setup"
-        "sidebar_label": "Establishing a connection"
+      },
+      "extending/create-table-plugin": {
+        "title": "Create Table Plugin"
+      },
+      "extending/error-handling": {
+        "title": "Error Handling"
+      },
+      "extending/establishing-a-connection": {
+        "title": "Establishing a connection"
+      },
+      "extending/index": {
+        "title": "Clients and Plugins"
+      },
+      "extending/js-setup": {
+        "title": "JavaScript Setup"
+      },
+      "extending/send-data": {
+        "title": "Sending Data to Plugins"
+      },
+      "extending/styling-components": {
+        "title": "Styling Components"
+      },
+      "extending/testing": {
+        "title": "Testing"
+      },
+      "extending/writing-a-plugin": {
+        "title": "Writing a plugin in JavaScript"
       },
       "features/crash-reporter-plugin": {
         "title": "Crash Reporter"
@@ -63,14 +76,6 @@
       "getting-started": {
         "title": "Getting Started"
       },
-      "js-setup": {
-        "title": "JavaScript Setup",
-        "sidebar_label": "JavaScript Setup"
-      },
-      "send-data": {
-        "title": "Sending Data to Plugins",
-        "sidebar_label": "Send Data"
-      },
       "setup/crash-reporter-plugin": {
         "title": "Crash Reporter Setup",
         "sidebar_label": "Crash Reporter"
@@ -99,14 +104,6 @@
         "title": "Stetho Guidance",
         "sidebar_label": "Stetho Guidance"
       },
-      "styling-components": {
-        "title": "Styling Components",
-        "sidebar_label": "Styling Components"
-      },
-      "testing": {
-        "title": "Testing",
-        "sidebar_label": "Testing"
-      },
       "troubleshooting": {
         "title": "Troubleshooting Issues",
         "sidebar_label": "Troubleshooting Issues"
@@ -114,23 +111,21 @@
       "ui-components": {
         "title": "UI Components",
         "sidebar_label": "UI Components"
-      },
-      "writing-a-plugin": {
-        "title": "Writing a plugin in JavaScript",
-        "sidebar_label": "Writing a plugin"
       }
     },
     "links": {
       "Features": "Features",
-      "Docs": "Docs",
+      "Setup": "Setup",
+      "Extending": "Extending",
       "GitHub": "GitHub"
     },
     "categories": {
       "Features": "Features",
       "Using Flipper": "Using Flipper",
       "Plugin Setup": "Plugin Setup",
-      "Plugin Development": "Plugin Development",
       "Advanced Usage": "Advanced Usage",
+      "Extending Flipper": "Extending Flipper",
+      "Plugin Development": "Plugin Development",
       "Internals": "Internals"
     }
   },

website/sidebars.json

@@ -12,7 +12,7 @@
       "features/share-flipper-data"
     ]
   },
-  "docs": {
+  "setup": {
     "Using Flipper": [
       "getting-started",
       "share-flipper-data",
@@ -26,19 +26,22 @@
       "setup/leak-canary-plugin",
       "setup/crash-reporter-plugin"
     ],
+    "Advanced Usage": ["custom-ports", "stetho"]
+  },
+  "extending": {
+    "Extending Flipper": ["extending/index"],
     "Plugin Development": [
-      "js-setup",
+      "extending/js-setup",
-      "writing-a-plugin",
+      "extending/writing-a-plugin",
-      "create-table-plugin",
+      "extending/create-table-plugin",
-      "communicating",
+      "extending/communicating",
-      "ui-components",
+      "extending/ui-components",
-      "styling-components",
+      "extending/styling-components",
-      "create-plugin",
+      "extending/create-plugin",
-      "send-data",
+      "extending/send-data",
-      "error-handling",
+      "extending/error-handling",
-      "testing"
+      "extending/testing"
     ],
-    "Advanced Usage": ["custom-ports", "stetho"],
     "Internals": ["arch", "establishing-a-connection"]
   }
 }

website/siteConfig.js

@@ -14,7 +14,8 @@ const siteConfig = {
   projectName: 'flipper',
   headerLinks: [
     {doc: 'features/index', label: 'Features'},
-    {doc: 'getting-started', label: 'Docs'},
+    {doc: 'getting-started', label: 'Setup'},
+    {doc: 'extending/index', label: 'Extending'},
     {href: repoUrl, label: 'GitHub'},
   ],
   editUrl: 'https://github.com/facebook/flipper/blob/master/docs/',