@intlayer/docs 8.0.0 → 8.0.1-canary.1

package/docs/ar/intlayer_with_vite+preact.md

@@ -24,7 +24,7 @@ history:
     changes: بداية التاريخ
 ---
 
-# ترجم Vite and Preact باستخدام Intlayer | التدويل (i18n)
+# ترجم موقعك الإلكتروني المبني بـ Vite و Preact باستخدام Intlayer | التدويل (i18n)
 
 <Tabs defaultTab="video">
   <Tab label="Video" value="video">
@@ -45,25 +45,27 @@ history:
   </Tab>
 </Tabs>
 
-> هذه الحزمة قيد التطوير. راجع [المشكلة](https://github.com/aymericzip/intlayer/issues/118) لمزيد من المعلومات. أظهر اهتمامك بـ Intlayer لـ Preact من خلال الإعجاب بالمشكلة
+## جدول المحتويات
 
-راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-vite-preact-template) على GitHub.
+<TOC/>
 
 ## ما هو Intlayer؟
 
-**Intlayer** هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
+**Intlayer** هو مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
 
-مع Intlayer، يمكنك:
+باستخدام Intlayer، يمكنك:
 
 - **إدارة الترجمات بسهولة** باستخدام قواميس إعلانية على مستوى المكون.
 - **توطين البيانات الوصفية والمسارات والمحتوى ديناميكيًا**.
 - **ضمان دعم TypeScript** بأنواع مولدة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
-- **الاستفادة من الميزات المتقدمة**، مثل الكشف الديناميكي عن اللغة وتبديلها.
+- **الاستفادة من الميزات المتقدمة**، مثل الاكتشاف الديناميكي للغة وتبديلها.
 
 ---
 
 ## دليل خطوة بخطوة لإعداد Intlayer في تطبيق Vite و Preact
 
+راجع [قالب التطبيق](https://github.com/aymericzip/intlayer-vite-preact-template) على GitHub.
+
 ### الخطوة 1: تثبيت التبعيات
 
 قم بتثبيت الحزم اللازمة باستخدام npm:
@@ -94,17 +96,19 @@ bunx intlayer init
 
 - **intlayer**
 
-الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، والترجمة، و[إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/get_started.md)، والترجمة البرمجية، و[أوامر CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/intlayer_cli.md).
+  الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين والترجمة و[إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md) والترجمة البرمجية و[أوامر CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/cli/index.md).
 
 - **preact-intlayer**
-  الحزمة التي تدمج Intlayer مع تطبيق Preact. توفر مزودي السياق (context providers) وخطافات (hooks) لتدويل Preact.
+
+  الحزمة التي تدمج Intlayer مع تطبيق Preact. توفر مزودي السياق والخطافات لتدويل Preact.
 
 - **vite-intlayer**
-  تتضمن إضافة Vite لدمج Intlayer مع [أداة تجميع Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، بالإضافة إلى وسيط (middleware) لاكتشاف اللغة المفضلة للمستخدم، وإدارة ملفات تعريف الارتباط (الكوكيز)، والتعامل مع إعادة توجيه عناوين URL.
+
+  تتضمن إضافة Vite لدمج Intlayer مع [أداة تجميع Vite](https://vite.dev/guide/why.html#why-bundle-for-production)، بالإضافة إلى وسيط لاكتشاف اللغة المفضلة للمستخدم وإدارة ملفات تعريف الارتباط والتعامل مع إعادة توجيه عناوين URL.
 
 ### الخطوة 2: تكوين مشروعك
 
-قم بإنشاء ملف تكوين لتحديد لغات تطبيقك:
+أنشئ ملف تكوين لتحديد لغات تطبيقك:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -119,6 +123,10 @@ const config: IntlayerConfig = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // افتراضي: بادئة لجميع اللغات ما عدا اللغة الافتراضية
+    storage: ["cookie", "header"], // افتراضي: حفظ اللغة في ملف تعريف الارتباط والكشف من الرأس
+  },
 };
 
 export default config;
@@ -138,6 +146,10 @@ const config = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // افتراضي: بادئة لجميع اللغات ما عدا اللغة الافتراضية
+    storage: ["cookie", "header"], // افتراضي: حفظ اللغة في ملف تعريف الارتباط والكشف من الرأس
+  },
 };
 
 export default config;
@@ -157,16 +169,20 @@ const config = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // افتراضي: بادئة لجميع اللغات ما عدا اللغة الافتراضية
+    storage: ["cookie", "header"], // افتراضي: حفظ اللغة في ملف تعريف الارتباط والكشف من الرأس
+  },
 };
 
 module.exports = config;
 ```
 
-من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL محلية، إعادة توجيه الوسيط، أسماء ملفات تعريف الارتباط، موقع وامتداد إعلانات المحتوى الخاصة بك، تعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [توثيق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
+> من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL الموطنة، وأوضاع التوجيه، وخيارات التخزين، وأسماء ملفات تعريف الارتباط، وموقع وامتداد إعلانات المحتوى الخاصة بك، وتعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع [وثائق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md).
 
 ### الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
 
-أضف مكون intlayer الإضافي إلى تكوينك.
+أضف المكون الإضافي intlayer إلى تكوينك.
 
 ```typescript fileName="vite.config.ts" codeFormat="typescript"
 import { defineConfig } from "vite";
@@ -201,11 +217,11 @@ module.exports = defineConfig({
 });
 ```
 
-> يتم استخدام مكون Vite الإضافي `intlayer()` لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يحدد متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر ألقابًا لتحسين الأداء.
+> يُستخدم المكون الإضافي Vite `intlayer()` لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يحدد متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، فإنه يوفر أسماء مستعارة لتحسين الأداء.
 
 ### الخطوة 4: إعلان المحتوى الخاص بك
 
-قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
+أنشئ وأدر إعلانات المحتوى الخاصة بك لتخزين الترجمات:
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat="typescript"
 import { t, type Dictionary } from "intlayer";
@@ -222,7 +238,7 @@ const appContent = {
     preactLogo: t({
       en: "Preact logo",
       fr: "Logo Preact",
-      es: "شعار Preact",
+      es: "Logo Preact",
     }),
 
     title: "Vite + Preact",
@@ -236,7 +252,7 @@ const appContent = {
     edit: t<ComponentChildren>({
       en: (
         <>
-          حرر <code>src/app.tsx</code> واحفظ لاختبار HMR
+          Edit <code>src/app.tsx</code> and save to test HMR
         </>
       ),
       fr: (
@@ -252,7 +268,7 @@ const appContent = {
     }),
 
     readTheDocs: t({
-      en: "انقر على شعارات Vite و Preact لمعرفة المزيد",
+      en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
     }),
@@ -274,13 +290,11 @@ const appContent = {
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
-      ar: "شعار Vite",
     }),
     preactLogo: t({
       en: "Preact logo",
       fr: "Logo Preact",
       es: "Logo Preact",
-      ar: "شعار Preact",
     }),
 
     title: "Vite + Preact",
@@ -289,14 +303,11 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
-      ar: "العدد هو ",
     }),
 
     edit: t({
       en: "Edit src/app.jsx and save to test HMR",
       fr: "Éditez src/app.jsx et enregistrez pour tester HMR",
-      ar: "حرر src/app.jsx واحفظ لاختبار HMR",
-    }),
       es: "Edita src/app.jsx y guarda para probar HMR",
     }),
 
@@ -304,7 +315,6 @@ const appContent = {
       en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
-      ar: "انقر على شعارات Vite و Preact لمعرفة المزيد",
     }),
   },
 };
@@ -314,7 +324,7 @@ export default appContent;
 
 ```javascript fileName="src/app.content.cjs" contentDeclarationFormat="commonjs"
 const { t } = require("intlayer");
-// const { h } = require('preact'); // Needed if you use JSX directly in .cjs
+// const { h } = require('preact'); // مطلوب إذا كنت تستخدم JSX مباشرة في .cjs
 
 /** @type {import('intlayer').Dictionary} */
 const appContent = {
@@ -324,12 +334,11 @@ const appContent = {
       en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
-      ar: "شعار Vite",
     }),
     preactLogo: t({
       en: "Preact logo",
-      fr: "شعار Preact",
-      es: "شعار Preact",
+      fr: "Logo Preact",
+      es: "Logo Preact",
     }),
 
     title: "Vite + Preact",
