@intlayer/docs 8.0.0 → 8.0.1-canary.0

package/docs/ru/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>
 
-> Этот пакет находится в разработке. Подробнее смотрите в [issue](https://github.com/aymericzip/intlayer/issues/118). Покажите свой интерес к Intlayer для Preact, поставив лайк этому issue.
+## Содержание
 
-Смотрите [шаблон приложения](https://github.com/aymericzip/intlayer-vite-preact-template) на GitHub.
+<TOC/>
 
 ## Что такое Intlayer?
 
-**Intlayer** - это инновационная, открытая библиотека интернационализации (i18n), созданная для упрощения поддержки многоязычности в современных веб-приложениях.
+**Intlayer** — это инновационная библиотека интернационализации (i18n) с открытым исходным кодом, разработанная для упрощения поддержки многоязычности в современных веб-приложениях.
 
-С помощью Intlayer вы можете:
+С Intlayer вы можете:
 
-- **Легко управлять переводами** с использованием декларативных словарей на уровне компонентов.
+- **Легко управлять переводами** с помощью декларативных словарей на уровне компонентов.
 - **Динамически локализовать метаданные**, маршруты и контент.
-- **Обеспечить поддержку TypeScript** с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
-- **Воспользуйтесь расширенными возможностями**, такими как динамическое определение и переключение локали.
+- **Обеспечить поддержку TypeScript** с помощью автоматически генерируемых типов, улучшающих автодополнение и обнаружение ошибок.
+- **Пользоваться расширенными функциями**, такими как динамическое определение локали и переключение языков.
 
 ---
 
 ## Пошаговое руководство по настройке Intlayer в приложении на Vite и Preact
 
+См. [Шаблон приложения](https://github.com/aymericzip/intlayer-vite-preact-template) на GitHub.
+
 ### Шаг 1: Установка зависимостей
 
 Установите необходимые пакеты с помощью npm:
@@ -94,15 +96,15 @@ bunx intlayer init
 
 - **intlayer**
 
-- **intlayer**
-
-  Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, [объявления контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/get_started.md), транспиляции и [CLI-команд](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_cli.md).
+  Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, [объявления контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md), компиляции и [CLI-команд](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/cli/index.md).
 
 - **preact-intlayer**
+
   Пакет, который интегрирует Intlayer с приложением на Preact. Он предоставляет провайдеры контекста и хуки для интернационализации Preact.
 
 - **vite-intlayer**
-  Включает плагин Vite для интеграции Intlayer с [сборщиком Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также middleware для определения предпочтительной локали пользователя, управления cookie и обработки перенаправления URL.
+
+  Включает плагин Vite для интеграции Intlayer с [сборщиком Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а также промежуточное ПО для определения предпочтительной локали пользователя, управления куки и обработки перенаправления URL.
 
 ### Шаг 2: Конфигурация вашего проекта
 
@@ -121,6 +123,10 @@ const config: IntlayerConfig = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // По умолчанию: префикс для всех локалей, кроме основной
+    storage: ["cookie", "header"], // По умолчанию: хранение локали в куки и определение из заголовка
+  },
 };
 
 export default config;
@@ -140,6 +146,10 @@ const config = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // По умолчанию: префикс для всех локалей, кроме основной
+    storage: ["cookie", "header"], // По умолчанию: хранение локали в куки и определение из заголовка
+  },
 };
 
 export default config;
@@ -149,7 +159,6 @@ export default config;
 const { Locales } = require("intlayer");
 
 /** @type {import('intlayer').IntlayerConfig} */
-// Конфигурация интернационализации
 const config = {
   internationalization: {
     locales: [
@@ -160,14 +169,18 @@ const config = {
     ],
     defaultLocale: Locales.ENGLISH,
   },
+  routing: {
+    mode: "prefix-no-default", // По умолчанию: префикс для всех локалей, кроме основной
+    storage: ["cookie", "header"], // По умолчанию: хранение локали в куки и определение из заголовка
+  },
 };
 
 module.exports = config;
 ```
 
-> Через этот конфигурационный файл вы можете настроить локализованные URL, перенаправление в промежуточном ПО, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
+> Через этот конфигурационный файл вы можете настроить локализованные URL, режимы маршрутизации, параметры хранения, имена куки, расположение и расширение ваших объявлений контента, отключить логи Intlayer в консоли и многое другое. Полный список доступных параметров см. в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
 
-### Шаг 3: Интеграция Intlayer в вашу конфигурацию Vite
+### Шаг 3: Интеграция Intlayer в конфигурацию Vite
 
 Добавьте плагин intlayer в вашу конфигурацию.
 
@@ -204,11 +217,11 @@ module.exports = defineConfig({
 });
 ```
 
-> Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов деклараций контента и отслеживает их в режиме разработки. Определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, предоставляет алиасы для оптимизации производительности.
+> Плагин Vite `intlayer()` используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов объявлений контента и отслеживает их в режиме разработки. Он определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, он предоставляет алиасы для оптимизации производительности.
 
-### Шаг 4: Объявите Ваш Контент
+### Шаг 4: Объявление контента
 
-Создайте и управляйте декларациями контента для хранения переводов:
+Создайте и управляйте своими объявлениями контента для хранения переводов:
 
 ```tsx fileName="src/app.content.tsx" contentDeclarationFormat="typescript"
 import { t, type Dictionary } from "intlayer";
@@ -225,7 +238,7 @@ const appContent = {
     preactLogo: t({
       en: "Preact logo",
       fr: "Logo Preact",
-      es: "Логотип Preact",
+      es: "Logo Preact",
     }),
 
     title: "Vite + Preact",
@@ -239,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: (
@@ -267,7 +280,7 @@ export default appContent;
 
 ```javascript fileName="src/app.content.mjs" contentDeclarationFormat="esm"
 import { t } from "intlayer";
-// import { h } from 'preact'; // Нужно, если вы используете JSX напрямую в .mjs
+// import { h } from 'preact'; // Требуется, если вы используете JSX напрямую в .mjs
 
 /** @type {import('intlayer').Dictionary} */
 const appContent = {
@@ -275,13 +288,13 @@ const appContent = {
   content: {
     viteLogo: t({
       en: "Vite logo",
-      fr: "Логотип Vite",
-      es: "Логотип Vite",
+      fr: "Logo Vite",
+      es: "Logo Vite",
     }),
     preactLogo: t({
       en: "Preact logo",
-      fr: "Логотип Preact",
-      es: "Логотип Preact",
+      fr: "Logo Preact",
+      es: "Logo Preact",
     }),
 
     title: "Vite + Preact",
@@ -299,8 +312,8 @@ const appContent = {
     }),
 
     readTheDocs: t({
-      en: "Нажмите на логотипы Vite и Preact, чтобы узнать больше",
-      fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
+      en: "Click on the Vite and Preact logos to learn more",
+      fr: "Cliqueз 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",
     }),
   },
@@ -311,19 +324,19 @@ export default appContent;
 
 ```javascript fileName="src/app.content.cjs" contentDeclarationFormat="commonjs"
 const { t } = require("intlayer");
-// const { h } = require('preact'); // Нужно, если вы используете JSX напрямую в .cjs
+// const { h } = require('preact'); // Требуется, если вы используете JSX напрямую в .cjs
 
 /** @type {import('intlayer').Dictionary} */
 const appContent = {
   key: "app",
   content: {
     viteLogo: t({
-      en: "Логотип Vite",
+      en: "Vite logo",
       fr: "Logo Vite",
       es: "Logo Vite",
     }),
     preactLogo: t({
-      en: "Логотип Preact",
+      en: "Preact logo",
       fr: "Logo Preact",
       es: "Logo Preact",
     }),
@@ -334,21 +347,18 @@ const appContent = {
       en: "count is ",
       fr: "le compte est ",
       es: "el recuento es ",
-      ru: "счётчик равен ",
     }),
 
     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",
-      ru: "Отредактируйте 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",
-      ru: "Нажмите на логотипы Vite и Preact, чтобы узнать больше",
     }),
   },
 };
@@ -366,8 +376,7 @@ module.exports = appContent;
       "translation": {
         "en": "Vite logo",
         "fr": "Logo Vite",
-        "es": "Logo Vite",
-        "ru": "Логотип Vite" // комментарий: перевод для русского языка
+        "es": "Logo Vite"
       }
     },
     "preactLogo": {
@@ -375,8 +384,7 @@ module.exports = appContent;
       "translation": {
         "en": "Preact logo",
         "fr": "Logo Preact",
-        "es": "Logo Preact",
-        "ru": "Логотип Preact" // комментарий: перевод для русского языка
+        "es": "Logo Preact"
       }
     },
     "title": {
@@ -384,8 +392,7 @@ module.exports = appContent;
       "translation": {
         "en": "Vite + Preact",
         "fr": "Vite + Preact",
-        "es": "Vite + Preact",
-        "ru": "Vite + Preact" // комментарий: название технологии не переводится
+        "es": "Vite + Preact"
       }
     },
     "count": {
@@ -393,8 +400,7 @@ module.exports = appContent;
       "translation": {
         "en": "count is ",
         "fr": "le compte est ",
-        "es": "el recuento es ",
-        "ru": "счётчик равен " // комментарий: перевод для русского языка
+        "es": "el recuento es "
       }
     },
     "edit": {
@@ -402,8 +408,7 @@ module.exports = appContent;
       "translation": {
         "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",
-        "ru": "Отредактируйте src/app.tsx и сохраните, чтобы проверить HMR"
+        "es": "Edita src/app.tsx y guarda para probar HMR"
       }
     },
     "readTheDocs": {
@@ -411,21 +416,20 @@ module.exports = appContent;
       "translation": {
         "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",
-        "ru": "Нажмите на логотипы Vite и Preact, чтобы узнать больше"
+        "es": "Haga clic en los logotipos de Vite y Preact para obtener más información"
       }
     }
   }
 }
 ```
 
-> Ваши объявления контента могут быть определены в любом месте вашего приложения, как только они будут включены в каталог `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/ru/dictionary/get_started.md).
+> Подробнее см. в [документации по объявлению контента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md).
 
-> Если ваш файл контента содержит код TSX, возможно, вам потребуется импортировать `import { h } from "preact";` или убедиться, что ваш JSX pragma правильно настроен для Preact.
+> Если ваш файл контента содержит код TSX, вам может потребоваться импортировать `import { h } from "preact";` или убедиться, что ваша JSX прагма правильно настроена для Preact.
 
-### Шаг 5: Используйте Intlayer в вашем коде
+### Шаг 5: Использование Intlayer в коде
 
 Получайте доступ к вашим словарям контента по всему приложению:
 
@@ -463,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>
     </>
   );
@@ -571,7 +581,7 @@ const App = () => (
 module.exports = App;
 ```
 
-> Если вы хотите использовать ваш контент в атрибуте типа `string`, таком как `alt`, `title`, `href`, `aria-label` и т.д., вы должны вызвать значение функции, например:
+> Если вы хотите использовать свой контент в строковом атрибуте, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы должны вызвать значение функции, например:
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
@@ -579,11 +589,11 @@ module.exports = App;
 
 > Примечание: В Preact `className` обычно пишется как `class`.
 
-> Чтобы узнать больше о хуке `useIntlayer`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useIntlayer.md) (API аналогично для `preact-intlayer`).
+> Чтобы узнать больше о хуке `useIntlayer`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useIntlayer.md) (API для `preact-intlayer` аналогично).
 
-### (Необязательно) Шаг 6: Изменение языка вашего контента
+### (Необязательно) Шаг 6: Изменение языка контента
 
-Для изменения языка вашего контента вы можете использовать функцию `setLocale`, предоставляемую хуком `useLocale`. Эта функция позволяет установить локаль приложения и обновить контент соответственно.
+Для изменения языка контента вы можете использовать функцию `setLocale`, предоставляемую хуком `useLocale`. Эта функция позволяет установить локаль приложения и обновить контент соответствующим образом.
 
 ```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
 import type { FunctionalComponent } from "preact";
@@ -595,7 +605,7 @@ const LocaleSwitcher: FunctionalComponent = () => {
 
   return (
     <button onClick={() => setLocale(Locales.ENGLISH)}>
-      Изменить язык на английский
+      Change Language to English
     </button>
   );
 };
@@ -612,7 +622,7 @@ const LocaleSwitcher = () => {
 
   return (
     <button onClick={() => setLocale(Locales.ENGLISH)}>
-      Изменить язык на английский
+      Change Language to English
     </button>
   );
 };
@@ -629,7 +639,7 @@ const LocaleSwitcher = () => {
 
   return (
     <button onClick={() => setLocale(Locales.ENGLISH)}>
-      Изменить язык на английский
+      Change Language to English
     </button>
   );
 };
@@ -637,11 +647,11 @@ const LocaleSwitcher = () => {
 module.exports = LocaleSwitcher;
 ```
 
-> Чтобы узнать больше о хуке `useLocale`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md) (API аналогично для `preact-intlayer`).
+> Чтобы узнать больше о хуке `useLocale`, обратитесь к [документации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md) (API для `preact-intlayer` аналогично).
 
 ### (Необязательно) Шаг 7: Добавьте локализованную маршрутизацию в ваше приложение
 
