Merge branch 'main' of https://github.com/sonichigo/keploy-docs

Author: Sonichigo

.github/workflows/vale-lint-action.yml

@@ -0,0 +1,27 @@
+name: Check Docusaurus docs with Vale linter
+
+on: [pull_request]
+
+jobs:
+  vale:
+    name: Vale doc linter
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4.1.1
+
+      # Set up Vale Action
+      - uses: errata-ai/vale-action@v2.1.1
+        with:
+          # Filter mode can be set to: added, diff_context, file, nofilter
+          filter_mode: nofilter
+          # Set the reporter to display the output: github-pr-check, github-pr-review, github-check
+          reporter: github-pr-check
+          # Fails the action if there are errors
+          fail_on_error: true
+          # Lint the files in the "versioned_docs/version-2.0.0/" directory
+          files: 'versioned_docs/version-2.0.0'
+          # Specify the Vale version
+          version: 3.0.3
+        env:
+          # GitHub token for authentication, automatically set by GitHub Actions
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.vale.ini

@@ -0,0 +1,25 @@
+# vale.ini
+
+StylesPath = vale_styles  # Update this path to where your styles are stored.
+MinAlertLevel = error    # Set the minimum alert level to display (suggestion, warning, or error).
+Vocab = Base
+
+[*.md]
+# Enable Markdown-specific styles.
+BasedOnStyles = Vale, Google
+
+# Customize specific rules based on your needs.
+List.Capitalization = YES
+
+# Override some rules:
+Vale.Spelling = YES
+Google.PassiveVoice = NO    # Disable passive voice rule if unnecessary
+Google.We = NO              # Disable first-person plural flagging
+Google.Will = NO            # Allow "will" usage
+Google.Exclamation = NO     # Allow exclamation points
+Google.Ellipses = NO        # Allow ellipses in text
+Google.Latin = NO           # Allow "e.g." and "i.e." instead of "for example"
+
+# Allow specific terms:
+Vale.Terms=NO
+

README.md

@@ -75,6 +75,60 @@ npm start
 
 The command starts a local development server and opens a browser window.
 
+## Running Vale Locally for Documentation Linting
+
+To help maintain consistency in our documentation, we use Vale, a syntax-aware linter that checks for spelling, grammar, and style issues.
+
+### Installation
+
+**Step 1: Install Vale**
+
+If you're on macOS, you can install Vale using Homebrew:
+
+```bash
+brew install vale
+```
+
+Alternatively, you can install Vale manually:
+
+1. Download Vale: Visit the Vale Releases page and download the latest version for your operating system.
+
+2. Install Vale:
+
+- On macOS and Linux, extract the binary, move it to /usr/local/bin, and make it executable:
+
+```bash
+sudo mv vale /usr/local/bin/
+sudo chmod +x /usr/local/bin/vale
+```
+
+- On Windows, follow the instructions in the downloaded .zip file.
+
+**Step 2: Configure Vale**
+
+1. Ensure you have the .vale.ini configuration file in the root directory.
+
+2. Check that StylesPath in .vale.ini points to the vale_styles directory (where custom styles are stored):
+
+```ini
+StylesPath = vale_styles
+MinAlertLevel = error
+```
+
+### Running Vale
+
+1. Linting Documentation: To check all markdown files in versioned_docs/version-2.0.0/ for errors, run:
+
+```bash
+vale versioned_docs/version-2.0.0/**/*.md
+```
+
+2. Review Errors:
+
+- Vale will output any issues directly in the terminal. Address these issues in the markdown files to maintain style consistency.
+
+Note: Running Vale locally helps catch issues early, ensuring a smooth review process when you submit a pull request.
+
 ## Prettier
 
 1. Fork the repository

docusaurus.config.js

@@ -144,18 +144,18 @@ module.exports = {
           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: 'Glossary',
-              href:'/concepts/reference/glossary/',
+              label: "Glossary",
+              href: "/concepts/reference/glossary/",
             },
-          ]
+          ],
         },
         {
           type: "docsVersionDropdown",
@@ -171,7 +171,7 @@ module.exports = {
         {
           href: "https://app.keploy.io/pricing",
           position: "right",
-          label: 'Pricing'
+          label: "Pricing",
         },
         // TODO : Add Blogging Section
         // {

src/components/Community.js

@@ -95,7 +95,9 @@ export const Community = () => {
           >
             <svg
               fill="currentColor"
+              // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
               className="h-12 w-12 flex-none text-black "
+              viewBox="0 0  48 48"
             >
               <rect width="48" height="48" rx="12" />
               <path

src/components/Intro.js

@@ -180,7 +180,7 @@ 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 transition hover:scale-110"
               src="/docs/img/redis-logo.svg"
@@ -189,9 +189,9 @@ function Frameworks() {
           </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 transition hover:scale-110"
@@ -201,9 +201,9 @@ function Frameworks() {
           </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 transition hover:scale-110"
@@ -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 />