Docs: updates (#12)

* chore(): update base readme

* chore(): update intro and workspace structure

* chore: update layout widget

* chore(): update submodule and docusaurus config

* chore(): update packages
- update gitignore file

* chore(): sdk docs auto update

* chore(): update docs

* chore(): update docs

* chore(): update docs

* chore(): update submodule

* chore(): sdk docs auto update

* chore(): update config

* chore(): update config

* chore(): fix cfg

* chore(): update links

* chore(): update config

* chore(): hooks docs auto update

* chore(): sdk docs auto update

* chore(): update submodule

* chore(): remove and update generated files

* chore(): remove generated files

* chore(): stop tracking generated docs

* chore(): update cfg

* chore(): update yarnrc

* chore(): update yarn

* chore(): update readme and env example

* chore(): update cfg

* chore(): update cfg

* chore(): update

* chore(): update cfg

* chore(): update hooks entry points

---------

Co-authored-by: Marius Darila <[email protected]>

.env.example

@@ -0,0 +1,3 @@
+ALGOLIA_APP_ID=
+ALGOLIA_API_KEY=
+ALGOLIA_INDEX_NAME=

.gitignore

@@ -48,8 +48,9 @@ typings/
 # TypeScript cache
 *.tsbuildinfo
 
-# Optional npm cache directory
+# Optional npm/yarn cache directory
 .npm
+.yarn
 
 # Optional eslint cache
 .eslintcache
@@ -107,3 +108,9 @@ dist
 .idea
 **/.DS_Store
 .docusaurus
+
+*.gz
+
+# generated docs folders
+docs/react-hooks/
+docs/sdk/api-reference/

.yarnrc.yml

@@ -0,0 +1,14 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
+enableColors: true
+
+
+nodeLinker: node-modules
+
+injectEnvironmentFiles: [
+  ".env.local?",
+  ".env.development.local?",
+  ".env?"
+]

README.md

@@ -1,15 +1,38 @@
-# Website
+# AKASHA Documentation
 
 This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
 
+## Local Development
+
+### Init and Update Submodules
+First time running this project locally? please use;
+```
+$ git submodule update --init --recursive
+```
+
+This fetches and updates the linked submodules. Subsequently, you may use;
+```
+$ git submodule update --recursive --remote
+```
+
+### Set up Algolia
+- Create an account on Algolia (if you already have one, skip to next step)
+- Create an Index and copy out its `Application ID` and `Search API Key`
+-  Update the matching fields in the [config file](./docusaurus.config.js)
+- Read more about the DocSearch Migration [here](https://docusaurus.io/blog/2021/11/21/algolia-docsearch-migration)
+
 ### Installation
 
 ```
 $ yarn
 ```
 
-### Local Development
+### Bootstrap files
+```
+$ yarn run bootstrap
+```
 
+### Start Local Server
 ```
 $ yarn start
 ```
@@ -24,7 +47,7 @@ $ yarn build
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
-### Deployment
+### Deploy
 
 Using SSH:
 

docs/design-system/_category.json

@@ -0,0 +1,4 @@
+{
+  "label": "Design System",
+  "position": 4
+}

docs/design-system/components/_category.json

@@ -0,0 +1,4 @@
+{
+  "label": "Design System Components",
+  "position": 2
+}

docs/design-system/components/index.md

@@ -0,0 +1,6 @@
+---
+sidebar_position: 2
+sidebar_label: Design System Components
+---
+
+# Design System Components

docs/design-system/core/_category.json

@@ -0,0 +1,4 @@
+{
+  "label": "Design System Core",
+  "position": 1
+}

docs/design-system/core/index.md

@@ -0,0 +1,59 @@
+---
+sidebar_position: 1
+sidebar_label: Design System Core
+---
+
+# Design System Core
+
+## Button
+
+A button component presents two variants: `primary` for the call-to-action use case and `secondary` for regular usage. It usually has rounder borders, can display an icon, or it can be text only.
+
+```tsx
+ <Button variant="secondary" label="Click me" onClick={handleClick}>
+```
+
+## Card
+
+A container of information that has predefined styles following the AKASHA design language. It has rounded borders and displays a box-shadow by default, making it useful for structuring elements in apps. It can be used as an entry point for other, more detailed elements:
+
+```tsx
+  <Card elevation={1} padding="p-4">
+    <Stack>
+      <ExampleComponent1 />
+      <ExampleComponent2 />
+    </Stack>
+    <Stack>
+      <ExampleComponent3 />
+      <ExampleComponent4 />
+    </Stack>
+  </Card>
+```
+
+
+## Checkbox
+
+A checkbox component is used to take user input in forms and other related fields.
+
+```tsx
+<Checkbox label={'Checkbox'} name="check1" value="check1" handleChange={handleCheckbox} isSelected={isChecked} isDisabled={disableCheckbox} />
+```
+
+## Stack
+
+A Stack is a container that lays out its content in particular direction (column, by default) using flexbox. It can be used to arrange other components:
+
+```tsx
+  <Stack direction="row" spacing="gap-4" padding="p-4" fullWidth>
+    <ExampleComponent1 />
+    <ExampleComponent2 />
+  </Stack>
+```
+
+## Toggle
+
+A toggle component has multiple sizes amongst other properties such as `disabled`, `checked`.
+
+```tsx
+ <Toggle checked={isChecked} onChange={handleToggle} size="small">
+```

docs/design-system/index.md

@@ -0,0 +1,19 @@
+---
+sidebar_position: 4
+sidebar_label: Design System
+---
+# Design System
+
+AKASHA Core's Design System is a library of UI components built with [Twind](https://twind.dev/), a tailwind-in-js solution. The components implement the visual design language of AKASHA, and can be customised with tailwind style directives through the `customStyle` property.
+
+It is split into two distinct libraries
+- [Core](./core) 
+- [Components](./components)
+
+For a showcase of the components you can visit our [storybook](https://storybook-awf.netlify.app/), and check out the DSCORE and DSCOMPONENTS sections.
+
+To use a component, import it from the corresponding package. For example, to use a Stack, which is defined under `Core`, you import it like so:
+
+```tsx
+import Stack from '@akashaorg/design-system-core/lib/components/Stack';
+```

docs/dev-quickstart.md

@@ -1,93 +1,104 @@
 ---
-sidebar_position: 3
+sidebar_position: 2
 pagination_next: integrations/applications/create-an-app
 ---
 
-# Development quickstart
+# Development Quickstart
 
-### Requirements
+## Requirements
 
-- [Node.js](https://nodejs.org) v16.x
-- [yarn](https://classic.yarnpkg.com/lang/en/) v1.x
+- [Node.js](https://nodejs.org) >= v20.9.x
+- [yarn](https://yarnpkg.com/getting-started/install) >= v4.1.x
+- Operating System - Linux/MacOS
 
 :::caution Windows OS
 This guide assumes that you are using a Linux or MacOS. For Windows, please use Windows Subsystem for Linux ([WSL](https://docs.microsoft.com/en-us/windows/wsl/install)).
 :::
 
-### Set Up a Local Ceramic Node:
-
+:::info
+This project runs on a specific version of yarn - @4.1.1. If you are already on this version of yarn, and your node version meets the minimum requirement, you may skip to the Getting Started section.
+:::
+
+## Install/Update required packages
+1. If you are using different versions of node and yarn, consider using nvm and corepack respectively to handle the versions on your computer.
+
+2. If you already have nvm, please skip to next step. If you do not already have nvm installed, you can follow a more detailed instructions here on nvm github repo.
+
+3. Once you have installed and verified your nvm installation, you can now install the specified versions of `node` and `yarn`.
+> If you are already on the minimum node version (v20.9.0), you may skip to step 5
+
+4. Run `nvm install 21.7.1` to install the specified version - 21.7.1 and `nvm use 21.7.1` to use this installed version.
+> For the purpose of this documentation, we are using node version 21.7.1, however you may replace this with any version that meets the minimum node version, as specified above.
+* Verify the currently active node installation on your nvm by running `nvm which node`. You should see value like `{user_path}/.nvm/versions/node/v21.7.1/bin/node`
+> corepack should already be installed globally, verify this with `npm list -g`
+
+5. Enable corepack using `corepack enable`
+
+6. Add the specific version of yarn using `corepack install -g [email protected]`. For more details, check the [yarn docs](https://yarnpkg.com/getting-started/install)
+> Note: Yarn will be installed globally so make sure it doesn't affect other projects which require a different version of yarn. By using nvm, each node version you install will have it's own global packages so you can change to different versions of yarn.
+
+7. Restart your terminal and verify you are on the correct versions of node and yarn
+
+## Set Up a Local Ceramic Node
 **1. Follow this [ComposeDB's guide](https://composedb.js.org/docs/0.4.x/set-up-your-environment) that shows you how to install and configure relevant packages for running a Ceramic node locally.**
 
 **2. Verify that you have everything set up correctly**
 
 Run
-
 ```bash
 $ npx @ceramicnetwork/cli daemon
 ```
 
 in your Terminal and if you see the following message
-
 ```bash
 $ IMPORTANT: Ceramic API running on 0.0.0.0:7007'
 ```
 you have successfully set up your local Ceramic node 🚀.
 
 :::info
-
 In the future, we will provide a public node for Ceramic connection and this step will no longer be needed.
-
 :::
 
-
-### Installation Steps:
+## Clone and Install Project locally
 
 **1. Fork the [repository](https://github.com/AKASHAorg/akasha-core) on GitHub**
 
 **2. Clone the newly forked repository to your local machine.**
-
-```bash title="replace <your-username> with your GitHub username"
-$ git clone https://github.com/<your-username>/akasha-core.git
+```bash title="replace <your-github-username> with your GitHub username"
+$ git clone https://github.com/<your-github-username>/akasha-core.git
 ```
 
 **3. Change directory to repository's root**
-
 ```bash
 $ cd akasha-core
 ```
 
-**4. Install dependencies**
-
-```bash
-$ yarn bootstrap
-```
-
-**5. Set up env values**
+**4. Set up env values**
 
 Create a new file `.env` at the root of the project with the contents of [env.example](https://github.com/AKASHAorg/akasha-core/blob/next/.env.example).
 
 Follow the comments from the example env file on how to fill in the values.
 
-**6. Build the application**
+**5. Install dependencies and build the application**
 
 ```bash
 $ yarn build:all
 ```
 
-### Running the application
+## Running the application
 
 From the root directory run:
 
 ```bash
-$ yarn start:feed-app
+$ yarn world:dev
 ```
 
-Visit `https://localhost:8131/` in your browser.
+Visit `https://localhost:8131/` on your browser.
 
 :::info
 We are using a self-signed certificate for localhost.
 You will need to accept the certificate in your browser.
 :::
 
 **Congrats!** You're ready to start developing.
-Let's start by [creating a super simple app](/integrations/applications/create-an-app).
+Let's start by [creating a super simple app](/docs/integrations/applications/create-an-app.md).

docs/glossary.md

@@ -0,0 +1,25 @@
+---
+title: "Glossary"
+sidebar_position: 8
+---
+
+# Glossary
+
+### Antenna
+An Antenna is a feed of beams sorted in chronological order and can be tailored to user's interests.
+
+### Beam
+A Beam is the equivalent of a regular post (in a traditional social networking context) however the content of the beam is composed of one or more content blocks which are provided by apps.
+
+### Profile
+A Profile depicts a user's persona in a given world. It holds their avatar, basic info and list of beams, interests ad connections with other users in a world.
+
+### Reflection
+A Reflection is a comment made under a beam or another reflection.
+
+### Tag
+A Tag is a word that uniquely links to a group of posts relating to a specific interest or topic. Beams can be filtered using tags.
+
+### World
+A world is a web3-powered modular social platform. Every world can have a predefined (installed by default) collection of apps and widgets. The config file of a specific world is defined under the [worlds](https://github.com/AKASHAorg/akasha-core/tree/next/worlds/akasha.world) directory. For example, config file for `Akasha World` can be found [here](https://github.com/AKASHAorg/akasha-core/blob/next/worlds/akasha.world/src/index.ts) 
+