@intlayer/docs 8.11.2 → 8.11.3

package/docs/ar/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - كيفية ترجمة تطبيق Tanstack Start في 2026
-description: تعرف على كيفية إضافة التدويل (i18n) إلى تطبيق TanStack Start الخاص بك باستخدام Intlayer. اتبع هذا الدليل الشامل لجعل تطبيقك متعدد اللغات مع توجيه مدرك للغة.
+updatedAt: 2026-05-31
+title: Tanstack Start i18n - الدليل الكامل لترجمة TanStack Start
+description: أفضل حل لحجم البندل وتحسين محركات البحث والأداء والصيانة. اجعل TanStack Start تطبيق متعدد اللغات في 2026، ترجمة LLM، Agent Skills & MCP.
 keywords:
   - التدويل
   - التوثيق
@@ -54,17 +54,37 @@ history:
 
 يوضح هذا الدليل كيفية دمج **Intlayer** لتحقيق تدويل سلس في مشاريع TanStack Start مع توجيه مدرك للغة، ودعم TypeScript، وممارسات التطوير الحديثة.
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هو مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
+بالمقارنة مع الحلول الرئيسية مثل `react-i18next` أو `use-intl` أو `paraglide`، فإن Intlayer هو الحل الذي يأتي مع تحسينات متكاملة مثل:
 
-مع Intlayer، يمكنك:
+** تغطية كاملة لـ TanStack Start **
 
-- **إدارة الترجمات بسهولة** باستخدام قواميس إعلانية على مستوى المكونات.
-- **توطين البيانات الوصفية والمسارات والمحتوى ديناميكيًا**.
-- **ضمان دعم TypeScript** مع أنواع مولدة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
-- **الاستفادة من الميزات المتقدمة**، مثل الكشف الديناميكي عن اللغة والتبديل بينها.
-- **تمكين التوجيه المدرك للغة** باستخدام نظام التوجيه القائم على الملفات في TanStack Start.
+تم تحسين Intlayer بالكامل لـ TanStack Start، مما يوفر **توجيه متعدد اللغات**، **إدارة ملفات تعريف الارتباط**، **إنشاء خريطة الموقع**، **تحميل المحتوى الديناميكي**، وجميع الميزات اللازمة لتوسيع نطاق جهود التدويل (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)** لمساعدتك في إدارة المحتوى متعدد اللغات في **الوقت الفعلي**، مما يجعل التعاون مع المترجمين ومؤلفي النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بعد.
 
 ---
 
