@intlayer/docs 8.11.2 → 8.11.3

package/docs/ar/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - كيفية ترجمة تطبيق SvelteKit في 2026
-description: اكتشف كيفية جعل موقع SvelteKit الخاص بك متعدد اللغات. اتبع الوثائق لتدويل (i18n) وترجمته باستخدام العرض من جانب الخادم (SSR).
+updatedAt: 2026-05-31
+title: SvelteKit i18n - الدليل الكامل لترجمة SvelteKit
+description: أفضل حل لحجم البندل وتحسين محركات البحث والأداء والصيانة. اجعل SvelteKit موقع ويب متعدد اللغات في 2026، ترجمة LLM، Agent Skills & MCP.
 keywords:
   - التدويل
   - الوثائق
@@ -59,16 +59,37 @@ history:
 
 <TOC/>
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة. تعمل بسلاسة مع قدرات العرض من جانب الخادم (SSR) في **SvelteKit**.
+بالمقارنة مع الحلول الرئيسية مثل `svelte-i18n` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-مع Intlayer، يمكنك:
+** تغطية SvelteKit الكاملة **
 
-- **إدارة الترجمات بسهولة** باستخدام قواميس إعلانية على مستوى المكون.
-- **توطين البيانات الوصفية، والمسارات، والمحتوى بشكل ديناميكي**.
-- **ضمان دعم TypeScript** بأنواع مولدة تلقائيًا.
-- **الاستفادة من SSR في SvelteKit** لتدويل صديق لمحركات البحث (SEO).
+تم تحسين Intlayer للعمل بشكل مثالي مع SvelteKit من خلال تقديم **توجيه متعدد اللغات**، **دعم SSR**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (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)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
 
 ---
 
@@ -116,7 +137,9 @@ history:
 └── vite.config.ts
 ```
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام npm:
 
@@ -148,7 +171,9 @@ bun x intlayer init
 - **svelte-intlayer**: يوفر موفري السياق والمخازن لـ Svelte/SvelteKit.
 - **vite-intlayer**: إضافة Vite لدمج إعلانات المحتوى مع عملية البناء.
 
-### الخطوة 2: تكوين مشروعك
+</Step>
+
+<Step number={2} title="تكوين مشروعك">
 
 قم بإنشاء ملف تكوين في جذر مشروعك:
 
@@ -165,7 +190,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
+</Step>
+
+<Step number={3} title="دمج Intlayer في تكوين Vite الخاص بك">
 
 قم بتحديث ملف `vite.config.ts` الخاص بك ليشمل إضافة Intlayer. تتولى هذه الإضافة تحويل ملفات المحتوى الخاصة بك.
 
@@ -179,7 +206,9 @@ export default defineConfig({
 });
 ```
 
-### الخطوة 4: إعلان المحتوى الخاص بك
+</Step>
+
+<Step number={4} title="إعلان المحتوى الخاص بك">
 
 قم بإنشاء ملفات إعلان المحتوى في أي مكان داخل مجلد `src` الخاص بك (مثلًا، `src/lib/content` أو بجانب مكوناتك). تقوم هذه الملفات بتعريف المحتوى القابل للترجمة لتطبيقك باستخدام دالة `t()` لكل لغة.
 
@@ -200,13 +229,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### الخطوة 5: استخدام Intlayer في مكوناتك
+</Step>
+
+<Step number={5} title="استخدام Intlayer في مكوناتك">
 
 الآن يمكنك استخدام دالة `useIntlayer` في أي مكون Svelte. فهي تُرجع مخزنًا تفاعليًا يتم تحديثه تلقائيًا عند تغيير اللغة. ستلتزم الدالة تلقائيًا باللغة الحالية (سواء أثناء SSR أو التنقل على جانب العميل).
 
 > **ملاحظة:** تُرجع `useIntlayer` مخزن Svelte، لذا تحتاج إلى استخدام بادئة `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: كيفية ترجمة تطبيق SvelteKit الخاص بك – دليل i18n 2026
 > description: اكتشف كيفية جعل موقع SvelteKit الخاص بك متعدد اللغات. اتبع الوثائق لتدويل (i18n) وترجمته باستخدام العرض من جانب الخادم (SSR).
 > keywords:
@@ -231,6 +262,10 @@ export default heroContent;
 
 # ترجمة موقع SvelteKit الخاص بك باستخدام Intlayer | التدويل (i18n)
 
+</Step>
+
+</Steps>
+
 ## جدول المحتويات
 
 <TOC/>
@@ -292,7 +327,9 @@ export default heroContent;
 └── vite.config.ts
 ```
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام npm:
 