-Цель этого шага - создать уникальные маршруты для каждого языка. Это полезно для SEO и URL, дружественных к SEO.
+Цель этого шага — создать уникальные маршруты для каждого языка. Это полезно для SEO и создания дружественных к поисковым системам URL.
 Пример:
 
 ```plaintext
@@ -650,142 +660,15 @@ module.exports = LocaleSwitcher;
 - https://example.com/fr/about
 ```
 
-> По умолчанию маршруты не имеют префикса для локали по умолчанию. Если вы хотите добавить префикс для локали по умолчанию, вы можете установить опцию `middleware.prefixDefault` в значение `true` в вашей конфигурации. Подробнее смотрите в [документации по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md).
-
-Чтобы добавить локализованную маршрутизацию в ваше приложение, вы можете создать компонент `LocaleRouter`, который обернет маршруты вашего приложения и будет обрабатывать маршрутизацию на основе локали. Вот пример с использованием [preact-iso](https://github.com/preactjs/preact-iso):
+> По умолчанию маршруты не имеют префикса для основной локали. Если вы хотите добавить префикс для основной локали, вы можете установить опцию `routing.mode` в значение `"prefix-all"` в вашей конфигурации. См. [документацию по конфигурации](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/configuration.md) для получения дополнительной информации.
 
-Сначала установите `preact-iso`:
-
-```bash packageManager="npm"
-npm install preact-iso
-npx intlayer init
-```
-
-```bash packageManager="pnpm"
-pnpm add preact-iso
-pnpm intlayer init
-```
-
-```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;
-};
-
-/**
-/**
- * Компонент, который обрабатывает локализацию и оборачивает дочерние элементы в соответствующий контекст локали.
- * Он управляет определением и проверкой локали на основе 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 установлено в true, префикс с локалью по умолчанию должен всегда использоваться.
-   */
-  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 равно false, префикс локали по умолчанию не используется.
-     * Убедитесь, что текущая локаль действительна и не является локалью по умолчанию.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // Исключить локаль по умолчанию
-        )
-        .includes(currentLocale) // Проверить, входит ли текущая локаль в список допустимых локалей
-    ) {
-      // Перенаправить на путь без префикса локали
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Обернуть дочерние элементы в IntlayerProvider и установить текущую локаль
-    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>
-  );
-};
+import { LocationProvider, Router, Route } from "preact-iso";
+import type { ComponentChildren, FunctionalComponent } from "preact";
 
 /**
  * Компонент маршрутизатора, который настраивает маршруты с учетом локали.
@@ -795,120 +678,27 @@ 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 равно true, префикс локали по умолчанию всегда должен присутствовать.
-   */
-  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 равно false, локаль по умолчанию не префиксируется.
-     * Убедитесь, что текущая локаль валидна и не является локалью по умолчанию.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // Исключить локаль по умолчанию
-        )
-        .includes(currentLocale) // Проверить, входит ли текущая локаль в список допустимых локалей
-    ) {
-      // Перенаправить на путь без префикса локали
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Обернуть дочерние элементы в IntlayerProvider и установить текущую локаль
-    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";
 
 /**
  * Компонент маршрутизатора, который настраивает маршруты с учетом локали.
@@ -916,143 +706,61 @@ const RouterContent = ({ children }) => {
  */
 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;
-};
-
-/**
- * Компонент, который обрабатывает локализацию и оборачивает дочерние элементы в соответствующий контекст локали.
- * Управляет определением и проверкой локали на основе 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 равно true, префикс локали по умолчанию всегда должен присутствовать.
-   */
-  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 равно false, префикс для локали по умолчанию не используется.
-     * Убедиться, что текущая локаль действительна и не является локалью по умолчанию.
-     */
-    if (
-      currentLocale.toString() !== defaultLocale.toString() &&
-      !locales
-        .filter(
-          (loc) => loc.toString() !== defaultLocale.toString() // Исключить локаль по умолчанию
-        )
-        .includes(currentLocale) // Проверяем, находится ли текущая локаль в списке допустимых локалей
-    ) {
-      // Перенаправляем на путь без префикса локали
-      return <Navigate to={`${pathWithoutLocale}${search}`} replace />;
-    }
-
-    // Оборачиваем дочерние элементы в IntlayerProvider и устанавливаем текущую локаль
-    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>
-  );
-};
+const { LocationProvider, Router, Route } = require("preact-iso");
 
 /**
  * Компонент маршрутизатора, который настраивает маршруты с учетом локали.
  * Использует preact-iso для управления навигацией и рендеринга локализованных компонентов.
  */
-const LocaleRouter = ({ children }) => (
-  <LocationProvider>
-    <RouterContent>{children}</RouterContent>
-  </LocationProvider>
-);
+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),
+          })
+        )
+    )
+  );
 
 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"
-import { LocaleRouter } from "./components/LocaleRouter";
-import type { FunctionalComponent } from "preact";
-// ... Ваш компонент AppContent (определённый на Шаге 5)
+
+// ... Ваш компонент AppContent
 
 const App: FunctionalComponent = () => (
   <LocaleRouter>
@@ -1065,7 +773,8 @@ export default App;
 
 ```jsx fileName="src/app.jsx" codeFormat="esm"
 import { LocaleRouter } from "./components/LocaleRouter";
-// ... Ваш компонент AppContent (определённый на Шаге 5)
+
+// ... Ваш компонент AppContent
 
 const App = () => (
   <LocaleRouter>
@@ -1078,7 +787,8 @@ export default App;
 
 ```jsx fileName="src/app.cjsx" codeFormat="commonjs"
 const { LocaleRouter } = require("./components/LocaleRouter");
-// ... Ваш компонент AppContent (определённый на Шаге 5)
+
+// ... Ваш компонент AppContent
 
 const App = () => (
   <LocaleRouter>
@@ -1089,47 +799,12 @@ const App = () => (
 module.exports = App;
 ```
 
-Параллельно вы также можете использовать `intlayerProxy` для добавления маршрутизации на стороне сервера в ваше приложение. Этот плагин автоматически определит текущую локаль на основе URL и установит соответствующее cookie с локалью. Если локаль не указана, плагин определит наиболее подходящую локаль на основе языковых предпочтений браузера пользователя. Если локаль не будет обнаружена, произойдет перенаправление на локаль по умолчанию.
-
-```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 при смене локали
+### (Необязательно) Шаг 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,
@@ -1140,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)
     },
   });
 
@@ -1159,30 +833,30 @@ 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) => {
               e.preventDefault();
               setLocale(localeItem);
-              // Программная навигация после установки локали будет обработана в onLocaleChange
+              // Программная навигация после смены локали будет обработана в onLocaleChange
             }}
             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>
@@ -1196,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,
@@ -1204,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);
     },
   });
@@ -1222,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) => {
@@ -1250,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,
@@ -1258,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)
+          )
+        )
+      )
+    )
   );
 };
 
@@ -1305,40 +983,21 @@ module.exports = LocaleSwitcher;
 
 > Ссылки на документацию:
 >
-> > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md) (API аналогично для `preact-intlayer`)
-> > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getLocaleName.md)
-> > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getLocalizedUrl.md)
-> > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getHTMLTextDir.md)
-> > - Атрибут [`hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ru)
-> > - Атрибут [`lang`](https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/lang)
-> > - Атрибут [`dir`](https://developer.mozil
-> > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md) (API аналогично для `preact-intlayer`)
-> > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getLocaleName.md)
-> > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getLocalizedUrl.md)
-> > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getHTMLTextDir.md)
-> > - Атрибут [`hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ru)
-> > - Атрибут [`lang`](https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/lang)
-> > - Атрибут [`dir`](https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/dir)
-> > - Атрибут [`aria-current`](https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-> > - [API Popover](https://developer.mozilla.org/ru/docs/Web/API/Popover_API) la.org/en-US/docs/Web/HTML/Global_attributes/dir)> - [`aria-current` атрибут](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)> - [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
-
-Ниже приведён обновлённый **Шаг 9** с дополнительными пояснениями и уточнёнными примерами кода:
+> > - [Хук `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/react-intlayer/useLocale.md) (API для `preact-intlayer` аналогично)> - [Хук `getLocaleName`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getLocaleName.md)> - [Хук `getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getLocalizedUrl.md)> - [Хук `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/packages/intlayer/getHTMLTextDir.md)> - [Атрибут `hreflang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=ru)> - [Атрибут `lang`](https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/lang)> - [Атрибут `dir`](https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/dir)> - [Атрибут `aria-current`](https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA/Attributes/aria-current)> - [Popover API](https://developer.mozilla.org/ru/docs/Web/API/Popover_API)
 
----
-
-### (Необязательно) Шаг 9: Переключение атрибутов языка и направления в HTML
+### (Необязательно) Шаг 9: Переключайте атрибуты языка и направления HTML
 
 Когда ваше приложение поддерживает несколько языков, крайне важно обновлять атрибуты `lang` и `dir` тега `<html>`, чтобы они соответствовали текущей локали. Это обеспечивает:
 
-- **Доступность**: Экранные читалки и вспомогательные технологии полагаются на правильный атрибут `lang` для корректного произношения и интерпретации контента.
-- **Отображение текста**: Атрибут `dir` (направление) гарантирует, что текст отображается в правильном порядке (например, слева направо для английского, справа налево для арабского или иврита), что важно для удобочитаемости.
-- **SEO**: Поисковые системы используют атрибут `lang` для определения языка вашей страницы, что помогает показывать правильный локализованный контент в результатах поиска.
+- **Доступность**: Экранные дикторы и вспомогательные технологии полагаются на правильный атрибут `lang` для точного произношения и интерпретации контента.
+- **Отображение текста**: Атрибут `dir` (direction) гарантирует, что текст отображается в правильном порядке (например, слева направо для английского, справа налево для арабского или иврита), что важно для удобочитаемости.
+- **SEO**: Поисковые системы используют атрибут `lang` для определения языка вашей страницы, помогая показывать правильный локализованный контент в результатах поиска.
 
-Обновляя эти атрибуты динамически при смене локали, вы обеспечиваете последовательный и доступный опыт для пользователей на всех поддерживаемых языках.
+Обновляя эти атрибуты динамически при изменении локали, вы гарантируете согласованный и доступный опыт для пользователей на всех поддерживаемых языках.
 
 #### Реализация хука
 
-Создайте пользовательский хук для управления атрибутами HTML. Хук отслеживает изменения локали и обновляет атрибуты соответствующим образом:
+Создайте пользовательский хук для управления атрибутами HTML. Хук прослушивает изменения локали и соответствующим образом обновляет атрибуты:
 
 ```tsx fileName="src/hooks/useI18nHTMLAttributes.tsx" codeFormat="typescript"
 import { useEffect } from "preact/hooks";
@@ -1346,11 +1005,11 @@ import { useLocale } from "preact-intlayer";
 import { getHTMLTextDir } from "intlayer";
 
 /**
- * Обновляет атрибуты `lang` и `dir` элемента <html> в зависимости от текущей локали.
+ * Обновляет атрибуты `lang` и `dir` HTML-элемента <html> на основе текущей локали.
  * - `lang`: Информирует браузеры и поисковые системы о языке страницы.
  * - `dir`: Обеспечивает правильный порядок чтения (например, 'ltr' для английского, 'rtl' для арабского).
  *
- * Динамическое обновление необходимо для правильного отображения текста, доступности и SEO.
+ * Это динамическое обновление необходимо для правильного отображения текста, доступности и SEO.
  */
 export const useI18nHTMLAttributes = () => {
   const { locale } = useLocale();
@@ -1359,7 +1018,7 @@ export const useI18nHTMLAttributes = () => {
     // Обновляет атрибут языка на текущую локаль.
     document.documentElement.lang = locale;
 
-    // Устанавливает направление текста в зависимости от текущей локали.
+    // Устанавливает направление текста на основе текущей локали.
     document.documentElement.dir = getHTMLTextDir(locale);
   }, [locale]);
 };
