توثيق 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

Sapphire · الأزرق الموثوق

#2563eb

Amber · الذهبي الفاخر

#b45309

Amethyst · البنفسجي السيبراني

#7c3aed

Ruby · المرجاني العصري

#e11d48

التبديل اللحظي لثيم الألوان (Dynamic Theme Switching)

يدعم AstroArabia v2 Pro سمة `data-theme-color` على مستوى جذر المستند `html`، مع مكوّن جاهز `ThemeColorPicker.astro` يحفظ اختيار المستخدم فورياً في المتصفح.

العناوين

Alexandria Variable

--font-heading

النصوص

IBM Plex Sans Arabic

--font-sans

04 / COMPONENTS SYSTEM

نظام المكونات: الأزرار ثلاثية الأبعاد والبطاقات

يوفر AstroArabia v2 Pro مكتبة مدمجة مهندسة بأعلى معايير UI/UX العالمية لتحقيق أقصى معدل تحويل (High Conversion Rate)، مبنية باستخدام Class Variance Authority (CVA) وخصائص CSS المنطقية.

1. نظام الأزرار اللمسية ثلاثية الأبعاد (Tactile 3D & Claymorphism)

تعتمد أزرار النسخة Pro على هندسة فيزيائية واقعية للضوء: ظل مائل رمادي خفيف (-4px 5px 0px 0px #cbd5e1)، إضاءة انكسارية علوية (inset 2px 2px 3px)، وانضغاط ميكانيكي حقيقي عند النقر (:active).

.btn-3d / .btn-clay-primary

الزر البارز بلون الثيم الأساسي وزاوية انكسار ضوئية مائلة.

.btn-clay-accent

زر الأكشن المرجاني ثلاثي الأبعاد لجذب الانتباه الفوري والعروض.

.btn-neumorphic

زر النيومورفيك السطحي المحفور مع ارتداد انضغاطي داخلي.

Astro Button Component Usage

<Button variant="clay" size="lg">احصل على نسخة Pro ($99)</Button>
<Button variant="clayAccent">طلب عرض سعر مخصص</Button>
<Button variant="glow">بدء التجربة المباشرة</Button>

2. مصفوفة البطاقات التسعة الكاملة (9 Card Styles Matrix)

مكوّن <Card variant="..." /> يدعم 9 أنماط معيارية لتغطية كافة احتياجات الواجهات الرقمية:

1. Glass

زجاج متكيف ضبابي 16px.

2. Bento

خلايا شبكية على نمط Apple.

3. Elevated

رفع طبقي متعدد المستويات.

4. Clay 3D

بروز مجسم بظل مائل رمادي خفيف.

5. Glow

إطار مشع خافت ونيون محيط.

6. Minimal

بساطة سويسرية فائقة النقاء.

7. Acrylic Glass

زجاج أكريليك متلألئ (VisionOS).

8. Theme Chameleon

تتغير ألوانها لحظياً مع ثيم الهيدر.

9. Spotlight Aura

إشعاع ضوئي علوي تفاعلي (Linear).

Card Component Usage

<Card variant="spotlight" interactive={true} class="p-6">
  <h3 class="font-bold text-lg">عنوان الميزة الفاخرة</h3>
  <p class="text-muted text-sm mt-2">محتوى تفاعلي يستجيب للضوء وحركة المؤشر.</p>
</Card>

05 / STACK

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

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

astro              7.2.9
tailwindcss        4.x
@tailwindcss/vite  latest
@astrojs/sitemap   3.7.3
class-variance-authority  0.7.x
clsx               2.x
astro-social-share 2.2.0
astro-toc-smol     0.4.4

الصور والأصول

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

التفاعل والسرعة

JavaScript نقي ومحدد للثيم والتفاعل الحي فقط بدون React أو Vue، لتحقيق 100/100 في PageSpeed.

06 / NEW PRESET

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

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

src/pages/my-preset/index.astro

npm run check
npm test
npm run build

07 / COMMERCIAL LICENSE

الرخصة التجارية لنسخة AstroArabia v2 Pro ($99)

تخضع نسخة AstroArabia v2 Pro المدفوعة (بقيمة 99 دولار / 370 ريال سعودي) لاتفاقية ترخيص الاستخدام التجاري (Commercial End-User License Agreement - EULA). تمنح الرخصة المشتري حرية كاملة لتطوير مشاريعه مع حماية حقوق الملكية الفكرية للقالب.

مسموح بالكامل ✓

بناء عدد غير محدود من المواقع والمشاريع التجارية والشخصية لك ولعملائك وتعديل الكود بالكامل.

محظور قطعياً ✕

إعادة بيع أو توزيع الكود المصدري كقالب أو Starter Kit مجاناً أو بمقابل مالي، أو نشره في مستودعات عامة.

الأمان والتحديثات ✦

الحصول على التحديثات المستقبلية لنواة القالب وتوافقه المستمر مع أحدث إصدارات Astro وTailwind.

Read the full Commercial EULA License →

08 / FAQ

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

هل القالب Static؟+

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

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

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

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

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

كيف أضيف SEO؟+

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

لديك تحسين؟

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

خطوات التخصيص

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