@@ -324,7 +361,9 @@ bun x intlayer init
 - **svelte-intlayer**: يوفر موفري السياق والمخازن لـ Svelte/SvelteKit.
 - **vite-intlayer**: إضافة Vite لدمج إعلانات المحتوى مع عملية البناء.
 
-### الخطوة 2: تكوين مشروعك
+</Step>
+
+<Step number={2} title="تكوين مشروعك">
 
 قم بإنشاء ملف تكوين في جذر مشروعك:
 
@@ -341,7 +380,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
+</Step>
+
+<Step number={3} title="دمج Intlayer في تكوين Vite الخاص بك">
 
 قم بتحديث ملف `vite.config.ts` الخاص بك ليشمل إضافة Intlayer. تتولى هذه الإضافة تحويل ملفات المحتوى الخاصة بك.
 
@@ -355,7 +396,9 @@ export default defineConfig({
 });
 ```
 
-### الخطوة 4: إعلان المحتوى الخاص بك
+</Step>
+
+<Step number={4} title="إعلان المحتوى الخاص بك">
 
 قم بإنشاء ملفات إعلان المحتوى في أي مكان داخل مجلد `src` الخاص بك (مثلًا، `src/lib/content` أو بجانب مكوناتك). تقوم هذه الملفات بتعريف المحتوى القابل للترجمة لتطبيقك باستخدام دالة `t()` لكل لغة.
 
@@ -376,7 +419,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### الخطوة 5: استخدام Intlayer في مكوناتك
+</Step>
+
+<Step number={5} title="استخدام Intlayer في مكوناتك">
 
 للوصول إلى قيمته التفاعلية (مثلًا، `$content.title`).
 
@@ -398,7 +443,9 @@ export default heroContent;
 <div aria-label={String($content.title)}></div>
 ```
 
-### (اختياري) الخطوة 6: إعداد التوجيه
+</Step>
+
+<Step number={6} title="إعداد التوجيه" isOptional={true}>
 
 توضح الخطوات التالية كيفية إعداد التوجيه بناءً على اللغة في SvelteKit. يتيح هذا لعناوين URL الخاصة بك أن تتضمن بادئة اللغة (مثل `/en/about`، `/fr/about`) لتحسين تحسين محركات البحث وتجربة المستخدم.
 
@@ -423,7 +470,9 @@ export default heroContent;
         └── +layout.svelte         # التخطيط الجذري للخطوط والأنماط العامة
 ```
 
-### الخطوة 7: التعامل مع اكتشاف اللغة على جانب الخادم (Hooks)
+</Step>
+
+<Step number={7} title="التعامل مع اكتشاف اللغة على جانب الخادم">
 
 في SvelteKit، يحتاج الخادم إلى معرفة لغة المستخدم لعرض المحتوى الصحيح أثناء العرض من جانب الخادم (SSR). نستخدم `hooks.server.ts` لاكتشاف اللغة من عنوان URL أو ملفات تعريف الارتباط.
 
@@ -635,7 +684,9 @@ export const prerender = true;
 </style>
 ```
 
-### (اختياري) الخطوة 8: الروابط الدولية
+</Step>
+
+<Step number={8} title="الروابط الدولية" isOptional={true}>
 
 من أجل تحسين محركات البحث (SEO)، يُنصح بإضافة بادئة اللغة إلى مساراتك (على سبيل المثال، `/en/about`، `/fr/about`). يقوم هذا المكون تلقائيًا بإضافة بادئة اللغة الحالية لأي رابط.
 
