docs: New Frame Processor Plugins docs (#2434)

README.md

@@ -41,7 +41,7 @@ cd ios && pod install
 * [Guides](https://react-native-vision-camera.com/docs/guides)
 * [API](https://react-native-vision-camera.com/docs/api)
 * [Example](./package/example/)
-* [Frame Processor Plugins](https://react-native-vision-camera.com/docs/guides/frame-processor-plugin-list)
+* [Frame Processor Plugins](https://react-native-vision-camera.com/docs/guides/frame-processor-plugins)
 
 ### ShadowLens
 

docs/docs/guides/FRAME_PROCESSORS.mdx

@@ -214,24 +214,30 @@ See: ["Creating Frame Processor Plugins"](/docs/guides/frame-processors-plugins-
 
 ### Using Community Plugins
 
-Community Frame Processor Plugins are distributed through npm. To install the [vision-camera-image-labeler](https://github.com/mrousavy/vision-camera-image-labeler) plugin, run:
+Community Frame Processor Plugins are distributed through npm. To install the [vision-camera-resize-plugin](https://github.com/mrousavy/vision-camera-resize-plugin) plugin, run:
 
 ```bash
-npm i vision-camera-image-labeler
+yarn add vision-camera-resize-plugin
 cd ios && pod install
 ```
 
 That's it! 🎉 Now you can use it:
 
 ```ts
+const { resize } = useResizePlugin()
+
 const frameProcessor = useFrameProcessor((frame) => {
   'worklet'
-  const labels = labelImage(frame)
+  const smallerFrame = resize(frame, {
+    size: {
+      // ...
+    },
+  })
   // ...
-}, [])
+}, [resize])
 ```
 
-Check out [Frame Processor community plugins](/docs/guides/frame-processor-plugin-list) to discover available community plugins.
+Check out [Frame Processor community plugins](/docs/guides/frame-processor-plugins) to discover available community plugins.
 
 ## Selecting a Format for a Frame Processor
 

docs/docs/guides/FRAME_PROCESSORS_CREATE_PLUGIN_CPP.mdx

@@ -104,4 +104,4 @@ Then include it in your C++ code:
 
 <br />
 
-#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugin-list)
+#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugins)

docs/docs/guides/FRAME_PROCESSOR_CREATE_FINAL.mdx

@@ -56,4 +56,4 @@ If you want to distribute your Frame Processor Plugin, simply use npm.
 
 <br />
 
-#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugin-list)
+#### 🚀 Next section: [Browse Community Plugins](frame-processor-plugins)

docs/docs/guides/FRAME_PROCESSOR_PLUGINS.mdx

@@ -1,17 +1,21 @@
 ---
-id: frame-processor-plugin-list
+id: frame-processor-plugins
-title: Community Plugins
+title: Frame Processor Plugins
-sidebar_label: Community Plugins
+sidebar_label: Frame Processor Plugins
 ---
 
-These are VisionCamera Frame Processor Plugins created by the community.
+Frame Processor Plugins are native plugins that can process data in a Frame and return values to a JS Frame Processor.
+
+These plugins are written in native languages such as Java/Kotlin, Objective-C/Swift, or even C++ to make use of GPU-acceleration, low-level APIs, and overall faster performance.
+
+Similar to react-native libraries, Frame Processor Plugins are distributed through npm and come with a native module boilerplate so they can be autolinked.
 
 ## Installing a Plugin
 
 1. Install using npm:
 
 ```
-npm i vision-camera-xxxxx
+yarn add vision-camera-xxxxx
 cd ios && pod install
 ```
 
@@ -20,8 +24,8 @@ cd ios && pod install
 ## Plugin List
 
 * [mrousavy/**react-native-fast-tflite**](https://github.com/mrousavy/react-native-fast-tflite): A plugin to run any Tensorflow Lite model inside React Native, written in C++ with GPU acceleration.
+* [mrousavy/**vision-camera-resize-plugin**](https://github.com/mrousavy/vision-camera-resize-plugin): A plugin for fast frame resizing, cropping and YUV/RGB pixel-format conversion using SIMD and CPU-Vector acceleration.
 * [mrousavy/**vision-camera-image-labeler**](https://github.com/mrousavy/vision-camera-image-labeler): A plugin to label images using MLKit Vision Image Labeler.
-* [mrousavy/**vision-camera-resize-plugin**](https://github.com/mrousavy/vision-camera-resize-plugin): A plugin for fast frame resizing to optimize execution speed of expensive AI algorithms.
 * [rodgomesc/**vision-camera-face-detector**](https://github.com/rodgomesc/vision-camera-face-detector): A plugin to detect faces using MLKit Vision Face Detector.
 * [rodgomesc/**vision-camera-qrcode-scanner**](https://github.com/rodgomesc/vision-camera-qrcode-scanner): A plugin to read barcodes using MLKit Vision QrCode Scanning
 * [mgcrea/**vision-camera-barcode-scanner**](https://github.com/mgcrea/vision-camera-barcode-scanner): A high performance barcode scanner for React Native using VisionCamera

docs/sidebars.js

@@ -13,9 +13,9 @@ module.exports = {
         label: 'Realtime Frame Processing',
         items: [
           'guides/frame-processors',
+          'guides/frame-processor-plugins',
           'guides/pixel-formats',
           'guides/frame-processors-tips',
-          'guides/frame-processor-plugin-list',
           'guides/skia-frame-processors',
           {
             type: 'category',