started website and created initial pages

website/docs/concepts/combining.md

@@ -0,0 +1,17 @@
+---
+title: Combining Providers
+---
+For more information about `ObservableProvider`, [read this](/docs/concepts/providers)
+
+## Combining Providers
+In many situations, we may want to read the state of one provider within another provider
+Let's use the following example:
+```typescript
+import { of } from 'rxjs'
+const userIdProvider = new ObservableProvider(() => of('10'))
+```
+
+We can now create another provider which is able to read our `userIdProvider`
+
+```typescript
+```

website/docs/concepts/providers.md

@@ -0,0 +1,46 @@
+---
+title: Providers
+---
+
+Now that we have installed ProviderX, let's talk about "providers".
+
+Providers allow to you to define and store state, and listen to the state from within your react application
+
+## Declaring a Provider
+You can define a provider as a global variable like so:
+
+```typescript
+import { of } from 'rxjs'
+const provider = new ObservableProvider(() => {
+    return of('value')
+})
+```
+
+There are 4 important things to note here:
+- We are defining an `ObservableProvider`. This is the base provider class. There are multiple others providers.
+- All providers take in a function which return an `Observable`
+- All providers must return an RxJS `Observable` which is being done with `of` from `rxjs`
+- Observables can be of any type - `string`, `number`, `Promise`, etc.
+
+## What about for Asynchronous Operations?
+Many times you will need to perform asynchronous I/O in your application
+
+Here is how you would define a provider which contains an `Observable<Promise>`
+```typescript
+import { from } from 'rxjs'
+
+const provider = new ObservableProvider(() => {
+  const fetchUser = async () => {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/users/1'
+    )
+    const json = await response.json()
+    return json
+  }
+  const observable = from(fetchUser())
+  return observable
+})
+```
+- Here we are creating an asynchronous function to fetch an api result
+- We are then using the `from` function in RxJS to convert that `Promise` to an `Observable`
+- We then return the observable

website/docs/concepts/reading.mdx

@@ -0,0 +1,56 @@
+---
+title: Reading Providers
+---
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+For more information about `ObservableProvider`, [read this](/docs/concepts/providers)
+
+Because an RxJS `Observable` can be of any type, you only need to know one simple way to read 
+providers from your frontend code.
+
+Using this `ObservableProvider`:
+```typescript
+import { from } from 'rxjs'
+
+const provider = new ObservableProvider(() => {
+  const fetchUser = async () => {
+    const response = await fetch(
+      'https://jsonplaceholder.typicode.com/users/1'
+    )
+    const json = await response.json()
+    return json
+  }
+  return from(fetchUser())
+})
+```
+
+<Tabs
+  groupId="providerx"
+  defaultValue="react-providerx"
+  values={[
+    { label: 'React', value: 'react-providerx', },
+  ]}
+>
+<TabItem value="react-providerx">
+
+```tsx
+import { useProvider } from 'react-providerx'
+function Component() {
+    const {isLoading, data, error} = useProvider(provider)
+
+    if(isLoading) return <div> Loading... </div>
+    if(error) return <div> Something went wrong... </div>
+
+    return (
+        <div>
+            {data}
+            <button onClick={() => refresh(provider)}>
+                Click to refresh
+            </button>
+        </div>
+    )
+}
+```
+</TabItem>
+</Tabs>

website/docusaurus.config.js

@@ -1,7 +1,7 @@
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
 module.exports = {
-  title: 'My Site',
-  tagline: 'The tagline of my site',
+  title: 'ProviderX',
+  tagline: 'Easy, maintanable state management with providers and RxJS',
   url: 'https://your-docusaurus-test-site.com',
   baseUrl: '/',
   onBrokenLinks: 'throw',

website/package.json

@@ -32,5 +32,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "^2.0.0-alpha.72",
+    "@tsconfig/docusaurus": "^1.0.2",
+    "@types/react": "^17.0.3",
+    "@types/react-helmet": "^6.1.0",
+    "@types/react-router-dom": "^5.1.7",
+    "typescript": "^4.2.3"
   }
-}
+}

website/sidebars.js

@@ -12,5 +12,14 @@ module.exports = {
         'thank-you',
       ],
     },
+    {
+      type: 'category',
+      label: 'Concepts',
+      items: [
+        'concepts/providers',
+        'concepts/reading',
+        'concepts/combining'
+      ]
+    }
   ],
 };

website/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "@tsconfig/docusaurus/tsconfig.json",
+    "include": ["src/"]
+}