docs: updated installation instructions and began organizing the headers for the doc site

docsite/docs/intro.md

@@ -2,46 +2,103 @@
 sidebar_position: 1
 ---
 
-# Tutorial Intro
+# Installation
 
-Let's discover **Docusaurus in less than 5 minutes**.
+To integrate React Native MediaPipe into your project, follow these simple steps.
 
-## Getting Started
+### Requirements 
+- Gradle minimum SDK 24 or higher
+- Android-SDK Version 26 or higher
+- iOS 12 or higher
 
-Get started by **creating a new site**.
+1. **Open Terminal or Command Prompt:** Open your terminal or command prompt application.
+2. **Navigate to Your Project Directory:** Navigate to your React Native project directory.
+3. **Install React Native MediaPipe:** Run the following command to install React Native MediaPipe and its dependencies:
 
-Or **try Docusaurus immediately** with **[docusaurus.new](https://docusaurus.new)**.
-
-### What you'll need
-
-- [Node.js](https://nodejs.org/en/download/) version 18.0 or above:
-  - When installing Node.js, you are recommended to check all checkboxes related to dependencies.
-
-## Generate a new site
-
-Generate a new Docusaurus site using the **classic template**.
+#### Using npm
+```bash
+npm install react-native-mediapipe react-native-vision-camera react-native-worklets-core
+```
 
-The classic template will automatically be added to your project after you run the command:
+#### Using yarn
 
 ```bash
-npm init docusaurus@latest my-website classic
+yarn install react-native-mediapipe react-native-vision-camera react-native-worklets-core
 ```
+4. **Configuring Babel:** Navigate to the 'babel.config.js' file and add:
 
-You can type this command into Command Prompt, Powershell, Terminal, or any other integrated terminal of your code editor.
+```bash
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [['react-native-worklets-core/plugin']],
+};
+```
+5. **Configuring Gradle:** Navigate to the 'gradle/build.gradle' file and change minSdkVersion to 24
 
-The command also installs all necessary dependencies you need to run Docusaurus.
+:::warning
 
-## Start your site
+**Gradle minimum SDK** must be 24 or higher to run
 
-Run the development server:
+:::
 
 ```bash
-cd my-website
-npm run start
-```
+buildscript {
+    ext {
+        ...
+        minSdkVersion = 24 
+        ...
+    }
+    ...
+}
 
-The `cd` command changes the directory you're working with. In order to work with your newly created Docusaurus site, you'll need to navigate the terminal there.
+```
 
-The `npm run start` command builds your website locally and serves it through a development server, ready for you to view at http://localhost:3000/.
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+### Configuring to your Operating System
+
+<Tabs groupId="operating-systems">
+  <TabItem value="win" label="Windows">
+    <p>
+      1. **Give Permissions:** Navigate to your AndroidManifest.xml file and add:
+    </p>
+    ```
+    <uses-permission android:name="android.permission.CAMERA" />
+
+    <!-- optionally, if you want to record audio: -->
+
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    ```
+  </TabItem>
+  <TabItem value="mac" label="macOS">
+  <p>
+    1. **Give Permissions:** Navigate to your info.plist file in the outermost tag:
+  </p>
+    ```
+    <key>NSCameraUsageDescription</key>
+    <string>$(PRODUCT_NAME) needs access to your Camera.</string>
+
+    <!-- optionally, if you want to record audio: -->
+
+    <key>NSMicrophoneUsageDescription</key>
+    <string>$(PRODUCT_NAME) needs access to your Microphone.</string>
+    ```
+  <p>
+    2. **Terminal Commands:** In your terminal run the following commands
+  </p>
+  <pre>
+    <code>
+      cd ios
+      bundle install
+      pod install
+    </code>
+  </pre>
+  :::info
+
+  You will only need to run the **bundle install** command once.
+
+  :::
+</TabItem>
+</Tabs>
 
-Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.

docsite/docs/tutorial-basics/_category_.json

@@ -1,8 +1,8 @@
 {
-  "label": "Tutorial - Basics",
+  "label": "API",
   "position": 2,
   "link": {
     "type": "generated-index",
-    "description": "5 minutes to learn the most important Docusaurus concepts."
+    "description": "This API reference documentation provides detailed information for each of the classifiers in the react native media-pipe library."
   }
 }

docsite/docusaurus.config.ts

@@ -39,6 +39,7 @@ const config: Config = {
           // Remove this to remove the "edit this page" links.
           // editUrl:  'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
         },
+
         theme: {
           customCss: './src/css/custom.css',
         },
@@ -50,7 +51,7 @@ const config: Config = {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'My Site',
+      title: 'React Native MediaPipe',
       logo: {
         alt: 'My Site Logo',
         src: 'img/logo.svg',
@@ -60,7 +61,7 @@ const config: Config = {
           type: 'docSidebar',
           sidebarId: 'tutorialSidebar',
           position: 'left',
-          label: 'Tutorial',
+          label: 'Docs',
         },
         {
           href: 'https://www.loom.com/share/248e835862c7446abacd8812210ae361?sid=67615359-f063-48af-9d39-77016946c3ed',
@@ -91,7 +92,7 @@ const config: Config = {
           items: [
             {
               label: 'Discord',
-              href: 'https://discordapp.com/invite/react-native-mediapipe',
+              href: 'https://discord.gg/2HPuUda3z4',
             },
           ],
         },
@@ -114,4 +115,4 @@ const config: Config = {
   } satisfies Preset.ThemeConfig,
 };
 
-export default config;
+export default config;

docsite/sidebars.ts

@@ -13,7 +13,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
 const sidebars: SidebarsConfig = {
   // By default, Docusaurus generates a sidebar from the docs folder structure
   tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
-
+ 
   // But you can create a sidebar manually
   /*
   tutorialSidebar: [
@@ -28,4 +28,4 @@ const sidebars: SidebarsConfig = {
    */
 };
 
-export default sidebars;
+export default sidebars;