feat: Update README.md with comprehensive project documentation

- Add detailed project description and features
- Include tech stack and installation instructions
- Document project structure and components
- Add Persian/Farsi language support information
- Include responsive design details
- Document GraphQL integration
- Add version 1.0.0 release notes

Author: sajjadnazaridev

README.md

@@ -1,12 +1,131 @@
-# React + Vite
+# GraphQL Blog
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A modern, responsive blog application built with React, Vite, Material-UI, and GraphQL.
 
-Currently, two official plugins are available:
+## 🚀 Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- **Modern React Architecture**: Built with React 19 and Vite for fast development
+- **GraphQL Integration**: Powered by Apollo Client for efficient data fetching
+- **Responsive Design**: Material-UI components with custom theming
+- **Persian/Farsi Support**: Full RTL support with custom Persian fonts (YekanBakh)
+- **Mobile-First**: Conditional rendering with BottomAppBar for mobile devices
+- **Navigation**: React Router DOM for seamless page transitions
+- **Author System**: Author profiles and dedicated author pages
+- **Blog Management**: Create, read, and manage blog posts
+- **Clean UI**: Modern card-based layout with hover effects
 
-## Expanding the ESLint configuration
+## 🛠️ Tech Stack
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+- **Frontend**: React 19, Vite
+- **Styling**: Material-UI (MUI), Emotion
+- **Data Fetching**: Apollo Client, GraphQL
+- **Routing**: React Router DOM
+- **Icons**: Material-UI Icons
+- **Build Tool**: Vite
+- **Linting**: ESLint
+
+## 📦 Installation
+
+1. Clone the repository:
+```bash
+git clone <repository-url>
+cd Blog_graphql
+```
+
+2. Install dependencies:
+```bash
+npm install
+```
+
+3. Start the development server:
+```bash
+npm run dev
+```
+
+4. Build for production:
+```bash
+npm run build
+```
+
+## 🏗️ Project Structure
+
+```
+src/
+├── components/
+│   ├── home/
+│   │   ├── Hero.jsx
+│   │   ├── Authors.jsx
+│   │   └── RecentPosts.jsx
+│   ├── layout/
+│   │   ├── Header.jsx
+│   │   ├── Footer.jsx
+│   │   ├── BottomAppBar.jsx
+│   │   └── DefaultLayout.jsx
+│   ├── shared/
+│   │   ├── CardEL.jsx
+│   │   └── Loader.jsx
+│   └── ui/
+├── pages/
+│   └── Home/
+├── assets/
+│   ├── fonts/
+│   ├── images/
+│   ├── mui/
+│   └── styles/
+├── graphql/
+│   ├── queries.js
+│   └── mutations.js
+├── App.jsx
+└── main.jsx
+```
+
+## 🎨 Features
+
+### Responsive Header
+- Desktop: Traditional AppBar with navigation menu
+- Mobile: BottomAppBar for better mobile UX
+
+### Persian Typography
+- Custom YekanBakh font family
+- RTL text support
+- Proper Persian text rendering
+
+### GraphQL Integration
+- Efficient data fetching with Apollo Client
+- Author and blog post queries
+- Optimized caching
+
+## 📱 Components
+
+### CardEL
+Reusable card component for displaying blog posts with:
+- Author avatar and name
+- Blog title and excerpt
+- Cover image
+- Read more functionality
+
+### Authors
+Author listing component with:
+- Author avatars
+- Clickable author profiles
+- Smooth hover effects
+
+## 🚀 Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run lint` - Run ESLint
+- `npm run preview` - Preview production build
+
+## 🌟 Version 1.0.0
+
+Initial release featuring:
+- Complete blog system
+- Author management
+- Responsive design
+- Persian language support
+- GraphQL integration
+
+## 📄 License
+
+This project is licensed under the MIT License.

src/components/comment/Comments.jsx

@@ -27,7 +27,7 @@ function Comments({ slug }) {
         <Typography component="p" variant="h6" fontWeight={700} color="primary">
           کامنت های این پست رو بخونید
         </Typography>
-        {data.length > 0 ? (
+        {data.comments.length > 0 ? (
           data.comments.map((comment) => (
             <Grid
               key={comment.id}