Zango doc fixes and improvements (#426)

* fixes and improvements

* minor

* added gif

* minor

docs/docs/documentation/getting-started/creating-a-hello-world-app.mdx

@@ -24,7 +24,7 @@ add app name, app description and click on launch app button:
 
 :::note
 
-After your app is launched, don't forget to [configure a domain](../../core/setting-up-zango-project/configuring-app-domain) for it.
+After your app is launched, don't forget to [configure a domain](../../core/setting-up-zango-project/launching-an-app#app-domain-configuration) for it.
 
 :::
 

docs/docs/documentation/getting-started/installing-zango/python-venv.mdx

@@ -40,25 +40,31 @@ cd my_zango_project
 ## Step 2: Create a Virtual Environment
 
 Run the following command to create a virtual environment:
+
 ```bash
 python -m venv venv
 ```
+
 This creates a directory named `venv` in your project folder.
 
 ---
 ## Step 3: Activate the Virtual Environment
+<div className="api-tabs-container">
 <Tabs className="api-tabs">
-  <TabItem value="macos" label="macOS/Linux">
+  <TabItem value="macos" label="macOS/Linux" default>
+
+  ```bash
+  source venv/bin/activate
+  ```
 
-    source venv/bin/activate
-
   </TabItem>
-  <TabItem value="windows" label="Windows" default>
+  <TabItem value="windows" label="Windows">
 
     venv\Scripts\activate
 
   </TabItem>
 </Tabs>
+</div>
 
 Once activated, your command prompt should display `(venv)` at the beginning, indicating the virtual environment is active.
 

docs/docs/documentation/getting-started/zango-cli.mdx

@@ -1,6 +1,6 @@
 ---
 sidebar_label: Zango CLI
-description: Learn more about the Zango CLI
+description: Command Line Interface for managing Zango
 ---
 
 # The Zango CLI
@@ -37,4 +37,13 @@ To get started with **zango CLI**, open your terminal and run the following comm
   zango [command] --help
   ```
 
+### List of Available Zango CLI Commands
+
+| Command         | Description                                    | Options                                                                                  |
+|-----------------|------------------------------------------------|------------------------------------------------------------------------------------------|
+| `start-project` | Start a Zango project                          | <ul><li>`--directory`: Project Directory</li><li>`--db_name`: DB Name</li><li>`--db_user`: DB User</li><li>`--db_password`: DB Password</li><li>`--db_host`: DB Host</li><li>`--db_port`: DB Port</li><li>`--redis_host`: Redis Host</li><li>`--redis_port`: Redis Port</li><li>`--platform_username`: Platform Username</li><li>`--platform_domain_url`: Platform Domain URL</li><li>`--platform_user_password`: Platform User Password</li></ul>|
+| `git-setup`     |Initialize a git repository in the specified app| <ul><li>`--git_repo_url`: Repo URL <b>[required]</b></li><li>`--dev_branch`: Git Branch for Development <b>[required]</b></li><li>`--staging_branch`: Git Branch for Staging <b>[required]</b></li><li>`--prod_branch`: Git Branch for Production <b>[required]</b></li><li>`--initialize`: Initialize the repository</li></ul> |
+| `update-apps`   | To release an app                              | `--app_name`: App Name(s)                                                                |
+
+
 **Zango CLI** is an invaluable tool for efficiently managing your Zango projects and applications through the command line, enhancing your development and administrative capabilities.

docs/docs/documentation/setting-up-zango-project/creating-zango-project.mdx

@@ -60,11 +60,14 @@ project_name/                  # Project root directory
 Follow this guide, and you'll be well on your way to creating powerful and efficient healthcare applications using Zango.
 
 ## Starting the celery worker and celery beat
-Perform the below steps from the root directory of the project
+
+Open a new terminal tab, activate the virtual environment, go to the project directory and run the below commands:
+
+To start the celery worker:
 ```
 celery -A <project_name> worker -l INFO
 ```
-Starting Celery beat
+To start celery beat:
 ```
 celery -A <project_name> beat -l INFO --scheduler django_celery_beat.schedulers:DatabaseScheduler
 ```

docs/docs/documentation/setting-up-zango-project/launching-an-app.mdx

@@ -15,7 +15,13 @@ After you have setup a zango project, its time to launch a new app on Zango. To
 
 ![Todo app launch](/img/todoapp_launch.gif)
 
-# App Domain configuration
+## App Domain and Timezone configuration
+
+:::warning
+Configuring app domain and timezone is very important, you will not be able to access your app without app domain and timezone.
+:::
+
+#### Domain
 Since zango has the ability to create multiple projects under one single zango project, it uses domains to identify which project
 should the request be redirected to. Hence, we will assign a domain, say `todoapp.zango.com`(you can add any domain) to our app from the app panel.
 ![Todo app domain](/img/todoapp_domain_configure.gif)
@@ -25,30 +31,40 @@ the requests to.
 To make it work we'll have to map the domain `todoapp.zango.com` to `localhost` in the `/etc/hosts` file. Lets see how to do that
 for different operating systems:
 
-<Tabs>
+<div className="api-tabs-container">
+<Tabs className="api-tabs">
   <TabItem value="macos" label="MacOS/Linux" default>
   <li>Open a new terminal window</li>
   <li>Run the below command to open `/etc/hosts` file on macOS or Linux:</li>
 
-    sudo nano /etc/hosts
+  ```bash
+  sudo nano /etc/hosts
+  ```
 
   <li>A file will open in the terminal, paste the below line in that file:</li>
 
-    0.0.0.0           todoapp.zango.com
-
+  ```bash
+  0.0.0.0           todoapp.zango.com
+  ```  
+
   <li>Save and exit the editor</li>
   </TabItem>
   <TabItem value="windows" label="Windows">
   <li>Open notepad as administrator</li>
   <li>Navigate to the hosts file path which will be `C:\Windows\System32\drivers\etc\hosts`</li>
   <li>Paste the below line in that file:</li>
 
-    0.0.0.0           todoapp.zango.com
+  ```bash
+  0.0.0.0           todoapp.zango.com
+  ```
 
   <li>Save and close the notepad</li>
   </TabItem>
 </Tabs>
-
+</div>
+
+#### Timezone
+![App timezone](/img/timezone_configuration.gif)
 
-Congratulations! you have successfully configured the domain for your Zango app. The app will be accessile on the address
+Congratulations! you have successfully configured the domain and timezone for your Zango app. The app will be accessile on the address
 `http://domain:port`.

docs/docs/documentation/setting-up-zango-project/overview.mdx

@@ -20,8 +20,9 @@ configured, consider moving on to the [next steps](../../core/setting-up-zango-p
 
 ### 1. PostgreSQL Database Setup
 
-<Tabs>
-  <TabItem value="manual" label="Manual" default>
+<div className="api-tabs-container">
+<Tabs className="api-tabs">
+  <TabItem value="manual" label="Manual" >
 To get started, follow these steps to set up a PostgreSQL database:
 
 1. Install PostgreSQL:
@@ -32,9 +33,11 @@ from the official website: [PostgreSQL Downloads](https://www.postgresql.org/dow
 Once PostgreSQL is installed, open your terminal or a PostgreSQL client.
 Use the following command to create a new database. Replace your_database_name with 
 the desired name for your project's database:
+
 ```bash
 createdb your_database_name
 ```
+
 Ensure that the newly created database is fresh without any existing tables or data.
 With the PostgreSQL database set up and ready to go, you can proceed 
 with setting up your Zango project, confident that you have the necessary infrastructure in place.
@@ -46,26 +49,28 @@ installation guide for your specific platform if you encounter any issues during
 the installation process.
 :::
   </TabItem>
-  <TabItem value="docker" label="Docker">
+  <TabItem value="docker" label="Docker" default>
     Installing and setting up postgresql database manually can be overwhelming sometimes, if you have docker installed, you can set it up in just 3 commands as follows:
 
 1. Pull the Postgres Docker Image
 The first step is to pull the Postgres Docker image from the Docker Hub repository. This is done by running the following command:
-```
-docker pull postgres
-```
+  ```bash
+  docker pull postgres
+  ```
 2. Create a Docker Volume
 Next, we need to create a Docker volume to persist our Postgres data. This is done by running the following command:
-docker volume create postgres_data
+  ```bash
+  docker volume create postgres_data
+  ```
 
 3. Run the Postgres Docker Container
 Now we can run the Postgres Docker container using the following command:
-```
-docker run --name postgres_container -e POSTGRES_PASSWORD=mysecretpassword -d -p 5432:5432 -v postgres_data:/var/lib/postgresql/data postgres
-```
+  ```bash
+  docker run --name postgres_container -e POSTGRES_PASSWORD=mysecretpassword -d -p 5432:5432 -v postgres_data:/var/lib/postgresql/data postgres
+  ```
 
 After the setup is complete, the values of DB configuration for .env would look something like:
-```
+```bash
 POSTGRES_DB=postgres
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=mysecretpassword
@@ -74,15 +79,17 @@ POSTGRES_PORT=5432
 ```
   </TabItem>
 </Tabs>
+</div>
 
 ### 2. Redis setup
 Redis is used as a broker by celery workers. Use the steps below to run redis on your local machine:
-<Tabs>
+<div className="api-tabs-container">
+<Tabs className="api-tabs">
 <TabItem value="manual" label="Manual">
 
 #### Ubuntu/Debian Linux
 
-  ```
+  ```bash
   # Step 1: Update package list
   sudo apt update
 
@@ -101,7 +108,7 @@ Redis is used as a broker by celery workers. Use the steps below to run redis on
 
 #### macOS (using Homebrew)
 
-  ```
+  ```bash
   # Step 1: Install Homebrew (if not installed)
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 
@@ -119,7 +126,7 @@ Redis is used as a broker by celery workers. Use the steps below to run redis on
 
 #### From Source (Any Linux/Unix system)
 
-  ```
+  ```bash
   # Step 1: Install dependencies
   sudo apt install build-essential tcl  # For Ubuntu/Debian
   # OR
@@ -153,13 +160,17 @@ Redis is used as a broker by celery workers. Use the steps below to run redis on
 
 </TabItem>
   <TabItem value="docker" label="Docker" default>
-  Simply run the below command to start redis inside a docker container on port 6379.<br/>
+  Simply run the below command to start redis inside a docker container on port 6379. 
 
-    docker run --name "name" -d -p 6379:6379 redis
+  ```bash
+  docker run --name "name" -d -p 6379:6379 redis
+  ```
 
   For example:
-
-    docker run --name zango_redis -d -p 6379:6379 redis
+  ```bash
+  docker run --name zango_redis -d -p 6379:6379 redis
+  ```
 
   </TabItem>
 </Tabs>
+</div>

docs/docs/tutorials/todo-app/overview.mdx

@@ -18,7 +18,7 @@ Consider this as similar to a django project in which we are going to write all
 isolates the projects at code level.
 
 :::warning
-Before moving on to code, make sure you have [configured a domain](../../core/setting-up-zango-project/configuring-app-domain) for your app.
+Before moving on to code, make sure you have [configured a domain](../../core/setting-up-zango-project/launching-an-app#app-domain-configuration) for your app.
 :::
 
 ## Lets write some code!
@@ -375,7 +375,7 @@ And with this we have completed the coding part. Or we can say, At code level, O
 
 - Now make migrations for our todo app and app it on our database. For generating migrations use the below command:
     ```
-    python manage.py ws_makemigrations todoapp
+    python manage.py ws_makemigration todoapp
     ```
 
 - To apply the generated migrations to our database, simply run:

docs/sidebars.js

@@ -71,6 +71,7 @@ const sidebars = {
         {
           type: "category",
           label: "User Management",
+          description: "Seamlessly manage application users.",
           collapsed: true,
           items: [
             "core/user-management/overview",
@@ -82,6 +83,7 @@ const sidebars = {
         {
           type: "category",
           label: "User Roles",
+          description: "User roles with Role Based Access Control (RBAC).",
           collapsed: true,
           items: [
             "core/user-roles/overview",
@@ -94,6 +96,7 @@ const sidebars = {
         {
           type: "category",
           label: "Permissions Framework",
+          description: "Permission rules and access control.",
           collapsed: true,
           items: [
             "core/permission-framework/overview",
@@ -128,6 +131,7 @@ const sidebars = {
         {
           type: "category",
           label: "Packages Ecosystem",
+          description:"Modular, extensible software components.",
           collapsed: true,
           items: [
             "core/packages-ecosystem/overview",
@@ -137,6 +141,7 @@ const sidebars = {
         {
           type: "category",
           label: "Async Tasks",
+          description: "Seamlessly manage background tasks.",
           collapsed: true,
           items: [
             "core/async-tasks/overview",
@@ -160,6 +165,7 @@ const sidebars = {
         {
           type: "category",
           label: "Modules",
+          description: "Code organisation within your Zango app.",
           collapsed: true,
           items: [
             "core/modules/overview",
@@ -170,6 +176,7 @@ const sidebars = {
         {
           type: "category",
           label: "Views and Routes",
+          description: "Implement Django Views within your Zango app.",
           collapsed: true,
           items: [
             "core/views-and-routes/overview",
@@ -180,12 +187,14 @@ const sidebars = {
         {
           type: "category",
           label: "Templates",
+          description: "Leverage Django’s Templates.",
           collapsed: true,
           items: ["core/templates/overview"],
         },
         {
           type: "category",
           label: "Models",
+          description: "Django models adapted for Zango.",
           collapsed: true,
           items: [
             "core/ddms/overview",

docs/src/css/custom.css

@@ -86,4 +86,22 @@ body[data-theme="dark"] {
 
 .medium-zoom--opened .medium-zoom-overlay {
   z-index: 998;
-}
+}
+
+.api-tabs-container{ 
+  border: 1px;
+  border-style: solid;
+  border-color: #4b3fe1;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+.api-tabs .tabs__item {
+  color: rgb(149, 149, 149);
+}
+
+.api-tabs .tabs__item--active {
+  background-color: #4b3fe1;
+  color: white;
+  border-radius: 5px;
+}