I18n(ar) add getting started complete content

src/content/docs/ar/astro-courses.mdx

@@ -0,0 +1,50 @@
+---
+title: دورات Astro
+sidebar:
+  label: الدورات
+description: تعلم Astro من خلال دورات ودروس تعليمية مميزة خارج هذا العالم!
+i18nReady: true
+---
+import { LinkCard, CardGrid } from '@astrojs/starlight/components';
+
+هل ترغب في البدء بتعلّم Astro من خلال دورة أو دليل تعليمي؟
+
+يمكنك تعلم أساسيات Astro عبر [الدليل الرسمي "أنشئ مدونة"](/ar/tutorial/0-introduction/)، أو استكشاف مجموعتنا المختارة من المحتوى التعليمي الموصى به حول Astro.
+
+## شركاء التعليم
+
+:::tip[ادعم Astro أثناء التعلّم]
+استخدم روابط الشراكة الخاصة بـ Astro للحصول على خصومات من شركائنا التعليميين، وجزء من مشترياتك يُعاد مباشرةً لدعم تطوير مشروع Astro مفتوح المصدر!
+:::
+
+تعلّم Astro من خبراء موثوقين في المنصة، من خلال دروس مرئية، وتمارين تفاعلية، ومشاريع تطبيقية!
+
+<LinkCard
+  title="تعلم Astro مع Coding in Public"
+  href="https://learnastro.dev/?code=ASTRO_PROMO"
+  description="دورة تفاعلية مميزة تضم أكثر من 150 درسًا بالفيديو تُعلّمك كيفية استخدام أدوات وميزات Astro المدمجة."
+/>
+
+<LinkCard
+  title="تعلم Astro مع James Q Quick"
+  href="https://scrimba.com/intro-to-astro-c00ar0fi5u?via=astro"
+  description="أنشئ أول موقع لك باستخدام Astro من خلال 35 درسًا تفاعليًا على منصة Scrimba، تجمع بين الفيديو وبيئة التطوير في تجربة تعليمية فريدة."
+/>
+
+## موارد التعلم من المجتمع
+
+تعلم من زملائك المبدعين في مجتمع Astro عبر مجموعات من الأدلة والمقالات والمنشورات المميزة.
+
+<CardGrid>
+<LinkCard
+  title="نصائح Astro"
+  href="https://astro-tips.dev/"
+  description="وصفات ودروس ونصائح سريعة متقدمة وغير مألوفة كتبها أفراد من مجتمع Astro."
+/>
+
+<LinkCard
+  title="منتدى دعم Astro Squid"
+  href="https://get.supportsquid.ink/"
+  description="منتدى دعم عام ومفتوح وقاعدة معرفة لمستخدمي Astro خارج خادم Discord الرسمي."
+/>
+</CardGrid>

src/content/docs/ar/concepts/islands.mdx