@@ -1371,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();
@@ -1389,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();
@@ -1405,7 +1064,7 @@ module.exports = { useI18nHTMLAttributes };
 
 #### Использование хука в вашем приложении
 
-Интегрируйте хук в ваш главный компонент, чтобы атрибуты HTML обновлялись при каждом изменении локали:
+Интегрируйте хук в свой основной компонент, чтобы атрибуты HTML обновлялись при каждом изменении локали:
 
 ```tsx fileName="src/app.tsx" codeFormat="typescript"
 import type { FunctionalComponent } from "preact";
@@ -1418,7 +1077,7 @@ const AppWithHooks: FunctionalComponent = () => {
   // Применяем хук для обновления атрибутов lang и dir тега <html> в зависимости от локали.
   useI18nHTMLAttributes();
 
-  // Предполагается, что AppContent - это ваш основной компонент отображения контента из Шага 5
+  // Предполагается, что AppContent — это ваш основной компонент отображения контента из Шага 5
   return <AppContent />;
 };
 
@@ -1471,34 +1130,26 @@ const App = () => (
 module.exports = App;
 ```
 
-Применяя эти изменения, ваше приложение будет:
-
-- Обеспечивать корректное отражение текущей локали в атрибуте **языка** (`lang`), что важно для SEO и поведения браузера.
-- Настраивать **направление текста** (`dir`) в соответствии с локалью, улучшая читаемость и удобство использования для языков с разным порядком чтения.
-- Обеспечить более **доступный** опыт, так как вспомогательные технологии зависят от этих атрибутов для оптимальной работы.
+### (Необязательно) Шаг 10: Создание компонента локализованной ссылки
 
