add docs

AgoraIO-Community · Dec 9, 2021 · 38a3bec · 38a3bec
1 parent 8fc65b2
commit 38a3bec
Show file tree

Hide file tree

Showing 29 changed files with 4,869 additions and 1,227 deletions.
diff --git a/README.md b/README.md
@@ -1,64 +1,64 @@
-# agora-react-uikit
+# Agora React Web UIKit
 
-> A React based UIKit for the Agora Web SDK
+> Instantly integrate Agora video calling or streaming into your web application using a React based UIKit for the Agora Web SDK.
 
 [![NPM](https://img.shields.io/npm/v/agora-react-uikit.svg)](https://www.npmjs.com/package/agora-react-uikit) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 ## Getting started
-
 ### Requirements
 - [An Agora developer account](https://sso.agora.io/en/signup?utm_source=github&utm_repo=Agora-React-Web-UIKit)
 - A React project
-- A Modern Web Browser
 
 You can also use the UIKit outside a React project (for example in a vanilla-js project) using web-components. Find out more in the `/web-component` directory.
+
 ### Installation
-To a react app (generated using create-react-app) add the UIKit:
+To a react application, add the following:
 
 ```bash
 npm i agora-react-uikit
 ```
 
 ### Usage
 
-This UIKit is very simple to use and contains a high level component called `AgoraUIKit`. You can check out code explanation here.
+This UIKit contains a high level component called `AgoraUIKit`. You can check out code explanation here.
 
 **A simple sample app integrating Agora UI Kit:**
 ```jsx
-import React, { useState } from 'react'
-import AgoraUIKit, { layout } from 'agora-react-uikit'
+import React, {useState} from 'react';
+import AgoraUIKit from 'agora-react-uikit';
 
 const App = () => {
-  const [videocall, setVideocall] = useState(true)
-
-  return videocall ? (
-    <div style={{display: 'flex', flex: 1}}>
-        <AgoraUIKit
-        rtcProps={{
-            appId: '<Agora App ID>',
-            channel: 'test',
-            token: '<Channel Token>',
-        }}
-        callbacks={{
-            EndCall: () => setVideocall(false),
-        }} />
-    <div/>
+  const [videoCall, setVideoCall] = useState(true);
+  const rtcProps = {
+    appId: '<Agora App ID>',
+    channel: 'test',
+    token: '<Your Agora Token>' // skip if you're using an app in testing mode
+  };
+  const callbacks = {
+    EndCall: () => setVideoCall(false),
+  };
+  return videoCall ? (
+    <AgoraUIKit rtcProps={rtcProps} callbacks={callbacks} />
   ) : (
-    <h3 onClick={() => setVideocall(true)}>Start Call</h3>
-  )   
-}
+    <Text onPress={()=>setVideoCall(true)}>Start Call</Text>
+  );
+};
 
-export default App
+export default App;
 ```
 
-**Replace the `'<Agora App ID>'` with your own appID**.
-
-If you're using an App ID in secured mode, you'll need to pass in a token (you can generate a temporary token using the Agora console). Otherwise for testing, you can use the insecure mode and pass in null for the token.
+**Insert your Agora AppID and Token**.
 
 ### Demo Project
-There's a demo available in `/example`.
+There's a demo project in the repo [here](https://github.com/AgoraIO-Community/Web-React-UIKit/tree/main/example).
+
+### Instructions for running the demo:
+1. Add your Agora App ID to `/example/src/App.tsx`
+2. Run `npm start` to start the bundler to build the library
+3. Execute `cd example && npm start` to run the example app
+
+## Documentation
+
+For full documentation, see our [docs page](https://agoraio-community.github.io/Web-React-UIKit/).
 
-- Instal Node.js LTS
-- Add your Agora App ID to `/example/src/App.tsx`
-- Run `npm start` to start the bundler
-- Run `cd example && npm start` to run the example app
+You can visit the [wiki](https://github.com/AgoraIO-Community/Web-React-UIKit/wiki) for other examples and in depth guide.
diff --git a/docs/.nojekyll b/docs/.nojekyll
@@ -0,0 +1 @@
+TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
diff --git a/docs/assets/highlight.css b/docs/assets/highlight.css
@@ -0,0 +1,106 @@
+:root {
+    --light-hl-0: #000000;
+    --dark-hl-0: #D4D4D4;
+    --light-hl-1: #AF00DB;
+    --dark-hl-1: #C586C0;
+    --light-hl-2: #001080;
+    --dark-hl-2: #9CDCFE;
+    --light-hl-3: #A31515;
+    --dark-hl-3: #CE9178;
+    --light-hl-4: #0000FF;
+    --dark-hl-4: #569CD6;
+    --light-hl-5: #795E26;
+    --dark-hl-5: #DCDCAA;
+    --light-hl-6: #0070C1;
+    --dark-hl-6: #4FC1FF;
+    --light-hl-7: #008000;
+    --dark-hl-7: #6A9955;
+    --light-hl-8: #800000;
+    --dark-hl-8: #808080;
+    --light-hl-9: #267F99;
+    --dark-hl-9: #4EC9B0;
+    --light-hl-10: #FF0000;
+    --dark-hl-10: #9CDCFE;
+    --light-hl-11: #000000FF;
+    --dark-hl-11: #D4D4D4;
+    --light-code-background: #FFFFFF;
+    --dark-code-background: #1E1E1E;
+}
+
+@media (prefers-color-scheme: light) { :root {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --code-background: var(--light-code-background);
+} }
+
+@media (prefers-color-scheme: dark) { :root {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --code-background: var(--dark-code-background);
+} }
+
+body.light {
+    --hl-0: var(--light-hl-0);
+    --hl-1: var(--light-hl-1);
+    --hl-2: var(--light-hl-2);
+    --hl-3: var(--light-hl-3);
+    --hl-4: var(--light-hl-4);
+    --hl-5: var(--light-hl-5);
+    --hl-6: var(--light-hl-6);
+    --hl-7: var(--light-hl-7);
+    --hl-8: var(--light-hl-8);
+    --hl-9: var(--light-hl-9);
+    --hl-10: var(--light-hl-10);
+    --hl-11: var(--light-hl-11);
+    --code-background: var(--light-code-background);
+}
+
+body.dark {
+    --hl-0: var(--dark-hl-0);
+    --hl-1: var(--dark-hl-1);
+    --hl-2: var(--dark-hl-2);
+    --hl-3: var(--dark-hl-3);
+    --hl-4: var(--dark-hl-4);
+    --hl-5: var(--dark-hl-5);
+    --hl-6: var(--dark-hl-6);
+    --hl-7: var(--dark-hl-7);
+    --hl-8: var(--dark-hl-8);
+    --hl-9: var(--dark-hl-9);
+    --hl-10: var(--dark-hl-10);
+    --hl-11: var(--dark-hl-11);
+    --code-background: var(--dark-code-background);
+}
+
+.hl-0 { color: var(--hl-0); }
+.hl-1 { color: var(--hl-1); }
+.hl-2 { color: var(--hl-2); }
+.hl-3 { color: var(--hl-3); }
+.hl-4 { color: var(--hl-4); }
+.hl-5 { color: var(--hl-5); }
+.hl-6 { color: var(--hl-6); }
+.hl-7 { color: var(--hl-7); }
+.hl-8 { color: var(--hl-8); }
+.hl-9 { color: var(--hl-9); }
+.hl-10 { color: var(--hl-10); }
+.hl-11 { color: var(--hl-11); }
+pre, code { background: var(--code-background); }