@@ -0,0 +1,162 @@
+---
+title: بنية الجزر (Islands Architecture)
+description: تعرّف على كيفية مساعدة بنية الجزر في Astro في جعل المواقع سريعة الأداء.
+i18nReady: true
+---
+
+import IslandsDiagram from '~/components/IslandsDiagram.astro';
+import ReadMore from '~/components/ReadMore.astro';
+
+ساعد إطار **Astro** في ابتكار ونشر نمط جديد من هندسة الواجهات الأمامية يُعرف باسم **بنية الجزر**.  
+تعمل هذه البنية عن طريق توليد الجزء الأكبر من صفحتك إلى **HTML ثابت وسريع**، مع إضافة جزر صغيرة من **JavaScript** فقط عند الحاجة إلى التفاعل أو التخصيص (مثل شريط صور متحرك مثلًا).  
+بهذه الطريقة يتم تجنّب تحميل حزم JavaScript ضخمة تبطّئ استجابة المواقع الحديثة المبنية على أطر JavaScript التقليدية.
+
+## لمحة تاريخية
+
+تم استخدام مصطلح **«مكوّن الجزيرة»** لأول مرة من قبل مهندسة الواجهات الأمامية في موقع Etsy، [كاتي سايلور ميلر](https://sylormiller.com/) عام 2019.  
+ثم قام منشئ إطار **Preact**، [جيسون ميلر](https://jasonformat.com/islands-architecture/)، بتوسيع الفكرة وشرحها في مقال بتاريخ 11 أغسطس 2020.
+
+> الفكرة العامة لبنية "الجزر" بسيطة في ظاهرها: يتم توليد صفحات HTML على الخادم، مع حقن أماكن مخصصة أو مناطق ديناميكية يمكن «ترطيبها» لاحقًا على المتصفح لتتحول إلى وحدات تفاعلية مستقلة تستخدم نفس HTML المولّد من الخادم.  
+> — جيسون ميلر، منشئ إطار Preact
+
+يعتمد هذا النمط المعماري على تقنية تُعرف باسم **الترطيب الجزئي** أو **الانتقائي**.
+
+في المقابل، تقوم معظم أطر الويب المبنية على JavaScript بترطيب وتوليد الموقع بالكامل كتطبيق JavaScript واحد كبير (ويُعرف هذا بـ SPA أو "التطبيق أحادي الصفحة").  
+توفر SPAs سهولة وقوة في التطوير، لكنها تعاني من بطء تحميل الصفحات نتيجة اعتمادها الكامل على JavaScript من جهة العميل.
+
+ورغم أن SPAs لها استخداماتها، بل ويمكن [دمجها داخل صفحة Astro](/ar/guides/migrate-to-astro/from-create-react-app/)، إلا أنها تفتقر إلى القدرة الأصلية على الترطيب الانتقائي، مما يجعلها خيارًا ثقيلًا في معظم مشاريع الويب الحديثة.
+
+أصبح Astro شائعًا لكونه أول إطار JavaScript رئيسي يقدم الترطيب الانتقائي بشكل مدمج، معتمدًا على نمط الجزر الذي صاغته سايلور ميلر.  
+وقد قمنا في Astro بتوسيع هذه الفكرة وتطويرها لدعم محتوى يتم توليده ديناميكيًا من الخادم بشكل متوازي وعالي الأداء.
+
+## ما هي الجزيرة؟
+
+في Astro، تُعتبر **الجزيرة** مكوّن واجهة مستخدم محسّن داخل صفحة HTML ثابتة.
+
+الـ [**جزيرة العميل**](#client-islands) هي مكوّن JavaScript تفاعلي يتم ترطيبه بشكل منفصل عن بقية الصفحة،  
+أما [**جزيرة الخادم**](#server-islands) فهي مكوّن واجهة مستخدم يتم توليد محتواه الديناميكي من الخادم بشكل منفصل أيضًا.
+
+كلا النوعين يعملان بشكل مستقل، مما يتيح أداءً أفضل وتقليلًا في زمن التحميل.
+
+## مكوّنات الجزر
+
+مكوّنات Astro هي اللبنات الأساسية لقالب صفحتك. فهي تُحوّل إلى HTML ثابت بدون أي وقت تشغيل على المتصفح.
+
+تخيل جزيرة العميل كمكوّن تفاعلي صغير «يطفو» في بحر من HTML خفيف وسريع يتم توليده من الخادم.  
+أما جزر الخادم، فتُستخدم لعناصر مخصصة أو ديناميكية مثل صورة ملف المستخدم بعد تسجيل الدخول.
+
+<IslandsDiagram>
+  <Fragment slot="headerApp">رأس الصفحة (جزيرة تفاعلية)</Fragment>
+  <Fragment slot="sidebarApp">شريط جانبي (HTML ثابت)</Fragment>
+  <Fragment slot="main">
+    محتوى ثابت مثل النصوص والصور وغيرها.
+  </Fragment>
+  <Fragment slot="carouselApp">شريط صور متحرك (جزيرة تفاعلية)</Fragment>
+  <Fragment slot="footer">تذييل الصفحة (HTML ثابت)</Fragment>
+  <Fragment slot="source">المصدر: [Islands Architecture: Jason Miller](https://jasonformat.com/islands-architecture/)</Fragment>
+</IslandsDiagram>
+
+تعمل كل جزيرة بمعزل عن الأخرى على الصفحة، ويمكن أن تحتوي الصفحة على عدة جزر.  
+ومع ذلك، يمكن لجزر العميل تبادل الحالة والتواصل فيما بينها رغم أنها تعمل في سياقات مكونات مختلفة.
+
+تمنح هذه المرونة Astro القدرة على دعم أطر واجهات متعددة مثل [React](https://react.dev/)، [Preact](https://preactjs.com/)، [Svelte](https://svelte.dev/)، [Vue](https://vuejs.org/)، و [SolidJS](https://www.solidjs.com/).  
+ولأنها مستقلة، يمكنك حتى دمج عدة أطر في نفس الصفحة.
+
+:::tip
+رغم أن معظم المطورين يفضلون استخدام إطار واحد، إلا أن Astro يدعم استخدام عدة أطر في نفس المشروع، مما يتيح لك:
+
+- اختيار الإطار الأنسب لكل مكوّن.
+- تعلم إطار جديد دون الحاجة لإنشاء مشروع منفصل.
+- التعاون مع آخرين حتى لو كانوا يستخدمون أطرًا مختلفة.
+- نقل موقعك تدريجيًا إلى إطار جديد دون توقف.
+:::
+
+## جزر العميل
+
+بشكل افتراضي، يقوم Astro بتحويل كل مكوّن واجهة مستخدم إلى HTML و CSS فقط،  
+**ويزيل تلقائيًا أي JavaScript من جهة العميل.**
+
+```astro title="src/pages/index.astro"
+<MyReactComponent />
+```
+
+قد يبدو هذا مقيدًا، لكنه ما يجعل مواقع Astro سريعة بطبيعتها ويمنع المطورين من إرسال JavaScript غير ضروري قد يبطئ الموقع.
+
+لتحويل أي مكوّن ثابت إلى جزيرة تفاعلية، أضف توجيه `client:*`.
+عندها يقوم Astro تلقائيًا ببناء وتجميع كود JavaScript الخاص بالعميل بكفاءة عالية.
+
+```astro title="src/pages/index.astro" ins="client:load"
+<!-- هذا المكوّن الآن تفاعلي على الصفحة!
+     بينما يبقى باقي الموقع ثابتًا. -->
+<MyReactComponent client:load />
+```
+
+يتم تحميل JavaScript من جهة العميل فقط للمكونات التفاعلية التي تحددها باستخدام توجيهات `client:*`.
+
+ويمكنك أيضًا تحديد أولوية التحميل لكل مكون مثل `client:idle` (يُحمّل عند خمول المتصفح) أو `client:visible` (يُحمّل عند ظهوره على الشاشة).
+
+<h3>فوائد الجزر العميلية</h3>
+
+أبرز فائدة لبناء المواقع باستخدام **جزر Astro** هي **الأداء**:  
+حيث يتم تحويل الجزء الأكبر من موقعك إلى **HTML ثابت وسريع**، بينما يتم تحميل **JavaScript** فقط للمكونات التي تحتاجه فعلًا.  
+يُعد JavaScript أحد أبطأ أنواع الملفات من حيث التحميل بالبايت، لذلك فكل بايت يتم توفيره يُحدث فرقًا في السرعة.
+
+فائدة أخرى هي **التحميل المتوازي**.  
+في المثال الموضح أعلاه، فإن جزيرة "شريط الصور" منخفضة الأولوية لا تُعيق تحميل جزيرة "رأس الصفحة" عالية الأولوية.  
+كلاهما يتم تحميله بشكل متوازٍ ومستقل، مما يجعل الرأس تفاعليًا فورًا دون الحاجة لانتظار تحميل شريط الصور الأثقل في أسفل الصفحة.
+
+والأفضل من ذلك، يمكنك إخبار **Astro** تمامًا **متى وكيف يتم عرض كل مكون**.  
+إذا كان مكون مثل شريط الصور مكلفًا في التحميل، يمكنك إضافة [توجيه خاص للعميل](/ar/reference/directives-reference/#client-directives) ليخبر **Astro** بعدم تحميله إلا عند ظهوره للمستخدم على الصفحة.  
+وإذا لم يظهر أبدًا، فلن يتم تحميله مطلقًا.
+
+في **Astro**، يعود القرار إليك كمطور لتحديد المكونات التي يجب أن تعمل على المتصفح.  
+سيقوم **Astro** بترطيب ما تحتاجه الصفحة فقط، ويترك بقية الموقع كـ **HTML ثابت**.
+
+**الجزر العميلية هي السر وراء الأداء العالي الافتراضي الذي يميز Astro!**
+
+<ReadMore>اقرأ المزيد حول [استخدام مكونات أطر JavaScript](/ar/guides/framework-components/) في مشروعك.</ReadMore>
+
+## الجزر الخادمية (Server Islands)
+
+تُعد الجزر الخادمية طريقة فعّالة لنقل الأكواد البطيئة أو المكلفة على الخادم بعيدًا عن عملية العرض الأساسية،  
+مما يجعل من السهل الجمع بين **HTML ثابت عالي الأداء** ومكونات ديناميكية تُولّد على الخادم.
+
+أضف التوجيه [`server:defer`](/ar/reference/directives-reference/#server-directives) إلى أي مكون في صفحتك لتحويله إلى **جزيرة خادمية مستقلة**:
+
+
+```astro title="src/pages/index.astro" "server:defer"
+---
+import Avatar from "../components/Avatar.astro";
+---
+<Avatar server:defer />
+```
+
+يعمل هذا الأسلوب على تقسيم صفحتك إلى مناطق أصغر من المحتوى الذي يتم إنشاؤه على الخادم، بحيث يتم تحميل كل منها بشكل متوازٍ دون انتظار الأخرى.
+
+يمكن عرض المحتوى الرئيسي لصفحتك على الفور باستخدام محتوى مؤقت مثل صورة رمزية افتراضية،  
+وذلك حتى يصبح محتوى الجزيرة الخاصة متاحًا.  
+وبفضل **الجزر الخادمية**، فإن وجود مكونات صغيرة مخصصة لا يؤدي إلى تأخير عرض الصفحة الثابتة بالكامل.
+
+تم تصميم هذا النمط من العرض ليكون **قابلًا للنقل** — فهو لا يعتمد على بنية تحتية محددة للخادم،  
+مما يجعله يعمل مع أي نوع من الاستضافة، سواء خادم **Node.js** داخل **Docker** أو أي مزود **Serverless** تختاره.
+
+<h3>فوائد الجزر الخادمية</h3>
+
+من أبرز فوائد الجزر الخادمية هي **القدرة على عرض الأجزاء الديناميكية** من الصفحة بشكل مباشر عند الطلب.  
+يتيح ذلك تخزين الإطار الخارجي والمحتوى الرئيسي مؤقتًا بشكل أكثر فاعلية، مما يوفر أداءً أسرع بشكل ملحوظ.
+
+ميزة أخرى هي **تحسين تجربة الزائر**:  
+فالجزر الخادمية محسّنة بحيث تُحمّل بسرعة كبيرة — غالبًا قبل أن يبدأ المتصفح في رسم الصفحة أصلًا.  
+وفي الوقت القصير الذي تستغرقه الجزر في التحميل، يمكنك عرض محتوى بديل مخصص لتجنب أي تغير مفاجئ في تصميم الصفحة.
+
+كمثال على موقع يستفيد من **جزر Astro الخادمية**، يمكننا ذكر **متجر إلكتروني**:  
+رغم أن المحتوى الرئيسي لصفحات المنتجات لا يتغير كثيرًا، إلا أنها تحتوي عادة على عناصر ديناميكية مثل:
+
+- الصورة الرمزية للمستخدم في الرأس.
+- العروض والخصومات الخاصة بالمنتج.
+- مراجعات المستخدمين.
+
+باستخدام الجزر الخادمية لهذه العناصر، سيتمكن الزائر من رؤية الجزء الأهم — **المنتج** — فورًا.  
+بينما يمكن عرض صور رمزية عامة، أو مؤشرات تحميل، أو إعلانات مؤقتة حتى يظهر المحتوى المخصص بالكامل.
+
+<ReadMore>اقرأ المزيد حول [استخدام الجزر الخادمية](/ar/guides/server-islands/) في مشروعك.</ReadMore>