feat(minajs): add services breakdown

Author: mrcnk

apps/docs/docs/pages/about.mdx

@@ -1,8 +1,8 @@
-import { Callout } from 'vocs/components'
-
 # About MinaJS [Learn about MinaJS and Klesia.]
 
-<Callout type="warning">As of September 2024, MinaJS is in early development. Don't use for production just yet.</Callout>
+:::warning
+As of September 2024, MinaJS is in early development. Don't use for production just yet.
+:::
 
 MinaJS is a TypeScript interface for Mina Protocol. It provides a set of TypeScript types and utilities to interact with Mina Protocol. MinaJS is the missing piece for your smooth zkApp development on Mina.
 It aims to remove the complexities, and allow developers to focus on building innovative zkApps on Mina.
@@ -17,6 +17,44 @@ MinaJS provides a set of services to interact with Mina Protocol. The services a
 - **Klesia** - A JSON-RPC wrapper over Mina Node's GraphQL API, similar to APIs like Alchemy and Infura. It's self hostable, so you can bring your own infrastructure.
 - **Klesia SDK** - A TypeScript SDK to interact with Klesia JSON-RPC API with type-safe interfaces and properties auto-completion.
 
+## Services and interaction breakdown
+
+```mermaid
+graph TD
+  A[End user] -- uses --> B[zkApp]
+  B[zkApp] -- provides feedback to --> A[End user]
+
+  B[zkApp] -- integrated with --> C[MinaJS Connect]
+  C[MinaJS Connect] -- provides responses to --> B[zkApp]
+
+  C[MinaJS Connect] -- interacts with --> D[MinaJS Provider]
+  D[MinaJS Provider] -- provides responses to --> C[MinaJS Connect]
+
+  D[MinaJS Provider] -- interacts with --> E[Mina Wallet]
+  E[Mina Wallet] -- sends data to --> D[MinaJS Provider]
+
+  E[Mina Wallet] -- implements --> F[MinaJS Account]
+  F[MinaJS Account] -- handles accounts and signing for --> E[Mina Wallet]
+
+  E[Mina Wallet] -- interacts with --> I[Klesia SDK]
+  I[Klesia SDK] -- provides data to --> E[Mina Wallet]
+
+  G[Klesia] -- interacts with --> H[Mina Node]
+  H[Mina Node] -- provides data to --> G[Klesia]
+
+  B[zkApp] -- uses --> I[Klesia SDK]
+  I[Klesia SDK] -- provides data to --> B[zkApp]
+
+  I[Klesia SDK] -- interacts with --> G[Klesia]
+  G[Klesia] -- provides data to --> I[Klesia SDK]
+
+  A[End user] -- uses --> E[Mina Wallet]
+  E[Mina Wallet] -- provides data to --> A[End user]
+
+  G[Klesia] -- interacts with --> J[Fallback Mina Node]
+  J[Fallback Mina Node] -- provides data to --> G[Klesia]
+```
+
 ## Supported Chains
 
 - Mina Mainnet

apps/docs/docs/pages/connect/getting-started.mdx

@@ -0,0 +1 @@
+# Getting Started [Start with MinaJS Connect.]

apps/docs/docs/pages/connect/index.mdx

@@ -1 +1,7 @@
-#TODO
+# MinaJS Connect [zkApps and Mina wallets living in piece.]
+
+The Connect library is a centerpiece of connecting your zkApp with Mina Protocol wallets. It provides a set of utilities to discover wallets, and interact with them in a seamless way, complying to the latest specs of Mina.
+
+## Purpose
+
+With MinaJS Connect we try our best to comply to the latest Mina Protocol specs regarding zkApps and wallets, so you don't have to. The Connect library complies with [RFC-0008](https://github.com/MinaFoundation/Core-Grants/blob/main/RFCs/rfc-0008-wallet-provider-api.md).

apps/docs/docs/pages/index.mdx

@@ -19,7 +19,7 @@ import { GithubIcon } from 'lucide-react'
     </div>
   </header>
   <section>
-    <iframe src="https://stackblitz.com/edit/minajs?embed=1&file=index.ts&hideExplorer=1&theme=dark&view=editor" className="w-full h-[500px] border-0 rounded-lg overflow-hidden" />
+    <iframe src="https://stackblitz.com/edit/minajs?ctl=1&embed=1&file=index.ts&hideExplorer=1&theme=dark&view=editor" className="w-full h-[500px] border-0 rounded-lg overflow-hidden" />
   </section>
   <section className="card dark:bg-neutral bg-primary">
     <div className="card-body gap-8">

apps/docs/docs/pages/klesia/rpc.mdx

@@ -1,8 +1,6 @@
-import { Callout } from 'vocs/components'
-
 # Klesia JSON-RPC
 
-Klesia is accessible via HTTP JSON-RPC. You can use any HTTP client to interact with it, but if you're building o1js zkApps, we recommend using the [Klesia SDK](/klesia/sdk).
+Klesia is accessible via HTTP JSON-RPC. You can use any HTTP client to interact with it, but if you're building o1js zkApps, we recommend using the [Klesia SDK](/klesia/sdk). You can either use the version hosted by us, or follow [this guide](/klesia/rpc#self-hosting) to host your own instance.
 
 ## Endpoints
 
@@ -82,4 +80,6 @@ There are `amd64` and `arm64` Docker images available for self-hosting.
 docker pull ghcr.io/palladians/klesia:latest
 ```
 
-<Callout type="info">Make sure you map port 3000 and expose it.</Callout>
+:::info
+Make sure you map port 3000 and expose it.
+:::

apps/docs/docs/pages/klesia/sdk.mdx

@@ -8,6 +8,10 @@ Klesia has a TypeScript SDK to interact with the JSON-RPC API. The SDK provides
 $ npm install @mina-js/klesia-sdk
 ```
 
+:::warning
+For now there are only [nightly builds](/klesia/sdk#nightly-builds) available. The stable version will be released soon™️.
+:::
+
 ## Usage
 
 ```typescript

apps/docs/package.json

@@ -8,6 +8,7 @@
 		"preview": "bunx vocs preview"
 	},
 	"dependencies": {
+		"@theguild/remark-mermaid": "^0.1.2",
 		"@types/react": "latest",
 		"lucide-react": "^0.438.0",
 		"react": "latest",

apps/docs/vocs.config.ts

@@ -1,3 +1,4 @@
+import { remarkMermaid } from "@theguild/remark-mermaid";
 import { defineConfig } from "vocs";
 
 export default defineConfig({
@@ -48,6 +49,7 @@ export default defineConfig({
 				dark: "rose-pine",
 			},
 		},
+		remarkPlugins: [remarkMermaid as never],
 	},
 	socials: [
 		{ icon: "github", link: "https://github.com/palladians/mina-js" },
@@ -75,7 +77,10 @@ export default defineConfig({
 		{
 			text: "MinaJS Connect",
 			link: "/connect",
-			items: [{ text: "Introduction", link: "/connect" }],
+			items: [
+				{ text: "Introduction", link: "/connect" },
+				{ text: "Getting Started", link: "/connect/getting-started" },
+			],
 		},
 		{
 			text: "MinaJS Accounts",