-### (Необязательно) Шаг 10: Создание локализованного компонента Link
-
-Чтобы гарантировать, что навигация вашего приложения учитывает текущую локаль, вы можете создать пользовательский компонент `Link`. Этот компонент автоматически добавляет префикс текущего языка к внутренним URL.
+Чтобы навигация в вашем приложении учитывала текущую локаль, вы можете создать пользовательский компонент `Link`. Этот компонент автоматически добавляет префикс текущего языка к внутренним URL.
 
 Это поведение полезно по нескольким причинам:
 
-- **SEO и пользовательский опыт**: Локализованные URL помогают поисковым системам правильно индексировать страницы на разных языках и предоставлять пользователям контент на предпочитаемом языке.
-- **Последовательность**: Используя локализованную ссылку во всем приложении, вы гарантируете, что навигация останется в пределах текущей локали, предотвращая неожиданные переключения языка.
+- **SEO и пользовательский опыт**: Локализованные 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"; // Для передачи ref
+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; // Необязательно: для замены состояния истории
 }
 
 /**
@@ -1509,173 +1160,158 @@ export const checkIsExternalLink = (href?: string): boolean =>
   /^https?:\/\//.test(href ?? "");
 
 /**
- * Кастомный компонент Link, который адаптирует атрибут 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) {
-          // Переходить только если URL отличается
-          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
 
+/**
+ * Вспомогательная функция для проверки, является ли данный URL внешним.
+ * Если URL начинается с http:// или https://, он считается внешним.
+ */
 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, если ссылка внутренняя
