@intlayer/docs 5.5.8

package/ar/dictionary/file.md

@@ -0,0 +1,209 @@
+# محتوى الملف / تضمين الملفات في Intlayer
+
+## كيفية عمل تضمين الملفات
+
+في Intlayer، تتيح وظيفة `file` تضمين محتوى الملفات الخارجية في القاموس. يضمن هذا النهج أن يتعرف Intlayer على ملف المصدر، مما يتيح التكامل السلس مع محرر Intlayer المرئي ونظام إدارة المحتوى (CMS). على عكس طرق القراءة المباشرة للملفات باستخدام `import` أو `require` أو `fs`، فإن استخدام `file` يربط الملف بالقاموس، مما يسمح لـ Intlayer بتتبع وتحديث المحتوى ديناميكيًا عند تحرير الملف.
+
+## إعداد محتوى الملف
+
+لتضمين محتوى الملف في مشروع Intlayer الخاص بك، استخدم وظيفة `file` في وحدة المحتوى. أدناه أمثلة توضح تطبيقات مختلفة.
+
+### تطبيق TypeScript
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { file, type Dictionary } from "intlayer";
+
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"),
+  },
+} satisfies Dictionary;
+
+export default myFileContent;
+```
+
+### تطبيق ECMAScript Module (ESM)
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { file } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"),
+  },
+};
+
+export default myFileContent;
+```
+
+### تطبيق CommonJS
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { file } = require("intlayer");
+
+/** @type {import('intlayer').Dictionary} */
+const myFileContent = {
+  key: "my_key",
+  content: {
+    myFile: file("./path/to/file.txt"),
+  },
+};
+
+module.exports = myFileContent;
+```
+
+### إعداد JSON
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "myFile": {
+      "nodeType": "file",
+      "value": "./path/to/file.txt",
+    },
+  },
+}
+```
+
+## استخدام محتوى الملف في React Intlayer
+
+لاستخدام محتوى الملف المضمن في مكون React، قم باستيراد واستخدام الخطاف `useIntlayer` من حزمة `react-intlayer`. يسترجع هذا المحتوى من المفتاح المحدد ويسمح بعرضه ديناميكيًا.
+
+```tsx fileName="**/*.tsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const FileComponent: FC = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const FileComponent = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+export default FileComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const FileComponent = () => {
+  const { myFile } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <pre>{myFile}</pre>
+    </div>
+  );
+};
+
+module.exports = FileComponent;
+```
+
+## مثال Markdown متعدد اللغات
+
+لدعم ملفات Markdown القابلة للتحرير متعددة اللغات، يمكنك استخدام `file` مع `t()` و `md()` لتعريف إصدارات مختلفة من ملفات محتوى Markdown.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { file, t, md, type Dictionary } from "intlayer";
+
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        ar: file("src/components/test.ar.md"),
+        en: file("src/components/test.en.md"),
+        fr: file("src/components/test.fr.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+} satisfies Dictionary;
+
+export default myMultilingualContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { file, t, md } from "intlayer";
+
+/** @type {import('intlayer').Dictionary} */
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        ar: file("src/components/test.ar.md"),
+        en: file("src/components/test.en.md"),
+        fr: file("src/components/test.fr.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+};
+
+export default myMultilingualContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { file, t, md } = require("intlayer");
+
+const myMultilingualContent = {
+  key: "my_multilingual_key",
+  content: {
+    myContent: md(
+      t({
+        ar: file("src/components/test.ar.md"),
+        en: file("src/components/test.en.md"),
+        fr: file("src/components/test.fr.md"),
+        es: file("src/components/test.es.md"),
+      })
+    ),
+  },
+};
+```
+
+يتيح هذا الإعداد استرجاع المحتوى ديناميكيًا بناءً على تفضيل لغة المستخدم. عند استخدامه في محرر Intlayer المرئي أو CMS، سيتعرف النظام على أن المحتوى يأتي من ملفات Markdown المحددة ويضمن بقاءها قابلة للتحرير.
+
+## كيفية تعامل Intlayer مع محتوى الملفات
+
+تعتمد وظيفة `file` على وحدة `fs` في Node.js لقراءة محتوى الملف المحدد وإدراجه في القاموس. عند استخدامها مع محرر Intlayer المرئي أو CMS، يمكن لـ Intlayer تتبع العلاقة بين القاموس والملف. يتيح ذلك لـ Intlayer:
+
+- التعرف على أن المحتوى يأتي من ملف معين.
+- تحديث محتوى القاموس تلقائيًا عند تحرير الملف المرتبط.
+- ضمان التزامن بين الملف والقاموس، مع الحفاظ على سلامة المحتوى.
+
+## موارد إضافية
+
+لمزيد من التفاصيل حول إعداد واستخدام تضمين الملفات في Intlayer، راجع الموارد التالية:
+
+- [وثائق Intlayer CLI](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_cli.md)
+- [وثائق React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_with_create_react_app.md)
+- [وثائق Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/ar/intlayer_with_nextjs_15.md)
+- [وثائق محتوى Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/ar/dictionary/markdown.md)
+- [وثائق محتوى الترجمة](https://github.com/aymericzip/intlayer/blob/main/docs/ar/dictionary/translation.md)
+
+تقدم هذه الموارد مزيدًا من الرؤى حول تضمين الملفات، إدارة المحتوى، وتكامل Intlayer مع مختلف الأطر.

package/ar/dictionary/function_fetching.md

@@ -0,0 +1,190 @@
+# جلب الوظائف
+
+يسمح Intlayer لك بإعلان وظائف المحتوى في وحدات المحتوى الخاصة بك، والتي يمكن أن تكون متزامنة أو غير متزامنة. عند بناء التطبيق، يقوم Intlayer بتنفيذ هذه الوظائف للحصول على نتيجة الوظيفة. يجب أن تكون القيمة المرجعة كائن JSON أو قيمة بسيطة مثل سلسلة نصية أو رقم.
+
+> تحذير: جلب الوظائف غير متاح حاليًا في إعلان محتوى JSON وملفات إعلانات المحتوى البعيدة.
+
+## إعلانات الوظائف
+
+إليك مثال على وظيفة متزامنة بسيطة لجلب المحتوى:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import type { Dictionary } from "intlayer";
+
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة",
+  },
+} satisfies Dictionary;
+
+export default functionContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+/** @type {import('intlayer').Dictionary} */
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة",
+  },
+};
+
+export default functionContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+/** @type {import('intlayer').Dictionary} */
+const functionContent = {
+  key: "function_content",
+  content: {
+    text: () => "هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة",
+  },
+};
+
+module.exports = functionContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "function_content",
+  "content": {
+    "text": "هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة"
+  }
+}
+```
+
+في هذا المثال، يحتوي المفتاح `text` على وظيفة تُرجع سلسلة نصية. يمكن عرض هذا المحتوى في مكونات React الخاصة بك باستخدام حزم المفسر الخاصة بـ Intlayer مثل `react-intlayer`.
+
+## جلب الوظائف غير المتزامنة
+
+بالإضافة إلى الوظائف المتزامنة، يدعم Intlayer الوظائف غير المتزامنة، مما يتيح لك جلب البيانات من مصادر خارجية أو محاكاة استرجاع البيانات باستخدام بيانات وهمية.
+
+فيما يلي مثال على وظيفة غير متزامنة تحاكي جلب البيانات من الخادم:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+import { setTimeout } from "node:timers/promises";
+import type { Dictionary } from "intlayer";
+
+const fakeFetch = async (): Promise<string> => {
+  // انتظر لمدة 200 مللي ثانية لمحاكاة الجلب من الخادم
+  return await setTimeout(200).then(
+    () => "هذا هو المحتوى الذي تم جلبه من الخادم"
+  );
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+} satisfies Dictionary;
+
+export default asyncFunctionContent;
+```
+
+```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+import { setTimeout } from "node:timers/promises";
+
+/** @type {import('intlayer').Dictionary} */
+const fakeFetch = async () => {
+  // انتظر لمدة 200 مللي ثانية لمحاكاة الجلب من الخادم
+  await setTimeout(200);
+  return "هذا هو المحتوى الذي تم جلبه من الخادم";
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+};
+
+export default asyncFunctionContent;
+```
+
+```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+const { setTimeout } = require("node:timers/promises");
+
+/** @type {import('intlayer').Dictionary} */
+const fakeFetch = async () => {
+  // انتظر لمدة 200 مللي ثانية لمحاكاة الجلب من الخادم
+  await setTimeout(200);
+  return "هذا هو المحتوى الذي تم جلبه من الخادم";
+};
+
+const asyncFunctionContent = {
+  key: "async_function",
+  content: { text: fakeFetch },
+};
+
+module.exports = asyncFunctionContent;
+```
+
+```plaintext fileName="**/*.content.json" contentDeclarationFormat="json"
+لا يمكن جلب المحتوى من ملف JSON، استخدم ملف .ts أو .js بدلاً من ذلك
+```
+
+في هذه الحالة، تحاكي وظيفة `fakeFetch` تأخيرًا لمحاكاة وقت استجابة الخادم. يقوم Intlayer بتنفيذ الوظيفة غير المتزامنة ويستخدم النتيجة كمحتوى للمفتاح `text`.
+
+## استخدام المحتوى المستند إلى الوظائف في مكونات React
+
+لاستخدام المحتوى المستند إلى الوظائف في مكون React، تحتاج إلى استيراد `useIntlayer` من `react-intlayer` واستدعائها باستخدام معرف المحتوى لاسترداد المحتوى. إليك مثال:
+
+```typescript fileName="**/*.jsx" codeFormat="typescript"
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent: FC = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* الإخراج: هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* الإخراج: هذا هو المحتوى الذي تم جلبه من الخادم */}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```javascript fileName="**/*.mjx" codeFormat="esm"
+import { useIntlayer } from "react-intlayer";
+
+const MyComponent = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* الإخراج: هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* الإخراج: هذا هو المحتوى الذي تم جلبه من الخادم */}
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+```javascript fileName="**/*.cjs" codeFormat="commonjs"
+const { useIntlayer } = require("react-intlayer");
+
+const MyComponent = () => {
+  const functionContent = useIntlayer("function_content");
+  const asyncFunctionContent = useIntlayer("async_function_content");
+
+  return (
+    <div>
+      <p>{functionContent.text}</p>
+      {/* الإخراج: هذا هو المحتوى الذي يتم عرضه بواسطة وظيفة */}
+      <p>{asyncFunctionContent.text}</p>
+      {/* الإخراج: هذا هو المحتوى الذي تم جلبه من الخادم */}
+    </div>
+  );
+};
+
+module.exports = MyComponent;
+```