diff --git a/docs/architecture.md b/docs/extending/architecture.md similarity index 98% rename from docs/architecture.md rename to docs/extending/architecture.md index 3fa42d8a6..9ceda2244 100644 --- a/docs/architecture.md +++ b/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. diff --git a/docs/create-plugin.md b/docs/extending/create-plugin.md similarity index 99% rename from docs/create-plugin.md rename to docs/extending/create-plugin.md index 8eef62291..0b2cebd1a 100644 --- a/docs/create-plugin.md +++ b/docs/extending/create-plugin.md @@ -1,7 +1,6 @@ --- id: create-plugin title: Mobile Setup -sidebar_label: Mobile Setup --- ## Implement FlipperPlugin diff --git a/docs/create-table-plugin.md b/docs/extending/create-table-plugin.md similarity index 98% rename from docs/create-table-plugin.md rename to docs/extending/create-table-plugin.md index 7c11991cd..258e36414 100644 --- a/docs/create-table-plugin.md +++ b/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. diff --git a/docs/error-handling.md b/docs/extending/error-handling.md similarity index 98% rename from docs/error-handling.md rename to docs/extending/error-handling.md index 062107f9a..eb7fefdeb 100644 --- a/docs/error-handling.md +++ b/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. diff --git a/docs/establishing-a-connection.md b/docs/extending/establishing-a-connection.md similarity index 98% rename from docs/establishing-a-connection.md rename to docs/extending/establishing-a-connection.md index f7e7592aa..8a08912de 100644 --- a/docs/establishing-a-connection.md +++ b/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. diff --git a/docs/extending/index.md b/docs/extending/index.md new file mode 100644 index 000000000..5cabfc063 --- /dev/null +++ b/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. diff --git a/docs/jssetup.md b/docs/extending/jssetup.md similarity index 98% rename from docs/jssetup.md rename to docs/extending/jssetup.md index a31946cb4..ebab8f751 100644 --- a/docs/jssetup.md +++ b/docs/extending/jssetup.md @@ -1,7 +1,6 @@ --- id: js-setup title: JavaScript Setup -sidebar_label: JavaScript Setup --- ## Creating the plugin UI diff --git a/docs/send-data.md b/docs/extending/send-data.md similarity index 98% rename from docs/send-data.md rename to docs/extending/send-data.md index e572b9c06..cefa26c0f 100644 --- a/docs/send-data.md +++ b/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. diff --git a/docs/styling-components.md b/docs/extending/styling-components.md similarity index 98% rename from docs/styling-components.md rename to docs/extending/styling-components.md index 03e46ee14..59e04a1a7 100644 --- a/docs/styling-components.md +++ b/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. diff --git a/docs/testing.md b/docs/extending/testing.md similarity index 99% rename from docs/testing.md rename to docs/extending/testing.md index 4e8a85ed9..3440c89a1 100644 --- a/docs/testing.md +++ b/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. diff --git a/docs/writing-a-plugin.md b/docs/extending/writing-a-plugin.md similarity index 99% rename from docs/writing-a-plugin.md rename to docs/extending/writing-a-plugin.md index d14a88013..8229f6249 100644 --- a/docs/writing-a-plugin.md +++ b/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). diff --git a/docs/getting-started.md b/docs/getting-started.md index 16d458fab..3686fee3c 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -279,8 +279,8 @@ 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? -See the [troubleshooting page](troubleshooting.html) for help with known problems. \ No newline at end of file +See the [troubleshooting page](troubleshooting.html) for help with known problems. diff --git a/website/i18n/en.json b/website/i18n/en.json index 23c5c4b54..21fadd5f0 100644 --- a/website/i18n/en.json +++ b/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": { - "title": "Error Handling", - "sidebar_label": "Error Handling" + "extending/arch": { + "title": "Architecture" }, - "establishing-a-connection": { - "title": "Establishing a connection", - "sidebar_label": "Establishing a connection" + "extending/create-plugin": { + "title": "Mobile Setup" + }, + "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" } }, diff --git a/website/sidebars.json b/website/sidebars.json index cb84a5a16..02585db37 100644 --- a/website/sidebars.json +++ b/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", - "writing-a-plugin", - "create-table-plugin", - "communicating", - "ui-components", - "styling-components", - "create-plugin", - "send-data", - "error-handling", - "testing" + "extending/js-setup", + "extending/writing-a-plugin", + "extending/create-table-plugin", + "extending/communicating", + "extending/ui-components", + "extending/styling-components", + "extending/create-plugin", + "extending/send-data", + "extending/error-handling", + "extending/testing" ], - "Advanced Usage": ["custom-ports", "stetho"], "Internals": ["arch", "establishing-a-connection"] } } diff --git a/website/siteConfig.js b/website/siteConfig.js index b6820dc34..0e746de7e 100644 --- a/website/siteConfig.js +++ b/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/',