feat: based on feedback iteration 2

Signed-off-by: Animesh Pathak <[email protected]>

docusaurus.config.js

@@ -138,23 +138,24 @@ module.exports = {
         {
           to: "/keploy-cloud/cloud-installation",
           label: "Enterprise",
+          activeBasePath: "none",
         },
         {
           label: "Resources",
           items: [
             {
-              label: 'Blogs',
-              href:'https://keploy.io/blog',
+              label: "Blogs",
+              href: "https://keploy.io/blog",
             },
             {
-              label: 'Contributing',
-              href: '/keploy-explained/contribution-guide',
+              label: "Contributing",
+              href: "/keploy-explained/contribution-guide",
             },
             {
-              label: 'FAQ',
-              href:'/keploy-explained/faq/',
+              label: "Glossary",
+              href: "/concepts/reference/glossary/",
             },
-          ]
+          ],
         },
         {
           type: "docsVersionDropdown",
@@ -168,9 +169,9 @@ module.exports = {
           "aria-label": "GitHub repository",
         },
         {
-          href: "https://app.keploy.io",
+          href: "https://app.keploy.io/pricing",
           position: "right",
-          label: 'Pricing'
+          label: "Pricing",
         },
         // TODO : Add Blogging Section
         // {

src/components/Community.js

@@ -118,7 +118,7 @@ export const Community = () => {
             <svg
               fill="currentColor"
               className="h-12 w-12 flex-none text-black"
-              viewBox="0 0  48 48"
+              viewBox="0 0 512 509.64"
             >
               <rect width="509.64" height="512" rx="120" />
               <path

src/components/Intro.js

@@ -143,7 +143,7 @@ function Frameworks() {
             data-tooltip="MongoDB"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/mongodb-logo.svg"
               alt="Docker logo"
             />
@@ -156,7 +156,7 @@ function Frameworks() {
             data-tooltip="HTTP"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/http-logo.svg"
               alt="HTTP logo"
             />
@@ -169,7 +169,7 @@ function Frameworks() {
             data-tooltip="PostgreSQL"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/postgres-logo.svg"
               alt="PostgresSQL logo"
             />
@@ -180,33 +180,33 @@ function Frameworks() {
             to={useBaseUrl("/dependencies/redis")}
             className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center hover:underline"
             data-tooltip="Redis"
-            >
+          >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/redis-logo.svg"
               alt="Redis logo"
             />
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
-          <Link 
-          className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center "
-          data-tooltip="MySQL"
+          <Link
+            className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center "
+            data-tooltip="MySQL"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/mysql-logo.svg"
               alt="MySQL logo"
             />
           </Link>
         </li>
         <li className="mt-5 flex flex-col space-y-3 text-lg">
-          <Link 
-          className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center "
-          data-tooltip="DynamoDB"
+          <Link
+            className="hover-label-container flex flex-col items-center justify-center space-y-1 p-6 text-center "
+            data-tooltip="DynamoDB"
           >
             <img
-              className="h-8 w-8"
+              className="h-8 w-8 transition hover:scale-110"
               src="/docs/img/dynamodb-logo.svg"
               alt="DynamoDB logo"
             />
@@ -231,12 +231,14 @@ export const Intro = () => {
   return (
     <section className="mb-4 mt-12">
       <h2 className="mb-4 text-2xl font-semibold tracking-wide md:text-3xl">
-      Getting Started ✨
+        Getting Started ✨
       </h2>
-      <p className="text-l text-gray-500"> 
-        Get up and running with Keploy in just a few minutes by integrating it with your applications. 
-        Below are the quick-start guides for popular languages and frameworks.
-      </p><br/>
+      <p className="text-l text-gray-500">
+        Get up and running with Keploy in just a few minutes by integrating it
+        with your applications. Below are the quick-start guides for popular
+        languages and frameworks.
+      </p>
+      <br />
       <div className="grid gap-6 sm:grid-cols-2 xl:gap-8">
         <Languages />
         <Frameworks />

src/components/QuickStart.js

@@ -9,18 +9,26 @@ export const QuickStart = () => {
         Keploy Documentation! 🚀
       </h1>
       <p className="text-l max-w-3xxl">
-       Welcome to Keploy’s documentation! Whether you're new to backend testing or an experienced developer, this guide will help you get started with Keploy quickly and effectively.🗺️
+        Welcome to Keploy’s documentation! Whether you're new to backend testing
+        or an experienced developer, this guide will help you get started with
+        Keploy quickly and effectively.🗺️
       </p>
 
       <h2 className="mb-4 mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
         What is Keploy? 🤔
       </h2>
       <p className="text-l max-w-3xxl">
-        Keploy is an open-source backend testing tool that helps developers quickly create and run tests by capturing 
-        real user traffic. It generates test cases and data mocks to ensure your code is reliable and helps speed up your release cycle..🛠️
-        <br/><br/>
-        With features like API testing, unit test generation, and schema/PRD-based test automation, Keploy helps teams release faster while maintaining high reliability. 
-        It’s easy to use, extensible, and integrates seamlessly into CI/CD pipelines, making backend testing efficient and productive.
+        Keploy is an open-source backend testing tool that helps developers
+        quickly create and run tests by capturing real user traffic. It
+        generates test cases and data mocks to ensure your code is reliable and
+        helps speed up your release cycle..🛠️
+        <br />
+        <br />
+        With features like API testing, unit test generation, and
+        schema/PRD-based test automation, Keploy helps teams release faster
+        while maintaining high reliability. It’s easy to use, extensible, and
+        integrates seamlessly into CI/CD pipelines, making backend testing
+        efficient and productive.
       </p>
       <h2 className="mt-8 text-2xl font-semibold tracking-wide md:text-3xl">
         Setup Guide 📗
@@ -65,7 +73,9 @@ export const QuickStart = () => {
         </Link>
       </div>
       <p className="text-l mt-6 text-gray-500">
-      <b>⚠️ Important Note:</b> Keploy v2 is currently in Beta, and the best experience is on Linux. Docker support is experimental, and some limitations may apply.
+        <b>⚠️ Important Note:</b> Keploy v2 is currently in Beta, and the best
+        experience is on Linux. Docker support is experimental, and some
+        limitations may apply.
       </p>
     </section>
   );

src/css/custom.css

@@ -9,7 +9,6 @@
   font-size:18px;
   line-height: 1.6;
   --ifm-color-primary: #000;
-
   --ifm-color-primary-lighter: #FFF;
   --ifm-color-primary: #ff914d;
   --ifm-color-primary-dark: #e67643;
@@ -87,6 +86,24 @@ html[data-theme="light"] {
   --ifm-card-shadow-color: rgba(0, 0, 0, 0.2); /* Dark shadow for light theme */
 }
 
+html[data-theme='light'] .theme-doc-sidebar-container {
+  border-right: 1px solid #676565;
+}
+
+/* Sidebar border for dark theme */
+html[data-theme='dark'] .theme-doc-sidebar-container {
+  border-right: 1px solid #676565;
+}
+
+html[data-theme='light'] .col--3 {
+  border-left: 1px solid #676565;
+}
+
+/* TOC column border for dark theme */
+html[data-theme='dark'] .col--3 {
+  border-left: 1px solid #676565;
+}
+
 @font-face {
   font-family: "Roboto";
   src: url("../fonts/Roboto-Light.woff2");

tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
     "./src/theme/**/*.{js,ts,jsx,tsx}",
   ],
   corePlugins: {
-    preflight: false, 
+    preflight: false,
   },
   // corePlugins: {
   //   // preflight: false, // to use Docusaurus base styles

versioned_docs/version-2.0.0/ci-cd/github.md

@@ -13,6 +13,7 @@ tags:
   - cd
   - plugin
 ---
+
 <head>
   <title>Integrating with GitHub CI | Keploy Docs</title>
   <meta charSet="utf-8" />

versioned_docs/version-2.0.0/ci-cd/gitlab.md

@@ -13,6 +13,7 @@ tags:
   - cd
   - plugin
 ---
+
 <head>
   <title>Integrating with GitLab CI | Keploy Docs</title>
   <meta charSet="utf-8" />

versioned_docs/version-2.0.0/ci-cd/jenkins.md

@@ -13,6 +13,7 @@ tags:
   - cd
   - plugin
 ---
+
 <head>
   <title>Integrating with Jenkins | Keploy Docs</title>
   <meta charSet="utf-8" />

versioned_docs/version-2.0.0/concepts/installation.md

@@ -20,6 +20,7 @@ keywords:
   - installation-guide
   - server-setup
 ---
+
 <head>
   <title>Installation | Keploy Docs</title>
   <meta charSet="utf-8" />
@@ -70,111 +71,3 @@ Use "keploy [command] --help" for more information about a command.
 ```
 
 🎉 Wohoo! You are all set to use Keploy.
-
-## Other Installation Methods
-
-<details>
-<summary>Install using Docker</summary>
-
-### Downloading and running Keploy in Docker
-
-#### On macOS
-
-Note : Keploy is not supported natively on MacOS, so you can follow the below method to run with docker
-
-1. Open up a terminal window.
-
-2. Create a bridge network in Docker using the following docker network create command:
-
-```bash
-docker network create keploy-network
-```
-
-3. Run the following command to start the Keploy container:
-
-```bash
-alias keploy="docker run --name keploy-v2 -p 16789:16789 --network keploy-network --privileged --pid=host -v $(pwd):$(pwd) -w $(pwd) -v /sys/fs/cgroup:/sys/fs/cgroup -v /sys/kernel/debug:/sys/kernel/debug -v /sys/fs/bpf:/sys/fs/bpf -v /var/run/docker.sock:/var/run/docker.sock --rm ghcr.io/keploy/keploy"
-```
-
-</details>
-
-<details>
-<summary>Downloading and running Keploy in Native</summary>
-
-### Downloading and running Keploy in Native
-
-**Prequisites:**
-
-- Linux Kernel version 5.15 or higher
-- Run `uname -a` to verify the system architecture.
-- In case of Windows, use WSL with Ubuntu 20.04 LTS or higher.
-
-<summary>Downloading and running Keploy On WSL/Linux AMD</summary>
-
-#### On WSL/Linux AMD
-
-1. Open the terminal Session.
-2. Run the following command to download and install Keploy:
-
-```bash
-curl --silent --location "https://github.com/keploy/keploy/releases/latest/download/keploy_linux_amd64.tar.gz" | tar xz --overwrite -C /tmp
-sudo mkdir -p /usr/local/bin && sudo mv /tmp/keploy /usr/local/bin/keploy
-```
-
-#### On WSL/Linux ARM
-
-1. Open the terminal Session
-2. Run the following command to download and install Keploy:
-
-```bash
-curl --silent --location "https://github.com/keploy/keploy/releases/latest/download/keploy_linux_arm64.tar.gz" | tar xz --overwrite -C /tmp
-sudo mkdir -p /usr/local/bin && sudo mv /tmp/keploy /usr/local/bin/keploy
-
-```
-
-> Note: Keploy is not supported on MacOS natively.
-
-### Setting up the Docker Desktop for WSL 2
-
-1. Install Docker Desktop for Windows from [here](https://docs.docker.com/desktop/windows/install/).
-
-When developing on Windows with Docker Desktop and WSL 2, it's crucial to configure Docker Desktop to allow WSL 2 distributions to access the Docker daemon. This setup enables seamless integration between your Windows environment, WSL 2 Linux distros, and Docker.
-
-By default, Docker Desktop may not be configured to work with all WSL 2 distros out of the box. Proper configuration ensures that you can run Docker commands from within your WSL 2 environment, allowing for a more native Linux development experience while leveraging the power of Windows.
-
-> This setup is essential for Keploy to function correctly in a WSL 2 environment, as it needs to interact with the Docker daemon to manage containers and networks effectively.
-> For detailed instructions on how to configure `Docker Desktop` for WSL 2, please refer to the [official Docker documentation](https://docs.docker.com/desktop/wsl/).
-
-</details>
-
-<details>
-<summary>With Arkade</summary>
-
-### With Arkade
-
-1. Installing Arkade
-
-```bash
-# Note: you can also run without `sudo` and move the binary yourself
-curl -sLS https://get.arkade.dev | sudo sh
-
-arkade --help
-ark --help  # a handy alias
-
-# Windows users with Git Bash
-curl -sLS https://get.arkade.dev | sh
-```
-
-2. Install Keploy
-
-```bash
-arkade get keploy
-```
-
-Or you can also download specific version of Keploy using the following command:
-
-```bash
-arkade get [email protected]
-```
-
-</details>

versioned_docs/version-2.0.0/concepts/what-are-keploy-features.md

@@ -17,6 +17,7 @@ keywords:
   - record replay test
   - mock mutations
 ---
+
 <head>
   <title>What are Keploy Features? | Keploy Docs</title>
   <meta charSet="utf-8" />

versioned_docs/version-2.0.0/concepts/what-is-a-keploy-ebpf.md

@@ -10,6 +10,7 @@ keywords:
   - ebpf
   - Testing API
 ---
+
 <head>
   <title>What is Keploy eBPF | Keploy Docs</title>
   <meta charSet="utf-8" />