Fix image links with baseUrl
Summary: When using baseUrl in site config, it adds a prefix to all link paths. But for assets, it doesn't work if you refer to them as `docs/assets/...`, you have to use just `assets/...`. Source: https://github.com/facebook/Docusaurus/issues/861 Reviewed By: passy Differential Revision: D20796933 fbshipit-source-id: 2346e42b8b548f576a1e143f56ee5236eab55073
This commit is contained in:
John Knox
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
cfb77148f7
commit
5ad8106e3f
@@ -9,7 +9,7 @@ For both types of plugin, we recommend starting work after `onConnect` is called
|
|||||||
|
|
||||||
## Regular Plugin Lifecycle
|
## 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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
## Background Plugin Lifecycle
|
## 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.
|
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 +19,5 @@ 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.
|
Note that a plugin must be enabled by the user for its messages to be queued up.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -17,13 +17,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.
|
To attach the running Flipper instance open new tab in Google Chrome, navigate to "http://localhost:9222" and choose "Flipper" in the opened list.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Visual Studio Code
|
## 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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Plugin missing
|
## Plugin missing
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ title: Extending Layout Inspector
|
|||||||
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.
|
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.
|
Depending on whether you want to expose new data on Android or iOS, there are different interfaces you can use.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Android
|
## Android
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,6 @@ title: Crash Reporter
|
|||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ The Databases plugin provides developers with read-write access to their databas
|
|||||||
- see logs of past executed queries
|
- see logs of past executed queries
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Note: this plugin is only available for Android.
|
Note: this plugin is only available for Android.
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ The images plugin allows you to inspect what images were fetched, where they are
|
|||||||
coming from and selectively clear caches. Currently, the plugin supports
|
coming from and selectively clear caches. Currently, the plugin supports
|
||||||
[Fresco](https://github.com/facebook/fresco/) as backend.
|
[Fresco](https://github.com/facebook/fresco/) as backend.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Cache Inspector
|
## Cache Inspector
|
||||||
|
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ title: Features
|
|||||||
|
|
||||||
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.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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Build your own plugin
|
## Build your own plugin
|
||||||
|
|
||||||
|
|||||||
@@ -11,7 +11,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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Quick edits
|
## Quick edits
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ title: Logs
|
|||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Filtering
|
## Filtering
|
||||||
|
|
||||||
|
|||||||
@@ -7,8 +7,8 @@ title: Navigation
|
|||||||
|
|
||||||
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.
|
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 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 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.
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -7,6 +7,6 @@ title: Network
|
|||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ id: react-native
|
|||||||
title: React Native Support
|
title: React Native Support
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
Integration between React Native and Flipper is enabled out of the box in React Native version 0.62 and higher.
|
||||||
@@ -16,7 +16,7 @@ In Flipper there is a dedicated device type, “React Native”, that connects t
|
|||||||
|
|
||||||
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”.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
||||||
|
|
||||||
@@ -39,7 +39,7 @@ Beyond the React Native specific Flipper plugins described above, with Flipper y
|
|||||||
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.
|
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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
_Example Flipper plugin: playing a game of Tic Tac Toe using Flipper and some emulators_
|
_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.
|
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.
|
||||||
|
|||||||
@@ -9,7 +9,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:
|
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:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
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 +19,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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|||||||
@@ -6,6 +6,6 @@ title: Shared Preferences
|
|||||||
|
|
||||||
Easily inspect and modify the data contained within your app's shared preferences.
|
Easily inspect and modify the data contained within your app's shared preferences.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ 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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Setup your Android app
|
## Setup your Android app
|
||||||
|
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ If you experience errors such as `Undefined symbol: associated type descriptor f
|
|||||||
1. Go to the tab `Build Settings`;
|
1. Go to the tab `Build Settings`;
|
||||||
1. Search for `LD_RUNPATH_SEARCH_PATHS` (make sure that `All` is selected);
|
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;
|
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;
|
||||||
|
|
||||||
1. Now search for `LIBRARY_SEARCH_PATHS`;
|
1. Now search for `LIBRARY_SEARCH_PATHS`;
|
||||||
1. Double-click `Library Search Paths` and, in the dialog that opens, add the following items:
|
1. Double-click `Library Search Paths` and, in the dialog that opens, add the following items:
|
||||||
|
|
||||||
@@ -112,6 +112,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)._
|
_Note: all of them should be added as `non-recursive` (the default)._
|
||||||
|
|
||||||
In the end it should look like this:
|
In the end it should look like this:
|
||||||
|
|
||||||
|
|
||||||
1. Now you can run your build normally.
|
1. Now you can run your build normally.
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ id: intro
|
|||||||
title: Intro
|
title: Intro
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
In this tutorial, we show you how how easy it is to build a Flipper plugin
|
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
|
for Android and iOS that extracts data from your native application and
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ Displaying your data in a table might work for many use-cases. However, dependin
|
|||||||
## Replacing the table
|
## 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.
|
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.
|
||||||
|
|
||||||
|
|
||||||
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`.
|
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`.
|
||||||
|
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ in the bottom of the left sidebar and selecting the
|
|||||||
"Install Plugins" tab. It may take a few moments for the
|
"Install Plugins" tab. It may take a few moments for the
|
||||||
search index to update and your plugin to appear.
|
search index to update and your plugin to appear.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Native Distribution
|
## Native Distribution
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ sidebar_label: Building a desktop plugin
|
|||||||
Now that we have the native side covered, let's display the data we're sending
|
Now that we have the native side covered, let's display the data we're sending
|
||||||
on the desktop side.
|
on the desktop side.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Dynamic Plugin loading
|
## Dynamic Plugin loading
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user