@intlayer/docs 5.5.8

package/ar/packages/react-intlayer/useIntlayerAsync.md

@@ -0,0 +1,226 @@
+# React Integration: `useIntlayerAsync` توثيق الخطاف
+
+يمدد الخطاف `useIntlayerAsync` وظيفة `useIntlayer` من خلال عدم إعادة القواميس المسبقة فقط ولكن أيضًا جلب التحديثات بشكل غير متزامن، مما يجعله مثاليًا للتطبيقات التي تقوم بتحديث محتواها المحلي بشكل متكرر بعد العرض الأولي.
+
+## نظرة عامة
+
+- **تحميل القواميس بشكل غير متزامن:**  
+  عند التثبيت الأولي، يقوم `useIntlayerAsync` أولاً بإرجاع أي قاموس محلي تم جلبه مسبقًا أو تم تجميعه بشكل ثابت (تمامًا كما يفعل `useIntlayer`) ثم يجلب ويدمج أي قواميس جديدة متاحة عن بُعد بشكل غير متزامن.
+- **إدارة حالة التقدم:**  
+  يوفر الخطاف أيضًا حالة `isLoading`، التي تشير إلى وقت جلب قاموس عن بُعد. يتيح ذلك للمطورين عرض مؤشرات التحميل أو حالات الهيكل العظمي لتجربة مستخدم أكثر سلاسة.
+
+## إعداد البيئة
+
+يوفر Intlayer نظام إدارة مصادر محتوى بدون واجهة (CSM) يمكّن غير المطورين من إدارة وتحديث محتوى التطبيق بسلاسة. باستخدام لوحة التحكم البديهية لـ Intlayer، يمكن لفريقك تحرير النصوص المحلية والصور والموارد الأخرى دون تعديل الكود مباشرة. يعمل هذا على تبسيط عملية إدارة المحتوى، وتعزيز التعاون، وضمان إمكانية إجراء التحديثات بسرعة وسهولة.
+
+لبدء استخدام Intlayer:
+
+1. **سجل واحصل على رمز وصول** على [https://intlayer.org/dashboard](https://intlayer.org/dashboard).
+2. **أضف بيانات الاعتماد إلى ملف التكوين الخاص بك:**  
+   في مشروع React الخاص بك، قم بتكوين عميل Intlayer باستخدام بيانات الاعتماد الخاصة بك:
+
+   ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+   import type { IntlayerConfig } from "intlayer";
+
+   export default {
+     // ...
+     editor: {
+       clientId: process.env.INTLAYER_CLIENT_ID,
+       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     },
+   } satisfies IntlayerConfig;
+   ```
+
+   ```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+   import { type IntlayerConfig } from "intlayer";
+
+   /** @type {import('intlayer').IntlayerConfig} */
+   const config = {
+     // ...
+     editor: {
+       clientId: process.env.INTLAYER_CLIENT_ID,
+       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     },
+   };
+
+   export default config;
+   ```
+
+   ```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+   /** @type {import('intlayer').IntlayerConfig} */
+   const config = {
+     // ...
+     editor: {
+       clientId: process.env.INTLAYER_CLIENT_ID,
+       clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+     },
+   };
+
+   module.exports = config;
+   ```
+
+3. **ادفع قاموس لغة جديد إلى Intlayer:**
+
+   ```bash
+   npx intlayer dictionary push -d my-first-dictionary-key
+   ```
+
+   يقوم هذا الأمر بتحميل قواميس المحتوى الأولية الخاصة بك، مما يجعلها متاحة للجلب والتحرير غير المتزامن من خلال منصة Intlayer.
+
+## استيراد `useIntlayerAsync` في React
+
+في مكونات React الخاصة بك، قم باستيراد `useIntlayerAsync`:
+
+```ts codeFormat="typescript"
+import { useIntlayerAsync } from "react-intlayer";
+```
+
+```js codeFormat="esm"
+import { useIntlayerAsync } from "react-intlayer";
+```
+
+```js codeFormat="commonjs"
+const { useIntlayerAsync } = require("react-intlayer");
+```
+
+## المعلمات
+
+1. **`key`**:  
+   **النوع**: `DictionaryKeys`  
+   مفتاح القاموس المستخدم لتحديد كتلة المحتوى المحلي. يجب تعريف هذا المفتاح في ملفات إعلان المحتوى الخاصة بك.
+
+2. **`locale`** (اختياري):  
+   **النوع**: `Locales`  
+   اللغة المحددة التي تريد استهدافها. إذا تم حذفها، يستخدم الخطاف اللغة من سياق Intlayer الحالي.
+
+3. **`isRenderEditor`** (اختياري، الافتراضي هو `true`):  
+   **النوع**: `boolean`  
+   يحدد ما إذا كان المحتوى يجب أن يكون جاهزًا للعرض مع تراكب محرر Intlayer. إذا تم تعيينه إلى `false`، ستستبعد بيانات القاموس المعادة ميزات خاصة بالمحرر.
+
+## قيمة الإرجاع
+
+يعيد الخطاف كائن قاموس يحتوي على محتوى محلي مفاتيحه `key` و `locale`. كما يتضمن قيمة منطقية `isLoading` تشير إلى ما إذا كان قاموس عن بُعد يتم جلبه حاليًا.
+
+## مثال على الاستخدام في مكون React
+
+```tsx fileName="src/components/ComponentExample.tsx" codeFormat="typescript"
+import { useEffect, type FC } from "react";
+import { useIntlayerAsync } from "react-intlayer";
+
+export const ComponentExample: FC = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("المحتوى قيد التحميل...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      {isLoading ? (
+        <div>
+          <h1>جارٍ التحميل…</h1>
+          <p>يرجى الانتظار أثناء تحديث المحتوى.</p>
+        </div>
+      ) : (
+        <div>
+          <h1>{title.value}</h1>
+          <p>{description.value}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.mjx" codeFormat="esm"
+import { useEffect } from "react";
+import { useIntlayerAsync } from "react-intlayer";
+
+const ComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("المحتوى قيد التحميل...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      {isLoading ? (
+        <div>
+          <h1>جارٍ التحميل…</h1>
+          <p>يرجى الانتظار أثناء تحديث المحتوى.</p>
+        </div>
+      ) : (
+        <div>
+          <h1>{title.value}</h1>
+          <p>{description.value}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+```jsx fileName="src/components/ComponentExample.csx" codeFormat="commonjs"
+const { useEffect } = require("react");
+const { useIntlayerAsync } = require("react-intlayer");
+
+const ComponentExample = () => {
+  const { title, description, isLoading } = useIntlayerAsync("async-component");
+
+  useEffect(() => {
+    if (isLoading) {
+      console.log("المحتوى قيد التحميل...");
+    }
+  }, [isLoading]);
+
+  return (
+    <div>
+      {isLoading ? (
+        <div>
+          <h1>جارٍ التحميل…</h1>
+          <p>يرجى الانتظار أثناء تحديث المحتوى.</p>
+        </div>
+      ) : (
+        <div>
+          <h1>{title.value}</h1>
+          <p>{description.value}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+```
+
+**النقاط الرئيسية:**
+
+- عند العرض الأولي، تأتي `title` و `description` من قاموس اللغة المدمج مسبقًا أو المضمن بشكل ثابت.
+- بينما تكون `isLoading` تساوي `true`، يتم تنفيذ طلب في الخلفية لجلب قاموس محدث.
+- بمجرد اكتمال الجلب، يتم تحديث `title` و `description` بأحدث محتوى، وتعود `isLoading` إلى `false`.
+
+## التعامل مع توطين السمات
+
+يمكنك أيضًا استرجاع القيم المحلية للسمات المختلفة لخصائص HTML (مثل `alt`، `title`، `aria-label`):
+
+```jsx
+<img src={title.image.src.value} alt={title.image.alt.value} />
+```
+
+## ملفات القاموس
+
+يجب تعريف جميع مفاتيح المحتوى في ملفات إعلان المحتوى الخاصة بك لضمان الأمان من النوع ولتجنب أخطاء وقت التشغيل. تتيح هذه الملفات التحقق من صحة TypeScript، مما يضمن دائمًا الرجوع إلى المفاتيح واللغات الموجودة.
+
+تعليمات إعداد ملفات إعلان المحتوى متاحة [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/ar/dictionary/get_started.md).
+
+## مزيد من المعلومات
+
+- **محرر Intlayer المرئي:**  
+  قم بالتكامل مع محرر Intlayer المرئي لإدارة وتحرير المحتوى مباشرة من واجهة المستخدم. مزيد من التفاصيل [هنا](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_visual_editor.md).
+
+---
+
+**باختصار**، يعد `useIntlayerAsync` خطاف React قويًا مصممًا لتعزيز تجربة المستخدم والحفاظ على تحديث المحتوى من خلال دمج القواميس المسبقة أو المجمعة مسبقًا مع تحديثات القاموس غير المتزامنة. من خلال الاستفادة من `isLoading` وإعلانات المحتوى المستندة إلى TypeScript، يمكنك دمج محتوى ديناميكي ومحلي بسلاسة في تطبيقات React الخاصة بك.

package/ar/packages/react-intlayer/useLocale.md

@@ -0,0 +1,184 @@
+# دمج React: توثيق `useLocale` Hook
+
+يوفر هذا القسم تفاصيل شاملة حول `useLocale` hook من مكتبة `react-intlayer`، المصممة لإدارة إعدادات اللغة في تطبيقات React.
+
+## استيراد `useLocale` في React
+
+لدمج `useLocale` hook في تطبيق React الخاص بك، قم باستيراده من الحزمة الخاصة به:
+
+```typescript codeFormat="typescript"
+import { useLocale } from "react-intlayer"; // تُستخدم في مكونات React لإدارة إعدادات اللغة
+```
+
+```javascript codeFormat="esm"
+import { useLocale } from "react-intlayer"; // تُستخدم في مكونات React لإدارة إعدادات اللغة
+```
+
+```javascript codeFormat="commonjs"
+const { useLocale } = require("react-intlayer"); // تُستخدم في مكونات React لإدارة إعدادات اللغة
+```
+
+## نظرة عامة
+
+يوفر `useLocale` hook طريقة سهلة للوصول إلى إعدادات اللغة والتعامل معها داخل مكونات React. يتيح الوصول إلى اللغة الحالية، اللغة الافتراضية، جميع اللغات المتاحة، ووظائف لتحديث إعدادات اللغة.
+
+## الاستخدام
+
+إليك كيفية استخدام `useLocale` hook داخل مكون React:
+
+```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+const LocaleSwitcher: FC = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>اللغة الحالية: {locale}</h1>
+      <p>اللغة الافتراضية: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+```jsx fileName="src/components/LocaleSwitcher.mjx" codeFormat="esm"
+import { useLocale } from "react-intlayer";
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>اللغة الحالية: {locale}</h1>
+      <p>اللغة الافتراضية: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+```jsx fileName="src/components/LocaleSwitcher.csx" codeFormat="commonjs"
+const { useLocale } = require("react-intlayer");
+
+const LocaleSwitcher = () => {
+  const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
+
+  return (
+    <div>
+      <h1>اللغة الحالية: {locale}</h1>
+      <p>اللغة الافتراضية: {defaultLocale}</p>
+      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+        {availableLocales.map((loc) => (
+          <option key={loc} value={loc}>
+            {loc}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default LocaleSwitcher;
+```
+
+## المعلمات وقيم الإرجاع
+
+عند استدعاء `useLocale` hook، فإنه يُرجع كائنًا يحتوي على الخصائص التالية:
+
+- **`locale`**: اللغة الحالية كما تم تعيينها في سياق React.
+- **`defaultLocale`**: اللغة الأساسية المحددة في التكوين.
+- **`availableLocales`**: قائمة بجميع اللغات المتاحة كما تم تعريفها في التكوين.
+- **`setLocale`**: وظيفة لتحديث اللغة الحالية داخل سياق التطبيق.
+
+## مثال
+
+يوضح هذا المثال مكونًا يستخدم `useLocale` hook لعرض مبدل لغة، مما يسمح للمستخدمين بتغيير لغة التطبيق ديناميكيًا:
+
+```tsx fileName="src/components/LocaleSelector.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useLocale } from "react-intlayer";
+
+const LocaleSelector: FC = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSelector.mjx" codeFormat="esm"
+import { useLocale } from "react-intlayer";
+
+const LocaleSelector = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+```jsx fileName="src/components/LocaleSelector.csx" codeFormat="commonjs"
+const { useLocale } = require("react-intlayer");
+
+const LocaleSelector = () => {
+  const { locale, setLocale, availableLocales } = useLocale();
+
+  const handleLocaleChange = (newLocale) => {
+    setLocale(newLocale);
+  };
+
+  return (
+    <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
+      {availableLocales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale}
+        </option>
+      ))}
+    </select>
+  );
+};
+```
+
+## الخاتمة
+
+يُعد `useLocale` hook من `react-intlayer` أداة أساسية لإدارة اللغات في تطبيقات React الخاصة بك، حيث يوفر الوظائف اللازمة لتكييف تطبيقك مع جمهور دولي متنوع بشكل فعال.

package/ar/packages/react-native-intlayer/index.md

@@ -0,0 +1,57 @@
+**Intlayer** هي مجموعة من الحزم المصممة خصيصًا لمطوري JavaScript. وهي متوافقة مع أطر العمل مثل React وReact وExpress.js.
+
+**حزمة `react-native-intlayer`** تتيح لك تعريب تطبيق Vite الخاص بك. تتضمن مكون Metro الإضافي لتعيين التكوين من خلال متغيرات البيئة في [Metro bundler](https://docs.expo.dev/guides/customizing-metro/).
+
+## لماذا يجب تعريب تطبيق React Native الخاص بك؟
+
+تعريب تطبيق React Native الخاص بك أمر ضروري لخدمة جمهور عالمي بشكل فعال. يتيح ذلك لتطبيقك تقديم المحتوى والرسائل بلغة المستخدم المفضلة. هذه القدرة تعزز تجربة المستخدم وتوسع نطاق تطبيقك من خلال جعله أكثر وصولاً وملاءمة للأشخاص من خلفيات لغوية مختلفة.
+
+## التكوين
+
+تعمل حزمة `react-native-intlayer` بسلاسة مع [حزمة `react-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/ar/packages/react-intlayer/index.md)، و[حزمة `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/ar/packages/intlayer/index.md). اطلع على الوثائق ذات الصلة لمزيد من المعلومات.
+
+## التثبيت
+
+قم بتثبيت الحزمة اللازمة باستخدام مدير الحزم المفضل لديك:
+
+```bash packageManager="npm"
+npm install react-native-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add react-native-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add react-native-intlayer
+```
+
+## مثال على الاستخدام
+
+اطلع على مثال حول كيفية تضمين المكونات الإضافية في تكوين Vite الخاص بك.
+
+```js
+// metro.config.js
+const { getDefaultConfig } = require("expo/metro-config");
+const { configMetroIntlayer } = require("react-native-intlayer/metro");
+
+module.exports = (async () => {
+  const defaultConfig = getDefaultConfig(__dirname);
+
+  return await configMetroIntlayer(defaultConfig);
+})();
+```
+
+## إتقان تعريب تطبيق Vite الخاص بك
+
+يوفر Intlayer العديد من الميزات لمساعدتك في تعريب تطبيق Vite الخاص بك.
+
+**للتعرف على المزيد حول هذه الميزات، راجع دليل [تعريب React (i18n) باستخدام Intlayer وReact Native](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_with_react_native+expo.md) لتطبيق React Native.**
+
+## اقرأ عن Intlayer
+
+- [موقع Intlayer](https://intlayer.org)
+- [وثائق Intlayer](https://intlayer.org/doc)
+- [Intlayer على GitHub](https://github.com/aymericzip/intlayer)
+
+- [اطرح أسئلتك على وثائقنا الذكية](https://intlayer.org/docchat)

package/ar/packages/react-scripts-intlayer/index.md

@@ -0,0 +1,57 @@
+# react-scripts-intlayer: حزمة NPM لاستخدام Intlayer في تطبيق React Create App
+
+**Intlayer** هي مجموعة من الحزم المصممة خصيصًا لمطوري JavaScript. وهي متوافقة مع أطر العمل مثل React، وReact، وExpress.js.
+
+**حزمة `react-scripts-intlayer`** تتضمن أوامر ومكونات `react-scripts-intlayer` لدمج Intlayer مع تطبيق يعتمد على Create React App. تعتمد هذه المكونات على [craco](https://craco.js.org/) وتشمل تكوينًا إضافيًا لمجمع [Webpack](https://webpack.js.org/).
+
+## التكوين
+
+تعمل حزمة `react-scripts-intlayer` بسلاسة مع [حزمة `react-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/ar/packages/react-intlayer/index.md)، و[حزمة `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/ar/packages/intlayer/index.md). اطلع على الوثائق ذات الصلة لمزيد من المعلومات.
+
+## التثبيت
+
+قم بتثبيت الحزمة اللازمة باستخدام مدير الحزم المفضل لديك:
+
+```bash packageManager="npm"
+npm install react-scripts-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add react-scripts-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add react-scripts-intlayer
+```
+
+## الاستخدام
+
+### أوامر CLI
+
+توفر حزمة `react-scripts-intlayer` أوامر CLI التالية:
+
+- `npx react-scripts-intlayer build`: يبني تطبيق React مع تكوين Intlayer.
+- `npx react-scripts-intlayer start`: يبدأ خادم التطوير مع تكوين Intlayer.
+
+### استبدال سكربتات package.json
+
+لاستخدام حزمة `react-scripts-intlayer`، تحتاج إلى استبدال سكربتات `package.json` بالأوامر التالية:
+
+```json fileName="package.json"
+{
+  "scripts": {
+    "start": "react-scripts-intlayer start",
+    "build": "react-scripts-intlayer build"
+  }
+}
+```
+
+## استخدام تكوين Webpack مخصص
+
+تعتمد `react-scripts-intlayer` على [craco](https://craco.js.org/)، مما يسمح لك بتخصيص تكوين Webpack.
+إذا كنت بحاجة إلى تخصيص تكوين Webpack، يمكنك أيضًا تنفيذ إعدادك الخاص بناءً على مكون intlayer craco. [انظر المثال هنا](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js).
+
+## اقرأ دليل Intlayer الكامل لـ React Create App
+
+يوفر Intlayer العديد من الميزات لمساعدتك في تدويل تطبيق React الخاص بك.
+[اطلع على كيفية استخدام intlayer مع React Create App](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_with_create_react_app.md).

package/ar/packages/solid-intlayer/index.md

@@ -0,0 +1,3 @@
+this doc will be automatically generated translated from the english doc
+
+see /docs/en/packages/solid-intlayer/index.md

package/ar/packages/svelte-intlayer/index.md

@@ -0,0 +1,3 @@
+this doc will be automatically generated translated from the english doc
+
+see /docs/en/packages/svelte-intlayer/index.md

package/ar/packages/vite-intlayer/index.md

@@ -0,0 +1,53 @@
+# vite-intlayer: حزمة NPM لتدويل (i18n) تطبيق Vite
+
+**Intlayer** هي مجموعة من الحزم المصممة خصيصًا لمطوري JavaScript. وهي متوافقة مع أطر العمل مثل React، React، و Express.js.
+
+**حزمة `vite-intlayer`** تتيح لك تدويل تطبيق Vite الخاص بك. تتضمن مكون Vite لإعداد التكوين من خلال متغيرات البيئة في [Vite bundler](https://vitejs.dev/guide/why.html#why-bundle-for-production). كما توفر وسيطًا لاكتشاف اللغة المفضلة للمستخدم وإعادة توجيهه إلى عنوان URL المناسب كما هو محدد في [التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/ar/configuration.md).
+
+## لماذا تدويل تطبيق Vite الخاص بك؟
+
+تدويل تطبيق Vite الخاص بك أمر ضروري لخدمة جمهور عالمي بفعالية. يتيح لتطبيقك تقديم المحتوى والرسائل بلغة المستخدم المفضلة. هذه القدرة تعزز تجربة المستخدم وتوسع نطاق وصول تطبيقك من خلال جعله أكثر سهولة وملاءمة للأشخاص من خلفيات لغوية مختلفة.
+
+## التكوين
+
+تعمل حزمة `vite-intlayer` بسلاسة مع [حزمة `react-intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/ar/packages/react-intlayer/index.md)، و [حزمة `intlayer`](https://github.com/aymericzip/intlayer/blob/main/docs/ar/packages/intlayer/index.md). ألقِ نظرة على الوثائق ذات الصلة لمزيد من المعلومات.
+
+## التثبيت
+
+قم بتثبيت الحزمة اللازمة باستخدام مدير الحزم المفضل لديك:
+
+```bash packageManager="npm"
+npm install vite-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add vite-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add vite-intlayer
+```
+
+## مثال على الاستخدام
+
+شاهد مثالًا على كيفية تضمين المكونات الإضافية في تكوين Vite الخاص بك.
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayerPlugin, intLayerMiddlewarePlugin } from "vite-intlayer";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [intlayerPlugin(), intLayerMiddlewarePlugin()],
+});
+```
+
+> يتم استخدام مكون Vite الإضافي `intlayerPlugin()` لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ومراقبتها في وضع التطوير. كما يحدد متغيرات البيئة الخاصة بـ Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر أسماء مستعارة لتحسين الأداء.
+
+> يضيف المكون الإضافي `intLayerMiddlewarePlugin()` التوجيه على جانب الخادم إلى تطبيقك. سيكتشف هذا المكون الإضافي تلقائيًا اللغة الحالية بناءً على عنوان URL ويضبط ملف تعريف الارتباط الخاص باللغة المناسبة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم اكتشاف لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
+
+## إتقان تدويل تطبيق Vite الخاص بك
+
+يوفر Intlayer العديد من الميزات لمساعدتك في تدويل تطبيق Vite الخاص بك.
+
+**لتعلم المزيد عن هذه الميزات، راجع دليل [التدويل (i18n) مع Intlayer و Vite و React](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_with_vite+react.md) لتطبيقات Vite و React.**

package/ar/packages/vue-intlayer/index.md

@@ -0,0 +1,3 @@
+this doc will be automatically generated translated from the english doc
+
+see /docs/en/packages/vue-intlayer/index.md