Distribution + cli vs desktop (#112)

* Add athena os * Add cli vs desktop * Optimised images with calibre/image-actions --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
caido · Jul 21, 2024 · f7c124e · f7c124e
1 parent 99ba0c8
commit f7c124e
Show file tree

Hide file tree

Showing 14 changed files with 262 additions and 124 deletions.
diff --git a/.vitepress/sidebars/concepts.ts b/.vitepress/sidebars/concepts.ts
@@ -1,60 +1,69 @@
-import {
-    DefaultTheme
-} from "vitepress";
+import { DefaultTheme } from "vitepress";
 
-export const conceptsSidebar: DefaultTheme.SidebarItem[] = [{
-        text: "Introduction",
-        items: [{
-            text: 'Directory',
-            link: '/concepts/'
-        }]
-    },
-    {
-        text: 'Essentials',
-        items: [{
-                text: 'Instances',
-                link: '/concepts/essentials/instances'
-            },
-            {
-                text: 'HTTPQL',
-                link: '/concepts/essentials/httpql'
-            },
-            {
-                text: 'Workflows',
-                link: '/concepts/essentials/workflows',
-                items: [{
-                    text: 'Nodes',
-                    link: '/concepts/essentials/workflows/nodes/nodes'
-                },
-                {
-                    text: 'JavaScript in Caido',
-                    link: '/concepts/essentials/workflows/js_in_caido'
-            }]
-            },
-            {
-                text: 'Tabs',
-                link: '/concepts/essentials/tabs'
-            },
-            {
-                text: 'Layout',
-                link: '/concepts/essentials/layout'
-            }
-        ]
-    },
-    {
-        text: 'Internals',
-        items: [{
-                text: 'Files',
-                link: '/concepts/internals/files'
-            },
-            {
-                text: 'Cloud',
-                link: '/concepts/internals/cloud'
-            },
-            {
-                text: 'Authentication',
-                link: '/concepts/internals/authentication'
-            }
-        ]
-    },
-]
+export const conceptsSidebar: DefaultTheme.SidebarItem[] = [
+  {
+    text: "Introduction",
+    items: [
+      {
+        text: "Directory",
+        link: "/concepts/",
+      },
+    ],
+  },
+  {
+    text: "Essentials",
+    items: [
+      {
+        text: "CLI vs Desktop",
+        link: "/concepts/essentials/cli_vs_desktop",
+      },
+      {
+        text: "Instances",
+        link: "/concepts/essentials/instances",
+      },
+      {
+        text: "HTTPQL",
+        link: "/concepts/essentials/httpql",
+      },
+      {
+        text: "Workflows",
+        link: "/concepts/essentials/workflows",
+        items: [
+          {
+            text: "Nodes",
+            link: "/concepts/essentials/workflows/nodes/nodes",
+          },
+          {
+            text: "JavaScript in Caido",
+            link: "/concepts/essentials/workflows/js_in_caido",
+          },
+        ],
+      },
+      {
+        text: "Tabs",
+        link: "/concepts/essentials/tabs",
+      },
+      {
+        text: "Layout",
+        link: "/concepts/essentials/layout",
+      },
+    ],
+  },
+  {
+    text: "Internals",
+    items: [
+      {
+        text: "Files",
+        link: "/concepts/internals/files",
+      },
+      {
+        text: "Cloud",
+        link: "/concepts/internals/cloud",
+      },
+      {
+        text: "Authentication",
+        link: "/concepts/internals/authentication",
+      },
+    ],
+  },
+];
diff --git a/.vitepress/sidebars/quickstart.ts b/.vitepress/sidebars/quickstart.ts
@@ -1,69 +1,90 @@
-import {
-    DefaultTheme
-} from "vitepress";
+import { DefaultTheme } from "vitepress";
 
-export const quickstartSidebar: DefaultTheme.SidebarItem[] = [{
-        text: "Welcome",
-        items: [{
-                text: 'Introduction',
-                link: '/quickstart/'
-        },
-          { text: "Showcase", link: "/quickstart/showcase" },
-                                ]
-    },
-    {
-        text: "Beginner Guide",
+export const quickstartSidebar: DefaultTheme.SidebarItem[] = [
+  {
+    text: "Welcome",
+    items: [
+      {
+        text: "Introduction",
+        link: "/quickstart/",
+      },
+      { text: "Showcase", link: "/quickstart/showcase" },
+    ],
+  },
+  {
+    text: "Beginner Guide",
+    items: [
+      {
+        text: "Welcome to Caido",
         items: [
           {
-            text: "Welcome to Caido",
-            items: [{
-              text: "Onboarding",
-              link: "/quickstart/beginner_guide/welcome_to_caido/onboarding",
-            }]
+            text: "Onboarding",
+            link: "/quickstart/beginner_guide/welcome_to_caido/onboarding",
           },
-            {
-                text: 'Setup',
-                items: [{
-                        text: 'Downloading and Installing',
-                        link: '/quickstart/beginner_guide/setup/install'
-                    },
-                    {
-                        text: 'Basic Configuration',
-                        link: '/quickstart/beginner_guide/setup/config'
-                    },
-                    {
-                        text: 'Uploading Files for Use in Automate',
-                        link: '/quickstart/beginner_guide/setup/file_upload'
-                    }
-                ]
-            },
-            {
-                text: 'First Steps with Caido',
-                items: [{
-                        text: 'Creating Your First Project',
-                        link: '/quickstart/beginner_guide/first_steps_with_caido/project'
-                    },
-                    {
-                        text: 'Capturing and Inspecting Traffic',
-                        link: '/quickstart/beginner_guide/first_steps_with_caido/traffic'
-                    },
-                    {
-                        text: 'Forwarding and Modifying Requests Repeatedly',
-                        link: '/quickstart/beginner_guide/first_steps_with_caido/replay'
-                    },
-                    {
-                        text: 'Automating Brute-Forcing/Fuzzing',
-                        link: '/quickstart/beginner_guide/first_steps_with_caido/automate'
-                    }
-                ]
-            },
-            {
-                text: 'Support',
-                items: [{
-                    text: 'Common Errors and Solutions',
-                    link: '/quickstart/beginner_guide/getting_help/support'
-                }]
-            }
-        ]
-    },
-]
+        ],
+      },
+      {
+        text: "Setup",
+        items: [
+          {
+            text: "Downloading and Installing",
+            link: "/quickstart/beginner_guide/setup/install",
+          },
+          {
+            text: "Basic Configuration",
+            link: "/quickstart/beginner_guide/setup/config",
+          },
+          {
+            text: "Uploading Files for Use in Automate",
+            link: "/quickstart/beginner_guide/setup/file_upload",
+          },
+        ],
+      },
+      {
+        text: "First Steps with Caido",
+        items: [
+          {
+            text: "Creating Your First Project",
+            link: "/quickstart/beginner_guide/first_steps_with_caido/project",
+          },
+          {
+            text: "Capturing and Inspecting Traffic",
+            link: "/quickstart/beginner_guide/first_steps_with_caido/traffic",
+          },
+          {
+            text: "Forwarding and Modifying Requests Repeatedly",
+            link: "/quickstart/beginner_guide/first_steps_with_caido/replay",
+          },
+          {
+            text: "Automating Brute-Forcing/Fuzzing",
+            link: "/quickstart/beginner_guide/first_steps_with_caido/automate",
+          },
+        ],
+      },
+      {
+        text: "Support",
+        items: [
+          {
+            text: "Common Errors and Solutions",
+            link: "/quickstart/beginner_guide/getting_help/support",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    text: "Distributions",
+    link: "/quickstart/distributions",
+    items: [
+      {
+        text: "Linux",
+        items: [
+          {
+            text: "Athena OS",
+            link: "/quickstart/distributions/linux/athena_os",
+          },
+        ],
+      },
+    ],
+  },
+];
diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css
@@ -88,3 +88,18 @@ h4 {
   width: 100%;
   height: 100%;
 }
+
+.vignettes {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 3rem;
+  padding: 0.5rem;
+}
+
+/* Media query for mobile view */
+@media (max-width: 600px) {
+  .vignettes {
+    grid-template-columns: 1fr;
+    /* Single column layout */
+  }
+}
diff --git a/src/_images/athena_os_banner.png b/src/_images/athena_os_banner.png
diff --git a/src/_images/athena_os_desktop.png b/src/_images/athena_os_desktop.png
diff --git a/src/_images/athena_os_docker.png b/src/_images/athena_os_docker.png
diff --git a/src/_images/athena_os_wheel.png b/src/_images/athena_os_wheel.png
diff --git a/src/_images/athena_os_wsl.png b/src/_images/athena_os_wsl.png
diff --git a/src/_images/cli_vs_desktop_1.png b/src/_images/cli_vs_desktop_1.png
diff --git a/src/_images/cli_vs_desktop_2.png b/src/_images/cli_vs_desktop_2.png
diff --git a/src/_images/cli_vs_desktop_3.png b/src/_images/cli_vs_desktop_3.png
diff --git a/src/concepts/essentials/cli_vs_desktop.md b/src/concepts/essentials/cli_vs_desktop.md
@@ -0,0 +1,43 @@
+# CLI vs Desktop
+
+Caido comes in two variations: `Desktop` and `CLI`. We are aware that this is **confusing** to new users, this is why we made this concept page.
+
+First, let's revisit the fact that Caido is built around a `client/server` architecture.
+This means that the **interface** is decoupled from the **proxying/processing**.
+
+## CLI
+
+The **proxying/processing** part (aka the `server`) is what we call the `Caido CLI`. You can run the CLI pretty much everywhere like a VPS, a Container, a Cloud machine, etc. It **doesn't** require a graphical desktop environment.
+
+It is the most versatile way of using Caido and it is generally recommended as a fallback if your platform doesn't support our Desktop application well.
+Advanced users will also find some start options only available in the `CLI`.
+
+When using the `CLI`, you will use your browser to access the **interface** part of Caido.
+
+<img width="800" alt="CLI" src="/_images/cli_vs_desktop_1.png" center/>
+
+## Desktop
+
+The `Desktop` application offers you an all-in-one experience. When you use the Caido desktop, you are also usually using `Caido CLI` without realising it :exploding_head:
+
+When you click `start`, the application will spawn the `Caido CLI` in the background and then open a webview to the **interface** part of Caido. You can still use your browser to access the **interface**.
+
+The `Desktop` application has some advantages over the `CLI`:
+
+- You can record multiple Caido [instances](/concepts/essentials/instances) in one place
+- You can launch pre-configured browsers on your desktop
+
+::: warning
+We are currently in the process of re-writing the `Desktop` application to better support our `Linux` user.
+Currently, we suggest people use the `CLI` on `Linux`.
+:::
+
+<img width="800" alt="Desktop" src="/_images/cli_vs_desktop_2.png" center no-shadow/>
+
+## Conclusion
+
+There is no "right" choice here, we offer both since we know some people prefer a separate desktop interface and some prefer to use their browser.
+
+Both methods should allow you to enjoy Caido at its full potential!
+
+<img width="600" alt="CLI vs Desktop" src="/_images/cli_vs_desktop_3.png" center no-shadow/>
diff --git a/src/quickstart/distributions/index.md b/src/quickstart/distributions/index.md
@@ -0,0 +1,13 @@
+# Distributions
+
+Caido is included natively in a couple OS distributions. If you already use one of them, it is the easiest way to get started :sparkles:
+
+This is by no mean a requirement since you can [install Caido on all major OS](/quickstart/beginner_guide/setup/install).
+
+## Linux
+
+- [Athena OS](/quickstart/distributions/linux/athena_os): Arch & NixOS based pentesting distribution
+
+## You are a maintainer?
+
+If you are a maintainer of distribution and would like to include Caido natively, please reach out to us on [Discord](https://links.caido.io/www-discord) or via [our contact form](https://caido.io/contact).
diff --git a/src/quickstart/distributions/linux/athena_os.md b/src/quickstart/distributions/linux/athena_os.md
@@ -0,0 +1,37 @@
+<img width="600" alt="Athena OS Banner" src="/_images/athena_os_banner.png" no-shadow/>
+
+Caido is available natively in [Athena OS](https://athenaos.org/) in the `Red Team Web Application Analysis` section.
+You can install either the [Desktop or CLI version](/concepts/essentials/cli_vs_desktop).
+
+- `Desktop`: `sudo pacman -S caido-desktop`
+- `CLI`: `sudo pacman -S caido-cli`
+
+Multiple [Athena Roles](https://athenaos.org/en/resources/athena-welcome/#cyber-security-roles) will install Caido for you:
+
+- 🐞 Bug Bounty Hunter 🐞
+- 🌐 Network Analyst 🌐
+- ❤️ Red Teamer ❤️
+- 🎓 Enthusiast Student 🎓
+- 🕸️ Web Pentester 🕸️
+
+<div class="vignettes">
+  <div>
+    <img alt="Athena OS Menu with Caido" src="/_images/athena_os_desktop.png"/>
+  </div>
+  <div>
+    <img alt="Athena OS Wheel with Caido" src="/_images/athena_os_wheel.png"/>
+  </div>
+</div>
+
+## WSL
+
+If you run Athena OS in [Windows Subsystem for Linux](https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux), you should be able to use both the Desktop and CLI versions of Caido.
+
+<img width="700" alt="Caido running in WSL" src="/_images/athena_os_wsl.png" center/>
+
+## Docker
+
+Caido is also available as a [Docker container](/guides/user_guide/docker) in the [Athena Cyber Hub](https://athenaos.org/en/resources/cyber-hub/).
+This allows you to easily spawn Caido completely isolated from the rest on the system.
+
+<img width="700" alt="Caido running in Docker" src="/_images/athena_os_docker.png" center/>