@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ar/intlayer_with_astro_react.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-06
-title: ترجمة Astro + React i18n - كيفية ترجمة تطبيق Astro + React في عام 2026
-description: تعرف على كيفية إضافة التدويل (i18n) إلى موقع Astro + React الخاص بك باستخدام Intlayer. اتبع هذا الدليل لجعل موقعك متعدد اللغات.
+updatedAt: 2026-05-31
+title: "تدويل Astro + React - الدليل الكامل لترجمة تطبيقك"
+description: "لا مزيد من i18next. دليل 2026 لبناء تطبيق Astro + React متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء."
 keywords:
   - التدويل
   - توثيق
@@ -61,16 +61,37 @@ history:
 
 <TOC/>
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
+بالمقارنة مع الحلول الرئيسية مثل `astro-i18n` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-باستخدام Intlayer، يمكنك:
+** تغطية استرو كاملة **
 
-- **إدارة الترجمات بسهولة**: باستخدام قواميس تعريفية على مستوى المكون.
-- **توطين الميتا داتا والمسارات والمحتوى ديناميكيًا**.
-- **ضمان دعم TypeScript**: من خلال أنواع مولدة تلقائيًا لتعزيز الإكمال التلقائي واكتشاف الأخطاء.
-- **الاستفادة من الميزات المتقدمة**: مثل الكشف الديناميكي عن اللغة وتبديل اللغة.
+تم تحسين Intlayer للعمل بشكل مثالي مع Astro من خلال تقديم **توجيه متعدد اللغات** و**خريطة الموقع** وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n).
+
+**حجم البندل**
+
+بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer **في تقليل أحجام البندل وصفحاتك بنسبة تصل إلى 50%**.
+
+** الصيانة **
+
+يؤدي تحديد نطاق محتوى تطبيقك ** إلى تسهيل الصيانة ** للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer **بالكامل** لضمان دقة المحتوى الخاص بك.
+
+** وكيل الذكاء الاصطناعي **
+
+يؤدي تحديد موقع المحتوى المشترك ** إلى تقليل السياق المطلوب ** بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل **CLI** لاختبار الترجمات المفقودة،**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**، **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** و**[مهارات الوكيل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.
+
+**الأتمتة**
+
+استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا **مترجمًا** لأتمتة استخراج المحتوى، بالإضافة إلى [منصة ويب](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) للمساعدة في **الترجمة في الخلفية**.
+
+**أداء**
+
+يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.
+
+**التحجيم مع عدم وجود مطور**
+
+أكثر من مجرد حل i18n، يوفر Intlayer **[محررًا مرئيًا] مستضافًا ذاتيًا](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** و**[كامل CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
 
 ---
 
@@ -78,7 +99,9 @@ history:
 
 تحقق من [نموذج التطبيق](https://github.com/aymericzip/intlayer-astro-template) على GitHub.
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام مدير الحزم المفضل لديك:
 
@@ -121,7 +144,9 @@ bun x intlayer init
 - **@astrojs/react**
   إضافة Astro الرسمية التي تتيح استخدام جزر (islands) مكونات React.
 
-### الخطوة 2: تهيئة مشروعك
+</Step>
+
+<Step number={2} title="تهيئة مشروعك">
 
 أنشئ ملف تكوين لتحديد لغات تطبيقك:
 
@@ -146,7 +171,9 @@ export default config;
 
 > من خلال ملف التكوين هذا، يمكنك تهيئة الروابط المترجمة، وإعادة توجيه الوسيط، وأسماء الكوكيز، وموقع وامتدادات تعريفات المحتوى، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق التهيئة](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
-### الخطوة 3: دمج Intlayer في تكوين Astro الخاص بك
+</Step>
+
+<Step number={3} title="دمج Intlayer في تكوين Astro الخاص بك">
 
 أضف إضافة `intlayer` وتكامل React إلى تكوين Astro الخاص بك.
 
@@ -167,7 +194,9 @@ export default defineConfig({
 
 > يتيح تكامل `react()` استخدام جزر مكونات React عبر `client:only="react"`.
 
-### الخطوة 4: تعريف المحتوى الخاص بك
+</Step>
+
+<Step number={4} title="تعريف المحتوى الخاص بك">
 
 أنشئ وأدِر تعريفات المحتوى لتخزين الترجمات:
 
@@ -194,7 +223,9 @@ export default appContent;
 
 > لمزيد من المعلومات، راجع [توثيق تعريف المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md).
 
-### الخطوة 5: استخدام المحتوى في Astro
+</Step>
+
+<Step number={5} title="استخدام المحتوى في Astro">
 
 يمكنك استهلاك القواميس مباشرة في ملفات `.astro` الخاصة بك باستخدام المساعدين الأساسيين المصدرين من `intlayer`. يجب عليك أيضًا إضافة ميتا داتا SEO (مثل hreflang وروابط canonical) لكل صفحة وتقديم جزيرة React للمحتوى التفاعلي في جانب العميل.
 
@@ -282,7 +313,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** تحصل جميع الروابط على بادئة لغة. يمكنك استخدام `[locale]` القياسي إذا كنت لا تحتاج إلى معالجة الجذر بشكل منفصل.
 > - **`search-param` أو `no-prefix`:** لا يلزم وجود أدلة لغة. يتم التعامل مع اللغة عبر معلمات الاستعلام أو ملفات تعريف الارتباط.
 
-### الخطوة 6: إنشاء مكون جزيرة React
+</Step>
+
+<Step number={6} title="إنشاء مكون جزيرة React">
 
 أنشئ مكون جزيرة يلف تطبيق React الخاص بك ويستلم اللغة المكتشفة من الخادم:
 
@@ -314,7 +347,9 @@ export function ReactIsland({ locale }: { locale: LocalesValues }) {
 
 > يتم تمرير خاصية `locale` من صفحة Astro (اكتشاف الخادم) إلى `IntlayerProvider` ، مما يجعلها اللغة الأولية لجميع خطافات React داخل الشجرة.
 
-### الخطوة 7: إضافة مبدل اللغة
+</Step>
+
+<Step number={7} title="إضافة مبدل اللغة">
 
 أنشئ مكون React `LocaleSwitcher` يقرأ اللغات المتاحة وينتقل إلى الرابط المترجم عندما يختار المستخدم لغة جديدة:
 
@@ -363,7 +398,9 @@ export function LocaleSwitcher() {
 
 > يجب رندر `LocaleSwitcher` داخل `IntlayerProvider` - استخدمه داخل مكون الجزيرة الخاص بك (كما هو موضح في الخطوة 6).
 
-### الخطوة 8: خريطة الموقع وRobots.txt
+</Step>
+
+<Step number={8} title="خريطة الموقع وRobots.txt">
 
 توفر Intlayer أدوات لإنشاء خريطة موقع مترجمة وملفات robots.txt ديناميكيًا.
 
@@ -423,55 +460,9 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### تكوين TypeScript
+</Step>
 
-تستخدم Intlayer تقنية توسيع الوحدات (module augmentation) للاستفادة من TypeScript، مما يجعل برمجتك أكثر قوة.
-
-![الإكمال التلقائي](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![خطأ في الترجمة](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع المولدة تلقائيًا.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... تكوين TypeScript الحالي الخاص بك
-  "include": [
-    // ... تكوين TypeScript الحالي الخاص بك
-    ".intlayer/**/*.ts", // تضمين الأنواع المولدة تلقائيًا
-  ],
-}
-```
-
-### تكوين Git
-
-يوصى بتجاهل الملفات التي تنشئها Intlayer. هذا يتجنب إضافتها إلى مستودع Git الخاص بك.
-
-للقيام بذلك، أضف التعليمات التالية إلى ملف `.gitignore` الخاص بك:
-
-```bash
-# تجاهل الملفات المولدة بواسطة Intlayer
-.intlayer
-```
-
-### إضافة VS Code
-
-لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.
-
-[التثبيت من VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-توفر هذه الإضافة:
-
-- **إكمال تلقائي** لمفاتيح الترجمة.
-- **اكتشاف الأخطاء في الوقت الفعلي** للترجمات المفقودة.
-- **معاينة مضمنة** للمحتوى المترجم.
-- **إجراءات سريعة** لإنشاء وتحديث الترجمات بسهولة.
-
-لمزيد من المعلومات حول استخدام الإضافة، راجع [توثيق إضافة VS Code](https://intlayer.org/doc/vs-code-extension).
-
----
-
-### (Optional) Step 15: Extract the content of your components
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -573,6 +564,58 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
+### تكوين TypeScript
+
+تستخدم Intlayer تقنية توسيع الوحدات (module augmentation) للاستفادة من TypeScript، مما يجعل برمجتك أكثر قوة.
+
+![الإكمال التلقائي](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![خطأ في الترجمة](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع المولدة تلقائيًا.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... تكوين TypeScript الحالي الخاص بك
+  "include": [
+    // ... تكوين TypeScript الحالي الخاص بك
+    ".intlayer/**/*.ts", // تضمين الأنواع المولدة تلقائيًا
+  ],
+}
+```
+
+### تكوين Git
+
+يوصى بتجاهل الملفات التي تنشئها Intlayer. هذا يتجنب إضافتها إلى مستودع Git الخاص بك.
+
+للقيام بذلك، أضف التعليمات التالية إلى ملف `.gitignore` الخاص بك:
+
+```bash
+# تجاهل الملفات المولدة بواسطة Intlayer
+.intlayer
+```
+
+### إضافة VS Code
+
+لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.
+
+[التثبيت من VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+توفر هذه الإضافة:
+
+- **إكمال تلقائي** لمفاتيح الترجمة.
+- **اكتشاف الأخطاء في الوقت الفعلي** للترجمات المفقودة.
+- **معاينة مضمنة** للمحتوى المترجم.
+- **إجراءات سريعة** لإنشاء وتحديث الترجمات بسهولة.
+
+لمزيد من المعلومات حول استخدام الإضافة، راجع [توثيق إضافة VS Code](https://intlayer.org/doc/vs-code-extension).
+
+---
+
 ### تعمق أكثر
 
 إذا كنت تريد معرفة المزيد، يمكنك أيضًا تنفيذ [المحرر المرئي](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md) أو استخدام [نظام إدارة المحتوى (CMS)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md) لإخراج محتواك خارجيًا.

package/docs/ar/intlayer_with_astro_solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: ترجمة Astro + Solid i18n - كيفية ترجمة تطبيق Astro + Solid في عام 2026
-description: تعرف على كيفية إضافة التدويل (i18n) إلى موقع Astro + Solid الخاص بك باستخدام Intlayer. اتبع هذا الدليل لجعل موقعك متعدد اللغات.
+updatedAt: 2026-05-31
+title: "تدويل Astro + Solid - الدليل الكامل لترجمة تطبيقك"
+description: "لا مزيد من i18next. دليل 2026 لبناء تطبيق Astro + Solid متعدد اللغات (i18n). ترجم باستخدام وكلاء الذكاء الاصطناعي وحسّن حجم الحزمة وتحسين محركات البحث والأداء."
 keywords:
   - التدويل
   - توثيق
@@ -58,16 +58,37 @@ history:
 
 <TOC/>
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
+بالمقارنة مع الحلول الرئيسية مثل `astro-i18n` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-باستخدام Intlayer، يمكنك:
+** تغطية استرو كاملة **
 
-- **إدارة الترجمات بسهولة**: باستخدام قواميس تعريفية على مستوى المكون.
-- **توطين الميتا داتا والمسارات والمحتوى ديناميكيًا**.
-- **ضمان دعم TypeScript**: من خلال أنواع مولدة تلقائيًا لتعزيز الإكمال التلقائي واكتشاف الأخطاء.
-- **الاستفادة من الميزات المتقدمة**: مثل الكشف الديناميكي عن اللغة وتبديل اللغة.
+تم تحسين Intlayer للعمل بشكل مثالي مع Astro من خلال تقديم **توجيه متعدد اللغات** و**خريطة الموقع** وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n).
+
+**حجم البندل**
+
+بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer **في تقليل أحجام البندل وصفحاتك بنسبة تصل إلى 50%**.
+
+** الصيانة **
+
+يؤدي تحديد نطاق محتوى تطبيقك ** إلى تسهيل الصيانة ** للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة Intlayer **بالكامل** لضمان دقة المحتوى الخاص بك.
+
+** وكيل الذكاء الاصطناعي **
+
+يؤدي تحديد موقع المحتوى المشترك ** إلى تقليل السياق المطلوب ** بواسطة نماذج اللغات الكبيرة (LLMs). يأتي Intlayer أيضًا مزودًا بمجموعة من الأدوات، مثل **CLI** لاختبار الترجمات المفقودة،**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**، **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** و**[مهارات الوكيل](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**، لجعل تجربة المطور (DX) أكثر سلاسة للذكاء الاصطناعي وكلاء.
+
+**الأتمتة**
+
+استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. يقدم Intlayer أيضًا **مترجمًا** لأتمتة استخراج المحتوى، بالإضافة إلى [منصة ويب](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) للمساعدة في **الترجمة في الخلفية**.
+
+**أداء**
+
+يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى حدوث مشكلات في الأداء والتفاعل. يعمل Intlayer على تحسين تحميل المحتوى الخاص بك في وقت الإنشاء.
+
+**التحجيم مع عدم وجود مطور**
+
+أكثر من مجرد حل i18n، يوفر Intlayer **[محررًا مرئيًا] مستضافًا ذاتيًا](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** و**[كامل CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
 
 ---
 
@@ -75,7 +96,9 @@ history:
 
 تحقق من [نموذج التطبيق](https://github.com/aymericzip/intlayer-astro-template) على GitHub.
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام مدير الحزم المفضل لديك:
 
@@ -118,7 +141,9 @@ bun x intlayer init
 - **@astrojs/solid-js**
   إضافة Astro الرسمية التي تتيح استخدام جزر (islands) مكونات Solid.
 
-### الخطوة 2: تهيئة مشروعك
+</Step>
+
+<Step number={2} title="تهيئة مشروعك">
 
 أنشئ ملف تكوين لتحديد لغات تطبيقك:
 
@@ -143,7 +168,9 @@ export default config;
 
 > من خلال ملف التكوين هذا، يمكنك تهيئة الروابط المترجمة، وإعادة توجيه الوسيط، وأسماء الكوكيز، وموقع وامتدادات تعريفات المحتوى، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق التهيئة](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
-### الخطوة 3: دمج Intlayer في تكوين Astro الخاص بك
+</Step>
+
+<Step number={3} title="دمج Intlayer في تكوين Astro الخاص بك">
 
 أضف إضافة `intlayer` وتكامل Solid إلى تكوين Astro الخاص بك.
 
@@ -164,7 +191,9 @@ export default defineConfig({
 
 > يتيح تكامل `solid()` استخدام جزر مكونات Solid عبر `client:only="solid-js"`.
 
-### الخطوة 4: تعريف المحتوى الخاص بك
+</Step>
+
+<Step number={4} title="تعريف المحتوى الخاص بك">
 
 أنشئ وأدِر تعريفات المحتوى لتخزين الترجمات:
 
@@ -190,7 +219,9 @@ export default appContent;
 
 > لمزيد من المعلومات، راجع [توثيق تعريف المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md).
 
-### الخطوة 5: استخدام المحتوى في Astro
+</Step>
+
+<Step number={5} title="استخدام المحتوى في Astro">
 
 يمكنك استهلاك القواميس مباشرة في ملفات `.astro` الخاصة بك باستخدام المساعدين الأساسيين المصدرين من `intlayer`. يجب عليك أيضًا إضافة ميتا داتا SEO (مثل hreflang وروابط canonical) لكل صفحة وتقديم جزيرة Solid للمحتوى التفاعلي في جانب العميل.
 
@@ -278,7 +309,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** تحصل جميع الروابط على بادئة لغة. يمكنك استخدام `[locale]` القياسي إذا كنت لا تحتاج إلى معالجة الجذر بشكل منفصل.
 > - **`search-param` أو `no-prefix`:** لا يلزم وجود أدلة لغة. يتم التعامل مع اللغة عبر معلمات الاستعلام أو ملفات تعريف الارتباط.
 
-### الخطوة 6: إنشاء مكون جزيرة Solid
+</Step>
+
+<Step number={6} title="إنشاء مكون جزيرة Solid">
 
 أنشئ مكون جزيرة يلف تطبيق Solid الخاص بك ويستلم اللغة المكتشفة من الخادم:
 
@@ -312,7 +345,9 @@ export function SolidIsland({ locale }: { locale: LocalesValues }) {
 
 > في Solid، تقوم `useIntlayer` بإرجاع وظيفة **accessor** (مثال: `content.). يجب عليك استدعاء هذه الوظيفة للوصول إلى المحتوى التفاعلي.
 
-### الخطوة 7: إضافة مبدل اللغة
+</Step>
+
+<Step number={7} title="إضافة مبدل اللغة">
 
 أنشئ مكون Solid `LocaleSwitcher` يقرأ اللغات المتاحة وينتقل إلى الرابط المترجم عندما يختار المستخدم لغة جديدة:
 
@@ -363,7 +398,9 @@ export function LocaleSwitcher() {
 
 > يجب رندر `LocaleSwitcher` داخل `IntlayerProvider` - استخدمه داخل مكون الجزيرة الخاص بك (كما هو موضح في الخطوة 6).
 
-### الخطوة 8: خريطة الموقع وRobots.txt
+</Step>
+
+<Step number={8} title="خريطة الموقع وRobots.txt">
 
 توفر Intlayer أدوات لإنشاء خريطة موقع مترجمة وملفات robots.txt ديناميكيًا.
 
@@ -423,55 +460,9 @@ export const GET: APIRoute = ({ site }) => {
 };
 ```
 
-### تكوين TypeScript
+</Step>
 
-تستخدم Intlayer تقنية توسيع الوحدات (module augmentation) للاستفادة من TypeScript، مما يجعل برمجتك أكثر قوة.
-
-![الإكمال التلقائي](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![خطأ في الترجمة](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
-
-تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع المولدة تلقائيًا.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... تكوين TypeScript الحالي الخاص بك
-  "include": [
-    // ... تكوين TypeScript الحالي الخاص بك
-    ".intlayer/**/*.ts", // تضمين الأنواع المولدة تلقائيًا
-  ],
-}
-```
-
-### تكوين Git
-
-يوصى بتجاهل الملفات التي تنشئها Intlayer. هذا يتجنب إضافتها إلى مستودع Git الخاص بك.
-
-للقيام بذلك، أضف التعليمات التالية إلى ملف `.gitignore` الخاص بك:
-
-```bash
-# تجاهل الملفات المولدة بواسطة Intlayer
-.intlayer
-```
-
-### إضافة VS Code
-
-لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.
-
-[التثبيت من VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-توفر هذه الإضافة:
-
-- **إكمال تلقائي** لمفاتيح الترجمة.
-- **اكتشاف الأخطاء في الوقت الفعلي** للترجمات المفقودة.
-- **معاينة مضمنة** للمحتوى المترجم.
-- **إجراءات سريعة** لإنشاء وتحديث الترجمات بسهولة.
-
-لمزيد من المعلومات حول استخدام الإضافة، راجع [توثيق إضافة VS Code](https://intlayer.org/doc/vs-code-extension).
-
----
-
-### (Optional) Step 15: Extract the content of your components
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -573,6 +564,58 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
+### تكوين TypeScript
+
+تستخدم Intlayer تقنية توسيع الوحدات (module augmentation) للاستفادة من TypeScript، مما يجعل برمجتك أكثر قوة.
+
+![الإكمال التلقائي](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![خطأ في الترجمة](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
+تأكد من أن تكوين TypeScript الخاص بك يتضمن الأنواع المولدة تلقائيًا.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... تكوين TypeScript الحالي الخاص بك
+  "include": [
+    // ... تكوين TypeScript الحالي الخاص بك
+    ".intlayer/**/*.ts", // تضمين الأنواع المولدة تلقائيًا
+  ],
+}
+```
+
+### تكوين Git
+
+يوصى بتجاهل الملفات التي تنشئها Intlayer. هذا يتجنب إضافتها إلى مستودع Git الخاص بك.
+
+للقيام بذلك، أضف التعليمات التالية إلى ملف `.gitignore` الخاص بك:
+
+```bash
+# تجاهل الملفات المولدة بواسطة Intlayer
+.intlayer
+```
+
+### إضافة VS Code
+
+لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.
+
+[التثبيت من VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+توفر هذه الإضافة:
+
+- **إكمال تلقائي** لمفاتيح الترجمة.
+- **اكتشاف الأخطاء في الوقت الفعلي** للترجمات المفقودة.
+- **معاينة مضمنة** للمحتوى المترجم.
+- **إجراءات سريعة** لإنشاء وتحديث الترجمات بسهولة.
+
+لمزيد من المعلومات حول استخدام الإضافة، راجع [توثيق إضافة VS Code](https://intlayer.org/doc/vs-code-extension).
+
+---
+
 ### تعمق أكثر
 
 إذا كنت تريد معرفة المزيد، يمكنك أيضًا تنفيذ [المحرر المرئي](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md) أو استخدام [نظام إدارة المحتوى (CMS)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md) لإخراج محتواك خارجيًا.