@@ -668,7 +719,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // ينتقل إلى /en/about أو /fr/about حسب اللغة
 ```
 
-### (اختياري) الخطوة 9: مبدل اللغة
+</Step>
+
+<Step number={9} title="مبدل اللغة" isOptional={true}>
 
 للسماح للمستخدمين بتغيير اللغة، قم بتحديث عنوان URL.
 
@@ -709,7 +762,9 @@ goto(localizedPath); // ينتقل إلى /en/about أو /fr/about حسب الل
 </style>
 ```
 
-### (اختياري) الخطوة 10: إضافة وكيل خلفي (backend proxy)
+</Step>
+
+<Step number={10} title="إضافة وكيل خلفي" isOptional={true}>
 
 لإضافة وكيل خلفي إلى تطبيق SvelteKit الخاص بك، يمكنك استخدام دالة `intlayerProxy` المقدمة من إضافة `vite-intlayer`. ستقوم هذه الإضافة بالكشف تلقائيًا عن أفضل لغة للمستخدم بناءً على عنوان URL، والكوكيز، وتفضيلات لغة المتصفح.
 
@@ -728,7 +783,9 @@ export default defineConfig({
 });
 ```
 
-### (اختياري) الخطوة 11: إعداد محرر / نظام إدارة محتوى intlayer
+</Step>
+
+<Step number={11} title="إعداد محرر / نظام إدارة محتوى intlayer" isOptional={true}>
 
 لإعداد محرر intlayer، يجب عليك اتباع [توثيق محرر intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md).
 
@@ -762,7 +819,9 @@ export default defineConfig({
 .intlayer
 ```
 
-### (اختياري) خطوة 1 : استخراج محتوى مكوناتك
+</Step>
+
+<Step number={1} title="استخراج محتوى مكوناتك" isOptional={true}>
 
 إذا كان لديك قاعدة بيانات كود موجودة، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.
 
