mirror of
https://github.com/mmahdium/portfolio.git
synced 2026-09-30 11:31:42 +03:30
blog mvp completed
This commit is contained in:
mahdiarghyani
@@ -0,0 +1,147 @@
|
||||
# Blog Content Authoring Guide
|
||||
|
||||
This directory contains all blog posts for the website in multiple languages.
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
content/
|
||||
├── en/
|
||||
│ └── blog/
|
||||
│ ├── post-1.md
|
||||
│ └── post-2.md
|
||||
└── fa/
|
||||
└── blog/
|
||||
├── post-1.md
|
||||
└── post-2.md
|
||||
```
|
||||
|
||||
## Frontmatter Schema
|
||||
|
||||
Each blog post must include the following frontmatter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Your Post Title" # Required: Post title
|
||||
description: "Brief description" # Required: Post description (for SEO)
|
||||
date: "2024-11-09" # Required: Publication date (YYYY-MM-DD)
|
||||
tags: ["tag1", "tag2"] # Required: Array of tags
|
||||
image: "/img/blog/cover.jpg" # Optional: Cover image path (if omitted, shows gradient placeholder)
|
||||
author: "Author Name" # Optional: Author name
|
||||
draft: false # Optional: Set to true to hide post
|
||||
---
|
||||
```
|
||||
|
||||
**Note:** If you don't provide an `image` or if the image fails to load, a beautiful gradient placeholder with the post title will be displayed automatically.
|
||||
|
||||
## Markdown Features
|
||||
|
||||
### Basic Formatting
|
||||
|
||||
```markdown
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
|
||||
**Bold text**
|
||||
*Italic text*
|
||||
|
||||
- Bullet list
|
||||
- Item 2
|
||||
|
||||
1. Numbered list
|
||||
2. Item 2
|
||||
|
||||
[Link text](https://example.com)
|
||||
```
|
||||
|
||||
### Code Blocks
|
||||
|
||||
Use triple backticks with language identifier:
|
||||
|
||||
\`\`\`typescript
|
||||
const greeting = (name: string) => {
|
||||
console.log(`Hello, ${name}!`)
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
### Images
|
||||
|
||||
```markdown
|
||||
|
||||
```
|
||||
|
||||
## MDC Components
|
||||
|
||||
### Callout Boxes
|
||||
|
||||
```markdown
|
||||
::blog-callout{type="info" title="Note"}
|
||||
This is an informational callout box.
|
||||
::
|
||||
|
||||
::blog-callout{type="warning" title="Warning"}
|
||||
This is a warning callout.
|
||||
::
|
||||
|
||||
::blog-callout{type="success" title="Success"}
|
||||
This is a success callout.
|
||||
::
|
||||
|
||||
::blog-callout{type="error" title="Error"}
|
||||
This is an error callout.
|
||||
::
|
||||
```
|
||||
|
||||
### Inline Alerts
|
||||
|
||||
```markdown
|
||||
::alert{type="info"}
|
||||
This is an inline alert.
|
||||
::
|
||||
```
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use descriptive titles**: Make titles clear and SEO-friendly
|
||||
2. **Write good descriptions**: Keep descriptions between 120-160 characters
|
||||
3. **Choose relevant tags**: Use 3-5 tags per post
|
||||
4. **Optimize images**: Use WebP format and appropriate dimensions
|
||||
5. **Add alt text**: Always include alt text for images
|
||||
6. **Use headings**: Structure content with proper heading hierarchy
|
||||
7. **Test both languages**: Verify RTL layout for Persian posts
|
||||
8. **Preview before publishing**: Check formatting and layout
|
||||
|
||||
## Publishing Workflow
|
||||
|
||||
1. Create a new `.md` file in the appropriate language directory
|
||||
2. Add complete frontmatter
|
||||
3. Write your content using Markdown
|
||||
4. Set `draft: true` while working
|
||||
5. Preview in development mode
|
||||
6. Set `draft: false` when ready to publish
|
||||
7. Commit and push to deploy
|
||||
|
||||
## Cover Images
|
||||
|
||||
- Cover images are **optional** - posts without images will show a gradient placeholder
|
||||
- Store cover images in `public/img/blog/`
|
||||
- Use descriptive filenames (e.g., `nuxt-content-guide.jpg`)
|
||||
- Recommended dimensions: 1200x630px
|
||||
- Supported formats: JPG, PNG, WebP
|
||||
- If an image fails to load, a gradient placeholder is shown automatically
|
||||
|
||||
## RTL Content (Persian)
|
||||
|
||||
For Persian blog posts:
|
||||
|
||||
- Content direction is automatically set to RTL
|
||||
- Code blocks remain LTR
|
||||
- Use Persian fonts (Vazirmatn)
|
||||
- Test layout in both desktop and mobile views
|
||||
|
||||
## Need Help?
|
||||
|
||||
- Check existing posts for examples
|
||||
- Review the design document in `.kiro/specs/nuxt-content-blog/design.md`
|
||||
- Test MDC components in development mode
|
||||
@@ -3,7 +3,6 @@ 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
|
||||
---
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
---
|
||||
title: "Building Beautiful UIs with Nuxt UI"
|
||||
description: "Explore Nuxt UI components and learn how to create stunning, accessible user interfaces with minimal effort."
|
||||
date: "2024-11-08"
|
||||
tags: ["nuxt", "ui", "design", "components"]
|
||||
author: "Ali Arghyani"
|
||||
draft: false
|
||||
---
|
||||
|
||||
# Building Beautiful UIs with Nuxt UI
|
||||
|
||||
Nuxt UI is a comprehensive UI library built on top of Tailwind CSS and Headless UI, providing a collection of fully styled and customizable components for Nuxt 3 applications.
|
||||
|
||||
## Why Nuxt UI?
|
||||
|
||||
Nuxt UI stands out for several reasons:
|
||||
|
||||
- **Fully Typed**: Complete TypeScript support with IntelliSense
|
||||
- **Accessible**: Built with accessibility in mind using Headless UI
|
||||
- **Customizable**: Easy theming with Tailwind CSS
|
||||
- **Dark Mode**: Built-in dark mode support
|
||||
- **Icons**: Integrated with Iconify for thousands of icons
|
||||
|
||||
::blog-callout{type="info" title="Pro Tip"}
|
||||
Nuxt UI components are designed to work seamlessly with Nuxt's auto-import feature, so you can use them without explicit imports!
|
||||
::
|
||||
|
||||
## Getting Started
|
||||
|
||||
Install Nuxt UI in your project:
|
||||
|
||||
```bash
|
||||
pnpm add @nuxt/ui
|
||||
```
|
||||
|
||||
Add it to your `nuxt.config.ts`:
|
||||
|
||||
```typescript
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxt/ui']
|
||||
})
|
||||
```
|
||||
|
||||
## Essential Components
|
||||
|
||||
### Buttons
|
||||
|
||||
Buttons are the foundation of any UI. Nuxt UI provides flexible button components:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="flex gap-2">
|
||||
<UButton>Default</UButton>
|
||||
<UButton color="primary">Primary</UButton>
|
||||
<UButton variant="outline">Outline</UButton>
|
||||
<UButton icon="i-heroicons-rocket-launch">With Icon</UButton>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Cards
|
||||
|
||||
Cards are perfect for displaying content:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3>Card Title</h3>
|
||||
</template>
|
||||
|
||||
<p>Card content goes here</p>
|
||||
|
||||
<template #footer>
|
||||
<UButton>Action</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Forms
|
||||
|
||||
Build forms quickly with validation:
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
const state = reactive({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const schema = z.object({
|
||||
email: z.string().email(),
|
||||
password: z.string().min(8)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UForm :schema="schema" :state="state" @submit="onSubmit">
|
||||
<UFormGroup label="Email" name="email">
|
||||
<UInput v-model="state.email" />
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Password" name="password">
|
||||
<UInput v-model="state.password" type="password" />
|
||||
</UFormGroup>
|
||||
|
||||
<UButton type="submit">Submit</UButton>
|
||||
</UForm>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Theming
|
||||
|
||||
Customize your app's appearance with the `app.config.ts`:
|
||||
|
||||
```typescript
|
||||
export default defineAppConfig({
|
||||
ui: {
|
||||
primary: 'indigo',
|
||||
gray: 'slate',
|
||||
button: {
|
||||
rounded: 'rounded-full'
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
All Nuxt UI components respect your theme configuration automatically!
|
||||
::
|
||||
|
||||
## Dark Mode
|
||||
|
||||
Dark mode is built-in and works out of the box:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<UButton @click="toggleDarkMode">
|
||||
Toggle Dark Mode
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Icons
|
||||
|
||||
Access thousands of icons from Iconify:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="flex gap-2">
|
||||
<UIcon name="i-heroicons-home" />
|
||||
<UIcon name="i-heroicons-user" />
|
||||
<UIcon name="i-heroicons-cog" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
::blog-callout{type="warning" title="Performance Note"}
|
||||
Icons are automatically optimized and only the ones you use are included in your bundle!
|
||||
::
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Use Composition API**: Leverage Vue 3's Composition API for better code organization
|
||||
2. **Type Everything**: Take advantage of TypeScript for better DX
|
||||
3. **Customize Wisely**: Override only what you need in `app.config.ts`
|
||||
4. **Accessibility First**: Always test with keyboard navigation and screen readers
|
||||
5. **Performance**: Use lazy loading for heavy components
|
||||
|
||||
## Conclusion
|
||||
|
||||
Nuxt UI provides a solid foundation for building modern web applications. With its comprehensive component library, excellent TypeScript support, and seamless Nuxt integration, you can focus on building features rather than styling components.
|
||||
|
||||
Start building beautiful UIs today! 🎨
|
||||
@@ -3,7 +3,6 @@ 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
|
||||
---
|
||||
|
||||
@@ -3,7 +3,6 @@ title: "آشنایی با Nuxt Content"
|
||||
description: "یاد بگیرید چگونه با Nuxt Content یک وبلاگ قدرتمند بسازید که از مارکداون، هایلایت کد و کامپوننتهای Vue پشتیبانی میکند."
|
||||
date: "2024-11-09"
|
||||
tags: ["nuxt", "vue", "آموزش", "فارسی"]
|
||||
image: "/img/blog/nuxt-content-cover.jpg"
|
||||
author: "علی ارغیانی"
|
||||
draft: false
|
||||
---
|
||||
|
||||
@@ -0,0 +1,180 @@
|
||||
---
|
||||
title: "نکات کار با Tailwind CSS در پروژههای RTL"
|
||||
description: "راهنمای جامع برای استفاده از Tailwind CSS در پروژههای راست به چپ و چالشهای رایج"
|
||||
date: "2024-11-08"
|
||||
tags: ["tailwind", "rtl", "css", "فارسی"]
|
||||
author: "علی ارغیانی"
|
||||
draft: false
|
||||
---
|
||||
|
||||
# نکات کار با Tailwind CSS در پروژههای RTL
|
||||
|
||||
استفاده از Tailwind CSS در پروژههای راست به چپ (RTL) میتواند چالشبرانگیز باشد. در این مقاله، نکات و راهکارهای عملی برای کار با Tailwind در پروژههای فارسی و عربی را بررسی میکنیم.
|
||||
|
||||
## چالشهای RTL
|
||||
|
||||
پروژههای RTL با چالشهای خاصی روبرو هستند:
|
||||
|
||||
- **جهتدهی**: تغییر جهت layout از چپ به راست
|
||||
- **Margin و Padding**: تبدیل left/right به start/end
|
||||
- **فونتها**: انتخاب فونتهای مناسب فارسی
|
||||
- **کامپوننتها**: سازگاری کامپوننتهای third-party
|
||||
|
||||
::blog-callout{type="info" title="نکته مهم"}
|
||||
Tailwind CSS از نسخه 3 به بعد پشتیبانی بهتری از RTL دارد!
|
||||
::
|
||||
|
||||
## تنظیمات اولیه
|
||||
|
||||
ابتدا باید attribute `dir` را به صورت داینامیک تنظیم کنید:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<html :dir="locale === 'fa' ? 'rtl' : 'ltr'">
|
||||
<body>
|
||||
<NuxtPage />
|
||||
</body>
|
||||
</html>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { locale } = useI18n()
|
||||
</script>
|
||||
```
|
||||
|
||||
## استفاده از Logical Properties
|
||||
|
||||
به جای `left` و `right` از `start` و `end` استفاده کنید:
|
||||
|
||||
```html
|
||||
<!-- ❌ اشتباه -->
|
||||
<div class="ml-4 pr-2">محتوا</div>
|
||||
|
||||
<!-- ✅ درست -->
|
||||
<div class="ms-4 pe-2">محتوا</div>
|
||||
```
|
||||
|
||||
کلاسهای Logical در Tailwind:
|
||||
|
||||
- `ms-*` به جای `ml-*` (margin-start)
|
||||
- `me-*` به جای `mr-*` (margin-end)
|
||||
- `ps-*` به جای `pl-*` (padding-start)
|
||||
- `pe-*` به جای `pr-*` (padding-end)
|
||||
|
||||
## تنظیم فونتهای فارسی
|
||||
|
||||
فونتهای فارسی نیاز به تنظیمات خاصی دارند:
|
||||
|
||||
```typescript
|
||||
// nuxt.config.ts
|
||||
export default defineNuxtConfig({
|
||||
fonts: {
|
||||
families: [
|
||||
{
|
||||
name: 'Vazirmatn',
|
||||
provider: 'google',
|
||||
weights: [400, 500, 600, 700]
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
در CSS:
|
||||
|
||||
```css
|
||||
[dir="rtl"] {
|
||||
font-family: 'Vazirmatn', sans-serif;
|
||||
}
|
||||
|
||||
[dir="ltr"] {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
## مدیریت Flexbox و Grid
|
||||
|
||||
Flexbox و Grid به صورت خودکار با RTL سازگار میشوند:
|
||||
|
||||
```html
|
||||
<div class="flex justify-start gap-4">
|
||||
<!-- در RTL از راست شروع میشود -->
|
||||
<div>آیتم 1</div>
|
||||
<div>آیتم 2</div>
|
||||
<div>آیتم 3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
::alert{type="success"}
|
||||
Flexbox و Grid در Tailwind به صورت خودکار با dir="rtl" سازگار میشوند!
|
||||
::
|
||||
|
||||
## کلاسهای شرطی RTL/LTR
|
||||
|
||||
برای استایلهای خاص RTL یا LTR:
|
||||
|
||||
```html
|
||||
<div class="ltr:text-left rtl:text-right">
|
||||
متن دو زبانه
|
||||
</div>
|
||||
```
|
||||
|
||||
## مشکلات رایج و راهحلها
|
||||
|
||||
### 1. آیکونها
|
||||
|
||||
برخی آیکونها نیاز به چرخش در RTL دارند:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<UIcon
|
||||
name="i-heroicons-arrow-right"
|
||||
:class="{ 'rtl:rotate-180': true }"
|
||||
/>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 2. بلوکهای کد
|
||||
|
||||
بلوکهای کد باید همیشه LTR باشند:
|
||||
|
||||
```css
|
||||
pre, code {
|
||||
direction: ltr !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
```
|
||||
|
||||
### 3. اعداد انگلیسی
|
||||
|
||||
اعداد انگلیسی در متن فارسی:
|
||||
|
||||
```html
|
||||
<span class="font-mono ltr:inline-block">
|
||||
123
|
||||
</span>
|
||||
```
|
||||
|
||||
## بهترین روشها
|
||||
|
||||
1. **از Logical Properties استفاده کنید**: همیشه `start/end` به جای `left/right`
|
||||
2. **تست کنید**: هر دو حالت RTL و LTR را تست کنید
|
||||
3. **فونت مناسب**: از فونتهای استاندارد فارسی استفاده کنید
|
||||
4. **کامپوننتهای سازگار**: کامپوننتهایی که RTL را پشتیبانی میکنند انتخاب کنید
|
||||
5. **مستندسازی**: تغییرات RTL را مستند کنید
|
||||
|
||||
::blog-callout{type="warning" title="توجه"}
|
||||
همیشه پروژه خود را در هر دو حالت RTL و LTR تست کنید!
|
||||
::
|
||||
|
||||
## ابزارهای مفید
|
||||
|
||||
- **Tailwind RTL Plugin**: پلاگین رسمی Tailwind برای RTL
|
||||
- **PostCSS RTL**: تبدیل خودکار CSS به RTL
|
||||
- **Browser DevTools**: برای debug کردن مشکلات layout
|
||||
|
||||
## نتیجهگیری
|
||||
|
||||
کار با Tailwind CSS در پروژههای RTL با رعایت نکات ذکر شده میتواند بسیار ساده و کارآمد باشد. استفاده از Logical Properties و تست مداوم کلید موفقیت است.
|
||||
|
||||
موفق باشید! 🎨
|
||||
@@ -3,7 +3,6 @@ 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
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user