-    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);
-        }
-      }
-    };
+/**
+ * Пользовательский компонент 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
+  );
+});
 
-    return (
-      <a href={hrefI18n} ref={ref} onClick={handleClick} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
+Link.displayName = "Link";
 
-module.exports = { LocalizedLink, checkIsExternalLink };
+module.exports = { Link, checkIsExternalLink };
 ```
 
 #### Как это работает
 
 - **Определение внешних ссылок**:  
-  Вспомогательная функция `checkIsExternalLink` определяет, является ли URL внешним. Внешние ссылки остаются без изменений.
+  Вспомогательная функция `checkIsExternalLink` определяет, является ли URL внешним. Внешние ссылки остаются без изменений, так как они не нуждаются в локализации.
 - **Получение текущей локали**:  
-  Хук `useLocale` предоставляет текущую локаль.
+  Хук `useLocale` предоставляет текущую локаль (например, `fr` для французского).
 - **Локализация URL**:  
-  Для внутренних ссылок функция `getLocalizedUrl` добавляет префикс текущей локали к URL.
-- **Навигация на стороне клиента**:
-  Функция `handleClick` проверяет, является ли ссылка внутренней и нужно ли предотвратить стандартную навигацию. Если да, она использует функцию `route` из `preact-iso` (полученную через `useLocation` или импортированную напрямую) для выполнения навигации на стороне клиента. Это обеспечивает поведение, похожее на SPA, без полной перезагрузки страницы.
+  Для внутренних ссылок (т. е. не внешних) используется `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)
 
 ![Translation error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-Убедитесь, что ваша конфигурация TypeScript включает автоматически сгенерированные типы.
+Убедитесь, что ваша конфигурация TypeScript включает автоматически генерируемые типы.
 
 ```json5 fileName="tsconfig.json"
 {
@@ -1688,43 +1324,43 @@ Intlayer использует расширение модулей (module augmen
   },
   "include": [
     // ... Ваши существующие конфигурации TypeScript
-    ".intlayer/**/*.ts", // Включить автоматически сгенерированные типы
+    ".intlayer/**/*.ts", // Включить автоматически генерируемые типы
   ],
 }
 ```
 
-> Убедитесь, что ваш `tsconfig.json` настроен для Preact, особенно параметры `jsx` и `jsxImportSource` или `jsxFactory`/`jsxFragmentFactory` для старых версий Preact, если вы не используете настройки по умолчанию `preset-vite`.
+> Убедитесь, что ваш `tsconfig.json` настроен для Preact, особенно `jsx` и `jsxImportSource` или `jsxFactory`/`jsxFragmentFactory` для старых версий Preact, если вы не используете настройки по умолчанию `preset-vite`.
 
 ### Конфигурация Git
 
-Рекомендуется игнорировать файлы, сгенерированные Intlayer. Это позволит избежать их коммита в ваш Git-репозиторий.
+Рекомендуется игнорировать файлы, генерируемые Intlayer. Это позволит избежать их фиксации в вашем Git-репозитории.
 
-Чтобы сделать это, вы можете добавить следующие инструкции в ваш файл `.gitignore`:
+Для этого вы можете добавить следующие инструкции в ваш файл `.gitignore`:
 
 ```plaintext
