Move Guides to docs/guides directory (#96)

* Move Guides to docs/guides directory * Rename sidebar * Fix api/ links * Update SETUP.mdx
2021-03-23 15:25:27 +01:00
parent a17d6a53d3
commit 48821d50ca
18 changed files with 62 additions and 29 deletions
--- a/docs/docs/INDEX.mdx
+++ b/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>
--- a/docs/docs/guides/ANIMATED.mdx
+++ b/docs/docs/guides/ANIMATED.mdx
--- a/docs/docs/guides/CAPTURING.mdx
+++ b/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.

--- a/docs/docs/guides/DEVICES.mdx
+++ b/docs/docs/guides/DEVICES.mdx
--- a/docs/docs/guides/ERRORS.mdx
+++ b/docs/docs/guides/ERRORS.mdx
--- a/docs/docs/guides/FORMATS.mdx
+++ b/docs/docs/guides/FORMATS.mdx
--- a/docs/docs/guides/FRAME_PROCESSORS.mdx
+++ b/docs/docs/guides/FRAME_PROCESSORS.mdx
--- a/docs/docs/guides/SETUP.mdx
+++ b/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)!
--- a/docs/docs/guides/TODO.md
+++ b/docs/docs/guides/TODO.md
--- a/docs/docs/guides/TROUBLESHOOTING.mdx
+++ b/docs/docs/guides/TROUBLESHOOTING.mdx
--- a/docs/docusaurus.config.js
+++ b/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',
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -1,6 +1,6 @@
 module.exports = {
-  someSidebar: {
-    Guides: ['setup', 'devices', 'formats', 'capturing', 'frame-processors', 'animated', 'errors', 'troubleshooting'],
+  visionSidebar: {
+    Guides: ['guides/setup', 'guides/devices', 'guides/formats', 'guides/capturing', 'guides/frame-processors', 'guides/animated', 'guides/errors', 'guides/troubleshooting'],
    API: require('./typedoc-sidebar.js'),
  },
 };
--- a/docs/src/pages/index.js
+++ b/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>