add blog to project

content/en/blog/draft-post.md

@@ -0,0 +1,14 @@
+---
+title: "This is a Draft Post"
+description: "This post is in draft mode and should not appear in production."
+date: "2024-11-10"
+tags: ["draft", "test"]
+author: "Ali Arghyani"
+draft: true
+---
+
+# Draft Post
+
+This is a draft post that should only be visible in development mode.
+
+It will be filtered out in production using the `draft: true` frontmatter field.

content/en/blog/getting-started-with-nuxt-content.md

@@ -0,0 +1,108 @@
+---
+title: "Getting Started with Nuxt Content"
+description: "Learn how to build a powerful blog with Nuxt Content v3, featuring markdown support, syntax highlighting, and Vue component integration."
+date: "2024-11-09"
+tags: ["nuxt", "vue", "typescript", "tutorial"]
+image: "/img/blog/nuxt-content-cover.jpg"
+author: "Ali Arghyani"
+draft: false
+---
+
+# Getting Started with Nuxt Content
+
+Nuxt Content is a powerful file-based CMS that allows you to write content in Markdown, YAML, CSV, or JSON and query it with a MongoDB-like API. In this tutorial, we'll explore how to set up and use Nuxt Content v3 in your Nuxt 4 application.
+
+## Why Nuxt Content?
+
+Nuxt Content offers several advantages for content-driven applications:
+
+- **File-based**: Write content in Markdown files with Git version control
+- **Type-safe**: Full TypeScript support with auto-generated types
+- **Powerful queries**: MongoDB-like API for filtering and sorting
+- **Syntax highlighting**: Built-in code highlighting with Shiki
+- **MDC syntax**: Embed Vue components directly in Markdown
+
+## Installation
+
+Installing Nuxt Content is straightforward:
+
+```bash
+pnpm add @nuxt/content
+```
+
+Then add it to your `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['@nuxt/content']
+})
+```
+
+## Creating Content
+
+Create a `content/` directory in your project root and start writing Markdown files:
+
+```markdown
+---
+title: "My First Post"
+description: "This is my first blog post"
+date: "2024-11-09"
+---
+
+# Hello World
+
+This is my first post using Nuxt Content!
+```
+
+## Querying Content
+
+Use the `queryContent()` composable to fetch your content:
+
+```vue
+<script setup>
+const { data: posts } = await useAsyncData('posts', () =>
+  queryContent('blog')
+    .sort({ date: -1 })
+    .find()
+)
+</script>
+```
+
+## Rendering Content
+
+Use the `ContentRenderer` component to render your Markdown:
+
+```vue
+<template>
+  <ContentRenderer :value="post" />
+</template>
+```
+
+## Advanced Features
+
+### Code Highlighting
+
+Nuxt Content uses Shiki for beautiful syntax highlighting:
+
+```javascript
+// This code will be highlighted automatically
+const greeting = (name) => {
+  console.log(`Hello, ${name}!`)
+}
+```
+
+### MDC Components
+
+You can use Vue components in your Markdown:
+
+```markdown
+::alert{type="info"}
+This is an informational alert!
+::
+```
+
+## Conclusion
+
+Nuxt Content provides a powerful and flexible way to manage content in your Nuxt applications. With its file-based approach, powerful querying capabilities, and seamless Vue integration, it's perfect for blogs, documentation sites, and content-heavy applications.
+
+Happy coding! 🚀

content/en/blog/typescript-best-practices.md

@@ -0,0 +1,133 @@
+---
+title: "TypeScript Best Practices for Vue 3"
+description: "Discover essential TypeScript patterns and best practices for building type-safe Vue 3 applications with Composition API."
+date: "2024-11-08"
+tags: ["typescript", "vue", "best-practices", "composition-api"]
+image: "/img/blog/typescript-vue.jpg"
+author: "Ali Arghyani"
+draft: false
+---
+
+# TypeScript Best Practices for Vue 3
+
+TypeScript has become an essential tool for building robust Vue 3 applications. In this guide, we'll explore best practices for leveraging TypeScript's type system with Vue 3's Composition API.
+
+## Type-Safe Props
+
+Define props with proper TypeScript interfaces:
+
+```vue
+<script setup lang="ts">
+interface Props {
+  title: string
+  count?: number
+  items: string[]
+}
+
+const props = defineProps<Props>()
+</script>
+```
+
+## Typed Composables
+
+Create reusable composables with full type safety:
+
+```typescript
+export function useCounter(initialValue = 0) {
+  const count = ref<number>(initialValue)
+  
+  const increment = (): void => {
+    count.value++
+  }
+  
+  const decrement = (): void => {
+    count.value--
+  }
+  
+  return {
+    count: readonly(count),
+    increment,
+    decrement
+  }
+}
+```
+
+## Generic Components
+
+Build flexible components with generics:
+
+```vue
+<script setup lang="ts" generic="T extends { id: string }">
+interface Props {
+  items: T[]
+  onSelect: (item: T) => void
+}
+
+const props = defineProps<Props>()
+</script>
+```
+
+## Type-Safe Event Emits
+
+Define emits with proper typing:
+
+```vue
+<script setup lang="ts">
+interface Emits {
+  (e: 'update', value: string): void
+  (e: 'delete', id: number): void
+}
+
+const emit = defineEmits<Emits>()
+</script>
+```
+
+## Utility Types
+
+Leverage TypeScript utility types:
+
+```typescript
+// Pick specific properties
+type UserPreview = Pick<User, 'id' | 'name' | 'email'>
+
+// Make all properties optional
+type PartialUser = Partial<User>
+
+// Make all properties required
+type RequiredUser = Required<User>
+
+// Exclude properties
+type UserWithoutPassword = Omit<User, 'password'>
+```
+
+## Type Guards
+
+Implement type guards for runtime type checking:
+
+```typescript
+function isUser(value: unknown): value is User {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'name' in value
+  )
+}
+```
+
+## Async Data Typing
+
+Type your async data properly:
+
+```typescript
+const { data, pending, error } = await useAsyncData<User[]>(
+  'users',
+  () => $fetch('/api/users')
+)
+```
+
+## Conclusion
+
+TypeScript enhances Vue 3 development by providing type safety, better IDE support, and improved code maintainability. By following these best practices, you'll build more robust and maintainable applications.
+
+Remember: TypeScript is a tool to help you, not hinder you. Start simple and gradually add more type safety as needed.