-# Игнорировать файлы, сгенерированные Intlayer
+# Игнорировать файлы, генерируемые Intlayer
 .intlayer
 ```
 
 ### Расширение VS Code
 
-Для улучшения вашего опыта разработки с Intlayer вы можете установить официальное **расширение Intlayer для VS Code**.
+Для улучшения опыта разработки с Intlayer вы можете установить официальное **расширение Intlayer для VS Code**.
 
-[Установить из магазина расширений VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[Установить из VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
 Это расширение предоставляет:
 
-- **Автозаполнение** ключей переводов.
+- **Автодополнение** ключей перевода.
 - **Обнаружение ошибок в реальном времени** для отсутствующих переводов.
-- **Встроенный просмотр** переведенного контента.
+- **Встроенный предпросмотр** переведенного контента.
 - **Быстрые действия** для удобного создания и обновления переводов.
 
-Для получения дополнительной информации о том, как использовать расширение, обратитесь к [документации по расширению Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
+Для получения более подробной информации о том, как использовать расширение, обратитесь к [документации по расширению Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
-### Продвинутые возможности
+### Продвигайтесь дальше
 
-Для расширения возможностей вы можете реализовать [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md) или вынести ваш контент с помощью [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
+Чтобы продвинуться дальше, вы можете реализовать [визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_visual_editor.md) или вынести ваш контент вовне с помощью [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/intlayer_CMS.md).
 
 ---