@@ -102,11 +122,15 @@ history:
 
 انظر [قالب التطبيق](https://github.com/aymericzip/intlayer-tanstack-start-template) على GitHub.
 
-### الخطوة 1: إنشاء المشروع
+<Steps>
+
+<Step number={1} title="إنشاء المشروع">
 
 ابدأ بإنشاء مشروع TanStack Start جديد باتباع دليل [بدء مشروع جديد](https://tanstack.com/start/latest/docs/framework/react/quick-start) على موقع TanStack Start.
 
-### الخطوة 2: تثبيت حزم Intlayer
+</Step>
+
+<Step number={2} title="تثبيت حزم Intlayer">
 
 قم بتثبيت الحزم اللازمة باستخدام مدير الحزم المفضل لديك:
 
@@ -144,7 +168,9 @@ bun x intlayer init
 - **vite-intlayer**
   تتضمن إضافة Vite لدمج Intlayer مع [مجمّع Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، بالإضافة إلى وسيط لاكتشاف اللغة المفضلة للمستخدم، وإدارة ملفات تعريف الارتباط، والتعامل مع إعادة توجيه URL.
 
-### الخطوة 3: تكوين مشروعك
+</Step>
+
+<Step number={3} title="تكوين مشروعك">
 
 أنشئ ملف تكوين لتكوين لغات تطبيقك:
 
@@ -165,7 +191,9 @@ export default config;
 
 > من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL المترجمة، وإعادة توجيه الوسيط، وأسماء ملفات تعريف الارتباط، وموقع وامتداد إعلانات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
-### الخطوة 4: دمج Intlayer في تكوين Vite الخاص بك
+</Step>
+
+<Step number={4} title="دمج Intlayer في تكوين Vite الخاص بك">
 
 أضف إضافة intlayer إلى تكوينك:
 
@@ -195,7 +223,9 @@ export default config;
 
 > تُستخدم إضافة `intlayer()` لـ Vite لدمج Intlayer مع Vite. تضمن بناء ملفات إعلان المحتوى ومراقبتها في وضع التطوير. كما تُعرف متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، توفر أسماء مستعارة لتحسين الأداء.
 
-### الخطوة 5: إنشاء التخطيط الجذري
+</Step>
+
+<Step number={5} title="إنشاء التخطيط الجذري">
 
 قم بتكوين التخطيط الجذري الخاص بك لدعم التدويل باستخدام `useParams` للكشف عن اللغة الحالية وتعيين سمات `lang` و `dir` على علامة `html`.
 
@@ -255,7 +285,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### الخطوة 6: إنشاء تخطيط اللغة
+</Step>
+
+<Step number={6} title="إنشاء تخطيط اللغة">
 
 أنشئ تخطيطًا يتعامل مع بادئة اللغة ويقوم بالتحقق من الصحة.
 
@@ -287,7 +319,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > بالنسبة لوضع `'prefix-all'`، قد تفضل تبديل الجزء إلى `$locale` بدلاً من ذلك.
 > بالنسبة لوضع `'no-prefix'` أو `'search-params'`، يمكنك إزالة الجزء تمامًا.
 
-### الخطوة 7: إعلان المحتوى الخاص بك
+</Step>
+
+<Step number={7} title="إعلان المحتوى الخاص بك">
 
 قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
 
@@ -333,7 +367,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` للتنقل المدرك للغة:
 
@@ -437,7 +473,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### الخطوة 9: استخدام Intlayer في صفحاتك
+</Step>
+
+<Step number={9} title="استخدام Intlayer في صفحاتك">
 
 قم بالوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيقك:
 
@@ -485,7 +523,9 @@ function RouteComponent() {
 
 > لمعرفة المزيد حول خطاف `useIntlayer` ، راجع [التوثيق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useIntlayer.md).
 
-### الخطوة 10: إنشاء مكون لتبديل اللغة
+</Step>
+
+<Step number={10} title="إنشاء مكون لتبديل اللغة">
 
 أنشئ مكونًا للسماح للمستخدمين بتغيير اللغات:
 
@@ -546,7 +586,9 @@ export const LocaleSwitcher: FC = () => {
 
 > لمعرفة المزيد حول خطاف `useLocale` ، راجع [التوثيق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md).
 
-### الخطوة 11: إدارة سمات HTML
+</Step>
+
+<Step number={11} title="إدارة سمات HTML">
 
 كما رأينا في الخطوة 5، يمكنك إدارة سمات `lang` و `dir` لعلامة `html` باستخدام `useParams` في مكونك الجذري. يضمن هذا تعيين السمات الصحيحة على الخادم والعميل.
 
@@ -565,7 +607,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### الخطوة 12: إضافة وسيط (اختياري)
+</Step>
+
+<Step number={12} title="إضافة وسيط">
 
 يمكنك أيضًا استخدام `intlayerProxy` لإضافة توجيه من جانب الخادم إلى تطبيقك. ستقوم هذه الإضافة تلقائيًا باكتشاف اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف ارتباط اللغة المناسب. إذا لم يتم تحديد لغة، فستحدد الإضافة اللغة الأكثر ملاءمة بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم اكتشاف لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
 
@@ -596,7 +640,9 @@ export default defineConfig({
 
 ---
 
-### الخطوة 13: تدويل البيانات الوصفية الخاصة بك (اختياري)
+</Step>
+
+<Step number={13} title="تدويل البيانات الوصفية الخاصة بك">
 
 يمكنك أيضًا استخدام خطاف `getIntlayer` للوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيقك:
 
@@ -643,7 +689,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### الخطوة 14: جلب اللغة في إجراءات الخادم الخاصة بك (اختياري)
+</Step>
+
+<Step number={14} title="جلب اللغة في إجراءات الخادم الخاصة بك">
 
 قد ترغب في الوصول إلى اللغة الحالية من داخل إجراءات الخادم أو نقاط نهاية API الخاصة بك.
 يمكنك القيام بذلك باستخدام مساعد `getLocale` من `intlayer`.
@@ -680,7 +728,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### الخطوة 15: إدارة الصفحات غير الموجودة (اختياري)
+</Step>
+
+<Step number={15} title="إدارة الصفحات غير الموجودة">
 
 عندما يزور المستخدم صفحة غير موجودة، يمكنك عرض صفحة مخصصة "غير موجودة" وقد تؤثر بادئة اللغة على الطريقة التي يتم بها تشغيل صفحة "غير موجودة".
 
@@ -756,7 +806,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### الخطوة 16: تكوين TypeScript (اختياري)
+</Step>
+
+<Step number={16} title="تكوين TypeScript">
 
 يستخدم Intlayer توسيع الوحدات (module augmentation) للحصول على فوائد TypeScript وجعل قاعدة الكود الخاصة بك أقوى.
 
@@ -785,7 +837,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 .intlayer
 ```
 
-### (اختياري) خطوة 1 : استخراج محتوى مكوناتك
+</Step>
+
+<Step number={1} title="استخراج محتوى مكوناتك" isOptional={true}>
 
 إذا كان لديك قاعدة بيانات كود موجودة، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.
 
@@ -900,6 +954,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## إضافة VS Code
 
 لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer VS Code الرسمية**.

package/docs/ar/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: Vanilla JS i18n - كيفية ترجمة تطبيق Vanilla JS في عام 2026
-description: اكتشف كيفية جعل موقع Vanilla JS الخاص بك متعدد اللغات. اتبع الوثائق لتدويله (i18n) وترجمته.
+updatedAt: 2026-05-31
+title: Vanilla JS i18n - الدليل الكامل لترجمة Vanilla JS
+description: أفضل حل لحجم البندل وتحسين محركات البحث والأداء والصيانة. اجعل Vanilla JS موقع ويب متعدد اللغات في 2026، ترجمة LLM، Agent Skills & MCP.
 keywords:
   - تدويل
   - وثائق
@@ -57,28 +57,45 @@ history:
 
 <TOC/>
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط الدعم متعدد اللغات في تطبيقات الويب الحديثة.
+بالمقارنة مع الحلول الرئيسية مثل `i18next` أو `i18n.js`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-باستخدام Intlayer، يمكنك:
+** تغطية كاملة لـ Vanilla JS **
 
-- **إدارة الترجمات بسهولة** باستخدام قواميس تصريحية على مستوى المكون.
-- **توطين البيانات الوصفية والمسارات والمحتوى ديناميكيًا**.
-- **ضمان دعم TypeScript** مع أنواع يتم إنشاؤها تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
-- **الاستفادة من الميزات المتقدمة**، مثل اكتشاف اللغة والتبديل الديناميكي.
+تم تحسين Intlayer للعمل بشكل مثالي مع Vanilla JavaScript من خلال تقديم **إدارة محتوى مستقلة عن إطار العمل**، و**دعم TypeScript**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (i18n).
 
-يوضح هذا الدليل كيفية استخدام Intlayer في تطبيق Vanilla JavaScript **بدون استخدام مدير حزم أو مجمع** (مثل Vite و Webpack وما إلى ذلك).
+**حجم البندل**
 
-إذا كان تطبيقك يستخدم مجمعًا (مثل Vite)، فنحن نوصي باتباع [دليل Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_with_vite+vanilla.md) بدلاً من ذلك.
+بدلاً من تحميل ملفات JSON ضخمة إلى صفحاتك، قم بتحميل المحتوى الضروري فقط. يساعد Intlayer **في تقليل أحجام البندل وصفحاتك بنسبة تصل إلى 50%**.
 
-باستخدام الحزمة المستقلة (standalone bundle)، يمكنك استيراد Intlayer مباشرة في ملفات HTML الخاصة بك عبر ملف JavaScript واحد، مما يجعله مثاليًا للمشاريع القديمة أو المواقع الثابتة البسيطة.
+** الصيانة **
+
+يؤدي تحديد نطاق محتوى تطبيقك ** إلى تسهيل الصيانة ** للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزات واحد دون العبء العقلي لمراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تتم كتابة 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 في تطبيق Vanilla JS
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام npm:
 
@@ -138,7 +155,9 @@ bun x intlayer build
 
 > ينتج تصدير الربط (bundling) من واجهة سطر أوامر `intlayer standalone` بناءً محسّناً من خلال تقليم الشجرة (tree-shaking) للحزم غير المستخدمة، واللغات، والمنطق غير الأساسي (مثل عمليات إعادة التوجيه أو البوادئ) الخاصة بتكوينك.
 
-### الخطوة 2: تكوين مشروعك
+</Step>
+
+<Step number={2} title="تكوين مشروعك">
 
 قم بإنشاء ملف تكوين لتكوين لغات تطبيقك:
 
@@ -162,7 +181,9 @@ export default config;
 
 > من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL الموطنة، وإعادة توجيه البرامج الوسيطة، وأسماء ملفات تعريف الارتباط، وموقع وامتداد تصريحات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [وثائق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
-### الخطوة 3: استيراد الحزمة في HTML الخاص بك
+</Step>
+
+<Step number={3} title="استيراد الحزمة في HTML الخاص بك">
 
 بمجرد إنشاء حزمة `intlayer.js` ، يمكنك استيرادها في ملف HTML الخاص بك:
 
@@ -186,7 +207,9 @@ export default config;
 
 تكشف الحزمة عن `Intlayer` و `VanillaIntlayer` ككائنات عالمية على `window`.
 
-### الخطوة 4: تهيئة Intlayer في نقطة الدخول الخاصة بك
+</Step>
+
+<Step number={4} title="تهيئة Intlayer في نقطة الدخول الخاصة بك">
 
 في ملف `src/main.js` ، قم باستدعاء `installIntlayer()` **قبل** عرض أي محتوى بحيث يكون الكائن المنفرد للغة العالمية جاهزًا.
 
@@ -206,7 +229,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### الخطوة 5: التصريح عن المحتوى الخاص بك
+</Step>
+
+<Step number={5} title="التصريح عن المحتوى الخاص بك">
 
 قم بإنشاء وإدارة تصريحات المحتوى الخاصة بك لتخزين الترجمات:
 
@@ -284,7 +309,9 @@ export default appContent;
 >
 > لمزيد من التفاصيل ، راجع [وثائق تصريح المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md).
 
-### الخطوة 6: استخدام Intlayer في JavaScript الخاص بك
+</Step>
+
+<Step number={6} title="استخدام Intlayer في JavaScript الخاص بك">
 
 يوفر كائن `window.VanillaIntlayer` مساعدين لواجهة البرمجة: `useIntlayer(key, locale?)` يعيد المحتوى المترجم لمفتاح معين.
 
@@ -318,7 +345,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (اختياري) الخطوة 7: تغيير لغة المحتوى الخاص بك
+</Step>
+
+<Step number={7} title="تغيير لغة المحتوى الخاص بك" isOptional={true}>
 
 لتغيير لغة المحتوى الخاص بك ، استخدم وظيفة `setLocale` التي كشفت عنها `useLocale`.
 
@@ -353,7 +382,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (اختياري) الخطوة 8: تبديل سمات لغة HTML والاتجاه
+</Step>
+
+<Step number={8} title="تبديل سمات لغة HTML والاتجاه" isOptional={true}>
 
 قم بتحديث سمات `lang` و `dir` لعلامة `<html>` لمطابقة اللغة الحالية لتسهيل الوصول وتحسين محركات البحث.
 
@@ -371,7 +402,9 @@ useLocale({
 });
 ```
 
-### (اختياري) الخطوة 9: تحميل القواميس بكسل لكل لغة
+</Step>
+
+<Step number={9} title="تحميل القواميس بكسل لكل لغة" isOptional={true}>
 
 إذا كنت ترغب في تحميل القواميس بكسل (lazy-load) لكل لغة ، يمكنك استخدام `useDictionaryDynamic`. هذا مفيد إذا كنت لا تريد حزم جميع الترجمات في ملف `intlayer.js` الأولي.
 
@@ -427,3 +460,7 @@ const unsubscribe = useDictionaryDynamic(
 ### اذهب أبعد من ذلك
 
 للذهاب إلى أبعد من ذلك ، يمكنك تنفيذ [المحرر المرئي](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).
+
+</Step>
+
+</Steps>

package/docs/ar/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Lit - كيفية ترجمة تطبيق Lit في عام 2026
-description: اكتشف كيفية جعل موقع الويب الخاص بك والمبني باستخدام Vite و Lit متعدد اللغات. اتبع التوثيق لتدويله (i18n) وترجمته.
+updatedAt: 2026-05-31
+title: i18n Vite + Lit - الدليل الكامل لترجمة Lit
+description: أفضل حل لحجم البندل وتحسين محركات البحث والأداء والصيانة. اجعل Vite and Lit تطبيق متعدد اللغات في 2026، ترجمة LLM، Agent Skills & MCP.
 keywords:
   - تدويل
   - توثيق
@@ -57,22 +57,45 @@ history:
 
 <TOC/>
 
-## ما هو Intlayer؟
+## لماذا Intlayer على البدائل؟
 
-**Intlayer** هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
+بالمقارنة مع الحلول الرئيسية مثل `lit-localize` أو `i18next`، يعد Intlayer حلاً يأتي مزودًا بتحسينات متكاملة مثل:
 
-باستخدام Intlayer، يمكنك:
+** تغطية كاملة مضاءة **
 
-- **إدارة الترجمات بسهولة** باستخدام قواميس تعريفية على مستوى المكونات.
-- **توطين البيانات الوصفية والمسارات والمحتوى ديناميكيًا**.
-- **ضمان دعم TypeScript** مع أنواع يتم إنشاؤها تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
-- **الاستفادة من الميزات المتقدمة**، مثل الاكتشاف الديناميكي للغة والتبديل بينها.
+تم تحسين Intlayer للعمل بشكل مثالي مع Lit من خلال تقديم **نطاق المحتوى على مستوى مكون الويب**، و**دعم TypeScript**، وجميع الميزات اللازمة لتوسيع نطاق التدويل (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 في تطبيق Vite و Lit
 
-### الخطوة 1: تثبيت التبعيات
+<Steps>
+
+<Step number={1} title="تثبيت التبعيات">
 
 قم بتثبيت الحزم اللازمة باستخدام npm:
 
@@ -110,7 +133,9 @@ 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="تكوين مشروعك">
 
 أنشئ ملف تكوين لتكوين لغات تطبيقك:
 
@@ -134,7 +159,9 @@ export default config;
 
 > من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL الموطنة، وإعادة توجيه البرمجيات الوسيطة، وأسماء ملفات تعريف الارتباط، وموقع وامتداد إعلانات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، ارجع إلى [توثيق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
-### الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
+</Step>
+
+<Step number={3} title="دمج Intlayer في تكوين Vite الخاص بك">
 
 أضف إضافة intlayer في التكوين الخاص بك.
 
@@ -150,7 +177,9 @@ export default defineConfig({
 
 > تُستخدم إضافة `intlayer()` لـ Vite لدمج Intlayer مع Vite. تضمن بناء ملفات إعلان المحتوى ومراقبتها في وضع التطوير. كما تحدد متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، توفر أسماء مستعارة لتحسين الأداء.
 
-### الخطوة 4: تشغيل Intlayer في نقطة الإدخال الخاصة بك
+</Step>
+
+<Step number={4} title="تشغيل Intlayer في نقطة الإدخال الخاصة بك">
 
 استدعِ `installIntlayer()` **قبل** تسجيل أي عناصر مخصصة بحيث يكون الكائن المنفرد للغة العالمية جاهزًا عند اتصال العنصر الأول.
 
@@ -175,7 +204,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### الخطوة 5: إعلان المحتوى الخاص بك
+</Step>
+
+<Step number={5} title="إعلان المحتوى الخاص بك">
 
 قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
 
@@ -261,7 +292,9 @@ export default appContent;
 >
 > لمزيد من التفاصيل، ارجع إلى [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md).
 
-### الخطوة 6: استخدام Intlayer في LitElement الخاص بك
+</Step>
+
+<Step number={6} title="استخدام Intlayer في LitElement الخاص بك">
 
 استخدم `useIntlayer` داخل `LitElement`. يقوم بإرجاع وكيل `ReactiveController` يقوم تلقائيًا بإعادة الصيرورة كلما تغيرت اللغة النشطة - لا يلزم إعداد إضافي.
 
@@ -306,7 +339,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (اختياري) الخطوة 7: تغيير لغة المحتوى الخاص بك
+</Step>
+
+<Step number={7} title="تغيير لغة المحتوى الخاص بك" isOptional={true}>
 
 لتغيير لغة المحتوى الخاص بك، استخدم أسلوب `setLocale` الذي يوفره متحكم `useLocale`.
 
@@ -341,7 +376,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (اختياري) الخطوة 8: عرض محتوى Markdown و HTML
+</Step>
+
+<Step number={8} title="عرض محتوى Markdown و HTML" isOptional={true}>
 
 يدعم Intlayer إعلانات محتوى `md()` و `html()`. في Lit، يتم حقن المخرجات المجمعة كـ HTML خام عبر توجيه `unsafeHTML`.
 
@@ -391,7 +428,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > يستدعي `String(content.editNote)` الدالة `toString()` على `IntlayerNode` التي تعيد سلسلة Markdown الخام. مررها إلى `compileMarkdown` للحصول على سلسلة HTML، ثم قم بالصيرورة باستخدام توجيه `unsafeHTML` الخاص بـ Lit.
 
-### (اختياري) الخطوة 9: إضافة توجيه محلي (Routing) إلى تطبيقك
+</Step>
+
+<Step number={9} title="إضافة توجيه محلي (Routing) إلى تطبيقك" isOptional={true}>
 
 لإنشاء مسارات فريدة لكل لغة (مفيد لـ SEO)، يمكنك استخدام موجه من جانب العميل بجوار أدوات Intlayer المساعدة `localeMap` / `localeFlatMap` وإضافة Vite `intlayerProxy` لاكتشاف اللغة من جانب الخادم.
 
@@ -408,7 +447,9 @@ export default defineConfig({
 });
 ```
 
-### (اختياري) الخطوة 10: تغيير عنوان URL عند تغيير اللغة
+</Step>
+
+<Step number={10} title="تغيير عنوان URL عند تغيير اللغة" isOptional={true}>
 
 لتحديث عنوان URL للمتصفح عند تغيير اللغة، استخدم `useRewriteURL` بجانب مبدل اللغة:
 
@@ -446,7 +487,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (اختياري) الخطوة 11: تبديل سمات اللغة والاتجاه في HTML
+</Step>
+
+<Step number={11} title="تبديل سمات اللغة والاتجاه في HTML" isOptional={true}>
 
 قم بتحديث سمات `lang` و `dir` لعلامة `<html>` لتتوافق مع اللغة الحالية من أجل إمكانية الوصول و SEO.
 
@@ -471,7 +514,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (اختياري) الخطوة 12: استخراج محتوى مكوناتك
+</Step>
+
+<Step number={12} title="استخراج محتوى مكوناتك" isOptional={true}>
 
 إذا كان لديك كود برمجي موجود، فقد يكون تحويل آلاف الملفات مستهلكًا للوقت.
 
@@ -633,3 +678,7 @@ console.log("SEO files generated successfully.");
 ### اذهب أبعد من ذلك
 
 للذهاب أبعد من ذلك، يمكنك تنفيذ [المحرر المرئي](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).
+
+</Step>
+
+</Steps>