Add image upload fields, media edit/delete, blog seeds

This commit is contained in:
Noro Studio
2026-06-30 21:00:44 +03:30
parent 79491cd8ef
commit 493ee8105e
12 changed files with 985 additions and 36 deletions
+31 -2
View File
@@ -2,8 +2,8 @@ import 'dotenv/config'
import express from 'express'
import cors from 'cors'
import multer from 'multer'
import { existsSync, mkdirSync } from 'node:fs'
import { dirname, extname, join } from 'node:path'
import { existsSync, mkdirSync, unlinkSync } from 'node:fs'
import { basename, dirname, extname, join } from 'node:path'
import { fileURLToPath } from 'node:url'
import { randomUUID } from 'node:crypto'
import { authMiddleware, loginHandler, meHandler } from './auth.js'
@@ -227,6 +227,35 @@ app.post('/api/media/upload', authMiddleware, upload.single('file'), (req, res)
res.status(201).json(item)
})
app.put('/api/media/:id', authMiddleware, (req, res) => {
const { filename } = req.body || {}
if (!filename?.trim()) return res.status(400).json({ error: 'نام فایل الزامی است' })
let updated = null
updateDb((db) => {
const i = db.media.findIndex((m) => m.id === req.params.id)
if (i === -1) return
db.media[i] = { ...db.media[i], filename: filename.trim() }
updated = db.media[i]
})
if (!updated) return res.status(404).json({ error: 'فایل یافت نشد' })
res.json(updated)
})
app.delete('/api/media/:id', authMiddleware, (req, res) => {
let removed = null
updateDb((db) => {
const i = db.media.findIndex((m) => m.id === req.params.id)
if (i === -1) return
removed = db.media.splice(i, 1)[0]
})
if (!removed) return res.status(404).json({ error: 'فایل یافت نشد' })
const filePath = join(UPLOADS_DIR, basename(removed.url))
if (existsSync(filePath)) unlinkSync(filePath)
res.status(204).end()
})
app.listen(PORT, () => {
console.log(`Noro CMS API running at http://localhost:${PORT}`)
})
+290
View File
@@ -0,0 +1,290 @@
import { randomUUID } from 'node:crypto'
import { readFileSync, writeFileSync } from 'node:fs'
import { dirname, join } from 'node:path'
import { fileURLToPath } from 'node:url'
const __dirname = dirname(fileURLToPath(import.meta.url))
const dbPath = join(__dirname, '..', 'data', 'content.json')
const content = `## مقدمه
لوگو یکی از مهم‌ترین عناصر هویت بصری هر کسب‌وکار است. در دنیای رقابتی امروز، داشتن یک لوگوی حرفه‌ای می‌تواند نقش مهمی در برندسازی، افزایش اعتماد مشتریان و ماندگاری نام برند در ذهن مخاطب داشته باشد. با این حال، بسیاری از صاحبان کسب‌وکارها هنگام سفارش طراحی لوگو با این سؤال مواجه می‌شوند که چه نوع لوگویی برای برند آن‌ها مناسب‌تر است.
در این مقاله از نورو استودیو قصد داریم انواع لوگو را به‌صورت کامل معرفی کنیم و مزایا، کاربردها و ویژگی‌های هر کدام را بررسی نماییم تا بتوانید بهترین انتخاب را برای کسب‌وکار خود داشته باشید.
## لوگو چیست؟
لوگو یا نشان تجاری، یک نماد گرافیکی است که برای معرفی یک برند، شرکت، سازمان یا کسب‌وکار مورد استفاده قرار می‌گیرد. طراحی لوگو به گونه‌ای انجام می‌شود که هویت، ارزش‌ها و شخصیت برند را در کوتاه‌ترین زمان ممکن به مخاطب منتقل کند.
یک لوگوی موفق باید ساده، ماندگار، قابل تشخیص و متناسب با حوزه فعالیت برند باشد.
## انواع لوگو
به طور کلی لوگوها در چند دسته اصلی قرار می‌گیرند که هر کدام ویژگی‌ها و کاربردهای خاص خود را دارند.
![اینفوگرافیک ۷ نوع لوگو](/uploads/blog-logo-types-overview.png)
### 1. لوگوتایپ (Wordmark)
لوگوتایپ یا لوگوی نوشتاری یکی از محبوب‌ترین انواع لوگو است. در این سبک، نام برند با استفاده از تایپوگرافی اختصاصی طراحی می‌شود و عنصر اصلی لوگو را متن تشکیل می‌دهد.
#### ویژگی‌های لوگوتایپ
* تمرکز کامل روی نام برند
* سادگی و خوانایی بالا
* مناسب برای برندهای تازه‌تأسیس
* قابلیت ماندگاری زیاد در ذهن مخاطب
#### نمونه برندهای معروف
* Google
* Coca-Cola
* Visa
#### مزایای لوگوتایپ
* افزایش شناخت نام برند
* طراحی ساده و حرفه‌ای
* کاربرد آسان در رسانه‌های مختلف
### 2. مونوگرام یا لوگوی حرفی (Lettermark)
در این نوع لوگو به جای استفاده از نام کامل برند، از حروف اول نام شرکت یا کسب‌وکار استفاده می‌شود.
#### ویژگی‌های مونوگرام
* مناسب برای برندهایی با نام طولانی
* طراحی مینیمال و مدرن
* قابلیت استفاده در ابعاد کوچک
#### نمونه‌های مشهور
* IBM
* NASA
* HBO
#### مزایای لوگوی حرفی
* سادگی در اجرا
* افزایش قابلیت تشخیص برند
* مناسب برای شبکه‌های اجتماعی و اپلیکیشن‌ها
### 3. لوگوی نمادین (Brandmark)
لوگوی نمادین از یک آیکون، شکل یا نماد گرافیکی تشکیل می‌شود و معمولاً نام برند در آن وجود ندارد.
#### ویژگی‌های لوگوی نمادین
* انتقال سریع مفهوم برند
* جذابیت بصری بالا
* قابلیت جهانی شدن
#### نمونه برندهای معروف
* Apple
* Twitter
* Target
#### مزایا
* به‌یادماندنی بودن
* قابلیت استفاده در فضاهای مختلف
* قدرت بالای برندسازی
البته این نوع لوگو معمولاً برای برندهای شناخته‌شده مناسب‌تر است؛ زیرا مخاطب باید بتواند نماد را به برند مرتبط کند.
### 4. لوگوی ترکیبی (Combination Mark)
لوگوی ترکیبی از متن و نماد گرافیکی تشکیل شده است. این سبک یکی از پرکاربردترین انواع لوگو در طراحی حرفه‌ای محسوب می‌شود.
#### ویژگی‌ها
* ترکیب نام برند با نماد اختصاصی
* انعطاف‌پذیری بالا
* افزایش هویت بصری برند
#### نمونه‌های معروف
* Adidas
* Burger King
* Doritos
#### مزایا
* تقویت شناخت برند
* امکان استفاده جداگانه از متن یا نماد
* مناسب برای اکثر کسب‌وکارها
بسیاری از طراحان حرفه‌ای، لوگوی ترکیبی را بهترین انتخاب برای برندهای جدید می‌دانند.
### 5. لوگوی امبلم (Emblem)
در لوگوی امبلم، متن داخل یک نشان، مهر یا قاب قرار می‌گیرد. این سبک ظاهری رسمی و کلاسیک دارد.
#### ویژگی‌ها
* حس اعتبار و اصالت
* مناسب سازمان‌ها و نهادهای رسمی
* طراحی ساختاریافته
#### نمونه‌ها
* Starbucks
* Harley-Davidson
* برخی دانشگاه‌ها و سازمان‌های دولتی
#### مزایا
* ایجاد حس اعتماد
* ماندگاری بالا
* مناسب برندهای سنتی و لوکس
### 6. لوگوی مسکات (Mascot)
لوگوی مسکات از یک شخصیت کارتونی یا تصویرسازی اختصاصی تشکیل می‌شود که نماینده برند است.
#### ویژگی‌ها
* ایجاد ارتباط عاطفی با مخاطب
* مناسب برندهای خانوادگی و سرگرمی
* جذاب برای کودکان و نوجوانان
#### نمونه‌های معروف
* KFC
* Pringles
* Michelin
#### مزایا
* افزایش تعامل با مخاطب
* قابلیت استفاده در کمپین‌های تبلیغاتی
* شخصیت‌سازی برای برند
### 7. لوگوی انتزاعی (Abstract Logo)
این نوع لوگو از اشکال هندسی یا فرم‌های خلاقانه تشکیل شده است و معمولاً مفهوم برند را به شکل غیرمستقیم منتقل می‌کند.
#### ویژگی‌ها
* طراحی منحصربه‌فرد
* قابلیت ثبت و تمایز بالا
* مناسب برندهای مدرن
#### نمونه‌ها
* Pepsi
* Nike
* Airbnb
#### مزایا
* هویت بصری اختصاصی
* ماندگاری در ذهن مخاطب
* انعطاف‌پذیری بالا در طراحی
## چگونه بهترین نوع لوگو را انتخاب کنیم؟
انتخاب نوع لوگو به عوامل مختلفی بستگی دارد:
### نوع کسب‌وکار
برندهای رسمی معمولاً از امبلم یا لوگوتایپ استفاده می‌کنند، در حالی که استارتاپ‌ها بیشتر به سراغ لوگوهای ترکیبی یا انتزاعی می‌روند.
### مخاطبان هدف
شناخت دقیق مخاطب نقش مهمی در انتخاب سبک لوگو دارد. برای مثال برندهای کودکانه معمولاً از لوگوهای مسکات بهره می‌برند.
### اهداف برندسازی
اگر هدف شما افزایش آگاهی از نام برند است، لوگوتایپ گزینه مناسبی خواهد بود. اگر به دنبال ساخت یک هویت بصری منحصربه‌فرد هستید، لوگوی نمادین یا انتزاعی انتخاب بهتری است.
### قابلیت توسعه برند
لوگو باید به گونه‌ای طراحی شود که در آینده نیز پاسخگوی نیازهای برند باشد و در رسانه‌های مختلف کیفیت خود را حفظ کند.
![جدول مقایسه انواع لوگو](/uploads/blog-logo-types-comparison.png)
## ویژگی‌های یک لوگوی حرفه‌ای
صرف‌نظر از نوع لوگو، یک طراحی موفق باید دارای ویژگی‌های زیر باشد:
* سادگی
* ماندگاری
* خوانایی
* مقیاس‌پذیری
* ارتباط با هویت برند
* قابلیت استفاده در چاپ و فضای دیجیتال
* تمایز نسبت به رقبا
## اشتباهات رایج در طراحی لوگو
برخی اشتباهات می‌توانند اثربخشی لوگو را کاهش دهند:
* استفاده از جزئیات بیش از حد
* کپی‌برداری از برندهای دیگر
* انتخاب رنگ‌های نامناسب
* عدم توجه به مخاطب هدف
* پیروی از ترندهای زودگذر
* طراحی بدون استراتژی برندینگ
## نتیجه‌گیری
شناخت انواع لوگو اولین قدم برای ساخت یک هویت بصری قدرتمند است. لوگوتایپ، مونوگرام، لوگوی نمادین، ترکیبی، امبلم، مسکات و انتزاعی هر کدام مزایا و کاربردهای خاص خود را دارند. انتخاب بهترین نوع لوگو باید بر اساس ماهیت کسب‌وکار، مخاطبان هدف و استراتژی برند انجام شود.
در نورو استودیو، طراحی لوگو تنها به خلق یک نماد زیبا محدود نمی‌شود؛ بلکه با بررسی دقیق هویت برند، بازار هدف و اصول حرفه‌ای برندینگ، لوگویی طراحی می‌شود که بتواند سال‌ها نماینده موفق کسب‌وکار شما باشد.`
const post = {
id: randomUUID(),
title: 'انواع لوگو؛ آشنایی کامل با سبک‌های مختلف طراحی لوگو',
slug: 'anvae-logo',
excerpt:
'در این راهنمای جامع با ۷ نوع لوگو — از لوگوتایپ تا انتزاعی — آشنا شوید و بهترین سبک طراحی لوگو را برای برند خود انتخاب کنید.',
content,
coverUrl: '/uploads/blog-logo-types-intro.png',
published: true,
publishedAt: new Date().toISOString(),
seoTitle: 'انواع لوگو؛ راهنمای کامل ۷ سبک طراحی لوگو | استودیو نورو',
seoDescription:
'با ۷ نوع لوگو آشنا شوید: لوگوتایپ، مونوگرام، نمادین، ترکیبی، امبلم، مسکات و انتزاعی. راهنمای انتخاب بهترین لوگو برای برند شما در استودیو نورو.',
}
const mediaItems = [
{
id: randomUUID(),
filename: 'blog-logo-types-intro.png',
url: '/uploads/blog-logo-types-intro.png',
mimeType: 'image/png',
size: 58962,
createdAt: new Date().toISOString(),
},
{
id: randomUUID(),
filename: 'blog-logo-types-overview.png',
url: '/uploads/blog-logo-types-overview.png',
mimeType: 'image/png',
size: 52046,
createdAt: new Date().toISOString(),
},
{
id: randomUUID(),
filename: 'blog-logo-types-comparison.png',
url: '/uploads/blog-logo-types-comparison.png',
mimeType: 'image/png',
size: 72005,
createdAt: new Date().toISOString(),
},
]
const db = JSON.parse(readFileSync(dbPath, 'utf-8'))
db.blogPosts = db.blogPosts.filter((item) => item.slug !== post.slug)
db.blogPosts.unshift(post)
for (const item of mediaItems) {
if (!db.media.some((m) => m.url === item.url)) {
db.media.unshift(item)
}
}
writeFileSync(dbPath, JSON.stringify(db, null, 2), 'utf-8')
console.log('Blog post seeded:', post.slug)
+219
View File
@@ -0,0 +1,219 @@
import { randomUUID } from 'node:crypto'
import { readFileSync, writeFileSync } from 'node:fs'
import { dirname, join } from 'node:path'
import { fileURLToPath } from 'node:url'
const __dirname = dirname(fileURLToPath(import.meta.url))
const dbPath = join(__dirname, '..', 'data', 'content.json')
const testPosts = [
{
title: 'هویت بصری چیست و چرا برای برند شما حیاتی است؟',
slug: 'hoviat-basari',
excerpt:
'هویت بصری فراتر از لوگو است؛ در این مقاله با اجزای هویت بصری و نقش آن در اعتمادسازی و رشد برند آشنا می‌شوید.',
coverUrl: '/uploads/bg-brand-identity.png',
seoTitle: 'هویت بصری چیست؟ | راهنمای کامل برندینگ بصری — استودیو نورو',
seoDescription:
'هویت بصری شامل لوگو، رنگ، تایپوگرافی و لحن بصری برند است. بیاموزید چطور هویت بصری حرفه‌ای بسازید.',
daysAgo: 5,
content: `## مقدمه
هویت بصری مجموعه‌ای از عناصر گرافیکی است که برند شما را در ذهن مخاطب متمایز می‌کند. بسیاری از کسب‌وکارها هویت بصری را فقط به لوگو محدود می‌کنند، در حالی که موفق‌ترین برندها از یک سیستم یکپارچه استفاده می‌کنند.
## هویت بصری شامل چه چیزهایی است؟
* لوگو و نشان تجاری
* پالت رنگ سازمانی
* تایپوگرافی و فونت‌های برند
* الگوها، آیکون‌ها و عناصر گرافیکی
* لحن بصری در عکس‌ها و تصاویر
## مزایای هویت بصری حرفه‌ای
* افزایش اعتماد مشتری
* تمایز از رقبا
* یکپارچگی در همه کانال‌ها
* کاهش هزینه طراحی در بلندمدت
## نتیجه‌گیری
سرمایه‌گذاری روی هویت بصری، سرمایه‌گذاری روی آینده برند شماست. در استودیو نورو، هویت بصری را بر اساس استراتژی برند و مخاطب هدف طراحی می‌کنیم.`,
},
{
title: '۱۰ اصل طلایی طراحی UI/UX برای وب‌سایت‌های حرفه‌ای',
slug: 'ui-ux-principles',
excerpt:
'طراحی رابط و تجربه کاربری خوب فقط زیبایی نیست؛ با ۱۰ اصل کلیدی UI/UX وب‌سایت خود را کاربرپسند کنید.',
coverUrl: '/uploads/bg-ui.png',
seoTitle: 'اصول طراحی UI/UX | ۱۰ نکته برای وب‌سایت بهتر — استودیو نورو',
seoDescription:
'از سادگی و سلسله‌مراتب بصری تا دسترس‌پذیری؛ ۱۰ اصل طراحی UI/UX که تبدیل بازدیدکننده به مشتری را آسان‌تر می‌کند.',
daysAgo: 12,
content: `## مقدمه
وب‌سایت شما اغلب اولین نقطه تماس مشتری با برند است. طراحی UI/UX ضعیف می‌تواند حتی با محصول عالی، فروش را کاهش دهد.
## ۱۰ اصل کلیدی
### 1. سادگی
هر عنصر باید هدف مشخصی داشته باشد. از شلوغی بپرهیزید.
### 2. سلسله‌مراتب بصری
مهم‌ترین پیام باید بیشترین توجه را بگیرد.
### 3. یکپارچگی
دکمه‌ها، فونت‌ها و فاصله‌ها در همه صفحات یکسان باشند.
### 4. خوانایی
تضاد کافی بین متن و پس‌زمینه ضروری است.
### 5. واکنش‌گرایی
سایت باید روی موبایل بی‌نقص کار کند.
### 6. سرعت بارگذاری
هر ثانیه تأخیر، نرخ تبدیل را کاهش می‌دهد.
### 7. دسترس‌پذیری
طراحی برای همه کاربران، از جمله افراد دارای محدودیت بینایی.
### 8. بازخورد بصری
کاربر باید بداند کلیک یا ارسال فرم موفق بوده است.
### 9. مسیر کاربری روشن
کاربر در ۳ کلیک به هدف اصلی برسد.
### 10. تست با کاربر واقعی
قبل از لانچ، با مخاطب هدف تست کنید.
## نتیجه‌گیری
UI/UX خوب نامرئی است؛ کاربر فقط نتیجه را حس می‌کند: سادگی، سرعت و اعتماد.`,
},
{
title: 'راهنمای طراحی پست و قالب اینستاگرام برای برندها',
slug: 'social-media-design',
excerpt:
'سوشال مدیا ویترین برند شماست. نکات طراحی قالب پست، استوری و هایلایت برای اینستاگرام حرفه‌ای.',
coverUrl: '/uploads/bg-social.png',
seoTitle: 'طراحی سوشال مدیا | قالب اینستاگرام حرفه‌ای — استودیو نورو',
seoDescription:
'چطور قالب اینستاگرام یکپارچه بسازیم؟ راهنمای رنگ، تایپوگرافی و چیدمان پست برای برندهای ایرانی.',
daysAgo: 20,
content: `## مقدمه
اینستاگرام برای بسیاری از برندهای ایرانی، مهم‌ترین کانال ارتباطی با مشتری است. طراحی نامنظم پست‌ها اعتماد را کاهش می‌دهد.
## عناصر یک فید حرفه‌ای
* پالت رنگ ثابت (۲ تا ۳ رنگ اصلی)
* فونت مشخص برای تیتر و متن
* قالب‌های تکرارشونده برای انواع محتوا
* فضای سفید کافی
* تصاویر با کیفیت و یکدست
## انواع قالب‌های پرکاربرد
### قالب معرفی محصول
تصویر بزرگ + نام محصول + CTA کوتاه
### قالب آموزشی
تیتر bold + ۳ تا ۵ bullet point
### قالب نقل‌قول
متن برجسته + لوگو یا آیکون برند
## اشتباهات رایج
* استفاده از فونت‌های مختلف در هر پست
* رنگ‌های ناهماهنگ
* متن بیش از حد روی تصویر
* کیفیت پایین تصاویر
## نتیجه‌گیری
فید اینستاگرام یکپارچه یعنی برند حرفه‌ای‌تر. استودیو نورو قالب‌های اختصاصی سوشال مدیا طراحی می‌کند.`,
},
{
title: '۵ اشتباه رایج در طراحی لوگو که باید از آن‌ها دوری کنید',
slug: 'logo-design-mistakes',
excerpt:
'از کپی‌برداری تا جزئیات اضافه؛ ۵ اشتباه رایج در طراحی لوگو که می‌تواند برند شما را ضعیف کند.',
coverUrl: '/uploads/blog-logo-types-comparison.png',
seoTitle: 'اشتباهات طراحی لوگو | ۵ خطای رایج — استودیو نورو',
seoDescription:
'۵ اشتباه رایج در طراحی لوگو: پیچیدگی، ترند زودگذر، رنگ نامناسب و کپی از رقبا. راهکارهای عملی برای اجتناب.',
daysAgo: 8,
content: `## مقدمه
طراحی لوگو یک فرآیند استراتژیک است، نه فقط انتخاب یک شکل زیبا. متأسفانه بسیاری از کسب‌وکارها در همین مرحله اشتباهات پرهزینه‌ای مرتکب می‌شوند.
![اینفوگرافیک انواع لوگو](/uploads/blog-logo-types-overview.png)
## ۱. پیچیدگی بیش از حد
لوگوی شلوغ در سایز کوچک (فاویکون، استوری) ناخوانا می‌شود.
## ۲. پیروی از ترندهای زودگذر
ترند امسال، قدیمی فردا. لوگو باید ماندگار باشد.
## ۳. کپی از برندهای دیگر
لوگوی مشابه یعنی از دست دادن تمایز و ریسک حقوقی.
## ۴. نادیده گرفتن مخاطب هدف
لوگوی لوکس برای برند کودکانه یا برعکس، اشتباه است.
## ۵. طراحی بدون استراتژی
بدون تحقیق برند، لوگو فقط یک تصویر تزئینی می‌شود.
## راهکار
قبل از طراحی: مخاطب، رقبا، ارزش‌های برند و کاربردهای آینده لوگو را مشخص کنید.
## نتیجه‌گیری
لوگوی موفق ساده، مرتبط و ماندگار است. برای انتخاب نوع مناسب لوگو، مقاله «انواع لوگو» ما را هم بخوانید.`,
},
]
const db = JSON.parse(readFileSync(dbPath, 'utf-8'))
for (const template of testPosts) {
db.blogPosts = db.blogPosts.filter((p) => p.slug !== template.slug)
const publishedAt = new Date()
publishedAt.setDate(publishedAt.getDate() - template.daysAgo)
db.blogPosts.push({
id: randomUUID(),
title: template.title,
slug: template.slug,
excerpt: template.excerpt,
content: template.content,
coverUrl: template.coverUrl,
published: true,
publishedAt: publishedAt.toISOString(),
seoTitle: template.seoTitle,
seoDescription: template.seoDescription,
})
}
writeFileSync(dbPath, JSON.stringify(db, null, 2), 'utf-8')
console.log(`Seeded ${testPosts.length} test posts. Total blog posts: ${db.blogPosts.length}`)