diff --git a/.gitignore b/.gitignore index 27d8ca3f1..3e3f83e75 100644 --- a/.gitignore +++ b/.gitignore @@ -36,4 +36,4 @@ libs/*/bin/**/*.class *.DS_Store # Automatically generated -docs/extending/ui-components.md +docs/extending/ui-components.mdx diff --git a/.travis.yml b/.travis.yml index f14685dbf..83941e06e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -23,7 +23,7 @@ matrix: skip-cleanup: true github-token: $GITHUB_TOKEN fqdn: fbflipper.com - local-dir: website/build/flipper + local-dir: website/build keep-history: true on: branch: master diff --git a/desktop/app/src/ui/components/Sheet.tsx b/desktop/app/src/ui/components/Sheet.tsx index a926cc9c9..2ce4ff010 100644 --- a/desktop/app/src/ui/components/Sheet.tsx +++ b/desktop/app/src/ui/components/Sheet.tsx @@ -47,7 +47,7 @@ type State = { type Props = OwnProps & DispatchFromProps & StateFromProps; /** - * Usage: {onHide => } + * Usage: `{onHide => }` */ class Sheet extends Component { static getDerivedStateFromProps(props: Props) { diff --git a/docs/assets/plugins.png b/docs/assets/plugins.png deleted file mode 100755 index 2d316b578..000000000 Binary files a/docs/assets/plugins.png and /dev/null differ diff --git a/docs/custom-ports.md b/docs/custom-ports.mdx similarity index 100% rename from docs/custom-ports.md rename to docs/custom-ports.mdx diff --git a/docs/extending/architecture.md b/docs/extending/architecture.mdx similarity index 100% rename from docs/extending/architecture.md rename to docs/extending/architecture.mdx diff --git a/docs/extending/client-plugin-lifecycle.md b/docs/extending/client-plugin-lifecycle.mdx similarity index 85% rename from docs/extending/client-plugin-lifecycle.md rename to docs/extending/client-plugin-lifecycle.mdx index 3e26227b6..3dcb619a6 100644 --- a/docs/extending/client-plugin-lifecycle.md +++ b/docs/extending/client-plugin-lifecycle.mdx @@ -2,6 +2,7 @@ id: client-plugin-lifecycle title: Client Plugin Lifecycle --- +import useBaseUrl from '@docusaurus/useBaseUrl'; There are two types of client plugin: Regular and Background plugins. We recommend starting off as a regular plugin and switching it to a background plugin if necessary. @@ -9,7 +10,7 @@ For both types of plugin, we recommend starting work after `onConnect` is called ## Regular Plugin Lifecycle For regular plugins, `onConnect` and `onDisconnect` are triggered when the user opens the plugin in the Flipper UI, and when they switch to another plugin, respectively. -![Regular Plugin Lifecycle diagram](assets/regular-plugin-lifecycle.png) +Regular Plugin Lifecycle diagram ## Background Plugin Lifecycle For background plugins, `onConnect` is called when Flipper first connects, and `onDisconnect` when it disconnects. The user does not need to be viewing the plugin for it to send messages; they will be queued up until the next time the user opens the plugin where they will be processed. @@ -19,5 +20,4 @@ Even for background plugins, `onDisconnect` and `onConnect` may be called on a p Note that a plugin must be enabled by the user for its messages to be queued up. -![Background Plugin Lifecycle diagram](assets/bg-plugin-lifecycle.png) - +Background Plugin Lifecycle diagram diff --git a/docs/extending/create-plugin.md b/docs/extending/create-plugin.mdx similarity index 100% rename from docs/extending/create-plugin.md rename to docs/extending/create-plugin.mdx diff --git a/docs/extending/create-table-plugin.md b/docs/extending/create-table-plugin.mdx similarity index 95% rename from docs/extending/create-table-plugin.md rename to docs/extending/create-table-plugin.mdx index 258e36414..5a5fe12dd 100644 --- a/docs/extending/create-table-plugin.md +++ b/docs/extending/create-table-plugin.mdx @@ -9,7 +9,7 @@ To make building these kinds of plugins as easy as possible we have created an a Below is a sample implementation of a desktop plugin based on `createTablePlugin`. It subscribes to updates from a client send using the `newRow` method. A row can have any structure you want as long as it has a unique field `id` of type `string`. -See "[Create Plugin](create-plugin.md)" for how to create the native counterpart for your plugin. +See "[Create Plugin](create-plugin)" for how to create the native counterpart for your plugin. ```javascript import {ManagedDataInspector, Panel, Text, createTablePlugin} from 'flipper'; diff --git a/docs/extending/debugging.md b/docs/extending/debugging.mdx similarity index 91% rename from docs/extending/debugging.md rename to docs/extending/debugging.mdx index b15bbd290..538a83495 100644 --- a/docs/extending/debugging.md +++ b/docs/extending/debugging.mdx @@ -2,6 +2,7 @@ id: debugging title: Debugging --- +import useBaseUrl from '@docusaurus/useBaseUrl'; ## Built-in Developer Tools @@ -17,13 +18,13 @@ As an alternative to using built-in Developer Tools you can also attach to the r To attach the running Flipper instance open new tab in Google Chrome, navigate to "http://localhost:9222" and choose "Flipper" in the opened list. -![Attach From Google Chrome](assets/debugging-from-google-chrome.png) +Attach From Google Chrome ## Visual Studio Code If you prefer to use the same editor for both coding and debugging, you can attach to the running Flipper instance for debugging right from Visual Studio Code. First of all, you need to install extension "Debugger for Chrome". Then, to start debugging, open folder `desktop` of Flipper repository in VSCode, execute `yarn start` in terminal to launch Flipper in development mode, select tab `Debug and Run`, and run task `Attach to Running Renderer`. By default this task is set as the first one, so you can just press `F5` to run it. -![Attach From Visual Studio Code](assets/debugging-from-vscode.png) +Attach From Visual Studio Code ## Plugin missing diff --git a/docs/extending/error-handling.md b/docs/extending/error-handling.mdx similarity index 100% rename from docs/extending/error-handling.md rename to docs/extending/error-handling.mdx diff --git a/docs/extending/establishing-a-connection.md b/docs/extending/establishing-a-connection.mdx similarity index 100% rename from docs/extending/establishing-a-connection.md rename to docs/extending/establishing-a-connection.mdx diff --git a/docs/extending/index.md b/docs/extending/index.mdx similarity index 100% rename from docs/extending/index.md rename to docs/extending/index.mdx diff --git a/docs/extending/js-plugin-api.md b/docs/extending/js-plugin-api.mdx similarity index 100% rename from docs/extending/js-plugin-api.md rename to docs/extending/js-plugin-api.mdx diff --git a/docs/extending/jssetup.md b/docs/extending/jssetup.mdx similarity index 99% rename from docs/extending/jssetup.md rename to docs/extending/jssetup.mdx index 9ec8bacb1..351d73b1f 100644 --- a/docs/extending/jssetup.md +++ b/docs/extending/jssetup.mdx @@ -96,7 +96,7 @@ Important attributes of `package.json`: - `bugs` Specify an email and/or url, where plugin bugs should be reported. -In `index.tsx` you will define the plugin in JavaScript. This file must export a default class that extends `FlipperPlugin`. Browse our [JS API docs](js-plugin-api) to see what you can do, and make sure to check out our [UI Component Library](ui-components.md) for lots of pre-made components. +In `index.tsx` you will define the plugin in JavaScript. This file must export a default class that extends `FlipperPlugin`. Browse our [JS API docs](js-plugin-api) to see what you can do, and make sure to check out our [UI Component Library](ui-components) for lots of pre-made components. Example `index.tsx`: ```js diff --git a/docs/extending/layout-inspector.md b/docs/extending/layout-inspector.mdx similarity index 95% rename from docs/extending/layout-inspector.md rename to docs/extending/layout-inspector.mdx index b80689ab4..b7129233c 100644 --- a/docs/extending/layout-inspector.md +++ b/docs/extending/layout-inspector.mdx @@ -2,11 +2,12 @@ id: layout-inspector title: Extending Layout Inspector --- +import useBaseUrl from '@docusaurus/useBaseUrl'; The Layout Inspector plugin can be extended to support new kinds of UI components. You can also extend it to customize the data made available in the sidebar. Depending on whether you want to expose new data on Android or iOS, there are different interfaces you can use. -![Layout Inspector](assets/layoutinspector.png) +Layout Inspector ## Android @@ -68,7 +69,7 @@ To expose an object to the layout inspector in Sonar you have to implement a `SK @implementation SKArbitraryViewDescriptor -- (NSString *)identifierForNode:(ArbitraryView *)node +- (NSString *)identifierForNode:(ArbitraryView *)node { return [super identifierForNode:node]; } @@ -85,7 +86,7 @@ To expose an object to the layout inspector in Sonar you have to implement a `SK @implementation SKArbitraryViewDescriptor -- (NSString *)identifierForNode:(ArbitraryView *)node +- (NSString *)identifierForNode:(ArbitraryView *)node { SKNodeDescriptor *descriptor = [self descriptorForClass:[UIView class]]; return [descriptor identifierForNode:node]; @@ -101,7 +102,7 @@ In order to register your descriptor for an object, you use `SKDescriptorMapper` ```objc [descriptorMapper registerDescriptor:[SKArbitraryViewDescriptor new] forClass:[AbritraryView class]]; - + ``` There's already a set of descriptors registered by default in diff --git a/docs/extending/new-clients.md b/docs/extending/new-clients.mdx similarity index 100% rename from docs/extending/new-clients.md rename to docs/extending/new-clients.mdx diff --git a/docs/extending/search-and-filter.md b/docs/extending/search-and-filter.mdx similarity index 100% rename from docs/extending/search-and-filter.md rename to docs/extending/search-and-filter.mdx diff --git a/docs/extending/send-data.md b/docs/extending/send-data.mdx similarity index 100% rename from docs/extending/send-data.md rename to docs/extending/send-data.mdx diff --git a/docs/extending/styling-components.md b/docs/extending/styling-components.mdx similarity index 100% rename from docs/extending/styling-components.md rename to docs/extending/styling-components.mdx diff --git a/docs/extending/supporting-layout.md b/docs/extending/supporting-layout.mdx similarity index 100% rename from docs/extending/supporting-layout.md rename to docs/extending/supporting-layout.mdx diff --git a/docs/extending/testing.md b/docs/extending/testing.mdx similarity index 100% rename from docs/extending/testing.md rename to docs/extending/testing.mdx diff --git a/docs/features/crash-reporter-plugin.md b/docs/features/crash-reporter-plugin.mdx similarity index 65% rename from docs/features/crash-reporter-plugin.md rename to docs/features/crash-reporter-plugin.mdx index 059c78cad..ed381c676 100644 --- a/docs/features/crash-reporter-plugin.md +++ b/docs/features/crash-reporter-plugin.mdx @@ -2,12 +2,13 @@ id: crash-reporter-plugin title: Crash Reporter --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -→ [See setup instructions for the Crash Reporter](setup/crash-reporter-plugin.md) +→ [See setup instructions for the Crash Reporter](setup/crash-reporter-plugin) 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. -![UI](assets/crashreporterplugin.png) +UI -![Notification](assets/crashreporterpluginnotification.png) +Notification diff --git a/docs/features/databases-plugin.md b/docs/features/databases-plugin.mdx similarity index 63% rename from docs/features/databases-plugin.md rename to docs/features/databases-plugin.mdx index 1c0009d15..f4edb6d06 100644 --- a/docs/features/databases-plugin.md +++ b/docs/features/databases-plugin.mdx @@ -2,8 +2,9 @@ id: databases-plugin title: Databases --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -→ [See setup instructions for the Databases plugin](setup/databases-plugin.md) +→ [See setup instructions for the Databases plugin](setup/databases-plugin) The Databases plugin provides developers with read-write access to their databases: - browse your tables' data @@ -13,7 +14,7 @@ The Databases plugin provides developers with read-write access to their databas - see logs of past executed queries -![Databases Plugin 1](assets/databases-plugin-1.png) -![Databases Plugin 2](assets/databases-plugin-2.png) +Databases Plugin 1 +Databases Plugin 2 Note: this plugin is only available for Android. diff --git a/docs/features/images-plugin.md b/docs/features/images-plugin.mdx similarity index 87% rename from docs/features/images-plugin.md rename to docs/features/images-plugin.mdx index a357ebf20..62db32311 100644 --- a/docs/features/images-plugin.md +++ b/docs/features/images-plugin.mdx @@ -2,14 +2,15 @@ id: images-plugin title: Images --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -→ [See setup instructions for the images plugin](setup/images-plugin.md) +→ [See setup instructions for the images plugin](setup/images-plugin) 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. -![Images plugin](assets/images-plugin.png) +Images plugin ## Cache Inspector @@ -29,4 +30,4 @@ of your application, for instance during cold start. Dealing with large resources can require special APIs to be used that circumvent usual garbage collection. The plugin allows tracking `CloseableReference`s for Fresco on Android that weren't properly closed, which can help you improve -the performance of your app. \ No newline at end of file +the performance of your app. diff --git a/docs/features/index.md b/docs/features/index.mdx similarity index 58% rename from docs/features/index.md rename to docs/features/index.mdx index 475f766b3..3d9946cf0 100644 --- a/docs/features/index.md +++ b/docs/features/index.mdx @@ -2,13 +2,14 @@ id: index 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.md), [Layout Inspector](layout-plugin.md) and [Network Inspector](network-plugin.md) 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](logs-plugin), [Layout Inspector](layout-plugin) and [Network Inspector](network-plugin) 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. -![Layout plugin](assets/plugins.png) +Plugins ## Build your own plugin The Flipper desktop app and the mobile native SDK establish a connection which is used to send data to and from the device. Flipper does not make any restrictions on what kind of data is being sent. This enables a lot of different use-cases where you want to better understand what is going inside your app. For example you can visualize the state of local caches, events happening or trigger actions on your app from the desktop. -If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [extend Flipper](extending/index.md) and build your own plugin. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React. +If there is no plugin that does exactly what you want, you can build your own plugin, tailored to your needs. A plugin always consists of the native implementation sending and receiving data and the desktop plugin visualizing data. Learn more on how to [extend Flipper](extending/index) and build your own plugin. The native implementations are written in Java, Objective-C, or C++, the desktop UI is written in React. diff --git a/docs/features/layout-plugin.md b/docs/features/layout-plugin.mdx similarity index 95% rename from docs/features/layout-plugin.md rename to docs/features/layout-plugin.mdx index bdc5b5649..accc3c91a 100644 --- a/docs/features/layout-plugin.md +++ b/docs/features/layout-plugin.mdx @@ -2,8 +2,9 @@ id: layout-plugin title: Layout Inspector --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -→ [See setup instructions for the Layout Inspector](setup/layout-plugin.md) +→ [See setup instructions for the Layout Inspector](setup/layout-plugin) 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. @@ -11,7 +12,7 @@ The Layout tab supports [Litho](https://fblitho.com) and [ComponentKit](https:// If you hover over a view or component in Flipper we will highlight the corresponding item in your app. This is perfect for debugging the bounds of your views and making sure you have the correct visual padding. -![Layout plugin](assets/layout.png) +Layout plugin ## Quick edits diff --git a/docs/features/leak-canary-plugin.md b/docs/features/leak-canary-plugin.mdx similarity index 97% rename from docs/features/leak-canary-plugin.md rename to docs/features/leak-canary-plugin.mdx index a4513986e..686f52a30 100644 --- a/docs/features/leak-canary-plugin.md +++ b/docs/features/leak-canary-plugin.mdx @@ -3,7 +3,7 @@ id: leak-canary-plugin title: LeakCanary --- -→ [See setup instructions for the LeakCanary](setup/leak-canary-plugin.md) +→ [See setup instructions for the LeakCanary](setup/leak-canary-plugin) The LeakCanary plugin provides developers with Flipper support for [LeakCanary](https://github.com/square/leakcanary), an open source memory leak detection library. diff --git a/docs/features/logs-plugin.md b/docs/features/logs-plugin.mdx similarity index 89% rename from docs/features/logs-plugin.md rename to docs/features/logs-plugin.mdx index ec4812204..551a1eb90 100644 --- a/docs/features/logs-plugin.md +++ b/docs/features/logs-plugin.mdx @@ -2,10 +2,11 @@ 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. -![Logs plugin](assets/logs.png) +Logs plugin ## Filtering diff --git a/docs/features/navigation-plugin.md b/docs/features/navigation-plugin.mdx similarity index 73% rename from docs/features/navigation-plugin.md rename to docs/features/navigation-plugin.mdx index 927d97779..144cdf0fc 100644 --- a/docs/features/navigation-plugin.md +++ b/docs/features/navigation-plugin.mdx @@ -2,13 +2,14 @@ id: navigation-plugin title: Navigation --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -→ [See setup instructions for the Navigation Plugin](setup/navigation-plugin.md) +→ [See setup instructions for the Navigation Plugin](setup/navigation-plugin) 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. -![Navigation Plugin Button](assets/navigation-plugin-1.png) +Navigation Plugin Button Navigation events within the app can also be logged to Flipper. This allows the user to view past navigation events and jump straight to them, or export the navigation events for reporting. -![Navigation Plugin UI](assets/navigation-plugin-2.png) +Navigation Plugin UI diff --git a/docs/features/network-plugin.md b/docs/features/network-plugin.mdx similarity index 80% rename from docs/features/network-plugin.md rename to docs/features/network-plugin.mdx index 599cf17e9..a3cac4c78 100644 --- a/docs/features/network-plugin.md +++ b/docs/features/network-plugin.mdx @@ -2,11 +2,12 @@ id: network-plugin title: Network --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -→ [See setup instructions for the Network plugin](setup/network-plugin.md) +→ [See setup instructions for the Network plugin](setup/network-plugin) Use the Network inspector to inspect outgoing network traffic in your apps. You can easily browse all requests being made and their responses. The plugin also supports gzipped responses. -![Network plugin](assets/network.png) +Network plugin All request sent from the device will be listed in the plugin. Click on a request to see details like headers and body. You can filter the table for domain, method or status by clicking on the corresponding value in the table. diff --git a/docs/features/react-native.md b/docs/features/react-native.mdx similarity index 83% rename from docs/features/react-native.md rename to docs/features/react-native.mdx index 64d45ce6a..b30d0b443 100644 --- a/docs/features/react-native.md +++ b/docs/features/react-native.mdx @@ -2,10 +2,11 @@ id: react-native title: React Native Support --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -![React Native + React DevTools](assets/react-native-react.png) +React Native + React DevTools -The React Native and Developer tooling teams at Facebook work in close collaboration to make sure Flipper offers top-notch value out of the box for React Native development. +The React Native and Developer tooling teams at Facebook work in close collaboration to make sure Flipper offers top-notch value out of the box for React Native development. Integration between React Native and Flipper is enabled out of the box in React Native version 0.62 and higher. → [See setup instructions for React Native](../getting-started#setup-your-react-native-app) @@ -14,11 +15,11 @@ Integration between React Native and Flipper is enabled out of the box in React In Flipper there is a dedicated device type, “React Native”, that connects to a locally running Metro instance to interact with your React Native app. This device will be detected as soon as you fire up a Metro instance by running `yarn run ios` or `yarn run android` in your project. -If Metro is connected, two new buttons will appear in Flipper’s main toolbar: “Reload” and “Open Dev Menu”. Both do exactly what their name suggests, without needing the agility of a pianist to get to the right keyboard combo inside your emulator. The “React Native” device will feature two plugins out of the box: “Logs” and “React DevTools”. +If Metro is connected, two new buttons will appear in Flipper’s main toolbar: “Reload” and “Open Dev Menu”. Both do exactly what their name suggests, without needing the agility of a pianist to get to the right keyboard combo inside your emulator. The “React Native” device will feature two plugins out of the box: “Logs” and “React DevTools”. -![React Native Action Buttons and Logs](assets/react-native-logs.png) +React Native Action Buttons and Logs -The React DevTools allows you to inspect the component tree and tune the props and state of your React components. +The React DevTools allows you to inspect the component tree and tune the props and state of your React components. The Logs plugins will allow you to search, filter and even put watch expressions on your logging output. This offers a much richer way to interact with your logs compared to the terminal output of Metro. @@ -36,16 +37,16 @@ Beyond the React Native specific Flipper plugins described above, with Flipper y ## Writing JavaScript plugins for React Native + Flipper -One of the greatest values of Flipper is its extensibility. Many teams across Facebook already have written their own one-off plugins that help with analysing very specific use cases. -Writing plugins for Flipper doesn't require any native code, as the Flipper SDK is exposed directly to JavaScript through the [react-native-flipper](https://www.npmjs.com/package/react-native-flipper) package. +One of the greatest values of Flipper is its extensibility. Many teams across Facebook already have written their own one-off plugins that help with analysing very specific use cases. +Writing plugins for Flipper doesn't require any native code, as the Flipper SDK is exposed directly to JavaScript through the [react-native-flipper](https://www.npmjs.com/package/react-native-flipper) package. -![Tic Tac Toe example plugin](assets/react-native-tictactoe.png) +Tic Tac Toe example plugin _Example Flipper plugin: playing a game of Tic Tac Toe using Flipper and some emulators_ If you would love to build a specific (or generic) extension for Flipper check out the following pointers! Plugins for Flipper can be distributed through NPM so sharing them is trivial. -→ Creating a React Native Flipper Plugin https://fbflipper.com/docs/tutorial/react-native.html -→ Create a Flipper Desktop Plugin https://fbflipper.com/docs/tutorial/js-setup.html +→ Creating a React Native Flipper Plugin https://fbflipper.com/docs/tutorial/react-native.html +→ Create a Flipper Desktop Plugin https://fbflipper.com/docs/tutorial/js-setup.html ### Community React Native plugins for Flipper diff --git a/docs/features/sandbox-plugin.md b/docs/features/sandbox-plugin.mdx similarity index 97% rename from docs/features/sandbox-plugin.md rename to docs/features/sandbox-plugin.mdx index 5bccc5b82..d4426473b 100644 --- a/docs/features/sandbox-plugin.md +++ b/docs/features/sandbox-plugin.mdx @@ -3,6 +3,6 @@ id: sandbox-plugin title: Sandbox --- -→ [See setup instructions for the Sandbox plugin](setup/sandbox-plugin.md) +→ [See setup instructions for the Sandbox plugin](setup/sandbox-plugin) 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. diff --git a/docs/features/share-flipper-data.md b/docs/features/share-flipper-data.mdx similarity index 87% rename from docs/features/share-flipper-data.md rename to docs/features/share-flipper-data.mdx index bc07482f9..7126d5bbb 100644 --- a/docs/features/share-flipper-data.md +++ b/docs/features/share-flipper-data.mdx @@ -2,6 +2,7 @@ id: share-flipper-data title: Share Flipper Data --- +import useBaseUrl from '@docusaurus/useBaseUrl'; Flipper's diagnostic and profiling data is often used for debugging. But sometimes you can not solve the problem on your own and need some help from your colleagues. Rather than just sending screenshots, you can share the data you are seeing in Flipper with them. This includes all logs, the layout hierarchy, network requests, etc. and helps to get the bigger picture of why something didn't work as expected. @@ -9,7 +10,7 @@ Flipper's diagnostic and profiling data is often used for debugging. But sometim You can export Flipper's data in a `.flipper` file. For the export to work, an active device needs to be connected to Flipper. Make sure you have selected the device you want to export in Flipper's device dropdown: -![selectedDevice](assets/shareFlipperData/selectedDevice.png) +selectedDevice To export Flipper's into a file, select "File" → "Export" from the menu bar and save it where ever you like. This file now can be shared with your colleagues. @@ -19,6 +20,6 @@ To export Flipper's into a file, select "File" → "Export" from the menu bar an Opening a `.flipper` file imports all the data and allows you to use Flipper as if the device was connected. However, note the device is marked as "offline". This means, while you are able to see all the date, you can not interact with it (e.g. change a view's background color), because the actual device is not present. -![importedDevice](assets/shareFlipperData/importedDevice.png) +importedDevice For advanced users, Flipper also provides a URL handler to import data. Linking to `flipper://import/?url={LINK_TO_FLIPPER_FILE}` will launch Flipper and display the downloaded data. diff --git a/docs/features/shared-preferences-plugin.md b/docs/features/shared-preferences-plugin.mdx similarity index 74% rename from docs/features/shared-preferences-plugin.md rename to docs/features/shared-preferences-plugin.mdx index d8e4c8e3e..678ca8aa8 100644 --- a/docs/features/shared-preferences-plugin.md +++ b/docs/features/shared-preferences-plugin.mdx @@ -2,10 +2,12 @@ id: shared-preferences-plugin title: Shared Preferences --- -→ [See setup instructions for the Shared Preferences plugin](setup/shared-preferences-plugin.md) +import useBaseUrl from '@docusaurus/useBaseUrl'; + +→ [See setup instructions for the Shared Preferences plugin](setup/shared-preferences-plugin) Easily inspect and modify the data contained within your app's shared preferences. -![Shared Preferences Plugin](assets/shared-preferences.png) +Shared Preferences Plugin All changes to the given shared preference file will automatically appear in Flipper. You may also edit the values in Flipper and have them synced to your device. This can be done by clicking on the value of the specific key you wish to edit, editing the value and then pressing enter. diff --git a/docs/getting-started/android-native.md b/docs/getting-started/android-native.mdx similarity index 92% rename from docs/getting-started/android-native.md rename to docs/getting-started/android-native.mdx index 37c54d6ce..35fac96b8 100644 --- a/docs/getting-started/android-native.md +++ b/docs/getting-started/android-native.mdx @@ -108,7 +108,7 @@ dependencies { ## Enabling 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. +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) and [Layout Inspector Plugin](setup/layout-plugin) 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? diff --git a/docs/getting-started/index.md b/docs/getting-started/index.mdx similarity index 91% rename from docs/getting-started/index.md rename to docs/getting-started/index.mdx index 7f93a608a..25eb55ae3 100644 --- a/docs/getting-started/index.md +++ b/docs/getting-started/index.mdx @@ -2,6 +2,7 @@ id: index title: Desktop App --- +import useBaseUrl from '@docusaurus/useBaseUrl'; Flipper helps you debug Android and iOS apps running in an emulator/simulator or connected physical development devices. Flipper consists of two parts: @@ -16,4 +17,4 @@ The desktop part of Flipper doesn't need any particular setup. Simply download t Once you start Flipper and launch an emulator/simulator or connect a device, you will already be able to see the device logs in Flipper. To see app specific data, you need to integrate our native SDKs with your app. -![Logs plugin](assets/initial.png) +Logs plugin diff --git a/docs/getting-started/ios-native.md b/docs/getting-started/ios-native.mdx similarity index 96% rename from docs/getting-started/ios-native.md rename to docs/getting-started/ios-native.mdx index a5c973298..4eb11e82f 100644 --- a/docs/getting-started/ios-native.md +++ b/docs/getting-started/ios-native.mdx @@ -223,7 +223,7 @@ class AppDelegate: UIResponder, UIApplicationDelegate { ## Enabling 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. +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) and [Layout Inspector Plugin](setup/layout-plugin) 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? diff --git a/docs/getting-started/react-native-android.md b/docs/getting-started/react-native-android.mdx similarity index 100% rename from docs/getting-started/react-native-android.md rename to docs/getting-started/react-native-android.mdx diff --git a/docs/getting-started/react-native-ios.md b/docs/getting-started/react-native-ios.mdx similarity index 100% rename from docs/getting-started/react-native-ios.md rename to docs/getting-started/react-native-ios.mdx diff --git a/docs/getting-started/react-native.md b/docs/getting-started/react-native.mdx similarity index 100% rename from docs/getting-started/react-native.md rename to docs/getting-started/react-native.mdx diff --git a/docs/setup/crash-reporter-plugin.md b/docs/setup/crash-reporter-plugin.mdx similarity index 64% rename from docs/setup/crash-reporter-plugin.md rename to docs/setup/crash-reporter-plugin.mdx index 16956eb19..ec90cfd94 100644 --- a/docs/setup/crash-reporter-plugin.md +++ b/docs/setup/crash-reporter-plugin.mdx @@ -4,7 +4,7 @@ title: Crash Reporter Setup sidebar_label: Crash Reporter --- -You do not have to instantiate it in your app in order to use its basic functionality mentioned [here](features/crash-reporter-plugin.md). 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 [here](features/crash-reporter-plugin). 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 diff --git a/docs/setup/databases-plugin.md b/docs/setup/databases-plugin.mdx similarity index 100% rename from docs/setup/databases-plugin.md rename to docs/setup/databases-plugin.mdx diff --git a/docs/setup/images-plugin.md b/docs/setup/images-plugin.mdx similarity index 100% rename from docs/setup/images-plugin.md rename to docs/setup/images-plugin.mdx diff --git a/docs/setup/layout-plugin.md b/docs/setup/layout-plugin.mdx similarity index 100% rename from docs/setup/layout-plugin.md rename to docs/setup/layout-plugin.mdx diff --git a/docs/setup/leak-canary-plugin.md b/docs/setup/leak-canary-plugin.mdx similarity index 100% rename from docs/setup/leak-canary-plugin.md rename to docs/setup/leak-canary-plugin.mdx diff --git a/docs/setup/navigation-plugin.md b/docs/setup/navigation-plugin.mdx similarity index 100% rename from docs/setup/navigation-plugin.md rename to docs/setup/navigation-plugin.mdx diff --git a/docs/setup/network-plugin.md b/docs/setup/network-plugin.mdx similarity index 100% rename from docs/setup/network-plugin.md rename to docs/setup/network-plugin.mdx diff --git a/docs/setup/sandbox-plugin.md b/docs/setup/sandbox-plugin.mdx similarity index 100% rename from docs/setup/sandbox-plugin.md rename to docs/setup/sandbox-plugin.mdx diff --git a/docs/setup/shared-preferences-plugin.md b/docs/setup/shared-preferences-plugin.mdx similarity index 100% rename from docs/setup/shared-preferences-plugin.md rename to docs/setup/shared-preferences-plugin.mdx diff --git a/docs/stetho.md b/docs/stetho.mdx similarity index 89% rename from docs/stetho.md rename to docs/stetho.mdx index 4dfa695db..a6f4c11a2 100644 --- a/docs/stetho.md +++ b/docs/stetho.mdx @@ -6,6 +6,6 @@ sidebar_label: Stetho Guidance In 2015, we introduced [Stetho](http://facebook.github.io/stetho/), an Android debugging bridge built on top of [Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/). While it was a valuable tool to us and many members of the community, we felt that it limited us in what we could do with it. Stetho is Android-only and while Chrome DevTools gave us a nice foundation to build upon, they also limited us in what we could build. Stetho is an Android tool and Chrome DevTools is built for web developers. This means we can only provide a good experience for the intersection of those two development environments, which was very limiting. With Flipper being built as a standalone app, we can do more things, like handling adb connections and supporting iOS, which wasn't easily achievable with Stetho. -This is why we built Flipper. We wanted to create a platform that gives us all the flexibility we need to build more advanced features and support for iOS. One of Flipper's core concepts is its extensibility using [plugins](extending/index.md). Plugins are written in React and we provide a set of ready-to-use UI components that allow developers to build great plugin UIs with a few lines of code. +This is why we built Flipper. We wanted to create a platform that gives us all the flexibility we need to build more advanced features and support for iOS. One of Flipper's core concepts is its extensibility using [plugins](extending/index). Plugins are written in React and we provide a set of ready-to-use UI components that allow developers to build great plugin UIs with a few lines of code. While offering many new features, Flipper also already covers most of the features provided by Stetho. This includes network and layout inspection and an advanced log viewer. We are committed to continuously improving Flipper with new features and plugins, however, we are aware that not all Stetho features are currently supported by Flipper. If you are using a particular feature of Stetho which isn't supported by Flipper, we are more than happy to hear about your use-case. Stetho will continue to work and we are not abandoning it so you can choose the tool that fits your needs best. We are confident that Flipper will work well for most use-cases and are more than happy to accept contributions from the open-source community adding new features. diff --git a/docs/troubleshooting.md b/docs/troubleshooting.mdx similarity index 93% rename from docs/troubleshooting.md rename to docs/troubleshooting.mdx index 4c14ebdb0..2c11b500c 100644 --- a/docs/troubleshooting.md +++ b/docs/troubleshooting.mdx @@ -3,6 +3,7 @@ id: troubleshooting title: Troubleshooting Issues sidebar_label: Troubleshooting Issues --- +import useBaseUrl from '@docusaurus/useBaseUrl'; We hope that flipper works well out of the box, but the software is a work in progress and problems will occur. Below are some known issues and steps you can take to try to resolve them. @@ -69,18 +70,18 @@ This can happen because we include [OkHttp3](https://github.com/square/okhttp/is Add this to your Gradle config: ```groovy -android { - compileOptions { +android { + compileOptions { targetCompatibility = "8" sourceCompatibility = "8" } } ``` - + **Exclude the OkHttp3 dependency** - + Alternatively, if you don't plan on making use of OkHttp, you can exclude the dependency from the build entirely: - + ``` debugImplementation('com.facebook.flipper:flipper:*') { exclude group: 'com.squareup.okhttp3' @@ -99,7 +100,7 @@ If you experience errors such as `Undefined symbol: associated type descriptor f 1. Go to the tab `Build Settings`; 1. Search for `LD_RUNPATH_SEARCH_PATHS` (make sure that `All` is selected); 1. Double-click `Runpath Search Paths` and, in the dialog that opens, click on the plus button at the bottom-left corner and paste `/usr/lib/swift $(inherited)` there; - ![Screenshot showing the places mentioned in the first steps](assets/troubleshooting-react-native-ios-swift.png) + Screenshot showing the places mentioned in the first steps 1. Now search for `LIBRARY_SEARCH_PATHS`; 1. Double-click `Library Search Paths` and, in the dialog that opens, add the following items: @@ -112,6 +113,6 @@ If you experience errors such as `Undefined symbol: associated type descriptor f _Note: all of them should be added as `non-recursive` (the default)._ In the end it should look like this: - ![Screenshot showing the places mentioned in the last steps](assets/troubleshooting-react-native-ios-swift-2.png) + Screenshot showing the places mentioned in the last steps 1. Now you can run your build normally. diff --git a/docs/tutorial/android.md b/docs/tutorial/android.mdx similarity index 97% rename from docs/tutorial/android.md rename to docs/tutorial/android.mdx index d228cb518..61a9c11b8 100644 --- a/docs/tutorial/android.md +++ b/docs/tutorial/android.mdx @@ -2,8 +2,9 @@ id: android title: Building an Android Plugin --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -Android Tutorial App +Android Tutorial App For the purpose of the tutorial, we will assume you already have an existing Android application in which you have a feed or list of items. As the Flipper diff --git a/docs/tutorial/intro.md b/docs/tutorial/intro.mdx similarity index 82% rename from docs/tutorial/intro.md rename to docs/tutorial/intro.mdx index 93058964d..9c776cce1 100644 --- a/docs/tutorial/intro.md +++ b/docs/tutorial/intro.mdx @@ -2,8 +2,9 @@ id: intro title: Intro --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -![Android App Tutorial](assets/android-tutorial.png) +Android App Tutorial In this tutorial, we show you how how easy it is to build a Flipper plugin for Android and iOS that extracts data from your native application and @@ -16,4 +17,4 @@ Before we get started, let's define two terms we will use frequently throughout this tutorial: - **Desktop app**: This is the Electron-based application you run on your desktop. -- **Mobile client**: This is the mobile app running most likely on a phone or other mobile device. It connects to the desktop app. \ No newline at end of file +- **Mobile client**: This is the mobile app running most likely on a phone or other mobile device. It connects to the desktop app. diff --git a/docs/tutorial/ios.md b/docs/tutorial/ios.mdx similarity index 96% rename from docs/tutorial/ios.md rename to docs/tutorial/ios.mdx index d98ea2289..fac45d455 100644 --- a/docs/tutorial/ios.md +++ b/docs/tutorial/ios.mdx @@ -2,8 +2,9 @@ id: ios title: Building an iOS Plugin --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -iOS Tutorial App +iOS Tutorial App For the purpose of the tutorial, we will assume you already have an existing iOS application in which you have a feed or list of items. As the Flipper team, we obviously concern ourselves mostly diff --git a/docs/tutorial/js-custom.md b/docs/tutorial/js-custom.mdx similarity index 96% rename from docs/tutorial/js-custom.md rename to docs/tutorial/js-custom.mdx index 2aa77225b..d5875e1ab 100644 --- a/docs/tutorial/js-custom.md +++ b/docs/tutorial/js-custom.mdx @@ -3,13 +3,14 @@ id: js-custom title: Building Custom UI sidebar_label: Custom UI --- +import useBaseUrl from '@docusaurus/useBaseUrl'; Displaying your data in a table might work for many use-cases. However, depending on your plugin and data it might make sense to customize the way your data is visualized. Flipper uses React to render the plugins and provides a variety of ready-to-use UI components that can be used to build custom plugin UIs. ## Replacing the table For our sea mammals app, we might not only want to see them listed as image URLs in a table but render the actual images in nice little cards. When selecting one of the cards we still want to display all details in the sidebar. -![Custom cards UI for our sea mammals plugin](assets/js-custom.png) +Custom cards UI for our sea mammals plugin Currently, the default export in our `index.tsx` is from `createTablePlugin`. Now we are going to replace this with a custom React component extending `FlipperPlugin`. @@ -34,7 +35,7 @@ export default class SeaMammals extends FlipperPlugin ## Native Distribution diff --git a/docs/tutorial/js-setup.md b/docs/tutorial/js-setup.mdx similarity index 94% rename from docs/tutorial/js-setup.md rename to docs/tutorial/js-setup.mdx index 88284ec9c..837495244 100644 --- a/docs/tutorial/js-setup.md +++ b/docs/tutorial/js-setup.mdx @@ -3,12 +3,13 @@ id: js-setup title: Building a Desktop Plugin sidebar_label: Building a Desktop Plugin --- +import useBaseUrl from '@docusaurus/useBaseUrl'; Now that we have the native side covered, let's display the data we're sending on the desktop side. You can check out the full workflow of building Flipper desktop plugins here: https://fbflipper.com/docs/extending/js-setup.html. -![Custom cards UI for our sea mammals plugin](assets/js-custom.png) +Custom cards UI for our sea mammals plugin ## Dynamic Plugin loading diff --git a/docs/tutorial/js-table.md b/docs/tutorial/js-table.mdx similarity index 96% rename from docs/tutorial/js-table.md rename to docs/tutorial/js-table.mdx index aea29f0eb..2418516a8 100644 --- a/docs/tutorial/js-table.md +++ b/docs/tutorial/js-table.mdx @@ -2,8 +2,9 @@ id: js-table title: Showing a table --- +import useBaseUrl from '@docusaurus/useBaseUrl'; -![Android Tutorial App](assets/android-tutorial-desktop.png) +Android Tutorial App ## Building a Table diff --git a/docs/tutorial/react-native.md b/docs/tutorial/react-native.mdx similarity index 100% rename from docs/tutorial/react-native.md rename to docs/tutorial/react-native.mdx diff --git a/website/.gitignore b/website/.gitignore index aeedda9bf..a4fc6154a 100644 --- a/website/.gitignore +++ b/website/.gitignore @@ -3,9 +3,20 @@ node_modules lib/core/metadata.js lib/core/MetadataBlog.js website/translated_docs -website/build/ +build/ website/yarn.lock website/node_modules website/i18n/* !website/i18n/en.json + +.docusaurus +.cache-loader +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/website/core/Footer.js b/website/core/Footer.js deleted file mode 100644 index 05bd86949..000000000 --- a/website/core/Footer.js +++ /dev/null @@ -1,82 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -const React = require('react'); - -class Footer extends React.Component { - docUrl(doc, language) { - const baseUrl = this.props.config.baseUrl; - return baseUrl + 'docs/' + (language ? language + '/' : '') + doc; - } - - pageUrl(doc, language) { - const baseUrl = this.props.config.baseUrl; - return baseUrl + (language ? language + '/' : '') + doc; - } - - render() { - return ( - - ); - } -} - -module.exports = Footer; diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js new file mode 100644 index 000000000..0e3f65a49 --- /dev/null +++ b/website/docusaurus.config.js @@ -0,0 +1,101 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +const repoUrl = 'https://github.com/facebook/flipper'; + +const siteConfig = { + title: 'Flipper', + tagline: 'Extensible mobile app debugging', + url: 'https://fbflipper.com/', + baseUrl: '/', + projectName: 'flipper', + themeConfig: { + navbar: { + title: 'Flipper', + logo: { + alt: 'Flipper Logo', + src: 'img/icon.png', + }, + links: [ + {to: 'docs/features/index', label: 'Features', position: 'right'}, + {to: 'docs/getting-started/index', label: 'Setup', position: 'right'}, + {to: 'docs/extending/index', label: 'Extending', position: 'right'}, + {href: repoUrl, label: 'GitHub', position: 'right'}, + ], + }, + disableDarkMode: true, + footer: { + style: 'dark', + links: [ + { + title: 'Learn', + items: [ + {label: 'Getting Started', to: 'docs/getting-started/index'}, + {label: 'Plugin Creation Tutorial', to: 'docs/tutorial/intro'}, + ], + }, + { + title: 'Plugins', + items: [ + {label: 'Core Plugins', to: 'docs/features'}, + { + label: 'Community Plugins', + to: 'https://www.npmjs.com/search?q=keywords:flipper-plugin', + }, + ], + }, + { + title: 'More', + items: [ + {label: 'Twitter', to: 'https://twitter.com/flipper_fb'}, + {label: 'GitHub', to: repoUrl}, + ], + }, + ], + copyright: 'Copyright © ' + new Date().getFullYear() + ' Facebook', + logo: { + alt: 'Flipper Mascot', + src: 'img/mascot.png', + title: "I'm a dolphin not a whale!", + }, + }, + algolia: { + apiKey: '2df980e7ffc95c19552790f7cad32666', + indexName: 'fbflipper', + algoliaOptions: { + hitsPerPage: 5, + }, + }, + }, + favicon: 'img/icon.png', + scripts: [ + 'https://buttons.github.io/buttons.js', + 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js', + '/js/code-blocks-buttons.js', + '/js/google-analytics.js', + ], + stylesheets: [], + presets: [ + [ + '@docusaurus/preset-classic', + { + docs: { + path: '../docs', + sidebarPath: require.resolve('./sidebars.json'), + editUrl: 'https://github.com/facebook/flipper/blob/master/website', + }, + theme: { + customCss: require.resolve('./static/css/custom.css'), + }, + }, + ], + ], +}; + +module.exports = siteConfig; diff --git a/website/generate-uidocs.js b/website/generate-uidocs.js index 94871292d..dc90ae215 100644 --- a/website/generate-uidocs.js +++ b/website/generate-uidocs.js @@ -20,7 +20,7 @@ title: UI Components Flipper has a lot of built in React components to build UIs. You can import them directly using e.g. \`import {Button} from 'flipper'\`.`; -const TARGET = __dirname + '/../docs/extending/ui-components.md'; +const TARGET = __dirname + '/../docs/extending/ui-components.mdx'; glob(__dirname + '/../desktop/app/src/ui/components/**/*.tsx', (err, files) => { const content = files diff --git a/website/package.json b/website/package.json index 9ccea8ac3..49e289cf5 100644 --- a/website/package.json +++ b/website/package.json @@ -1,22 +1,26 @@ { "scripts": { - "examples": "docusaurus-examples", - "start": "yarn generate-uidocs && docusaurus-start", - "build": "yarn generate-uidocs && docusaurus-build", - "publish-gh-pages": "docusaurus-publish", - "write-translations": "docusaurus-write-translations", - "version": "docusaurus-version", - "rename-version": "docusaurus-rename-version", + "start": "yarn generate-uidocs && docusaurus start", + "build": "yarn generate-uidocs && docusaurus build", + "publish-gh-pages": "docusaurus deploy", + "write-translations": "docusaurus write-translations", + "version": "docusaurus version", + "rename-version": "docusaurus rename-version", "generate-uidocs": "node ./generate-uidocs.js" }, "devDependencies": { "@babel/parser": "^7.8.3", + "@docusaurus/core": "^2.0.0-alpha.50", + "@docusaurus/preset-classic": "^2.0.0-alpha.50", "docblock-parser": "^1.0.0", - "docusaurus": "^1.11.1", "glob": "^7.1.3", - "react-docgen": "^5.2.1" + "react-docgen": "^5.2.1", + "classnames": "^2.2.6", + "react": "^16.13.1", + "react-dom": "^16.13.1" + }, + "dependencies": { }, - "dependencies": {}, "resolutions": { "minimist": "1.2.3", "kind-of": "6.0.3" diff --git a/website/pages/docs/en/index.js b/website/pages/docs/en/index.js deleted file mode 100644 index 82bc76901..000000000 --- a/website/pages/docs/en/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - */ - -const React = require('react'); - -class Docs extends React.Component { - render() { - return ( -