docs(guide): add overview page

packages/pinorama-docs/.vitepress/config/en.ts

@@ -8,8 +8,8 @@ export const en = defineConfig({
     nav: [
       {
         text: "Guide",
-        link: "/guide/getting-started/",
-        activeMatch: "/guide/getting-started/"
+        link: "/guide/",
+        activeMatch: "/guide/"
       },
       {
         text: "Studio",
@@ -34,6 +34,10 @@ export const en = defineConfig({
       {
         text: `v${version}`,
         items: [
+          {
+            text: `v${version} (studio)`,
+            link: "/"
+          },
           {
             text: "Release Notes",
             link: "https://github.com/pinoramajs/pinorama/releases"
@@ -42,14 +46,114 @@ export const en = defineConfig({
       }
     ],
 
+    sidebar: [
+      {
+        text: "Guide",
+        items: [
+          {
+            text: "Overview",
+            link: "/guide/"
+          },
+          {
+            text: "Quick Start",
+            link: "/guide/quick-start/"
+          },
+          {
+            text: "Use Cases",
+            link: "/guide/use-cases/"
+          }
+        ]
+      },
+      {
+        text: "Studio ⭐",
+        items: [
+          {
+            text: "Overview",
+            link: "/guide/pinorama-studio/"
+          },
+          {
+            text: "Installation",
+            link: "/guide/pinorama-studio/installation/"
+          },
+          {
+            text: "Usage",
+            link: "/guide/pinorama-studio/usage/"
+          },
+          {
+            text: "CLI",
+            link: "/guide/pinorama-studio/api/"
+          }
+        ]
+      },
+      {
+        text: "Client",
+        items: [
+          {
+            text: "Overview",
+            link: "/guide/pinorama-client/"
+          },
+          {
+            text: "Installation",
+            link: "/guide/pinorama-client/installation/"
+          },
+          {
+            text: "Usage",
+            link: "/guide/pinorama-client/usage/"
+          },
+          {
+            text: "API Reference",
+            link: "/guide/pinorama-client/api/"
+          }
+        ]
+      },
+      {
+        text: "Server",
+        items: [
+          {
+            text: "Overview",
+            link: "/guide/pinorama-server/"
+          },
+          {
+            text: "Installation",
+            link: "/guide/pinorama-server/installation/"
+          },
+          {
+            text: "Configuration",
+            link: "/guide/pinorama-server/configuration/"
+          },
+          {
+            text: "API Reference",
+            link: "/guide/pinorama-server/api/"
+          }
+        ]
+      },
+      {
+        text: "Transport",
+        items: [
+          {
+            text: "Overview",
+            link: "/guide/pinorama-transport/"
+          },
+          {
+            text: "Installation",
+            link: "/guide/pinorama-transport/installation/"
+          },
+          {
+            text: "Usage",
+            link: "/guide/pinorama-transport/usage/"
+          }
+        ]
+      }
+    ],
+
     footer: {
       message: "Open Source ❤ MIT Licensed",
       copyright: "© 2024 Francesco Pasqua & Contributors"
     },
 
     docFooter: {
-      prev: "Next",
-      next: "Previous"
+      prev: "Previous page",
+      next: "Next page"
     }
   }
 })

packages/pinorama-docs/guide/index.md

@@ -0,0 +1,60 @@
+---
+outline: deep
+---
+
+# Overview
+
+**Pinorama** is a suite of tools designed to help store, explore, and analyze logs from Node.js applications, specifically those generated by [Pino Logger](http://getpino.io/). It's built for development environments, offering flexible options for both real-time and post-mortem log analysis.
+
+::: tip
+**Need a Quick Start?** 🚀
+
+If you're looking to get started quickly, check out [Pinorama Studio](/studio/), a Web App and CLI that allows you to store, view, filter, and analyze logs with minimal setup.
+:::
+
+## Understanding the suite
+
+Pinorama is made up of 4 key components, each with a specific role:
+
+### 1. Pinorama Studio ⭐
+
+If you’re looking to get started quickly, Pinorama Studio is the tool for you. It’s a web app and CLI that allows you to store, view, filter, and analyze logs with minimal setup. It works only with Pino structured JSON format logs. Studio can also function as a server when launched with the `--server` option, making it a ideal for scenarios where you want to both receive and view logs in real-time like development environments or debugging sessions.
+
+### 2. Pinorama Client
+
+An isomorphic library that works in both Node.js and the Browser. It’s essentially an HTTP client that mirrors [Orama Search’s API](https://docs.orama.com/open-source/usage/search/introduction), allowing you to interact with an Orama instance through Pinorama Server.
+However, this tool is typically used internally by Studio and Transport, so you probably won’t need to interact with it directly unless you’re building a custom solution.  
+
+### 3. Pinorama Server
+
+A web server built on Fastify that exposes RESTful endpoints for storing and retrieving logs via [Orama](https://askorama.ai/). It's ideal for cases where you need to index logs with custom structures, customize log line styles (such as colors and formatters), or set up a server to collect and expose logs for real-time access through `pinorama-studio`. Pinorama Server can be deployed as a standalone application or integrated into existing projects as a Fastify plugin.
+
+### 4. Pinorama Transport
+
+Pinorama Transport is used primarily as a [transport](https://getpino.io/#/docs/transports) layer for Pino Logger. It can be integrated programmatically into your Node.js applications to stream logs to a Pinorama Server, or used via CLI to send logs from the terminal using piped output. This flexibility makes it ideal for both automated logging and manual log transmission from processes.
+
+## How it works
+
+Here’s a quick look at how the different components of Pinorama fit together:
+
+1. **Generate Logs (Pino Logger):**  
+   - **Pino Logger** creates logs in a structured JSON format as your Node.js application runs. These logs capture essential events and data, forming the basis for further processing and analysis.
+
+2. **Stream Logs (Pinorama Transport with Pinorama Client):**  
+   - **Pinorama Transport** streams these logs to **Pinorama Server**. This can be done programmatically within your application or via CLI using piped output. **Pinorama Client** is used internally by Transport to send HTTP requests to **Pinorama Server**'s RESTful endpoints.
+
+3. **Store and Index Logs (Pinorama Server):**  
+   - **Pinorama Server** receives the logs from **Pinorama Transport**. It stores and indexes these logs in memory using **Orama Search**, making them available for retrieval and analysis through its RESTful API.
+
+4. **Explore Logs (Pinorama Studio with Pinorama Client):**  
+   - **Pinorama Studio** allows you to explore the stored logs through a web-based user interface. It connects to **Pinorama Server** using **Pinorama Client**, enabling real-time log viewing, filtering, and analysis.
+
+## When to use
+
+::: tip
+**For Development:** Pinorama is perfect for local development, offering tools for both live log streaming and detailed post-mortem analysis.
+:::
+
+::: danger
+**Avoid Production!** Pinorama Server is not recommended for production environments due to its in-memory log storage.
+ :::