Move Guides to docs/guides directory (#96)

* Move Guides to docs/guides directory

* Rename sidebar

* Fix api/ links

* Update SETUP.mdx

.github/ISSUE_TEMPLATE/BUG_REPORT.md

@@ -12,7 +12,7 @@ assignees: ''
                   Remember that you can use this project FOR FREE.
       Badly written issues are less likely to be picked up than well written ones.
   BEFORE creating an issue, make sure you tried everything in the TROUBLESHOOTING guide:
-        https://cuvent.github.io/react-native-vision-camera/docs/troubleshooting
+        https://cuvent.github.io/react-native-vision-camera/docs/guides/troubleshooting
 -->
 
 

README.md

@@ -7,7 +7,9 @@
   <blockquote><h4>📸 The Camera library that sees the vision.</h4></blockquote>
   <br />
 
-  <a href="https://cuvent.com"><img height="40" src="docs/static/img/cuvent-logo-text.svg"></a>
+  <a href="https://cuvent.com">
+    <img height="40" src="docs/static/img/cuvent-logo-text.svg" />
+  </a>
   <br/>
   <span>
     <a align="center" href="https://github.com/mrousavy?tab=followers">
@@ -23,7 +25,6 @@
       <img src="https://img.shields.io/twitter/follow/cuventtech?label=Follow%20%40cuventtech&style=social" />
     </a>
   </span>
-  </table>
 </div>
 
 <br/>
@@ -35,7 +36,7 @@
 
 ### Documentation
 
-* [Guides](https://cuvent.github.io/react-native-vision-camera/docs/)
+* [Guides](https://cuvent.github.io/react-native-vision-camera/docs/guides)
 * [API](https://cuvent.github.io/react-native-vision-camera/docs/api)
 * [Example](./example/)
 

docs/docs/INDEX.mdx

@@ -0,0 +1,32 @@
+---
+id: index
+title: Welcome to the VisionCamera documentation!
+sidebar_label: Welcome
+slug: /
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+<div>
+  <img align="right" width="283" src={useBaseUrl("img/example_intro.png")} />
+</div>
+
+**Quick Links**
+
+* [Guides](./guides/)
+* [API](./api/)
+* [Example](https://github.com/cuvent/react-native-vision-camera/tree/main/example)
+
+<a href="https://cuvent.com"><img height="40" src={useBaseUrl("img/cuvent-logo-text.svg")} /></a>
+<br/>
+<a align="center" href="https://github.com/mrousavy?tab=followers">
+  <img src="https://img.shields.io/github/followers/mrousavy?label=Follow%20%40mrousavy&style=social" />
+</a>
+<br />
+<a align="center" href="https://twitter.com/mrousavy">
+  <img src="https://img.shields.io/twitter/follow/mrousavy?label=Follow%20%40mrousavy&style=social" />
+</a>
+<br/>
+<a align="center" href="https://twitter.com/cuventtech">
+  <img src="https://img.shields.io/twitter/follow/cuventtech?label=Follow%20%40cuventtech&style=social" />
+</a>

docs/docs/guides/CAPTURING.mdx

@@ -40,7 +40,7 @@ The most important actions are:
 
 ## Taking Photos
 
-To take a photo, simply use the Camera's [`takePhoto(...)`](api/classes/camera.camera-1#takephoto) function:
+To take a photo, simply use the Camera's [`takePhoto(...)`](../api/classes/camera.camera-1#takephoto) function:
 
 ```ts
 const photo = await camera.current.takePhoto({
@@ -48,9 +48,9 @@ const photo = await camera.current.takePhoto({
 })
 ```
 
-You can customize capture options such as [automatic red-eye reduction](api/interfaces/photofile.takephotooptions#enableautoredeyereduction), [automatic image stabilization](api/interfaces/photofile.takephotooptions#enableautostabilization), [combining images from constituent physical camera devices](api/interfaces/photofile.takephotooptions#enablevirtualdevicefusion) to create a single high quality fused image, [enable flash](api/interfaces/photofile.takephotooptions#flash), [prioritize speed over quality](api/interfaces/photofile.takephotooptions#qualityprioritization) and more using the `options` parameter. (See [`TakePhotoOptions`](api/interfaces/photofile.takephotooptions))
+You can customize capture options such as [automatic red-eye reduction](../api/interfaces/photofile.takephotooptions#enableautoredeyereduction), [automatic image stabilization](../api/interfaces/photofile.takephotooptions#enableautostabilization), [combining images from constituent physical camera devices](../api/interfaces/photofile.takephotooptions#enablevirtualdevicefusion) to create a single high quality fused image, [enable flash](../api/interfaces/photofile.takephotooptions#flash), [prioritize speed over quality](../api/interfaces/photofile.takephotooptions#qualityprioritization) and more using the `options` parameter. (See [`TakePhotoOptions`](../api/interfaces/photofile.takephotooptions))
 
-This function returns a [`PhotoFile`](api/interfaces/photofile.photofile-1) which contains a [`path`](api/interfaces/photofile.photofile-1#path) property you can display in your App using an `<Image>` or `<FastImage>`.
+This function returns a [`PhotoFile`](../api/interfaces/photofile.photofile-1) which contains a [`path`](../api/interfaces/photofile.photofile-1#path) property you can display in your App using an `<Image>` or `<FastImage>`.
 
 :::note
 This will change with the upcoming React Native Re-Architecture, so that instead of writing a temporary file which you have to read again, this function will immediately return an Image HostObject on which you can directly interop with the underlying `UIImage`/`Bitmap` for faster image capture. See [issue #69](https://github.com/cuvent/react-native-vision-camera/issues/69)
@@ -58,7 +58,7 @@ This will change with the upcoming React Native Re-Architecture, so that instead
 
 ### Taking Snapshots
 
-Compared to iOS, Cameras on Android tend to be slower in image capture. If you care about speed, you can use the Camera's [`takeSnapshot(...)`](api/classes/camera.camera-1#takesnapshot) function (Android only) which simply takes a snapshot of the Camera View instead of actually taking a photo through the Camera lens.
+Compared to iOS, Cameras on Android tend to be slower in image capture. If you care about speed, you can use the Camera's [`takeSnapshot(...)`](../api/classes/camera.camera-1#takesnapshot) function (Android only) which simply takes a snapshot of the Camera View instead of actually taking a photo through the Camera lens.
 
 ```ts
 const snapshot = await camera.current.takeSnapshot({
@@ -73,7 +73,7 @@ While taking Snapshots is faster than taking Photos, the resulting image has way
 
 ## Recording Videos
 
-To start a video recording, use the Camera's [`startRecording(...)`](api/classes/camera.camera-1#startrecording) function:
+To start a video recording, use the Camera's [`startRecording(...)`](../api/classes/camera.camera-1#startrecording) function:
 
 ```ts
 camera.current.startRecording({
@@ -83,29 +83,29 @@ camera.current.startRecording({
 })
 ```
 
-For any error that occured _while recording the video_, the `onRecordingError` callback will be invoked with a [`CaptureError`](api/classes/cameraerror.cameracaptureerror) and the recording is therefore cancelled.
+For any error that occured _while recording the video_, the `onRecordingError` callback will be invoked with a [`CaptureError`](../api/classes/cameraerror.cameracaptureerror) and the recording is therefore cancelled.
 
 :::note
 Due to limitations of the React Native Bridge, this function can not be awaited. This means, any errors thrown while trying to start the recording (e.g. `capture/recording-in-progress`) can only be caught synchronously (`isBlockingSynchronousMethod`). This will change with the upcoming React Native Re-Architecture.
 :::
 
-To stop the video recording, you can call [`stopRecording(...)`](api/classes/camera.camera-1#stoprecording):
+To stop the video recording, you can call [`stopRecording(...)`](../api/classes/camera.camera-1#stoprecording):
 
 ```ts
 await camera.current.stopRecording()
 ```
 
-Once a recording has been stopped, the `onRecordingFinished` callback passed to the `startRecording` function will be invoked with a [`VideoFile`](api/interfaces/videofile.videofile-1) which you can then use to display in a [`<Video>`](https://github.com/react-native-video/react-native-video) component.
+Once a recording has been stopped, the `onRecordingFinished` callback passed to the `startRecording` function will be invoked with a [`VideoFile`](../api/interfaces/videofile.videofile-1) which you can then use to display in a [`<Video>`](https://github.com/react-native-video/react-native-video) component.
 
 ## Focussing
 
-To focus the camera to a specific point, simply use the Camera's [`focus(...)`](api/classes/camera.camera-1#focus) function:
+To focus the camera to a specific point, simply use the Camera's [`focus(...)`](../api/classes/camera.camera-1#focus) function:
 
 ```ts
 await camera.current.focus({ x: tapEvent.x, y: tapEvent.y })
 ```
 
-The focus function expects a [`Point`](api/interfaces/point.point-1) parameter which represents the location relative to the Camera View where you want to focus the Camera to. If you use react-native-gesture-handler, this will consist of the [`x`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh#x) and [`y`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh#y) properties of the tap event payload.
+The focus function expects a [`Point`](../api/interfaces/point.point-1) parameter which represents the location relative to the Camera View where you want to focus the Camera to. If you use react-native-gesture-handler, this will consist of the [`x`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh#x) and [`y`](https://docs.swmansion.com/react-native-gesture-handler/docs/api/gesture-handlers/tap-gh#y) properties of the tap event payload.
 
 So for example, `{ x: 0, y: 0 }` will focus to the upper left corner, while `{ x: CAM_WIDTH, y: CAM_HEIGHT }` will focus to the bottom right corner.
 

docs/docs/guides/SETUP.mdx

@@ -2,7 +2,7 @@
 id: setup
 title: Getting Started
 sidebar_label: Getting Started
-slug: /
+slug: /guides
 ---
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -51,7 +51,7 @@ Also, make sure you're using Swift 5.2 or above:
 2. If the `LIBRARY_SEARCH_PATH` value is set, make sure there is no explicit reference to Swift-5.0. If there is, remove it. See [this StackOverflow answer](https://stackoverflow.com/a/66281846/1123156).
 3. If the `SWIFT_VERSION` value is set, make sure it is set to `5.2` or higher.
 
-> See [Troubleshooting](troubleshooting) if you're having problems
+> See [Troubleshooting](guides/troubleshooting) if you're having problems
 
 ### Android
 
@@ -75,7 +75,7 @@ compileSdkVersion = 30
 targetSdkVersion = 30
 ```
 
-> See [Troubleshooting](troubleshooting) if you're having problems
+> See [Troubleshooting](guides/troubleshooting) if you're having problems
 
 ## Permissions
 
@@ -117,4 +117,4 @@ The permission request status can have the following values:
 
 <br />
 
-#### 🎉 Hooray! You're ready to learn about [Camera Devices](devices)!
+#### 🎉 Hooray! You're ready to learn about [Camera Devices](guides/devices)!

docs/docusaurus.config.js

@@ -22,7 +22,7 @@ module.exports = {
       items: [
         {
           label: 'Guides',
-          to: 'docs/',
+          to: 'docs/guides',
           position: 'left',
         },
         {
@@ -50,7 +50,7 @@ module.exports = {
           items: [
             {
               label: 'Guides',
-              to: 'docs/'
+              to: 'docs/guides'
             },
             {
               label: 'API',

docs/sidebars.js

@@ -1,6 +1,6 @@
 module.exports = {
-  someSidebar: {
+  visionSidebar: {
-    Guides: ['setup', 'devices', 'formats', 'capturing', 'frame-processors', 'animated', 'errors', 'troubleshooting'],
+    Guides: ['guides/setup', 'guides/devices', 'guides/formats', 'guides/capturing', 'guides/frame-processors', 'guides/animated', 'guides/errors', 'guides/troubleshooting'],
     API: require('./typedoc-sidebar.js'),
   },
 };

docs/src/pages/index.js

@@ -68,7 +68,7 @@ function Home() {
                 'button button--outline button--lg',
                 styles.getStarted,
               )}
-              to={useBaseUrl('docs/')}>
+              to={useBaseUrl('docs/guides/')}>
               Get Started
             </Link>
           </div>

src/Camera.tsx

@@ -16,7 +16,7 @@ export interface CameraProps extends ViewProps {
   /**
    * The Camera Device to use.
    *
-   * See the [Camera Devices](https://cuvent.github.io/react-native-vision-camera/docs/devices) section in the documentation for more information about Camera Devices.
+   * See the [Camera Devices](https://cuvent.github.io/react-native-vision-camera/docs/guides/devices) section in the documentation for more information about Camera Devices.
    *
    * @example
    * ```tsx
@@ -34,7 +34,7 @@ export interface CameraProps extends ViewProps {
    */
   device: CameraDevice;
   /**
-   * Whether the Camera should actively stream video frames, or not. See the [documentation about the `isActive` prop](https://cuvent.github.io/react-native-vision-camera/docs/devices#the-isactive-prop) for more information.
+   * Whether the Camera should actively stream video frames, or not. See the [documentation about the `isActive` prop](https://cuvent.github.io/react-native-vision-camera/docs/guides/devices#the-isactive-prop) for more information.
    *
    * This can be compared to a Video component, where `isActive` specifies whether the video is paused or not.
    *
@@ -62,7 +62,7 @@ export interface CameraProps extends ViewProps {
   /**
    * Enables or disables the native pinch to zoom gesture.
    *
-   * If you want to implement a custom zoom gesture, see [the Zooming with Reanimated documentation](https://cuvent.github.io/react-native-vision-camera/docs/animated).
+   * If you want to implement a custom zoom gesture, see [the Zooming with Reanimated documentation](https://cuvent.github.io/react-native-vision-camera/docs/guides/animated).
    *
    * @default false
    */

src/CameraDevice.ts

@@ -213,7 +213,7 @@ export interface CameraDevice {
   /**
    * All available formats for this camera device. Use this to find the best format for your use case and set it to the Camera's {@linkcode Camera.format} property.
    *
-   * See [the Camera Formats documentation](https://cuvent.github.io/react-native-vision-camera/docs/formats) for more information about Camera Formats.
+   * See [the Camera Formats documentation](https://cuvent.github.io/react-native-vision-camera/docs/guides/formats) for more information about Camera Formats.
    */
   formats: CameraDeviceFormat[];
   /**

src/CameraError.ts

@@ -118,14 +118,14 @@ class CameraError<TCode extends CameraErrorCode> extends Error {
 /**
  * Represents any kind of error that occured while trying to capture a video or photo.
  *
- * See the ["Camera Errors" documentation](https://cuvent.github.io/react-native-vision-camera/docs/errors) for more information about Camera Errors.
+ * See the ["Camera Errors" documentation](https://cuvent.github.io/react-native-vision-camera/docs/guides/errors) for more information about Camera Errors.
  */
 export class CameraCaptureError extends CameraError<CaptureError> {}
 
 /**
  * Represents any kind of error that occured in the Camera View Module.
  *
- * See the ["Camera Errors" documentation](https://cuvent.github.io/react-native-vision-camera/docs/errors) for more information about Camera Errors.
+ * See the ["Camera Errors" documentation](https://cuvent.github.io/react-native-vision-camera/docs/guides/errors) for more information about Camera Errors.
  */
 export class CameraRuntimeError extends CameraError<
   PermissionError | ParameterError | DeviceError | FormatError | SessionError | SystemError | UnknownError