@@ -881,3 +940,7 @@ bun run build # Or bun run dev
 
 - **المحرر المرئي**: دمج [المحرر المرئي لـ Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_visual_editor.md) لتحرير الترجمات مباشرة من واجهة المستخدم.
 - **نظام إدارة المحتوى (CMS)**: قم بفصل إدارة المحتوى الخاصة بك باستخدام [نظام إدارة المحتوى Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/ar/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - كيفية ترجمة تطبيق Tanstack Start باستخدام Solid.js في عام 2026
-description: تعلم كيفية إضافة التدويل (i18n) إلى تطبيق Tanstack Start الخاص بك باستخدام Intlayer و Solid.js. اتبع هذا الدليل الشامل لجعل تطبيقك متعدد اللغات مع توجيه مدرك للغة.
+updatedAt: 2026-05-31
+title: i18n Tanstack Start - الدليل الكامل لترجمة TanStack Start
+description: أفضل حل لحجم البندل وتحسين محركات البحث والأداء والصيانة. اجعل TanStack Start and Solid تطبيق متعدد اللغات في 2026، ترجمة LLM، Agent Skills & MCP.
 keywords:
   - التدويل
   - توثيق
@@ -37,17 +37,37 @@ history:
 
 يوضح هذا الدليل كيفية دمج **Intlayer** من أجل تدويل سلس في مشاريع Tanstack Start مع Solid.js، وتوجيه مدرك للغة، ودعم TypeScript، وممارسات التطوير الحديثة.
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هو مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط الدعم متعدد اللغات في تطبيقات الويب الحديثة.
+بالمقارنة مع الحلول الرئيسية مثل `react-i18next` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-باستخدام Intlayer، يمكنك:
+** تغطية كاملة لـ TanStack Start **
 
-- **إدارة الترجمات بسهولة** باستخدام قواميس تعريفية على مستوى المكون.
-- **توطين العناوين (metadata) والمسارات والمحتوى ديناميكيًا**.
-- **ضمان دعم TypeScript** من خلال الأنواع المنشأة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
-- **الاستفادة من الميزات المتقدمة**، مثل الاكتشاف والتبديل الديناميكي للغة.
-- **تفعيل التوجيه المدرك للغة** باستخدام نظام التوجيه القائم على الملفات في Tanstack Start.
+تم تحسين Intlayer للعمل بشكل مثالي مع TanStack Start وSolid من خلال تقديم **توجيه متعدد اللغات**، و**sitemap**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (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)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
 
 ---
 
@@ -85,11 +105,15 @@ history:
 
 شاهد [قالب التطبيق](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) على GitHub.
 
-### الخطوة 1: إنشاء المشروع
+<Steps>
+
+<Step number={1} title="إنشاء المشروع">
 
 ابدأ بإنشاء مشروع TanStack Start جديد باتباع دليل [بدء مشروع جديد](https://tanstack.com/start/latest/docs/framework/solid/quick-start) على موقع TanStack Start.
 
-### الخطوة 2: تثبيت حزم Intlayer
+</Step>
+
+<Step number={2} title="تثبيت حزم Intlayer">
 
 قم بتثبيت الحزم اللازمة باستخدام مدير الحزم المفضل لديك:
 
@@ -127,7 +151,9 @@ bun x intlayer init
 - **vite-intlayer**
   تتضمن إضافة Vite لدمج Intlayer مع [أداة بناء Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، كذالك البرمجيات الوسيطة (middleware) لاكتشاف اللغة المفضلة للمستخدم، وإدارة ملفات تعريف الارتباط (cookies)، والتعامل مع إعادة توجيه الروابط.
 
-### الخطوة 3: إعداد مشروعك
+</Step>
+
+<Step number={3} title="إعداد مشروعك">
 
 قم بإنشاء ملف إعدادات لتكوين اللغات في تطبيقك:
 
@@ -148,7 +174,9 @@ export default config;
 
 > من خلال ملف الإعدادات هذا، يمكنك تكوين الروابط المترجمة، إعادة توجيه البرمجيات الوسيطة، أسماء ملفات تعريف الارتباط، وموقع وامتداد إعلانات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق الإعدادات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
-### الخطوة 4: دمج Intlayer في إعدادات Vite الخاصة بك
+</Step>
+
+<Step number={4} title="دمج Intlayer في إعدادات Vite الخاصة بك">
 
 أضف إضافة intlayer إلى إعداداتك:
 
@@ -176,7 +204,9 @@ export default defineConfig({
 
 > تُستخدم إضافة `intlayer()` لـ Vite لدمج Intlayer مع Vite. تضمن بناء ملفات إعلان المحتوى ومراقبتها في وضع التطوير. وتعرّف متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، توفر أسماء بديلة (aliases) لتحسين الأداء.
 
-### الخطوة 5: إنشاء التخطيط الجذري (Root Layout)
+</Step>
+
+<Step number={5} title="إنشاء التخطيط الجذري">
 
 قم بتكوين التخطيط الجذري الخاص بك لدعم التدويل باستخدام `useParams` لاكتشاف اللغة الحالية وتعيين سمات `lang` و `dir` على وسم `html`.
 
@@ -217,7 +247,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### الخطوة 6: إنشاء تخطيط اللغة (اختياري)
+</Step>
+
+<Step number={6} title="إنشاء تخطيط اللغة">
 
 أنشئ تخطيطًا يتعامل مع بادئة اللغة ويقوم بالتحقق من صحتها. سيضمن هذا التخطيط معالجة اللغات الصالحة فقط.
 
@@ -252,7 +284,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > لوضع `'prefix-all'`، قد تفضل تبديل الجزء إلى `$locale`.
 > لوضع `'no-prefix'` أو `'search-params'`، يمكنك إزالة الجزء تمامًا.
 
-### الخطوة 7: إعلان المحتوى الخاص بك
+</Step>
+
+<Step number={7} title="إعلان المحتوى الخاص بك">
 
 قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
 
@@ -298,7 +332,9 @@ export default appContent;
 
 > لمزيد من التفاصيل، راجع [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md).
 
-### الخطوة 8: استخدام المكونات والخطافات المدركة للغة
+</Step>
+
+<Step number={8} title="استخدام المكونات والخطافات المدركة للغة">
 
 قم بإنشاء مكون `LocalizedLink` للتنقل المدرك للغة:
 
@@ -377,7 +413,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### الخطوة 9: استخدام Intlayer في صفحاتك
+</Step>
+
+<Step number={9} title="استخدام Intlayer في صفحاتك">
 
 قم بالوصول إلى قواميس المحتوى الخاصة بك عبر تطبيقك:
 
@@ -420,7 +458,9 @@ function RouteComponent() {
 >
 > لمعرفة المزيد حول خطاف `useIntlayer` ، راجع [التوثيق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/solid-intlayer/useIntlayer.md).
 
-### الخطوة 10: إنشاء مكون لتبديل اللغة
+</Step>
+
+<Step number={10} title="إنشاء مكون لتبديل اللغة">
 
 أنشئ مكونًا للسماح للمستخدمين بتغيير اللغات:
 
@@ -464,7 +504,9 @@ export default LocaleSwitcher;
 >
 > لمعرفة المزيد حول خطاف `useLocale` ، راجع [التوثيق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/solid-intlayer/useLocale.md).
 
-### الخطوة 11: إدارة سمات HTML
+</Step>
+
+<Step number={11} title="إدارة سمات HTML">
 
 كما رأيت في الخطوة 5، يمكنك إدارة سمات `lang` و `dir` لوسم `html` باستخدام `useParams` في المكون الجذري الخاص بك. يضمن ذلك تعيين السمات الصحيحة على كل من الخادم والعميل.
 
@@ -483,7 +525,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### الخطوة 12: إضافة برمجية وسيطة (اختياري)
+</Step>
+
+<Step number={12} title="إضافة برمجية وسيطة">
 
 يمكنك أيضًا استخدام `intlayerProxy` لإضافة توجيه من جانب الخادم إلى تطبيقك. ستكتشف هذه الإضافة تلقائيًا اللغة الحالية بناءً على الرابط وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فستحدد الإضافة اللغة الأكثر ملاءمة بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم اكتشاف لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
 
@@ -514,7 +558,9 @@ export default defineConfig({
 
 ---
 
-### الخطوة 13: تدويل العناوين (metadata) الخاصة بك (اختياري)
+</Step>
+
+<Step number={13} title="تدويل العناوين (metadata) الخاصة بك">
 
 يمكنك أيضًا استخدام وظيفة `getIntlayer` للوصول إلى قواميس المحتوى الخاصة بك داخل محمل `head` للعناوين المدركة للغة:
 
@@ -561,7 +607,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### الخطوة 14: الحصول على اللغة في إجراءات الخادم الخاص بك (اختياري)
+</Step>
+
+<Step number={14} title="الحصول على اللغة في إجراءات الخادم الخاص بك">
 
 قد ترغب في الوصول إلى اللغة الحالية من داخل إجراءات الخادم (server actions) أو نقاط نهاية API.
 يمكنك القيام بذلك باستخدام مساعد `getLocale` من `intlayer`.
@@ -598,7 +646,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### الخطوة 15: إدارة الصفحات غير الموجودة (404) (اختياري)
+</Step>
+
+<Step number={15} title="إدارة الصفحات غير الموجودة (404)" isOptional={true}>
 
 عندما يزور المستخدم صفحة غير موجودة ، يمكنك عرض صفحة 404 مخصصة ويمكن أن تؤثر بادئة اللغة على كيفية تشغيل الصفحة غير الموجودة.
 
@@ -672,7 +722,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (اختياري) الخطوة 16: استخراج المحتوى من مكوناتك
+</Step>
+
+<Step number={16} title="استخراج المحتوى من مكوناتك" isOptional={true}>
 
 إذا كان لديك قاعدة أكواد حالية ، فقد يستغرق تحويل آلاف الملفات وقتًا طويلاً.
 
@@ -785,7 +837,9 @@ bun run build # أو bun run dev
 
 ---
 
-### الخطوة 17: إعداد TypeScript (اختياري)
+</Step>
+
+<Step number={17} title="إعداد TypeScript">
 
 يستخدم Intlayer تقوية الوحدات (module augmentation) للاستفادة من ميزات TypeScript وجعل قاعدة الأكواد الخاصة بك أكثر قوة.
 
@@ -816,6 +870,10 @@ bun run build # أو bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## إضافة VS Code
 
 لتحسين تجربة التطوير الخاصة بك مع Intlayer ، يمكنك تثبيت **إضافة Intlayer VS Code الرسمية**.