UI/UX improvements

public/mdFiles/USER_COMMANDS.md

@@ -0,0 +1,122 @@
+# Ckart CLI - Commands Documentation
+
+## Overview
+
+Ckart CLI is a command-line tool to manage virtual machines (VMs) and their associated resources. Below is a detailed guide to the commands, arguments, and flags available in the CLI.
+
+---
+
+## Commands
+
+### 1. `auth`
+
+Authenticate the CLI session.
+
+**Usage:**
+
+```bash
+ckart auth --token <your-token>
+```
+
+**Arguments:**
+
+- `--token` (required): Authentication token.
+
+---
+
+### 2. `vms`
+
+Manage virtual machines.
+
+**Usage:**
+
+```bash
+ckart vms [options]
+```
+
+**Options:**
+
+- `-a`, `--all`: Show all VMs.
+- `--create <provider_id>`: Create a new VM with the given Provider ID.
+- `--connect <vm_name>`: Connect to the VM's WireGuard network.
+- `--disconnect <vm_name>`: Disconnect from the VM's WireGuard network.
+- `--start <vm_name>`: Start a VM.
+- `--stop <vm_name>`: Stop a VM.
+- `-rm`, `--remove <vm_name>`: Remove a VM.
+- `-f`, `--force`: Force remove a VM.
+- `-h`, `--help`: Show help for the `vms` command.
+
+---
+
+### 3. `heartbeat`
+
+Check if the management server is online.
+
+**Usage:**
+
+```bash
+ckart heartbeat
+```
+
+---
+
+### 4. `providers`
+
+Manage providers.
+
+**Usage:**
+
+```bash
+ckart providers [options]
+```
+
+**Options:**
+
+- `-a`, `--all`: List all providers.
+- `-d`, `--details <provider_id>`: Show details of a specific provider.
+- `<provider_id> -q`, `--query <vcpus> <ram> <storage>`: Query providers with specific vCPUs, RAM, and storage.
+
+---
+
+### 5. `start` / `stop`
+
+Start or stop a VM.
+
+**Usage:**
+
+```bash
+ckart vms --start <vm_name>
+ckart vms --stop <vm_name>
+```
+
+---
+
+### 6. `remove`
+
+Remove a VM.
+
+**Usage:**
+
+```bash
+ckart vms --remove <vm_name> [--force]
+```
+
+---
+
+### 7. `connect` / `disconnect`
+
+Connect or disconnect a VM from the WireGuard network.
+
+**Usage:**
+
+```bash
+ckart vms --connect <vm_name>
+ckart vms --disconnect <vm_name>
+```
+
+---
+
+## Notes
+
+- Ensure the `CKART_SESSION` environment variable is set before using commands (except `auth`).
+- Use `ckart -h` to view all available commands.

public/mdFiles/USER_INSTALLATION.md

@@ -0,0 +1,99 @@
+# Ckart CLI - Installation Guide
+
+## 🛠️ System Requirements
+
+- **Operating System**: Windows, Linux, or macOS
+- **Python Version**: 3.7+
+- **WireGuard**: Installed automatically by the script
+- **Administrator Privileges**: Required for installation
+
+---
+
+## 🔧 Installation Steps
+
+### 1. Download the Installer
+
+- For Windows: Download `Install-ckart.ps1` from the [Releases](https://github.com/ProjectIndra/Indra-cli/releases).
+- For Linux/Mac: Download `Install-ckart.sh` from the same location.
+
+### 2. Run the Installer
+
+#### Windows
+
+Run the following command in PowerShell (as Administrator):
+
+```powershell
+powershell -ExecutionPolicy Bypass -File Install-ckart.ps1
+```
+
+#### Linux/Mac
+
+Run the following command in the terminal:
+
+```bash
+bash Install-ckart.sh
+```
+
+This will:
+
+- Install WireGuard (if not already installed).
+- Install the CLI from GitHub.
+- Set up required environment variables.
+
+---
+
+## 🔐 Environment Variables
+
+After installation, a `.env` file will be created. It must contain:
+
+```env
+LISTEN_PORT=51820
+WIREGUARD_EXE=C:\Program Files\WireGuard\wireguard.exe
+CONFIG_PATH=C:\Users\<YourUsername>\Documents\new-client.conf
+CONFIG_NAME=new-client
+CKART_SESSION=<automatically set on auth>
+```
+
+---
+
+## 🔄 Upgrade CLI
+
+To upgrade the CLI directly from GitHub:
+
+```bash
+pip install --upgrade git+https://github.com/ProjectIndra/Indra-cli.git
+```
+
+---
+
+## 🧪 Developer Installation
+
+### 1. Build from Source
+
+From the root of the project (where `pyproject.toml` is located):
+
+```bash
+python -m build
+```
+
+### 2. Install the Wheel
+
+```bash
+pip install dist/ckart_cli-0.1-py3-none-any.whl --force-reinstall
+```
+
+---
+
+## ✅ You're Ready!
+
+Run the CLI with:
+
+```bash
+ckart
+```
+
+Authenticate with your token:
+
+```bash
+ckart auth --token <your-token>
+```

src/docs/components/docsMainPage.js

@@ -4,6 +4,7 @@ import Sidebar from './sidebar';
 import ShowDocumentation from './showDocumentation';
 import Mainheadings from './mainheadings';
 import "../css/docsMainPage.css";
+import { file } from 'jszip';
 
 const DocsMainPage = () => {
 
@@ -20,22 +21,27 @@ const DocsMainPage = () => {
  name: "Being a Client",
  file: "/mdFiles/being_a_client.md"
  },
- {
- name: "CLI Reference",
- file: "/mdFiles/cli_reference.md"
- },
  {
  name: "API Reference",
  file: "/mdFiles/api_reference.md"
  },
+ {
+ name: "CKart CLI Installation",
+ file: "/mdFiles/USER_INSTALLATION.md"
+ },
+ {
+ name: "CKart CLI Commands",
+ file: "/mdFiles/USER_COMMANDS.md"
+ },
  {
  name: "FAQ",
  file: "/mdFiles/faq.md"
  },
  {
  name: "Support",
  file: "/mdFiles/support.md"
- }
+ },
+
  ];
 
  const [scrollToId, setScrollToId] = useState(null);
