CONTRIBUTING.md

Contributing to VirakCloud ☁️ Documentation

🔗

Table of Contents

• Getting Started
• Project Structure
• Adding a Guide Page
• Adding Images
• Running the Development Server
• Building for Production

Thank you for your interest in contributing to the VirakCloud Documentation! This guide will walk you through the steps to add new pages, use images, configure paths, and manage comments effectively.

Getting Started 👋 { #getting-started }

To get started, clone the repository and install the dependencies. You can use your preferred package manager:

Clone repository to your local machine

git clone <repository-url>
cd <repository-directory>

install packages:

Using npm:

npm install

Using Yarn:

yarn install

Using pnpm:

pnpm i

Project Structure 📁 { #project-structure }

• docs/: Contains all the documentation files, organized by language and section.
• docs/.vitepress: Configuration files for VitePress, including themes, plugins, and customization options.

Adding a New Guide Page 📄 { #adding-page }

To add a new guide page:

1. Navigate to the Appropriate Language Directory: For example, docs/fa/guides.

2. Create a Markdown File: Add a new .md file with a descriptive name. For example, new-feature.md.

3. Set Up Frontmatter(Optional):

   ---
   title: عنوان صفحه
   description: توضیحات صفحه
   ---

   • title: The title of your page.
   • description: A brief description that will appear in search engines and social previews.

4. Add Content: Write your content in markdown. Here’s a sample layout:

   # Page Title
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   
   ## Second Title
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
   
   
   ## Third Title
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

5. Link the Page: If you want to add navigation to the new page, edit the sidebar configuration in docs/.vitepress/config.ts.

Adding Images 🖼️ {#adding-images}

To add images:

1. Place the Image: Save your image in the docs/public/images folder to keep assets organized.

💡 Note: The site supports two languages (Persian and English) and two themes (dark and light). When adding images, make sure to provide appropriate versions for both languages and themes if necessary to ensure a consistent user experience.

⚠️ Note: Please ensure that images are in WEBP format and optimized to the maximum extent before uploading. For best results, images should be sized between 700 and 1200 pixels. Optimized images will help improve loading times and enhance the overall performance of the website.

2. Use in Markdown:

   ![Alt text](../../images/filename.webp)

🌑 Dark Mode Images

If you need different images for dark mode, use the <DarkModeImage /> component:

<DarkModeImage src="image-light.webp" dark-src="image-dark.webp" alt="Alt text" />

Running the Development Server 🚀 {#run-on-dev}

To start the development server, run one of the following commands based on your package manager:

Using npm:

npm run docs:dev

Using Yarn:

yarn docs:dev

Using pnpm:

pnpm docs:dev

Building for Production 🛠️ {#building-for-production}

To build the project for production, use one of the following commands:

1. Build the Project:

   Using npm:

   npm run docs:build

   Using Yarn:

   yarn docs:build

   Using pnpm:

   pnpm docs:build

2. Preview the Production Build:

   Using npm:

   npm run docs:preview

   Using Yarn:

   yarn docs:preview

   Using pnpm:

   pnpm docs:preview

This will help verify that the documentation works as expected before deploying.

---

Thank you for your contributions ❤️.For questions or support, please reach out to the project maintainer or you can create discussion or leave comment in our document site.