Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from
Apr 24, 2024
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eec7862
docs: updated installation instructions and began organizing the head…
Jazmin915 Apr 21, 2024
2faa034
Merge branch 'cdiddy77:main' into main
Jazmin915 Apr 23, 2024
bbed326
fix: resolved broken link issue and fixed the nav bar
Jazmin915 Apr 23, 2024
ee45174
Merge branch 'cdiddy77:main' into main
Jazmin915 Apr 24, 2024
f2fce90
fix: changed formatting in the operating systems section on the dicsite
Jazmin915 Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 112 additions & 2 deletions docsite/docs/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,117 @@
sidebar_position: 1
---

# Tutorial Intro
# Installation

To integrate React Native MediaPipe into your project, follow these simple steps.

### Requirements
- Gradle minimum SDK 24 or higher
- Android-SDK Version 26 or higher
- iOS 12 or higher

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:

#### Using npm
```bash
npm install react-native-mediapipe react-native-vision-camera react-native-worklets-core
```

#### Using yarn

```bash
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:

```bash
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [['react-native-workless-core/plugin']],
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

worklets not workless.

};
```
5. **Configuring Gradle:** Navigate to the 'gradle/build.gradle' file and change minSdkVersion to 24

:::warning

**Gradle minimum SDK** must be 24 or higher to run

:::

```bash
buildscript {
ext {
...
minSdkVersion = 24
...
}
...
}

```

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>
<pre>
<code>
&lt;uses-permission android:name="android.permission.CAMERA" /&gt;

&lt;!-- optionally, if you want to record audio: --&gt;

&lt;uses-permission android:name="android.permission.RECORD_AUDIO" /&gt;
</code>
</pre>
</TabItem>
<TabItem value="mac" label="macOS">
<p>
1. **Give Permissions:** Navigate to your info.plist file in the outermost tag:
</p>
<pre>
<code>
&lt;key&gt;NSCameraUsageDescription&lt;/key&gt;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need to hand-encode those, just put the triple ticks before and after, like you do with other code types

&lt;string&gt;$(PRODUCT_NAME) needs access to your Camera.&lt;/string&gt;

&lt;!-- optionally, if you want to record audio: --&gt;

&lt;key&gt;NSMicrophoneUsageDescription&lt;/key&gt;
&lt;string&gt;$(PRODUCT_NAME) needs access to your Microphone.&lt;/string&gt;
</code>
</pre>
<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>



<!-- ---
sidebar_position: 1
---

# Introduction

Let's discover **Docusaurus in less than 5 minutes**.

Expand Down Expand Up @@ -44,4 +154,4 @@ The `cd` command changes the directory you're working with. In order to work wit

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/.

Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes.
Open `docs/intro.md` (this page) and edit some lines: the site **reloads automatically** and displays your changes. -->
4 changes: 2 additions & 2 deletions docsite/docs/tutorial-basics/_category_.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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."
}
}
21 changes: 18 additions & 3 deletions docsite/docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand All @@ -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',
Expand All @@ -60,7 +61,12 @@ const config: Config = {
type: 'docSidebar',
sidebarId: 'tutorialSidebar',
position: 'left',
label: 'Tutorial',
label: 'Docs',
},
{
href: 'https://discord.gg/6E7BdHEJ',
label: 'Community',
position: 'left',
},
{
href: 'https://www.loom.com/share/248e835862c7446abacd8812210ae361?sid=67615359-f063-48af-9d39-77016946c3ed',
Expand All @@ -86,6 +92,15 @@ const config: Config = {
},
],
},
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this adds another footer section titled Community with a single broken link to a page that doesn't exist. What are you trying to achieve with this?

title: 'Community',
items: [
{
label: 'Tutorial',
to: '/docs/community',
},
],
},
{
title: 'Community',
items: [
Copy link
Collaborator

@rorleth rorleth Apr 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that this link doesn't actually work (because I didn't realize I needed a particular invite link) - just remove this and the section ? Or fix the link in here to be the same as in the header ? Or not add the one in the header at all and only here ? Also, any additional items we want to throw under the title "Community" we should put in the items collection, and not add any other sections titled Community, that's just confusing. Typically, you'd put discord/twitter/whatever else you got here.

Also, this will FAIL building the documentation site because the build realizes it's a broken link. Run "yarn build" and observe this failure:

[ERROR] Error: Unable to build website for locale en.
at tryToBuildLocale (/Users/robertorleth/Documents/Github/react-native-mediapipe/docsite/node_modules/@docusaurus/core/lib/commands/build.js:53:19)
at async /Users/robertorleth/Documents/Github/react-native-mediapipe/docsite/node_modules/@docusaurus/core/lib/commands/build.js:64:9
at async mapAsyncSequential (/Users/robertorleth/Documents/Github/react-native-mediapipe/docsite/node_modules/@docusaurus/utils/lib/jsUtils.js:20:24)
at async Command.build (/Users/robertorleth/Documents/Github/react-native-mediapipe/docsite/node_modules/@docusaurus/core/lib/commands/build.js:62:5) {
[cause]: Error: Docusaurus found broken links!

Please check the pages of your site in the list below, and make sure you don't reference any path that does not exist.
Note: it's possible to ignore broken links with the 'onBrokenLinks' Docusaurus configuration, and let the build pass.

It looks like some of the broken links we found appear in many pages of your site.
Maybe those broken links appear on all pages through your site layout?
We recommend that you check your theme configuration for such links (particularly, theme navbar and footer).
Frequent broken links are linking to:

  • /react-native-mediapipe/docs/community

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm trying to make the changes for the community link and had a couple of questions. I have removed the extra community from the footer and inserted a invite link to the community that was there before. If someone were to click on it, it takes them to our discord but it says that I am personally inviting them so it shows my name and user. Not sure if there is a better link we should be using. Also, you mentioned not having the community in the header at all or making sure both communities (from header and footer) are the same. Which would you suggest is the better option?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know that my opinion here is totally relevant, but if you put yourself in the shoes of a person coming to read this page - would you expect to have two links to the same spot, or would that confuse you ? I think a person looking for a Discord link should find it.

No idea about your first question, with making the invite link not personal to you. Looks like this one works (may require a paid account though ?): https://support.discord.com/hc/en-us/articles/115001542132-Custom-Invite-Link

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the community from the nav bar and decided to just keep the one in the footer. I also changed the link for the discord to never expire.

Expand Down Expand Up @@ -114,4 +129,4 @@ const config: Config = {
} satisfies Preset.ThemeConfig,
};

export default config;
export default config;
4 changes: 2 additions & 2 deletions docsite/sidebars.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand All @@ -28,4 +28,4 @@ const sidebars: SidebarsConfig = {
*/
};

export default sidebars;
export default sidebars;
Loading