@intlayer/docs 8.11.1 → 8.11.3

package/docs/ar/intlayer_with_react_router_v7_fs_routes.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-04
-updatedAt: 2026-05-06
-title: React Router v7 i18n - كيفية ترجمة تطبيق React Router v7 في 2026
-description: تعلّم كيفية إضافة التدويل (i18n) إلى تطبيق React Router v7 الخاص بك باستخدام Intlayer. اتبع هذا الدليل الشامل لجعل تطبيقك متعدد اللغات مع توجيه يدعم اللغة المحلية.
+updatedAt: 2026-05-31
+title: React Router v7 i18n - الدليل الكامل لترجمة Complete
+description: أفضل حل لحجم البندل وتحسين محركات البحث والأداء والصيانة. اجعل React Router v7 تطبيق متعدد اللغات في 2026، ترجمة LLM، Agent Skills & MCP.
 keywords:
   - التدويل
   - التوثيق
@@ -45,23 +45,45 @@ history:
 
 <TOC/>
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هو مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم تعدد اللغات في تطبيقات الويب الحديثة.
+بالمقارنة مع الحلول الرئيسية مثل `react-i18next` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-مع Intlayer، يمكنك:
+** تغطية كاملة لجهاز التوجيه React **
 
-- **إدارة الترجمات بسهولة** باستخدام قواميس تعبيرية على مستوى المكونات.
-- **توطين البيانات الوصفية، والمسارات، والمحتوى بشكل ديناميكي**.
-- **ضمان دعم TypeScript** مع أنواع مولدة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
-- **الاستفادة من الميزات المتقدمة**، مثل الكشف الديناميكي عن اللغة المحلية والتبديل بينها.
-- **تمكين التوجيه المدرك للغة المحلية** باستخدام نظام التوجيه القائم على التكوين في React Router v7.
+تم تحسين Intlayer للعمل بشكل مثالي مع React Router من خلال تقديم **توجيه مدرك للإعدادات المحلية**، **برامج وسيطة للكشف عن الإعدادات المحلية**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (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)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
 
 ---
 
 ## دليل خطوة بخطوة لإعداد Intlayer في تطبيق React Router v7
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام مدير الحزم المفضل لديك:
 
