تکنولوژی‌های استفاده‌شده

خلاصه استک

قالب Novira یک پروژه فرانت‌اند استاتیک است — بدون فریم‌ورک بک‌اند، بدون npm اجباری برای اجرا.

HTML5 + CSS3 + JavaScript (Vanilla)
        ↓
Alpine.js 3 (واکنش‌گرایی UI)
        ↓
Swiper (اسلایدرها)
        ↓
Tailwind CSS v4 (utility — از پیش کامپایل در output.css)

جدول تکنولوژی‌ها

تکنولوژی	نسخه/نوع	نقش	فایل/منبع
HTML5	—	ساختار صفحات، semantic markup	`*.html`
CSS3	—	کامپوننت‌های سفارشی `ds-*`	`novira*.css`
Tailwind CSS	v4.1 (compiled)	کلاس‌های utility (`flex`, `gap-2`, ...)	`output.css`
JavaScript	ES6+	منطق UI و داده mock	`novira*.js`, `main.js`
Alpine.js	3.x	binding، state، رویدادها	`alpine.js`
Swiper	bundle	اسلایدر محصولات و بنر	`swiper-bundle.min.js`
Vazirmatn	Google Fonts	فونت فارسی	CDN در
RTL	`dir="rtl"`	چیدمان راست‌چین	همه صفحات

Alpine.js

Alpine.js وظیفه مدیریت state صفحه را دارد:

باز/بسته شدن منو، drawer، مگامنو
نمایش شرطی با x-show, x-if
حلقه‌ها با x-for
داده mock محصولات و سبد

هر صفحه با x-data به یک تابع متصل است:

Swiper

اسلایدرها با attribute data-swiper و JSON تنظیمات تعریف می‌شوند. فایل main.js در DOMContentLoaded همه را initialize می‌کند:

Tailwind (output.css)

فایل output.css از قبل بیلد شده است. برای اجرای قالب نیازی به نصب Tailwind نیست.

اگر می‌خواهید utility class جدید اضافه کنید، باید Tailwind را در محیط توسعه نصب و output.css را دوباره generate کنید — این خارج از scope پیش‌فرض قالب است.

فونت Vazirmatn

در CSS پایه:

font-family: 'Vazirmatn', system-ui, sans-serif;

آنچه استفاده نمی‌شود (در HTML)

کتابخانه	وضعیت
jQuery	استفاده نمی‌شود
React / Vue	استفاده نمی‌شود
Bootstrap	استفاده نمی‌شود
GSAP / Lenis	در `node_modules` هست ولی در صفحات HTML لود نمی‌شود

سازگاری مرورگر

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+
مرورگرهای موبایل iOS/Android مدرن

تبدیل به CMS یا فریم‌ورک

قالب به‌عنوان مرجع UI قابل تبدیل است به:

WordPress — تبدیل HTML به template/part
Laravel Blade — @extends و componentها
React/Next — تبدیل کامپوننت‌های ds-* به JSX
Static Site Generator — Eleventy، Hugo

داده mock در novira.js می‌تواند با API واقعی جایگزین شود.

استک نسخه Next.js

نسخه دوم بسته، همین قالب را با استک زیر پیاده کرده است:

تکنولوژی	نسخه	نقش
Next.js	۱۶ (App Router)	مسیریابی، رندر و خروجی استاتیک
React	۱۹	کامپوننت‌های رابط کاربری
TypeScript	۵	تایپ داده‌ها و کامپوننت‌ها
Tailwind CSS	v4	تولید از روی کد JSX، نه فایل از پیش کامپایل‌شده
Swiper (swiper/react)	۱۴	اسلایدرها

فایل‌های novira-*.css بدون تغییر بین دو نسخه مشترک‌اند؛ یعنی هر شخصی‌سازی استایلی که یاد می‌گیرید، در هر دو نسخه به کار می‌آید. جزئیات در فصل ۱۳.