content/fa/blog/nuxt-content-introduction.md

@@ -0,0 +1,108 @@
+---
+title: "آشنایی با Nuxt Content"
+description: "یاد بگیرید چگونه با Nuxt Content یک وبلاگ قدرتمند بسازید که از مارک‌داون، هایلایت کد و کامپوننت‌های Vue پشتیبانی می‌کند."
+date: "2024-11-09"
+tags: ["nuxt", "vue", "آموزش", "فارسی"]
+image: "/img/blog/nuxt-content-cover.jpg"
+author: "علی ارغیانی"
+draft: false
+---
+
+# آشنایی با Nuxt Content
+
+Nuxt Content یک سیستم مدیریت محتوای فایل‌محور قدرتمند است که به شما امکان می‌دهد محتوای خود را به صورت Markdown، YAML، CSV یا JSON بنویسید و با یک API شبیه MongoDB آن را جستجو کنید.
+
+## چرا Nuxt Content؟
+
+Nuxt Content مزایای متعددی برای برنامه‌های محتوا-محور ارائه می‌دهد:
+
+- **فایل-محور**: محتوا را در فایل‌های Markdown با کنترل نسخه Git بنویسید
+- **Type-safe**: پشتیبانی کامل از TypeScript با تایپ‌های خودکار
+- **جستجوی قدرتمند**: API شبیه MongoDB برای فیلتر و مرتب‌سازی
+- **هایلایت کد**: هایلایت خودکار کد با Shiki
+- **سینتکس MDC**: استفاده از کامپوننت‌های Vue مستقیماً در Markdown
+
+## نصب
+
+نصب Nuxt Content بسیار ساده است:
+
+```bash
+pnpm add @nuxt/content
+```
+
+سپس آن را به `nuxt.config.ts` اضافه کنید:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['@nuxt/content']
+})
+```
+
+## ایجاد محتوا
+
+یک دایرکتوری `content/` در ریشه پروژه خود ایجاد کنید و شروع به نوشتن فایل‌های Markdown کنید:
+
+```markdown
+---
+title: "اولین پست من"
+description: "این اولین پست وبلاگ من است"
+date: "2024-11-09"
+---
+
+# سلام دنیا
+
+این اولین پست من با استفاده از Nuxt Content است!
+```
+
+## جستجوی محتوا
+
+از composable `queryContent()` برای دریافت محتوا استفاده کنید:
+
+```vue
+<script setup>
+const { data: posts } = await useAsyncData('posts', () =>
+  queryContent('blog')
+    .sort({ date: -1 })
+    .find()
+)
+</script>
+```
+
+## رندر کردن محتوا
+
+از کامپوننت `ContentRenderer` برای رندر Markdown استفاده کنید:
+
+```vue
+<template>
+  <ContentRenderer :value="post" />
+</template>
+```
+
+## ویژگی‌های پیشرفته
+
+### هایلایت کد
+
+Nuxt Content از Shiki برای هایلایت زیبای کد استفاده می‌کند:
+
+```javascript
+// این کد به صورت خودکار هایلایت می‌شود
+const greeting = (name) => {
+  console.log(`سلام، ${name}!`)
+}
+```
+
+### کامپوننت‌های MDC
+
+می‌توانید از کامپوننت‌های Vue در Markdown خود استفاده کنید:
+
+```markdown
+::alert{type="info"}
+این یک هشدار اطلاعاتی است!
+::
+```
+
+## نتیجه‌گیری
+
+Nuxt Content یک راه قدرتمند و انعطاف‌پذیر برای مدیریت محتوا در برنامه‌های Nuxt شما فراهم می‌کند. با رویکرد فایل-محور، قابلیت‌های جستجوی قدرتمند و یکپارچگی یکپارچه با Vue، برای وبلاگ‌ها، سایت‌های مستندات و برنامه‌های محتوا-محور عالی است.
+
+کدنویسی خوشحالی! 🚀

content/fa/blog/vue-composition-api.md

@@ -0,0 +1,179 @@
+---
+title: "راهنمای Composition API در Vue 3"
+description: "آموزش کامل Composition API در Vue 3 با مثال‌های کاربردی و بهترین روش‌های پیاده‌سازی."
+date: "2024-11-07"
+tags: ["vue", "composition-api", "آموزش", "فارسی"]
+image: "/img/blog/vue-composition.jpg"
+author: "علی ارغیانی"
+draft: false
+---
+
+# راهنمای Composition API در Vue 3
+
+Composition API یکی از مهم‌ترین ویژگی‌های Vue 3 است که روش جدیدی برای سازماندهی و استفاده مجدد از منطق کامپوننت‌ها ارائه می‌دهد.
+
+## چرا Composition API؟
+
+Composition API مشکلات Options API را حل می‌کند:
+
+- **سازماندهی بهتر**: منطق مرتبط را در کنار هم نگه دارید
+- **استفاده مجدد**: composable ها را به راحتی به اشتراک بگذارید
+- **Type Safety**: پشتیبانی بهتر از TypeScript
+- **خوانایی**: کد تمیزتر و قابل فهم‌تر
+
+## مفاهیم پایه
+
+### Reactive State
+
+برای ایجاد state واکنش‌پذیر از `ref` یا `reactive` استفاده کنید:
+
+```vue
+<script setup>
+import { ref, reactive } from 'vue'
+
+// با ref
+const count = ref(0)
+
+// با reactive
+const state = reactive({
+  name: 'علی',
+  age: 25
+})
+</script>
+```
+
+### Computed Properties
+
+برای مقادیر محاسبه‌شده از `computed` استفاده کنید:
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const firstName = ref('علی')
+const lastName = ref('ارغیانی')
+
+const fullName = computed(() => {
+  return `${firstName.value} ${lastName.value}`
+})
+</script>
+```
+
+### Watchers
+
+برای نظارت بر تغییرات از `watch` یا `watchEffect` استفاده کنید:
+
+```vue
+<script setup>
+import { ref, watch } from 'vue'
+
+const count = ref(0)
+
+watch(count, (newValue, oldValue) => {
+  console.log(`تغییر از ${oldValue} به ${newValue}`)
+})
+</script>
+```
+
+## Composables
+
+composable ها توابع قابل استفاده مجددی هستند که منطق stateful را کپسوله می‌کنند:
+
+```typescript
+// composables/useCounter.ts
+export function useCounter(initialValue = 0) {
+  const count = ref(initialValue)
+  
+  const increment = () => {
+    count.value++
+  }
+  
+  const decrement = () => {
+    count.value--
+  }
+  
+  const reset = () => {
+    count.value = initialValue
+  }
+  
+  return {
+    count: readonly(count),
+    increment,
+    decrement,
+    reset
+  }
+}
+```
+
+استفاده از composable:
+
+```vue
+<script setup>
+const { count, increment, decrement } = useCounter(10)
+</script>
+
+<template>
+  <div>
+    <p>شمارنده: {{ count }}</p>
+    <button @click="increment">افزایش</button>
+    <button @click="decrement">کاهش</button>
+  </div>
+</template>
+```
+
+## Lifecycle Hooks
+
+از lifecycle hooks در `<script setup>` استفاده کنید:
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+
+onMounted(() => {
+  console.log('کامپوننت mount شد')
+})
+
+onUnmounted(() => {
+  console.log('کامپوننت unmount شد')
+})
+</script>
+```
+
+## بهترین روش‌ها
+
+### 1. استفاده از `<script setup>`
+
+این سینتکس مختصرتر و بهینه‌تر است:
+
+```vue
+<script setup>
+// کد شما اینجا
+</script>
+```
+
+### 2. سازماندهی Composables
+
+composable ها را در دایرکتوری `composables/` قرار دهید:
+
+```
+composables/
+  ├── useAuth.ts
+  ├── useCounter.ts
+  └── useFetch.ts
+```
+
+### 3. نام‌گذاری
+
+composable ها را با `use` شروع کنید:
+
+```typescript
+export function useMyFeature() {
+  // ...
+}
+```
+
+## نتیجه‌گیری
+
+Composition API روش قدرتمندی برای نوشتن کامپوننت‌های Vue است که کد را قابل نگهداری‌تر، قابل استفاده مجددتر و type-safe تر می‌کند.
+
+با تمرین و استفاده مداوم، Composition API به بخش طبیعی از توسعه Vue شما تبدیل خواهد شد.