@@ -338,21 +347,18 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
-      ar: "العدد هو ",
     }),
 
     edit: t({
       en: "Edit src/app.tsx and save to test HMR",
       fr: "Éditez src/app.tsx et enregistrez pour tester HMR",
       es: "Edita src/app.tsx y guarda para probar HMR",
-      ar: "حرر src/app.tsx واحفظ لاختبار HMR",
     }),
 
     readTheDocs: t({
       en: "Click on the Vite and Preact logos to learn more",
       fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
       es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
-      ar: "انقر على شعاري Vite و Preact لمعرفة المزيد",
     }),
   },
 };
@@ -368,7 +374,6 @@ module.exports = appContent;
     "viteLogo": {
       "nodeType": "translation",
       "translation": {
-        "ar": "شعار Vite",
         "en": "Vite logo",
         "fr": "Logo Vite",
         "es": "Logo Vite"
@@ -377,7 +382,6 @@ module.exports = appContent;
     "preactLogo": {
       "nodeType": "translation",
       "translation": {
-        "ar": "شعار Preact",
         "en": "Preact logo",
         "fr": "Logo Preact",
         "es": "Logo Preact"
@@ -386,7 +390,6 @@ module.exports = appContent;
     "title": {
       "nodeType": "translation",
       "translation": {
-        "ar": "Vite + Preact",
         "en": "Vite + Preact",
         "fr": "Vite + Preact",
         "es": "Vite + Preact"
@@ -395,7 +398,6 @@ module.exports = appContent;
     "count": {
       "nodeType": "translation",
       "translation": {
-        "ar": "العدد هو ",
         "en": "count is ",
         "fr": "le compte est ",
         "es": "el recuento es "
@@ -404,7 +406,6 @@ module.exports = appContent;
     "edit": {
       "nodeType": "translation",
       "translation": {
-        "ar": "حرر src/app.tsx واحفظ لاختبار HMR",
         "en": "Edit src/app.tsx and save to test HMR",
         "fr": "Éditez src/app.tsx et enregistrez pour tester HMR",
         "es": "Edita src/app.tsx y guarda para probar HMR"
@@ -413,7 +414,6 @@ module.exports = appContent;
     "readTheDocs": {
       "nodeType": "translation",
       "translation": {
-        "ar": "انقر على شعارات Vite و Preact لمعرفة المزيد",
         "en": "Click on the Vite and Preact logos to learn more",
         "fr": "Cliquez sur les logos Vite et Preact pour en savoir plus",
         "es": "Haga clic en los logotipos de Vite y Preact para obtener más información"
@@ -423,22 +423,22 @@ module.exports = appContent;
 }
 ```
 
-> يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك بمجرد تضمينها في دليل `contentDir` (افتراضيًا، `./src`). ويجب أن تتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
+> يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك طالما كانت مدرجة في دليل `contentDir` (افتراضيًا، `./src`). وتتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
 
-> لمزيد من التفاصيل، راجع [توثيق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/get_started.md).
+> لمزيد من التفاصيل، راجع [وثائق إعلان المحتوى](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/dictionary/content_file.md).
 
-> إذا كان ملف المحتوى الخاص بك يتضمن كود TSX، فقد تحتاج إلى استيراد `import { h } from "preact";` أو التأكد من تعيين براغما JSX بشكل صحيح لـ Preact.
+> إذا كان ملف المحتوى الخاص بك يتضمن كود TSX، فقد تحتاج إلى استيراد `import { h } from "preact";` أو التأكد من ضبط براغما JSX بشكل صحيح لـ Preact.
 
 ### الخطوة 5: استخدام Intlayer في كودك
 
-يمكنك الوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيقك:
+قم بالوصول إلى قواميس المحتوى الخاصة بك في جميع أنحاء تطبيقك:
 
 ```tsx {6,10} fileName="src/app.tsx" codeFormat="typescript"
 import { useState } from "preact/hooks";
 import type { FunctionalComponent } from "preact";
-import preactLogo from "./assets/preact.svg"; // بافتراض أن لديك ملف preact.svg
+import preactLogo from "./assets/preact.svg"; // بفرض أن لديك preact.svg
 import viteLogo from "/vite.svg";
-import "./app.css"; // بافتراض أن ملف CSS الخاص بك اسمه app.css
+import "./app.css"; // بفرض أن ملف CSS الخاص بك يسمى app.css
 import { IntlayerProvider, useIntlayer } from "preact-intlayer";
 
 const AppContent: FunctionalComponent = () => {
@@ -467,6 +467,12 @@ const AppContent: FunctionalComponent = () => {
         </button>
         <p>{content.edit}</p>
       </div>
+      {/* محتوى Markdown */}
+      <div>{content.myMarkdownContent}</div>
+
+      {/* محتوى HTML */}
+      <div>{content.myHtmlContent}</div>
+
       <p class="read-the-docs">{content.readTheDocs}</p>
     </>
   );
@@ -575,19 +581,19 @@ const App = () => (
 module.exports = App;
 ```
 
-> إذا كنت تريد استخدام المحتوى الخاص بك في خاصية من نوع `string`، مثل `alt`، `title`، `href`، `aria-label`، إلخ، يجب عليك استدعاء قيمة الدالة، مثل:
+> إذا كنت تريد استخدام المحتوى الخاص بك في خاصية `string` ، مثل `alt` ، `title` ، `href` ، `aria-label` ، وما إلى ذلك ، فيجب عليك استدعاء قيمة الدالة ، مثل:
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
 > ```
 
-> ملاحظة: في Preact، عادةً ما يُكتب `className` كـ `class`.
+> ملاحظة: في Preact، عادةً ما يتم كتابة `className` كـ `class`.
 
-> لمعرفة المزيد عن الخطاف `useIntlayer`، راجع [التوثيق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useIntlayer.md) (واجهة برمجة التطبيقات مشابهة لـ `preact-intlayer`).
+> لمعرفة المزيد حول الخطاف `useIntlayer` ، راجع [الوثائق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useIntlayer.md) (واجهة برمجة التطبيقات مماثلة لـ `preact-intlayer`).
 
 ### (اختياري) الخطوة 6: تغيير لغة المحتوى الخاص بك
 
-لتغيير لغة المحتوى الخاص بك، يمكنك استخدام الدالة `setLocale` المقدمة من الخطاف `useLocale`. تتيح لك هذه الدالة تعيين لغة التطبيق وتحديث المحتوى وفقًا لذلك.
+لتغيير لغة المحتوى الخاص بك ، يمكنك استخدام وظيفة `setLocale` التي يوفرها خطاف `useLocale`. تتيح لك هذه الوظيفة تعيين لغة التطبيق وتحديث المحتوى وفقًا لذلك.
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
 import type { FunctionalComponent } from "preact";
@@ -599,7 +605,7 @@ const LocaleSwitcher: FunctionalComponent = () => {
 
   return (
     <button onClick={() => setLocale(Locales.ENGLISH)}>
-      تغيير اللغة إلى الإنجليزية
+      Change Language to English
     </button>
   );
 };
@@ -616,7 +622,7 @@ const LocaleSwitcher = () => {
 
   return (
     <button onClick={() => setLocale(Locales.ENGLISH)}>
-      تغيير اللغة إلى الإنجليزية
+      Change Language to English
     </button>
   );
 };
@@ -633,7 +639,7 @@ const LocaleSwitcher = () => {
 
   return (
     <button onClick={() => setLocale(Locales.ENGLISH)}>
-      تغيير اللغة إلى الإنجليزية
+      Change Language to English
     </button>
   );
 };
@@ -641,11 +647,11 @@ const LocaleSwitcher = () => {
 module.exports = LocaleSwitcher;
 ```
 
-> لمعرفة المزيد عن الخطاف `useLocale`، راجع [التوثيق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md) (واجهة برمجة التطبيقات مشابهة لـ `preact-intlayer`).
+> لمعرفة المزيد حول الخطاف `useLocale` ، راجع [الوثائق](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md) (واجهة برمجة التطبيقات مماثلة لـ `preact-intlayer`).
 
-### (اختياري) الخطوة 7: إضافة التوجيه المحلي إلى تطبيقك
+### (اختياري) الخطوة 7: إضافة توجيه محلي إلى تطبيقك
 
-الغرض من هذه الخطوة هو جعل المسارات فريدة لكل لغة. هذا مفيد لتحسين محركات البحث (SEO) ولعناوين URL الصديقة لمحركات البحث.
+الغرض من هذه الخطوة هو إنشاء مسارات فريدة لكل لغة. هذا مفيد لتحسين محركات البحث (SEO) وعناوين URL الصديقة لمحركات البحث.
 مثال:
 
 ```plaintext
@@ -654,407 +660,107 @@ module.exports = LocaleSwitcher;
 - https://example.com/fr/about
 ```
 
-> بشكل افتراضي، لا يتم إضافة بادئة للمسارات للغة الافتراضية. إذا كنت ترغب في إضافة بادئة للغة الافتراضية، يمكنك تعيين الخيار `middleware.prefixDefault` إلى `true` في إعداداتك. راجع [توثيق الإعدادات](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md) لمزيد من المعلومات.
-
-لإضافة التوجيه المحلي إلى تطبيقك، يمكنك إنشاء مكون `LocaleRouter` الذي يلف مسارات تطبيقك ويتعامل مع التوجيه بناءً على اللغة. إليك مثالًا باستخدام [preact-iso](https://github.com/preactjs/preact-iso):
-
-أولاً، قم بتثبيت `preact-iso`:
-
-```bash packageManager="npm"
-npm install preact-iso
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add preact-iso
-pnpm intlayer init
-```
+> افتراضيًا، لا يتم إضافة بادئة للمسارات للغة الافتراضية. إذا كنت ترغب في إضافة بادئة للغة الافتراضية، يمكنك تعيين خيار `routing.mode` إلى `"prefix-all"` في التكوين الخاص بك. راجع [وثائق التكوين](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/configuration.md) لمزيد من المعلومات.
 
-```bash packageManager="yarn"
-yarn add preact-iso
-```
+لإضافة توجيه محلي إلى تطبيقك، يمكنك إنشاء مكون `LocaleRouter` يلف مسارات تطبيقك ويتعامل مع التوجيه المستند إلى اللغة. إليك مثال باستخدام [preact-iso](https://github.com/preactjs/preact-iso):
 
 ```tsx fileName="src/components/LocaleRouter.tsx"  codeFormat="typescript"
-import { type Locales, configuration, getPathWithoutLocale } from "intlayer";
-import { ComponentChildren, FunctionalComponent } from "preact";
+import { localeMap } from "intlayer";
 import { IntlayerProvider } from "preact-intlayer";
-import { LocationProvider, useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
-
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate: FunctionalComponent<{ to: string; replace?: boolean }> = ({
-  to,
-  replace,
-}) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
+import { LocationProvider, Router, Route } from "preact-iso";
+import type { ComponentChildren, FunctionalComponent } from "preact";
 
 /**
-/**
- * مكون يتعامل مع التوطين ويغلف الأطفال بسياق اللغة المناسب.
- * يدير اكتشاف اللغة بناءً على عنوان URL والتحقق من صحتها.
- */
-const AppLocalized: FunctionalComponent<{
-  children: ComponentChildren;
-  locale?: Locales;
-}> = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // تحديد اللغة الحالية، مع الرجوع إلى اللغة الافتراضية إذا لم يتم توفيرها
-  const currentLocale = locale ?? defaultLocale;
-
-  // إزالة بادئة اللغة من المسار لبناء مسار أساسي
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // مسار URL الحالي
-  );
-
-  /**
-   * إذا كانت الخاصية middleware.prefixDefault صحيحة، يجب دائمًا إضافة بادئة للغة الافتراضية.
-   */
-  if (middleware.prefixDefault) {
-    // التحقق من صحة اللغة
-    if (!locale || !locales.includes(locale)) {
-      // إعادة التوجيه إلى اللغة الافتراضية مع المسار المحدث
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // استبدال الإدخال الحالي في السجل بالإدخال الجديد
-        />
-      );
-    }
-
-    // تغليف العناصر الفرعية بمزود Intlayer وتعيين اللغة الحالية
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * عندما تكون الخاصية middleware.prefixDefault خاطئة، لا تتم إضافة بادئة للغة الافتراضية.
-     * تأكد من أن اللغة الحالية صالحة وليست اللغة الافتراضية.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // استبعاد اللغة الافتراضية
-        )
-        .includes(currentLocale) // تحقق مما إذا كانت اللغة الحالية ضمن قائمة اللغات الصالحة
-    ) {
-      // إعادة التوجيه إلى المسار بدون بادئة اللغة
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // لف العناصر الفرعية بمزود Intlayer وتعيين اللغة الحالية
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent: FunctionalComponent<{
-  children: ComponentChildren;
-}> = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1] as Locales;
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
-  );
-};
-
-/**
- * مكون راوتر يقوم بإعداد مسارات خاصة بكل لغة.
- * يستخدم preact-iso لإدارة التنقل وعرض المكونات المترجمة.
+ * مكون راوتر يقوم بإعداد مسارات خاصة باللغة.
+ * يستخدم preact-iso لإدارة التنقل وعرض المكونات المحلية.
  */
 export const LocaleRouter: FunctionalComponent<{
   children: ComponentChildren;
 }> = ({ children }) => (
   <LocationProvider>
-    <RouterContent>{children}</RouterContent>
+    <Router>
+      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) => (
+          <Route
+            key={locale}
+            path={`${urlPrefix}/:rest*`}
+            component={() => (
+              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+            )}
+          />
+        ))}
+    </Router>
   </LocationProvider>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.jsx" codeFormat="esm"
-// استيراد التبعيات والوظائف اللازمة
-import { configuration, getPathWithoutLocale } from "intlayer";
+import { localeMap } from "intlayer";
 import { IntlayerProvider } from "preact-intlayer";
-import { LocationProvider, useLocation } from "preact-iso";
-import { useEffect } from "preact/hooks";
-import { h } from "preact"; // مطلوب لـ JSX
-
-// تفكيك التكوين من Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate = ({ to, replace }) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
-
-/**
- * مكون يتعامل مع التوطين ويغلف الأطفال بسياق اللغة المناسب.
- * يدير اكتشاف اللغة بناءً على عنوان URL والتحقق من صحتها.
- */
-const AppLocalized = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // تحديد اللغة الحالية، والرجوع إلى اللغة الافتراضية إذا لم يتم توفيرها
-  const currentLocale = locale ?? defaultLocale;
-
-  // إزالة بادئة اللغة من المسار لبناء مسار أساسي
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // مسار URL الحالي
-  );
-
-  /**
-   * إذا كانت middleware.prefixDefault صحيحة، يجب دائمًا إضافة بادئة اللغة الافتراضية.
-   */
-  if (middleware.prefixDefault) {
-    // التحقق من صحة اللغة
-    if (!locale || !locales.includes(locale)) {
-      // إعادة التوجيه إلى اللغة الافتراضية مع المسار المحدث
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // استبدال الإدخال الحالي في السجل بالإدخال الجديد
-        />
-      );
-    }
-
-    // تغليف الأطفال بمزود Intlayer وتعيين اللغة الحالية
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * عندما يكون middleware.prefixDefault خاطئًا، لا يتم إضافة بادئة للغة الافتراضية.
-     * تأكد من أن اللغة الحالية صالحة وليست اللغة الافتراضية.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // استبعاد اللغة الافتراضية
-        )
-        .includes(currentLocale) // التحقق مما إذا كانت اللغة الحالية ضمن قائمة اللغات الصالحة
-    ) {
-      // إعادة التوجيه إلى المسار بدون بادئة اللغة
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // تغليف العناصر الفرعية بمزود Intlayer وتعيين اللغة الحالية
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1];
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
-  );
-};
+import { LocationProvider, Router, Route } from "preact-iso";
 
 /**
- * مكون راوتر يقوم بإعداد مسارات خاصة بكل لغة.
- * يستخدم preact-iso لإدارة التنقل وعرض المكونات المترجمة.
+ * مكون راوتر يقوم بإعداد مسارات خاصة باللغة.
+ * يستخدم preact-iso لإدارة التنقل وعرض المكونات المحلية.
  */
 export const LocaleRouter = ({ children }) => (
   <LocationProvider>
-    <RouterContent>{children}</RouterContent>
+    <Router>
+      {localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) => (
+          <Route
+            key={locale}
+            path={`${urlPrefix}/:rest*`}
+            component={() => (
+              <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+            )}
+          />
+        ))}
+    </Router>
   </LocationProvider>
 );
 ```
 
 ```jsx fileName="src/components/LocaleRouter.cjsx" codeFormat="commonjs"
-// استيراد التبعيات والوظائف اللازمة
-const { configuration, getPathWithoutLocale } = require("intlayer");
+const { localeMap } = require("intlayer");
 const { IntlayerProvider } = require("preact-intlayer");
-const { LocationProvider, useLocation } = require("preact-iso");
-const { useEffect } = require("preact/hooks");
-const { h } = require("preact"); // مطلوب لـ JSX
-
-// تفكيك التهيئة من Intlayer
-const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
-
-const Navigate = ({ to, replace }) => {
-  const { route } = useLocation();
-  useEffect(() => {
-    route(to, replace);
-  }, [to, replace, route]);
-  return null;
-};
+const { LocationProvider, Router, Route } = require("preact-iso");
 
 /**
- * مكون يتعامل مع التوطين ويغلف الأطفال بسياق اللغة المناسب.
- * يدير اكتشاف اللغة بناءً على عنوان URL والتحقق من صحتها.
+ * مكون راوتر يقوم بإعداد مسارات خاصة باللغة.
+ * يستخدم preact-iso لإدارة التنقل وعرض المكونات المحلية.
  */
-const AppLocalized = ({ children, locale }) => {
-  const { path: pathname, url } = useLocation();
-
-  if (!url) {
-    return null;
-  }
-
-  const search = url.substring(pathname.length);
-
-  // تحديد اللغة الحالية، والرجوع إلى اللغة الافتراضية إذا لم يتم توفيرها
-  const currentLocale = locale ?? defaultLocale;
-
-  // إزالة بادئة اللغة من المسار لبناء مسار أساسي
-  const pathWithoutLocale = getPathWithoutLocale(
-    pathname // مسار URL الحالي
-  );
-
-  /**
-   * إذا كانت middleware.prefixDefault صحيحة، يجب دائمًا إضافة بادئة اللغة الافتراضية.
-   */
-  if (middleware.prefixDefault) {
-    // التحقق من صحة اللغة
-    if (!locale || !locales.includes(locale)) {
-      // إعادة التوجيه إلى اللغة الافتراضية مع المسار المحدث
-      return (
-        <Navigate
-          to={`/${defaultLocale}/${pathWithoutLocale}${search}`}
-          replace // استبدال الإدخال الحالي في السجل بالإدخال الجديد
-        />
-      );
-    }
-
-    // تغليف العناصر الفرعية بـ IntlayerProvider وتعيين اللغة الحالية
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  } else {
-    /**
-     * عندما تكون middleware.prefixDefault خاطئة، لا يتم إضافة بادئة اللغة الافتراضية.
-     * تأكد من أن اللغة الحالية صالحة وليست اللغة الافتراضية.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // استبعاد اللغة الافتراضية
+const LocaleRouter = ({ children }) =>
+  h(
+    LocationProvider,
+    {},
+    h(
+      Router,
+      {},
+      localeMap(({ locale, urlPrefix }) => ({ locale, urlPrefix }))
+        .sort((a, b) => b.urlPrefix.length - a.urlPrefix.length)
+        .map(({ locale, urlPrefix }) =>
+          h(Route, {
+            key: locale,
+            path: `${urlPrefix}/:rest*`,
+            component: () => h(IntlayerProvider, { locale }, children),
+          })
         )
-        .includes(currentLocale) // تحقق مما إذا كانت اللغة الحالية موجودة في قائمة اللغات الصالحة
-    ) {
-      // إعادة التوجيه إلى المسار بدون بادئة اللغة
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // لف العناصر الفرعية بمزود Intlayer وتعيين اللغة الحالية
-    return (
-      <IntlayerProvider locale={currentLocale}>{children}</IntlayerProvider>
-    );
-  }
-};
-
-const RouterContent = ({ children }) => {
-  const { path } = useLocation();
-
-  if (!path) {
-    return null;
-  }
-
-  const pathLocale = path.split("/")[1];
-
-  const isLocaleRoute = locales
-    .filter((locale) => middleware.prefixDefault || locale !== defaultLocale)
-    .some((locale) => locale.toString() === pathLocale);
-
-  if (isLocaleRoute) {
-    return <AppLocalized locale={pathLocale}>{children}</AppLocalized>;
-  }
-
-  return (
-    <AppLocalized
-      locale={!middleware.prefixDefault ? defaultLocale : undefined}
-    >
-      {children}
-    </AppLocalized>
+    )
   );
-};
-
-/**
- * مكون راوتر يقوم بإعداد مسارات خاصة بكل لغة.
- * يستخدم preact-iso لإدارة التنقل وعرض المكونات المترجمة.
- */
-const LocaleRouter = ({ children }) => (
-  <LocationProvider>
-    <RouterContent>{children}</RouterContent>
-  </LocationProvider>
-);
 
 module.exports = { LocaleRouter };
 ```
 
-ثم يمكنك استخدام مكون `LocaleRouter` في تطبيقك:
+بعد ذلك، يمكنك استخدام مكون `LocaleRouter` في تطبيقك:
 
 ```tsx fileName="src/app.tsx" codeFormat="typescript"
 import { LocaleRouter } from "./components/LocaleRouter";
 import type { FunctionalComponent } from "preact";
-tsx fileName="src/app.tsx" codeFormat="typescript"
-// ... مكون AppContent الخاص بك (المعرف في الخطوة 5)
+
+// ... مكون AppContent الخاص بك
 
 const App: FunctionalComponent = () => (
   <LocaleRouter>
@@ -1067,7 +773,8 @@ export default App;
 
 ```jsx fileName="src/app.jsx" codeFormat="esm"
 import { LocaleRouter } from "./components/LocaleRouter";
-// ... مكون AppContent الخاص بك (المعرف في الخطوة 5)
+
+// ... مكون AppContent الخاص بك
 
 const App = () => (
   <LocaleRouter>
@@ -1080,7 +787,8 @@ export default App;
 
 ```jsx fileName="src/app.cjsx" codeFormat="commonjs"
 const { LocaleRouter } = require("./components/LocaleRouter");
-// ... مكون AppContent الخاص بك (المعرف في الخطوة 5)
+
+// ... مكون AppContent الخاص بك
 
 const App = () => (
   <LocaleRouter>
@@ -1091,47 +799,12 @@ const App = () => (
 module.exports = App;
 ```
 
-بالتوازي، يمكنك أيضًا استخدام `intlayerProxy` لإضافة التوجيه من جانب الخادم إلى تطبيقك. سيقوم هذا المكون الإضافي تلقائيًا بالكشف عن اللغة الحالية بناءً على عنوان URL وتعيين ملف تعريف الارتباط المناسب للغة. إذا لم يتم تحديد لغة، سيحدد المكون الإضافي اللغة الأنسب بناءً على تفضيلات لغة متصفح المستخدم. إذا لم يتم الكشف عن أي لغة، فسيتم إعادة التوجيه إلى اللغة الافتراضية.
-
-```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
-import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
-```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
-import { defineConfig } from "vite";
-import preact from "@preact/preset-vite";
-import { intlayer, intlayerProxy } from "vite-intlayer";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
-```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
-const { defineConfig } = require("vite");
-const preact = require("@preact/preset-vite");
-const { intlayer, intlayerProxy } = require("vite-intlayer");
-
-// https://vitejs.dev/config/
-module.exports = defineConfig({
-  plugins: [preact(), intlayer(), intlayerProxy()],
-});
-```
-
 ### (اختياري) الخطوة 8: تغيير عنوان URL عند تغيير اللغة
 
-لتغيير عنوان URL عند تغيير اللغة، يمكنك استخدام الخاصية `onLocaleChange` التي يوفرها الخطاف `useLocale`. بالتوازي، يمكنك استخدام `useLocation` و `route` من مكتبة `preact-iso` لتحديث مسار URL.
+لتغيير عنوان URL عند تغيير اللغة، يمكنك استخدام خاصية `onLocaleChange` التي يوفرها خطاف `useLocale`. بالتوازي، يمكنك استخدام طريقة `route` من `useLocation` في `preact-iso` لتحديث مسار URL.
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
-import { useLocation, route } from "preact-iso";
+import { useLocation } from "preact-iso";
 import {
   Locales,
   getHTMLTextDir,
@@ -1142,16 +815,15 @@ import { useLocale } from "preact-intlayer";
 import type { FunctionalComponent } from "preact";
 
 const LocaleSwitcher: FunctionalComponent = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url; // توفر preact-iso عنوان URL الكامل
-      // بناء عنوان URL مع اللغة المحدّثة
+      // بناء عنوان URL باللغة المحدثة
       // مثال: /es/about?foo=bar
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
 
       // تحديث مسار URL
-      route(pathWithLocale, true); // true للاستبدال
+      route(pathWithLocale, true); // true للاستبدال (replace)
     },
   });
 
@@ -1161,7 +833,7 @@ const LocaleSwitcher: FunctionalComponent = () => {
       <div id="localePopover" popover="auto">
         {availableLocales.map((localeItem) => (
           <a
-            href={getLocalizedUrl(location.url, localeItem)}
+            href={getLocalizedUrl(url, localeItem)}
             hreflang={localeItem}
             aria-current={locale === localeItem ? "page" : undefined}
             onClick={(e) => {
@@ -1172,19 +844,19 @@ const LocaleSwitcher: FunctionalComponent = () => {
             key={localeItem}
           >
             <span>
-              {/* اللغة - مثل FR */}
+              {/* اللغة - مثلاً FR */}
               {localeItem}
             </span>
             <span>
-              {/* اللغة بلغتها الأصلية - مثل Français */}
+              {/* اللغة بلغتها الأصلية - مثلاً Français */}
               {getLocaleName(localeItem, localeItem)}
             </span>
             <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {/* اللغة باللغة الحالية - مثل Francés مع تعيين اللغة الحالية إلى Locales.SPANISH */}
+              {/* اللغة باللغة الحالية - مثلاً Francés مع تعيين اللغة الحالية إلى Locales.SPANISH */}
               {getLocaleName(localeItem, locale)}
             </span>
             <span dir="ltr" lang={Locales.ENGLISH}>
-              {/* اللغة بالإنجليزية - مثل French */}
+              {/* اللغة بالإنجليزية - مثلاً French */}
               {getLocaleName(localeItem, Locales.ENGLISH)}
             </span>
           </a>
@@ -1198,7 +870,7 @@ export default LocaleSwitcher;
 ```
 
 ```jsx fileName="src/components/LocaleSwitcher.jsx" codeFormat="esm"
-import { useLocation, route } from "preact-iso";
+import { useLocation } from "preact-iso";
 import {
   Locales,
   getHTMLTextDir,
@@ -1206,14 +878,12 @@ import {
   getLocalizedUrl,
 } from "intlayer";
 import { useLocale } from "preact-intlayer";
-import { h } from "preact"; // للـ JSX
 
 const LocaleSwitcher = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url;
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
       route(pathWithLocale, true);
     },
   });
@@ -1224,7 +894,7 @@ const LocaleSwitcher = () => {
       <div id="localePopover" popover="auto">
         {availableLocales.map((localeItem) => (
           <a
-            href={getLocalizedUrl(location.url, localeItem)}
+            href={getLocalizedUrl(url, localeItem)}
             hreflang={localeItem}
             aria-current={locale === localeItem ? "page" : undefined}
             onClick={(e) => {
@@ -1252,7 +922,7 @@ export default LocaleSwitcher;
 ```
 
 ```jsx fileName="src/components/LocaleSwitcher.cjsx" codeFormat="commonjs"
-const { useLocation, route } = require("preact-iso");
+const { useLocation } = require("preact-iso");
 const {
   Locales,
   getHTMLTextDir,
@@ -1260,45 +930,51 @@ const {
   getLocalizedUrl,
 } = require("intlayer");
 const { useLocale } = require("preact-intlayer");
-const { h } = require("preact"); // للـ JSX
 
 const LocaleSwitcher = () => {
-  const location = useLocation();
+  const { url, route } = useLocation();
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
-      const currentFullPath = location.url;
-      const pathWithLocale = getLocalizedUrl(currentFullPath, newLocale);
+      const pathWithLocale = getLocalizedUrl(url, newLocale);
       route(pathWithLocale, true);
     },
   });
 
-  return (
-    <div>
-      <button popovertarget="localePopover">{getLocaleName(locale)}</button>
-      <div id="localePopover" popover="auto">
-        {availableLocales.map((localeItem) => (
-          <a
-            href={getLocalizedUrl(location.url, localeItem)}
-            hreflang={localeItem}
-            aria-current={locale === localeItem ? "page" : undefined}
-            onClick={(e) => {
+  return h(
+    "div",
+    {},
+    h("button", { popovertarget: "localePopover" }, getLocaleName(locale)),
+    h(
+      "div",
+      { id: "localePopover", popover: "auto" },
+      availableLocales.map((localeItem) =>
+        h(
+          "a",
+          {
+            href: getLocalizedUrl(url, localeItem),
+            hreflang: localeItem,
+            "aria-current": locale === localeItem ? "page" : undefined,
+            onClick: (e) => {
               e.preventDefault();
               setLocale(localeItem);
-            }}
-            key={localeItem}
-          >
-            <span>{localeItem}</span>
-            <span>{getLocaleName(localeItem, localeItem)}</span>
-            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
-              {getLocaleName(localeItem, locale)}
-            </span>
-            <span dir="ltr" lang={Locales.ENGLISH}>
-              {getLocaleName(localeItem, Locales.ENGLISH)}
-            </span>
-          </a>
-        ))}
-      </div>
-    </div>
+            },
+            key: localeItem,
+          },
+          h("span", {}, localeItem),
+          h("span", {}, getLocaleName(localeItem, localeItem)),
+          h(
+            "span",
+            { dir: getHTMLTextDir(localeItem), lang: localeItem },
+            getLocaleName(localeItem, locale)
+          ),
+          h(
+            "span",
+            { dir: "ltr", lang: Locales.ENGLISH },
+            getLocaleName(localeItem, Locales.ENGLISH)
+          )
+        )
+      )
+    )
   );
 };
 
@@ -1307,34 +983,21 @@ module.exports = LocaleSwitcher;
 
 > مراجع التوثيق:
 >
-> > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md) (واجهة برمجة التطبيقات مشابهة لـ `preact-intlayer`)
->
-> - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getLocaleName.md)
-> - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getLocalizedUrl.md)
-> - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getHTMLTextDir.md)
-> - [`hreflang` attribute](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-> - [`lang` attribute](https://developer.mozilla.org/ar/docs/Web/HTML/Global_attributes/lang)
-> - [`dir` attribute](https://developer.mozilla.org/ar/docs/Web/HTML/Global_attributes/dir)
-> - [`aria-current` attribute](https://developer.mozilla.org/ar/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-> - [واجهة برمجة تطبيقات Popover](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) > > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md) (واجهة برمجة التطبيقات مشابهة لـ `preact-intlayer`) > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getLocaleName.md) > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getLocalizedUrl.md) > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getHTMLTextDir.md) > - [خاصية `hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ar) > - [خاصية `lang`](https://developer.mozilla.org/ar/docs/Web/HTML/Global_attributes/lang) > - [خاصية `dir`](https://developer.mozilla.org/ar/docs/Web/HTML/Global_attributes/dir) > - [خاصية `aria-current`](https://developer.mozilla.org/ar/docs/Web/Accessibility/ARIA/Attributes/aria-current) > - [واجهة برمجة التطبيقات Popover](https://developer.mozilla.org/ar/docs/Web/API/Popover_API)
+> > - [خطاف `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/react-intlayer/useLocale.md) (واجهة برمجة التطبيقات مماثلة لـ `preact-intlayer`)> - [خطاف `getLocaleName`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getLocaleName.md)> - [خطاف `getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getLocalizedUrl.md)> - [خطاف `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ar/packages/intlayer/getHTMLTextDir.md)> - [خاصية `hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ar)> - [خاصية `lang`](https://developer.mozilla.org/ar/docs/Web/HTML/Global_attributes/lang)> - [خاصية `dir`](https://developer.mozilla.org/ar/docs/Web/HTML/Global_attributes/dir)> - [خاصية `aria-current`](https://developer.mozilla.org/ar/docs/Web/Accessibility/ARIA/Attributes/aria-current)> - [واجهة برمجة تطبيقات Popover](https://developer.mozilla.org/ar/docs/Web/API/Popover_API)
 
-فيما يلي الخطوة التاسعة المحدثة مع شرح إضافي وأمثلة كود محسنة:
-
----
+### (اختياري) الخطوة 9: تبديل سمات اللغة والاتجاه لـ HTML
 
-### (اختياري) الخطوة 9: تبديل خصائص اللغة والاتجاه في وسم HTML
+عندما يدعم تطبيقك لغات متعددة، من الضروري تحديث سمتي `lang` و `dir` في وسم `<html>` لتتوافق مع اللغة الحالية. القيام بذلك يضمن:
 
-عندما يدعم تطبيقك عدة لغات، من الضروري تحديث خصائص `lang` و `dir` في وسم `<html>` لتتوافق مع اللغة الحالية. يضمن ذلك:
+- **إمكانية الوصول**: تعتمد أجهزة قراءة الشاشة والتقنيات المساعدة على سمة `lang` الصحيحة لنطق وتفسير المحتوى بدقة.
+- **عرض النص**: تضمن سمة `dir` (الاتجاه) عرض النص بالترتيب الصحيح (على سبيل المثال، من اليسار إلى اليمين للغة الإنجليزية، ومن اليمين إلى اليسار للغة العربية أو العبرية)، وهو أمر أساسي لسهولة القراءة.
+- **تحسين محركات البحث (SEO)**: تستخدم محركات البحث سمة `lang` لتحديد لغة صفحتك، مما يساعد في تقديم المحتوى المحلي المناسب في نتائج البحث.
 
-- **إمكانية الوصول**: تعتمد برامج قراءة الشاشة وتقنيات المساعدة على خاصية `lang` الصحيحة لنطق وتفسير المحتوى بدقة.
-- **عرض النص**: تضمن خاصية `dir` (الاتجاه) عرض النص بالترتيب الصحيح (مثلًا من اليسار إلى اليمين للإنجليزية، ومن اليمين إلى اليسار للعربية أو العبرية)، وهو أمر أساسي لسهولة القراءة.
-- **تحسين محركات البحث (SEO)**: تستخدم محركات البحث الخاصية `lang` لتحديد لغة صفحتك، مما يساعد في تقديم المحتوى المحلي المناسب في نتائج البحث.
+من خلال تحديث هذه السمات ديناميكيًا عند تغيير اللغة، تضمن تجربة متسقة وسهلة الوصول للمستخدمين عبر جميع اللغات المدعومة.
 
-من خلال تحديث هذه الخصائص ديناميكيًا عند تغيير اللغة، تضمن تجربة متسقة وسهلة الوصول للمستخدمين عبر جميع اللغات المدعومة.
+#### تنفيذ الخطاف (Hook)
 
-#### تنفيذ الـ Hook
-
-قم بإنشاء hook مخصص لإدارة خصائص HTML. يستمع الـ hook لتغييرات اللغة ويحدث الخصائص وفقًا لذلك:
+أنشئ خطافًا مخصصًا لإدارة سمات HTML. يستمع الخطاف لتغييرات اللغة ويحدث السمات وفقًا لذلك:
 
 ```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
 import { useEffect } from "preact/hooks";
@@ -1342,17 +1005,17 @@ import { useLocale } from "preact-intlayer";
 import { getHTMLTextDir } from "intlayer";
 
 /**
- * يقوم بتحديث خصائص `lang` و `dir` لعنصر <html> بناءً على اللغة الحالية.
- * - `lang`: يُعلم المتصفحات ومحركات البحث بلغة الصفحة.
- * - `dir`: يضمن ترتيب القراءة الصحيح (مثل 'ltr' للإنجليزية، 'rtl' للعربية).
+ * يقوم بتحديث سمتي `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية.
+ * - `lang`: يخبر المتصفحات ومحركات البحث بلغة الصفحة.
+ * - `dir`: يضمن ترتيب القراءة الصحيح (مثلاً، 'ltr' للإنجليزية، 'rtl' للعربية).
  *
- * هذا التحديث الديناميكي ضروري لعرض النص بشكل صحيح، وللوصولية، وتحسين محركات البحث (SEO).
+ * هذا التحديث الديناميكي ضروري لعرض النص بشكل صحيح، وإمكانية الوصول، وتحسين محركات البحث (SEO).
  */
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
 
   useEffect(() => {
-    // تحديث خاصية اللغة إلى اللغة الحالية.
+    // تحديث سمة اللغة إلى اللغة الحالية.
     document.documentElement.lang = locale;
 
     // تعيين اتجاه النص بناءً على اللغة الحالية.
@@ -1367,7 +1030,7 @@ import { useLocale } from "preact-intlayer";
 import { getHTMLTextDir } from "intlayer";
 
 /**
- * يقوم بتحديث خصائص `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية.
+ * يقوم بتحديث سمتي `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية.
  */
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
@@ -1385,7 +1048,7 @@ const { useLocale } = require("preact-intlayer");
 const { getHTMLTextDir } = require("intlayer");
 
 /**
- * يقوم بتحديث خصائص `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية.
+ * يقوم بتحديث سمتي `lang` و `dir` لعنصر HTML <html> بناءً على اللغة الحالية.
  */
 const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
@@ -1399,9 +1062,9 @@ const useI18nHTMLAttributes = () => {
 module.exports = { useI18nHTMLAttributes };
 ```
 
-#### استخدام الـ Hook في تطبيقك
+#### استخدام الخطاف في تطبيقك
 
-ادمج الـ hook في المكون الرئيسي الخاص بك بحيث يتم تحديث خصائص HTML في كل مرة يتغير فيها locale:
+قم بدمج الخطاف في مكونك الرئيسي بحيث يتم تحديث سمات HTML كلما تغيرت اللغة:
 
 ```tsx fileName="src/app.tsx" codeFormat="typescript"
 import type { FunctionalComponent } from "preact";
@@ -1411,10 +1074,10 @@ import "./app.css";
 // تعريف AppContent من الخطوة 5
 
 const AppWithHooks: FunctionalComponent = () => {
-  // تطبيق الـ hook لتحديث خصائص lang و dir في وسم <html> بناءً على اللغة المختارة.
+  // تطبيق الخطاف لتحديث سمتي lang و dir في وسم <html> بناءً على اللغة.
   useI18nHTMLAttributes();
 
-  // بافتراض أن AppContent هو مكون عرض المحتوى الرئيسي الخاص بك من الخطوة 5
+  // بفرض أن AppContent هو مكون عرض المحتوى الرئيسي الخاص بك من الخطوة 5
   return <AppContent />;
 };
 
@@ -1467,203 +1130,182 @@ const App = () => (
 module.exports = App;
 ```
 
-بتطبيق هذه التغييرات، سيقوم تطبيقك بـ:
-
-- التأكد من أن خاصية **اللغة** (`lang`) تعكس اللغة الحالية بشكل صحيح، وهو أمر مهم لتحسين محركات البحث وسلوك المتصفح.
-- ضبط **اتجاه النص** (`dir`) وفقًا للغة المختارة، مما يعزز من قابلية القراءة وسهولة الاستخدام للغات ذات اتجاهات قراءة مختلفة.
-- توفير تجربة أكثر **سهولة في الوصول**، حيث تعتمد تقنيات المساعدة على هذه السمات لتعمل بشكل مثالي.
-
 ### (اختياري) الخطوة 10: إنشاء مكون رابط محلي
 
-لضمان أن تتوافق تنقلات تطبيقك مع اللغة الحالية، يمكنك إنشاء مكون `Link` مخصص. يقوم هذا المكون تلقائيًا بإضافة بادئة اللغة الحالية إلى عناوين URL الداخلية.
+لضمان أن تنقل تطبيقك يحترم اللغة الحالية، يمكنك إنشاء مكون `Link` مخصص. يقوم هذا المكون تلقائيًا بإضافة بادئة اللغة الحالية إلى عناوين URL الداخلية.
 
 هذا السلوك مفيد لعدة أسباب:
 
-- **تحسين محركات البحث وتجربة المستخدم**: تساعد عناوين URL المحلية محركات البحث على فهرسة الصفحات الخاصة بكل لغة بشكل صحيح وتوفر للمستخدمين محتوى بلغتهم المفضلة.
-- **الاتساق**: باستخدام رابط محلي في جميع أنحاء تطبيقك، تضمن بقاء التنقل ضمن اللغة الحالية، مما يمنع التبديلات غير المتوقعة في اللغة.
-- **قابلية الصيانة**: تركيز منطق التوطين في مكون واحد يبسط إدارة عناوين URL.
+- **تحسين محركات البحث وتجربة المستخدم**: تساعد عناوين URL الموطنة محركات البحث على فهرسة الصفحات الخاصة بلغات معينة بشكل صحيح وتوفر للمستخدمين محتوى بلغتهم المفضلة.
+- **الاتساق**: باستخدام رابط محلي في جميع أنحاء تطبيقك، فإنك تضمن بقاء التنقل ضمن اللغة الحالية، مما يمنع تبديلات اللغة غير المتوقعة.
+- **قابلية الصيانة**: تبسيط إدارة عناوين URL من خلال مركزية منطق التوطين في مكون واحد.
 
-بالنسبة لـ Preact مع `preact-iso`، عادةً ما تُستخدم علامات `<a>` القياسية للملاحة، ويتولى `preact-iso` التعامل مع التوجيه. إذا كنت بحاجة إلى التنقل برمجيًا عند النقر (مثل تنفيذ إجراءات قبل التنقل)، يمكنك استخدام دالة `route` من `useLocation`. إليك كيفية إنشاء مكون رابط مخصص يقوم بتوطين عناوين URL:
+إليك تنفيذ مكون `Link` محلي في Preact:
 
-```tsx fileName="src/components/LocalizedLink.tsx" codeFormat="typescript"
+```tsx fileName="src/components/Link.tsx" codeFormat="typescript"
 import { getLocalizedUrl } from "intlayer";
-import { useLocale, useLocation, route } from "preact-intlayer"; // بافتراض أن useLocation و route يمكن أن يكونا من preact-iso عبر preact-intlayer إذا تم إعادة التصدير، أو استيرادهما مباشرة
-// إذا لم يتم إعادة التصدير، استورد مباشرة: import { useLocation, route } from "preact-iso";
-import type { JSX } from "preact"; // للسمات HTMLAttributes
-import { forwardRef } from "preact/compat"; // لإعادة توجيه المراجع
+import { useLocale } from "preact-intlayer";
+import { forwardRef } from "preact/compat";
+import type { JSX } from "preact";
 
-export interface LocalizedLinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
   href: string;
-  replace?: boolean; // اختياري: لاستبدال حالة التاريخ
 }
 
 /**
- * دالة مساعدة للتحقق مما إذا كان الرابط المعطى خارجيًا.
- * إذا بدأ الرابط بـ http:// أو https://، يعتبر خارجيًا.
+ * دالة مساعدة للتحقق مما إذا كان عنوان URL معين خارجيًا.
+ * إذا بدأ عنوان URL بـ http:// أو https://، فإنه يعتبر خارجيًا.
  */
 export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
- * مكون رابط مخصص يقوم بتكييف خاصية href بناءً على اللغة الحالية.
- * بالنسبة للروابط الداخلية، يستخدم `getLocalizedUrl` لإضافة بادئة اللغة إلى عنوان URL (مثلاً /fr/about).
- * هذا يضمن أن التنقل يبقى ضمن نفس سياق اللغة.
- * يستخدم وسم <a> عادي ولكنه يمكن أن يفعّل التنقل من جهة العميل باستخدام `route` من preact-iso.
+ * مكون Link مخصص يقوم بتكييف سمة href بناءً على اللغة الحالية.
+ * بالنسبة للروابط الداخلية، فإنه يستخدم `getLocalizedUrl` لإضافة بادئة اللغة إلى عنوان URL (مثل /fr/about).
+ * يضمن هذا بقاء التنقل داخل نفس سياق اللغة.
  */
-export const LocalizedLink = forwardRef<HTMLAnchorElement, LocalizedLinkProps>(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ href, children, ...props }, ref) => {
     const { locale } = useLocale();
-    const location = useLocation(); // من preact-iso
     const isExternalLink = checkIsExternalLink(href);
 
+    // إذا كان الرابط داخليًا وتم توفير href صالح، فاحصل على عنوان URL المحلي.
     const hrefI18n =
       href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
-    const handleClick = (event: JSX.TargetedMouseEvent<HTMLAnchorElement>) => {
-      if (onClick) {
-        onClick(event);
-      }
-      if (
-        !isExternalLink &&
-        href && // التأكد من تعريف href
-        event.button === 0 && // نقرة زر الفأرة الأيسر
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey && // التحقق من عدم وجود مفاتيح تعديل قياسية
-        !props.target // عدم استهداف نافذة/تبويب جديد
-      ) {
-        event.preventDefault();
-        if (location.url !== hrefI18n) {
-          // التنقل فقط إذا كان الرابط مختلفًا
-          route(hrefI18n, replace); // استخدام route من preact-iso
-        }
-      }
-    };
-
     return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
+      <a href={hrefI18n} ref={ref} {...props}>
         {children}
       </a>
     );
   }
 );
+
+Link.displayName = "Link";
 ```
 
-```jsx fileName="src/components/LocalizedLink.jsx" codeFormat="esm"
+```jsx fileName="src/components/Link.jsx" codeFormat="esm"
 import { getLocalizedUrl } from "intlayer";
 import { useLocale } from "preact-intlayer";
-import { useLocation, route } from "preact-iso"; // استيراد من preact-iso
 import { forwardRef } from "preact/compat";
-import { h } from "preact"; // من أجل JSX
 
+/**
+ * دالة مساعدة للتحقق مما إذا كان عنوان URL معين خارجيًا.
+ * إذا بدأ عنوان URL بـ http:// أو https://، فإنه يعتبر خارجيًا.
+ */
 export const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
-export const LocalizedLink = forwardRef(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
-    const { locale } = useLocale();
-    const location = useLocation();
-    const isExternalLink = checkIsExternalLink(href);
+/**
+ * مكون Link مخصص يقوم بتكييف سمة href بناءً على اللغة الحالية.
+ * بالنسبة للروابط الداخلية، فإنه يستخدم `getLocalizedUrl` لإضافة بادئة اللغة إلى عنوان URL (مثل /fr/about).
+ * يضمن هذا بقاء التنقل داخل نفس سياق اللغة.
+ */
+export const Link = forwardRef(({ href, children, ...props }, ref) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href);
 
-    const hrefI18n =
-      href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
+  // إذا كان الرابط داخليًا وتم توفير href صالح، فاحصل على عنوان URL المحلي.
+  const hrefI18n =
+    href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
 
-    const handleClick = (event) => {
-      if (onClick) {
-        onClick(event);
-      }
-      if (
-        !isExternalLink &&
-        href &&
-        event.button === 0 &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey &&
-        !props.target
-      ) {
-        event.preventDefault();
-        if (location.url !== hrefI18n) {
-          route(hrefI18n, replace);
-        }
-      }
-    };
+  return (
+    <a href={hrefI18n} ref={ref} {...props}>
+      {children}
+    </a>
+  );
+});
 
-    return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
+Link.displayName = "Link";
 ```
 
-```jsx fileName="src/components/LocalizedLink.cjsx" codeFormat="commonjs"
+```jsx fileName="src/components/Link.cjsx" codeFormat="commonjs"
 const { getLocalizedUrl } = require("intlayer");
 const { useLocale } = require("preact-intlayer");
-const { useLocation, route } = require("preact-iso"); // استيراد من preact-iso
 const { forwardRef } = require("preact/compat");
-const { h } = require("preact"); // من أجل JSX
-
-const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? ""); // تحقق مما إذا كان الرابط خارجيًا
 
-const LocalizedLink = forwardRef(
-  ({ href, children, onClick, replace = false, ...props }, ref) => {
-    const { locale } = useLocale(); // الحصول على اللغة الحالية
-    const location = useLocation(); // الحصول على الموقع الحالي
-    const isExternalLink = checkIsExternalLink(href); // التحقق مما إذا كان الرابط خارجيًا
+/**
+ * دالة مساعدة للتحقق مما إذا كان عنوان URL معين خارجيًا.
+ * إذا بدأ عنوان URL بـ http:// أو https://، فإنه يعتبر خارجيًا.
+ */
+const checkIsExternalLink = (href) => /^https?:\/\//.test(href ?? "");
 
-    const hrefI18n =
-      href && !isExternalLink ? getLocalizedUrl(href, locale) : href; // تعريب الرابط إذا لم يكن خارجيًا
+/**
+ * مكون Link مخصص يقوم بتكييف سمة href بناءً على اللغة الحالية.
+ * بالنسبة للروابط الداخلية، فإنه يستخدم `getLocalizedUrl` لإضافة بادئة اللغة إلى عنوان URL (مثل /fr/about).
+ * يضمن هذا بقاء التنقل داخل نفس سياق اللغة.
+ */
+const Link = forwardRef(({ href, children, ...props }, ref) => {
+  const { locale } = useLocale();
+  const isExternalLink = checkIsExternalLink(href);
+
+  // إذا كان الرابط داخليًا وتم توفير href صالح، فاحصل على عنوان URL المحلي.
+  const hrefI18n =
+    href && !isExternalLink ? getLocalizedUrl(href, locale) : href;
+
+  return h(
+    "a",
+    {
+      href: hrefI18n,
+      ref: ref,
+      ...props,
+    },
+    children
+  );
+});
 
-    const handleClick = (event) => {
-      if (onClick) {
-        onClick(event); // استدعاء دالة النقر إذا كانت موجودة
-      }
-      if (
-        !isExternalLink &&
-        href &&
-        event.button === 0 &&
-        !event.metaKey &&
-        !event.ctrlKey &&
-        !event.shiftKey &&
-        !event.altKey &&
-        !props.target
-      ) {
-        event.preventDefault(); // منع السلوك الافتراضي للنقر
-        if (location.url !== hrefI18n) {
-          route(hrefI18n, replace);
-        }
-      }
-    };
+Link.displayName = "Link";
 
-    return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
-
-module.exports = { LocalizedLink, checkIsExternalLink };
+module.exports = { Link, checkIsExternalLink };
 ```
 
 #### كيف يعمل
 
 - **كشف الروابط الخارجية**:  
-  تقوم دالة المساعدة `checkIsExternalLink` بتحديد ما إذا كان الرابط URL خارجيًا. تُترك الروابط الخارجية دون تغيير.
-- **استرجاع اللغة الحالية**:  
-  يوفر الخطاف `useLocale` اللغة الحالية.
-- **توطين الرابط**:  
-  بالنسبة للروابط الداخلية، تضيف دالة `getLocalizedUrl` بادئة اللغة الحالية إلى الرابط.
-- **التنقل من جانب العميل**:
-  تتحقق دالة `handleClick` مما إذا كان الرابط داخليًا وإذا كان يجب منع التنقل القياسي. إذا كان الأمر كذلك، فإنها تستخدم دالة `route` من مكتبة `preact-iso` (التي يتم الحصول عليها عبر `useLocation` أو استيرادها مباشرة) لتنفيذ التنقل على جانب العميل. هذا يوفر سلوكًا يشبه تطبيق الصفحة الواحدة (SPA) بدون إعادة تحميل الصفحة بالكامل.
+  تحدد الدالة المساعدة `checkIsExternalLink` ما إذا كان عنوان URL خارجيًا. تُترك الروابط الخارجية دون تغيير لأنها لا تحتاج إلى توطين.
+- **استرداد اللغة الحالية**:  
+  يوفر خطاف `useLocale` اللغة الحالية (مثلاً `fr` للفرنسية).
+- **توطين عنوان URL**:  
+  بالنسبة للروابط الداخلية (أي غير الخارجية)، يتم استخدام `getLocalizedUrl` لإضافة بادئة اللغة الحالية تلقائيًا إلى عنوان URL. هذا يعني أنه إذا كان مستخدمك باللغة الفرنسية، فإن تمرير `/about` كـ `href` سيحوله إلى `/fr/about`.
 - **إرجاع الرابط**:  
-  تُرجع المكون عنصر `<a>` مع عنوان URL المحلي ومعالج النقر المخصص.
+  يعيد المكون عنصر `<a>` مع عنوان URL المحلي، مما يضمن أن التنقل متسق مع اللغة.
+
+### (اختياري) الخطوة 11: عرض Markdown و HTML
+
+يدعم Intlayer عرض محتوى Markdown و HTML في Preact.
+
+يمكنك تخصيص عرض محتوى Markdown و HTML باستخدام طريقة `.use()`. تسمح لك هذه الطريقة بتجاوز العرض الافتراضي لعلامات محددة.
+
+```tsx
+import { useIntlayer } from "preact-intlayer";
+
+const { myMarkdownContent, myHtmlContent } = useIntlayer("my-component");
+
+// ...
+
+return (
+  <div>
+    {/* العرض الأساسي */}
+    {myMarkdownContent}
+
+    {/* العرض المخصص لـ Markdown */}
+    {myMarkdownContent.use({
+      h1: (props) => <h1 style={{ color: "red" }} {...props} />,
+    })}
+
+    {/* العرض الأساسي لـ HTML */}
+    {myHtmlContent}
+
+    {/* العرض المخصص لـ HTML */}
+    {myHtmlContent.use({
+      b: (props) => <strong style={{ color: "blue" }} {...props} />,
+    })}
+  </div>
+);
+```
 
 ### تكوين TypeScript
 
-يستخدم Intlayer توسيع الوحدات (module augmentation) للاستفادة من TypeScript وجعل قاعدة الشيفرة الخاصة بك أقوى.
+يستخدم Intlayer توسيع الوحدات (module augmentation) للحصول على فوائد TypeScript وجعل قاعدة الكود الخاصة بك أقوى.
 
 ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
@@ -1691,9 +1333,9 @@ module.exports = { LocalizedLink, checkIsExternalLink };
 
 ### تكوين Git
 
-يوصى بتجاهل الملفات التي تم إنشاؤها بواسطة Intlayer. هذا يسمح لك بتجنب الالتزام بها في مستودع Git الخاص بك.
+يوصى بتجاهل الملفات التي تم إنشاؤها بواسطة Intlayer. يتيح لك ذلك تجنب الالتزام بها في مستودع Git الخاص بك.
 
-لعمل ذلك، يمكنك إضافة التعليمات التالية إلى ملف `.gitignore` الخاص بك:
+للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف `.gitignore` الخاص بك:
 
 ```plaintext
 # تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer
@@ -1704,21 +1346,21 @@ module.exports = { LocalizedLink, checkIsExternalLink };
 
 لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت **إضافة Intlayer الرسمية لـ VS Code**.
 
-[التثبيت من سوق VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[التثبيت من متجر VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-تقدم هذه الإضافة:
+توفر هذه الإضافة:
 
 - **الإكمال التلقائي** لمفاتيح الترجمة.
-- **كشف الأخطاء في الوقت الحقيقي** للترجمات المفقودة.
+- **كشف الأخطاء في الوقت الفعلي** للترجمات المفقودة.
 - **معاينات داخلية** للمحتوى المترجم.
-- **إجراءات سريعة** لإنشاء الترجمة وتحديثها بسهولة.
+- **إجراءات سريعة** لإنشاء وتحديث الترجمات بسهولة.
 
 لمزيد من التفاصيل حول كيفية استخدام الإضافة، راجع [توثيق إضافة Intlayer لـ VS Code](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
-### التقدم أكثر
+### اذهب أبعد من ذلك
 
-للتقدم أكثر، يمكنك تنفيذ [المحرر المرئي](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).
+للذهاب أبعد من ذلك، يمكنك تنفيذ [المحرر المرئي](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).
 
 ---