توثيق AstroArabia

ابنِ بثقة،
من أول سطر.

دليل عملي للمطور العربي: شغّل القالب، افهم نظام RTL، وأضف نموذجك الخاص بدون أن تضيع في التفاصيل.

Astro 7 حديثTailwind 4 سريعRTL أصلي

astroarabia

const site = {
  direction: 'rtl',
  language: 'ar',
  framework: 'astro'
};

// build something clear

✓ جاهز للبناء والنشر

اقرأ أقل، أنجز أكثر

المعلومة بجانب الكود اللي تحتاجه، بدون صفحات نظرية طويلة.

العربية هي الأصل

التصميم يبدأ من RTL، مع عناية بالأرقام والأكواد والروابط.

ابنِ وشارك

كل مثال قريب من الاستخدام الفعلي وتقدر تنقله لمشروعك مباشرة.

01 / QUICK START

شغّل مشروعك في دقائق

تحتاج Node.js حديثاً، ثم نفذ الأوامر التالية. سيبدأ خادم التطوير على جهازك مع تحديث تلقائي أثناء العمل.

Terminal

npm install
npm run dev

02 / RTL SYSTEM

RTL بدون حلول مؤقتة

الاتجاه مضبوط على المستند، والتخطيطات تستخدم خصائص منطقية مثل `start` و`end`. الأكواد والأرقام التقنية معزولة بصرياً باتجاه LTR.

قاعدة المستند

dir="rtl" lang="ar"

قاعدة الكود

dir="ltr"

03 / VISUAL SYSTEM

الهوية البصرية في مكان واحد

عدّل ألوان القالب ومسافاته من `src/styles/global.css`. الأسماء المنطقية تجعل تغيير الهوية أسهل بدون البحث داخل كل صفحة.

Ink · النص الأساسي

#102a2b

Moss · اللون الرئيسي

#1f6b58

Coral · لون الإبراز

#e8795f

Paper · خلفية النهار

#f7f8f3

العناوين

Alexandria Variable

--font-heading

النصوص

IBM Plex Sans Arabic

--font-sans

04 / STACK

المكتبات والأدوات المستخدمة

القالب متعمد أن يكون خفيفًا: Astro يولد HTML ثابتًا، وTailwind يبني CSS، والمكونات مكتوبة بصيغة Astro بدون إطار JavaScript إضافي.

astro              7.2.9
tailwindcss        4.x
@tailwindcss/vite  4.x
@astrojs/sitemap   3.7.3
class-variance-authority  0.7.x
clsx               2.x

الصور

استخدم `Image` و`Picture` من `astro:assets` للصور المحلية. يتم توليد WebP وAVIF و`srcset` أثناء البناء.

التفاعل

نستخدم JavaScript صغيرًا فقط للثيم وحركة صفحة الهبوط. لا يوجد React أو Vue أو Svelte.

05 / NEW PRESET

أضف نموذجاً جديداً

أنشئ صفحة داخل `src/pages`، أعد استخدام `BaseLayout` و`SiteHeader`، ثم أضفها إلى قائمة النماذج بعد اكتمالها.

src/pages/my-preset/index.astro

npm run check
npm test
npm run build

06 / LICENSE

رخصة MIT: استخدم القالب بحرية

AstroArabia قالب مفتوح المصدر ومتاح مجانًا تحت رخصة MIT. يمكنك استخدامه وتعديله ونشره وبيعه ضمن مشروعك، مع الاحتفاظ بنص الرخصة وحقوق النشر في نسخ الكود أو الأجزاء المقتبسة.

مسموح

الاستخدام، التعديل، الدمج، وإعادة التوزيع.

مطلوب

إبقاء إشعار MIT وحقوق النشر مع نسخ الكود.

تنبيه

البرنامج مقدم كما هو، وتتحمل مسؤولية استخدامه.

Read the full MIT License →

07 / FAQ

أسئلة قبل الإطلاق

هل القالب Static؟+

نعم، الإخراج الحالي ثابت ومناسب للنشر السريع على Cloudflare Pages أو GitHub Pages.

هل نموذج التواصل مربوط بخدمة؟+

لا. النموذج واجهة جاهزة للتخصيص، واختر أنت طريقة الإرسال المناسبة مثل Cloudflare Workers أو Formspree أو API خاص بك.

هل يدعم الوضع الليلي؟+

نعم، الهيدر موحد والوضع يحفظ اختيار المستخدم محلياً.

كيف أضيف SEO؟+

يمرر كل Layout عنواناً ووصفاً ويولد canonical وOpen Graph وSitemap تلقائياً.

لديك تحسين؟

ساهم في جعل الويب العربي أفضل.

إرشادات المساهمة

كلّمنا واتساب

ابنِ بثقة،من أول سطر.