@@ -47,13 +53,14 @@ const DocsMainPage = () => {
  }
 
 
- return <>
+ return <div>
+ {/* <div><h2 className="text-2xl font-semibold text-slate-800 mb-6 p-6">Documentation</h2></div> */}
  <div className="docs-main-page">
  <Sidebar handleFileChange={handleFileChange} mdFiles={mdFiles} />
  <ShowDocumentation mdFile={mdFile} scrollToId={scrollToId} />
- <Mainheadings className="z-0" mdFile={mdFile} setScrollToId={setScrollToId} />
+ <Mainheadings mdFile={mdFile} setScrollToId={setScrollToId} />
  </div>
- </>
+ </div>
 };
 
 export default DocsMainPage;

src/docs/css/ShowDocumentation.css

@@ -1,58 +1,61 @@
 /* Center and style the markdown content */
 .showdocumentation {
- box-sizing: border-box;
- max-width: 980px;
- margin: 0 auto;
- padding: 30px;
- background-color: rgb(255, 255, 255);
- color: black;
- box-shadow: 0 0 10px rgba(0,0,0,0.05);
- overflow-x: auto;
+	box-sizing: border-box;
+	width: 100%;
+	max-width: 100%;
+	margin: 0;
+	padding: 30px 32px;
+	background-color: #fff;
+	color: black;
+	box-shadow: none;
+	overflow-x: auto;
+	height: 100%;
+	min-height: 0;
 }
 
 /* Optional tweaks for better spacing */
-.showdocumentation h1,
-.showdocumentation h2,
+.showdocumentation h1,
+.showdocumentation h2,
 .showdocumentation h3 {
-border-bottom: 1px solid #eaecef;
-padding-bottom: 0.3em;
-margin-top: 1.5em;
+border-bottom: 1px solid #eaecef;
+padding-bottom: 0.3em;
+	/* margin-top: 1.5em; */
 }
 
 /* Improve table readability */
 .showdocumentation table {
-border-collapse: collapse;
-width: 100%;
-overflow-x: auto;
-display: block;
+border-collapse: collapse;
+width: 100%;
+overflow-x: auto;
+display: block;
 }
 
 .showdocumentation th,
 .showdocumentation td {
-border: 1px solid #dfe2e5;
-padding: 6px 13px;
+border: 1px solid #dfe2e5;
+padding: 6px 13px;
 }
 
 .showdocumentation blockquote {
-color: #6a737d;
-border-left: 0.25em solid #dfe2e5;
-padding: 0 1em;
-margin-left: 0;
-background-color: #f6f8fa;
+color: #6a737d;
+border-left: 0.25em solid #dfe2e5;
+padding: 0 1em;
+margin-left: 0;
+background-color: #f6f8fa;
 }
 
 /* Code block padding */
 .showdocumentation pre {
-background: #f6f8fa;
-padding: 16px;
-border-radius: 6px;
-overflow: auto;
+background: #f6f8fa;
+padding: 16px;
+border-radius: 6px;
+overflow: auto;
 }
 
 /* Inline code */
 .showdocumentation code {
-background-color: rgba(27,31,35,0.05);
-padding: 0.2em 0.4em;
-border-radius: 3px;
-font-size: 85%;
+background-color: rgba(27,31,35,0.05);
+padding: 0.2em 0.4em;
+border-radius: 3px;
+font-size: 85%;
 }