@@ -99,7 +121,13 @@ bun x intlayer init
 - **vite-intlayer**
   تتضمن إضافة Vite لدمج Intlayer مع [مجمّع Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، بالإضافة إلى وسيط للكشف عن اللغة المفضلة للمستخدم، وإدارة الكوكيز، والتعامل مع إعادة توجيه URL.
 
-### الخطوة 2: تكوين مشروعك
+</Step>
+
+<Step number={2} title="تكوين مشروعك">
+
+</Step>
+
+</Steps>
 
 ## دليل خطوة بخطوة لإعداد Intlayer في تطبيق React Router v7 مع مسارات قائمة على نظام الملفات
 
@@ -152,7 +180,9 @@ export default config;
 
 > من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL محلية، إعادة توجيه الوسيط، أسماء ملفات تعريف الارتباط، موقع وامتداد إعلانات المحتوى الخاصة بك، تعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
-### الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
+<Steps>
+
+<Step number={3} title="دمج Intlayer في تكوين Vite الخاص بك">
 
 أضف مكون intlayer الإضافي إلى تكوينك:
 
@@ -168,7 +198,9 @@ export default defineConfig({
 
 > يتم استخدام مكون Vite الإضافي `intlayer()` لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يحدد متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر أسماء مستعارة لتحسين الأداء.
 
-### الخطوة 4: تكوين مسارات React Router v7
+</Step>
+
+<Step number={4} title="تكوين مسارات React Router v7">
 
 قم بإعداد تكوين التوجيه الخاص بك مع مسارات مدركة للغة:
 
@@ -184,7 +216,9 @@ export default [
 ] satisfies RouteConfig;
 ```
 
-### الخطوة 5: إنشاء مكونات التخطيط
+</Step>
+
+<Step number={5} title="إنشاء مكونات التخطيط">
 
 قم بإعداد التخطيط الجذري والتخطيطات الخاصة باللغة:
 
@@ -207,7 +241,9 @@ export default function RootLayout({ params }: Route.ComponentProps) {
 }
 ```
 
-### الخطوة 6: إعلان المحتوى الخاص بك
+</Step>
+
+<Step number={6} title="إعلان المحتوى الخاص بك">
 
 قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
 
@@ -247,7 +283,9 @@ export default pageContent;
 
 > لمزيد من التفاصيل، راجع [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md).
 
-### الخطوة 7: إنشاء مكونات تدرك اللغة
+</Step>
+
+<Step number={7} title="إنشاء مكونات تدرك اللغة">
 
 قم بإنشاء مكون `LocalizedLink` للتنقل المدرك للغة:
 
@@ -310,7 +348,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### الخطوة 8: استخدام Intlayer في صفحاتك
+</Step>
+
+<Step number={8} title="استخدام Intlayer في صفحاتك">
 
 قم بالوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيقك:
 
@@ -339,7 +379,9 @@ export default function Page() {
 
 > إذا كان تطبيقك موجودًا بالفعل، يمكنك استخدام [مترجم Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/compiler.md)، بالإضافة إلى [أمر الاستخراج](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/cli/extract.md)، لتحويل آلاف المكونات في ثانية واحدة.
 
-### الخطوة 9: إنشاء مكون لتبديل اللغة
+</Step>
+
+<Step number={9} title="إنشاء مكون لتبديل اللغة">
 
 قم بإنشاء مكون يسمح للمستخدمين بتغيير اللغات:
 
@@ -400,7 +442,9 @@ export const LocaleSwitcher: FC = () => {
 
 > لمعرفة المزيد عن الخطاف `useLocale`، راجع [التوثيق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md).
 
-### الخطوة 10: إضافة إدارة سمات HTML (اختياري)
+</Step>
+
+<Step number={10} title="إضافة إدارة سمات HTML">
 
 أنشئ خطافًا لإدارة سمات lang و dir في HTML:
 
@@ -438,7 +482,9 @@ export default function RootLayout() {
 }
 ```
 
-### (اختياري) خطوة 1 : استخراج محتوى مكوناتك
+</Step>
+
+<Step number={1} title="استخراج محتوى مكوناتك" isOptional={true}>
 
 إذا كان لديك قاعدة بيانات كود موجودة، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.
 
@@ -536,6 +582,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Configure TypeScript
 
 Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
@@ -602,7 +652,9 @@ To go further, you can implement the [visual editor](https://github.com/aymericz
 
 This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
 
-### الخطوة 11: إضافة الوسيط (اختياري)
+<Steps>
+
+<Step number={11} title="إضافة الوسيط">
 
 يمكنك أيضًا استخدام `intlayerProxy` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي بالكشف تلقائيًا عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، فسيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
 
@@ -625,6 +677,10 @@ export default defineConfig({
 
 ---
 
+</Step>
+
+</Steps>
+
 ## تكوين TypeScript
 
 يستخدم Intlayer توسيع الوحدات (module augmentation) للاستفادة من TypeScript وجعل قاعدة الشيفرة الخاصة بك أقوى.

package/docs/ar/intlayer_with_storybook.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
+updatedAt: 2026-05-31
 title: كيفية إعداد Intlayer مع Storybook
 description: تعرف على كيفية جعل نظام التصميم الخاص بك متعدد اللغات باستخدام Intlayer مع Storybook - قم بتجميع إعلانات المحتوى، وإضافة مبدل اللغة، ومعاينة مكوناتك بأي لغة.
 keywords:
@@ -31,16 +31,37 @@ history:
 
 <TOC/>
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هو مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط الدعم متعدد اللغات في تطبيقات الويب الحديثة. تعمل على **مستوى المكون** - حيث يمتلك كل مكون إعلانات المحتوى الخاصة به - مما يحافظ على الترجمات في نفس مكان الكود الذي يستخدمها.
+بالمقارنة مع الحلول الرئيسية مثل `storybook-react-i18next` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-باستخدام Intlayer يمكنك:
+** تغطية كاملة للقصص المصورة **
 
-- **إدارة الترجمات بشكل تصريحي** مع ملفات المحتوى لكل مكون.
-- **الحصول على دعم كامل لـ TypeScript** من خلال الأنواع التي يتم إنشاؤها تلقائيًا والإكمال التلقائي في بيئة التطوير (IDE).
-- **تبديل اللغات في وقت التشغيل** دون إعادة تحميل الصفحة.
-- **الترجمة تلقائيًا** من خلال تكاملات مزودي الذكاء الاصطناعي المدمجة.
+تم تحسين Intlayer للعمل بشكل مثالي مع Storybook من خلال تقديم **أدوات تزيين القصص متعددة اللغات**، و**تبديل الإعدادات المحلية**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (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)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
 
 ---
 
@@ -59,7 +80,9 @@ Storybook هو الأداة القياسية في الصناعة لتطوير و
 <Tabs>
 <Tab value="Vite Setup">
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +112,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### الخطوة 2: إنشاء تكوين Intlayer
+</Step>
+
+<Step number={2} title="إنشاء تكوين Intlayer">
 
 أنشئ ملف `intlayer.config.ts` في جذر مشروعك (أو داخل حزمة نظام التصميم الخاص بك):
 
@@ -118,7 +143,9 @@ export default config;
 
 ---
 
-### الخطوة 3: إضافة إضافة Vite إلى Storybook
+</Step>
+
+<Step number={3} title="إضافة إضافة Vite إلى Storybook">
 
 تتيح لك وظيفة `viteFinal` في Storybook توسيع تكوين Vite الداخلي. قم باستيراد وإضافة إضافة `intlayer()` هناك:
 
@@ -159,7 +186,9 @@ export default config;
 
 ---
 
-### الخطوة 4: إضافة `IntlayerProvider` ومبدل اللغة في شريط الأدوات
+</Step>
+
+<Step number={4} title="إضافة `IntlayerProvider` ومبدل اللغة في شريط الأدوات">
 
 ملف `preview` في Storybook هو المكان المناسب لتغليف كل قصة (story) بـ `IntlayerProvider` وعرض مبدل اللغة في شريط الأدوات:
 
@@ -216,7 +245,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### الخطوة 1: تثبيت التبعيات
+</Step>
+
+<Step number={1} title="تثبيت التبعيات">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +271,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### الخطوة 2: إنشاء تكوين Intlayer
+</Step>
+
+<Step number={2} title="إنشاء تكوين Intlayer">
 
 أنشئ ملف `intlayer.config.ts` في جذر مشروعك:
 
@@ -262,7 +295,9 @@ export default config;
 
 ---
 
-### الخطوة 3: تكوين Webpack لـ Storybook
+</Step>
+
+<Step number={3} title="تكوين Webpack لـ Storybook">
 
 بالنسبة لإعدادات Storybook القائمة على Webpack (مثل `@storybook/react-webpack5`)، قم بتوسيع تكوين webpack عبر `webpackFinal` لإضافة أسماء Intlayer البديلة والـ loader:
 
@@ -289,7 +324,9 @@ export default config;
 
 ---
 
-### الخطوة 4: إضافة `IntlayerProvider` ومبدل اللغة في شريط الأدوات
+</Step>
+
+<Step number={4} title="إضافة `IntlayerProvider` ومبدل اللغة في شريط الأدوات">
 
 كما هو الحال في إعداد Vite - أضف الـ decorator ونوع اللغة العالمي في `.storybook/preview.tsx`:
 
@@ -335,6 +372,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## إعلان المحتوى
 
 أنشئ ملف `*.content.ts` بجانب كل مكون. سيتعرف عليه Intlayer تلقائيًا أثناء التجميع.

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>