@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/ru/formatters.md

@@ -48,46 +48,16 @@ Intlayer предоставляет набор лёгких помощников
 
 ## Кешированный Intl
 
-Экспортируемый `Intl`, это тонкая кешированная обёртка вокруг глобального `Intl`. Он мемоизирует экземпляры `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator` и `PluralRules`, что позволяет избежать повторного создания одного и того же форматтера.
-
 Поскольку создание форматтера относительно дорогостоящее, такое кеширование улучшает производительность без изменения поведения. Обёртка предоставляет тот же API, что и нативный `Intl`, поэтому использование идентично.
 
-- Кеширование происходит на уровне процесса и прозрачно для вызывающих.
-
 > Если `Intl.DisplayNames` недоступен в среде, выводится одно предупреждение только для разработчиков (рекомендуется использовать полифилл).
 
 Примеры:
 
-```ts
-import { Intl } from "intlayer";
-
-// Форматирование чисел
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// Отображение названий языков, регионов и т.д.
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// Сортировка с учётом локали
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0 (равны)
-
-// Правила множественного числа
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## React Formatters
 
 ### `Intl.DisplayNames`
 
-Для локализованных названий языков, регионов, валют и систем письма:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -116,8 +86,6 @@ regionNames.of("US"); // "États-Unis"
 
 ### `Intl.Collator`
 
-Для локализованного сравнения и сортировки строк:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -149,8 +117,6 @@ pluralRules.select(11); // "many"
 
 ### `getLocaleName(displayLocale, targetLocale?)`
 
-Получает локализованное название локали на другом языке:
-
 ```ts
 import { getLocaleName } from "intlayer";
 
@@ -159,9 +125,6 @@ getLocaleName("en", "fr"); // "anglais"
 getLocaleName("de", "es"); // "alemán"
 ```
 
-- **displayLocale**: Локаль, для которой нужно получить название
-- **targetLocale**: Локаль, на которой будет отображаться название (по умолчанию displayLocale)
-
 ### Доступные Composables
 
 Все composables возвращают computed refs, которые автоматически используют локаль из внедренного `IntlayerProvider`.
@@ -258,8 +221,6 @@ const languageName = displayNames.of("fr");
 
 ### `getLocaleLang(locale?)`
 
-Извлекает код языка из строки локали:
-
 ```ts
 import { getLocaleLang } from "intlayer";
 
@@ -268,8 +229,6 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: Локаль, из которой нужно извлечь язык (по умолчанию текущая локаль)
-
 ### Функции форматирования
 
 #### `number(value, options?)`
@@ -457,13 +416,6 @@ pluralRules.select(11); // "many"
 
 ### `percentage(value, options?)`
 
-Форматирует число в строку с процентами.
-
-Поведение: значения больше 1 интерпретируются как целые проценты и нормализуются (например, `25` → `25%`, `0.25` → `25%`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-
 Примеры:
 
 ```ts
@@ -476,12 +428,6 @@ percentage(0.237, { minimumFractionDigits: 1 }); // "23.7%"
 
 ### `currency(value, options?)`
 
-Форматирует значение как локализованную валюту. По умолчанию используется `USD` с двумя десятичными знаками.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Общие поля: `currency` (например, `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
-
 Примеры:
 
 ```ts
@@ -493,12 +439,6 @@ currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); //
 
 ### `date(date, optionsOrPreset?)`
 
-Форматирует значение даты/времени с помощью `Intl.DateTimeFormat`.
-
-- **date**: `Date | string | number`
-- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` или один из предустановленных вариантов:
-  - Предустановки: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
-
 Примеры:
 
 ```ts
@@ -510,14 +450,6 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
 
 ### `relativeTime(from, to = new Date(), options?)`
 
-Форматирует относительное время между двумя моментами с помощью `Intl.RelativeTimeFormat`.
-
-- Передайте "now" в качестве первого аргумента и целевой момент вторым, чтобы получить естественную формулировку.
-- **from**: `Date | string | number`
-- **to**: `Date | string | number` (по умолчанию `new Date()`)
-- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
-  - По умолчанию `unit` равен `"second"`.
-
 Примеры:
 
 ```ts
@@ -533,13 +465,6 @@ relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "2 час
 
 ### `units(value, options?)`
 
-Форматирует числовое значение как локализованную строку с единицей измерения, используя `Intl.NumberFormat` с `style: 'unit'`.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Общие поля: `unit` (например, `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
-  - Значения по умолчанию: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
-
 Примеры:
 
 ```ts
@@ -551,11 +476,6 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (зависи
 
 ### `compact(value, options?)`
 
-Форматирует число с использованием компактной нотации (например, `1.2K`, `1M`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (использует `notation: 'compact'` под капотом)
-
 Примеры:
 
 ```ts
@@ -569,13 +489,6 @@ compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 
 ### `list(values, options?)`
 
-Форматирует массив значений в локализованную строку списка с использованием `Intl.ListFormat`.
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - Общие поля: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
-  - Значения по умолчанию: `type: 'conjunction'`, `style: 'long'`
-
 Примеры:
 
 ```ts
@@ -590,56 +503,6 @@ list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 
 Клиентские компоненты:
 
-```tsx
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/format";
-// или в приложениях Next.js
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/client/format";
-
-const MyComponent = () => {
-  const number = useNumber();
-  const currency = useCurrency();
-  const date = useDate();
-  const percentage = usePercentage();
-  const compact = useCompact();
-  const list = useList();
-  const relativeTime = useRelativeTime();
-  const unit = useUnit();
-
-  return (
-    <div>
-      <p>{number(123456.789)}</p>
-      <p>{currency(1234.5, { currency: "EUR" })}</p>
-      <p>{date(new Date(), "short")}</p>
-      <p>{percentage(0.25)}</p>
-      <p>{compact(1200)}</p>
-      <p>{list(["apple", "banana", "orange"])}</p>
-      <p>{relativeTime(new Date(), new Date() + 1000)}</p>
-      <p>{unit(123456.789, { unit: "kilometer" })}</p>
-    </div>
-  );
-};
-```
-
-Серверные компоненты (или React Server runtime):
-
 ```ts
 import {
   useNumber,
@@ -664,27 +527,8 @@ import {
 } from "next-intlayer/server/format";
 ```
 
-> Эти хуки будут учитывать локаль из `IntlayerProvider` или `IntlayerServerProvider`
-
 ### Vue
 
-Клиентские компоненты:
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "vue-intlayer/format";
-```
-
-> Эти композиции будут учитывать локаль из внедренного `IntlayerProvider`
-
 Компоненты клиента:
 
 ```ts
@@ -700,8 +544,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> Эти композиционные функции будут учитывать локаль из внедренного `IntlayerProvider`
-
 ## Примечания
 
 - Все вспомогательные функции принимают входные данные типа `string`; они внутренне преобразуются в числа или даты.

package/docs/ru/how_works_intlayer.md

@@ -61,7 +61,9 @@ author: aymericzip
    - Словари генерируются из файлов контента. По умолчанию словари Intlayer генерируются в директории `.intlayer/dictionaries` проекта.
    - Эти словари генерируются в различных форматах, чтобы удовлетворить все потребности и оптимизировать производительность приложения.
 
-3. Генерация типов словарей
+3. Генерация типов словаря
+
+4. Генерация типов словарей
    На основе ваших `словарей` Intlayer будет генерировать типы, чтобы сделать их пригодными для использования в вашем приложении.
 
 - Типы словарей генерируются из `файлов декларации контента` Intlayer. По умолчанию типы словарей Intlayer генерируются в директории `.intlayer/types` проекта.
@@ -98,6 +100,9 @@ Intlayer также предоставляет визуальный редакт
 
 ![визуальный редактор](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
 
+- Сервер — это простое приложение Express, которое прослушивает запросы от клиента и получает содержимое вашего приложения, такое как `dictionaries` и конфигурация, чтобы сделать его доступным на стороне клиента.
+- С другой стороны, клиент — это приложение React, которое используется для взаимодействия с вашим содержимым через визуальный интерфейс.
+
 - Сервер - это простое приложение на Express, которое прослушивает запросы от клиента и получает контент вашего приложения, такой как `dictionaries` и конфигурация, чтобы сделать его доступным на стороне клиента.
 - С другой стороны, клиент - это приложение на React, которое используется для взаимодействия с вашим контентом через визуальный интерфейс.
   Когда вы вызываете ваш контент с помощью `useIntlayer` и редактор включен, строки автоматически оборачиваются в объект Proxy с именем `IntlayerNode`. Этот узел использует `window.postMessage` для связи с обернутым iframe, содержащим интерфейс визуального редактора.  
@@ -105,6 +110,8 @@ Intlayer также предоставляет визуальный редакт
 
 ## Оптимизация сборки приложения
 
+Чтобы оптимизировать размер bundle вашего приложения, Intlayer предоставляет два плагина для оптимизации сборки вашего приложения: плагины `@intlayer/babel` и `@intlayer/swc`.
+
 Для оптимизации размера сборки вашего приложения Intlayer предоставляет два плагина для оптимизации сборки: плагины `@intlayer/babel` и `@intlayer/swc`.
 Плагины Babel и SWC работают, анализируя абстрактное синтаксическое дерево (AST) вашего приложения, чтобы заменить вызовы функций Intlayer на оптимизированный код. Этот процесс делает финальный бандл легче в продакшене, гарантируя, что импортируются только действительно используемые словари, оптимизируя разбиение на чанки и уменьшая размер сборки.
 

package/docs/ru/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+С флагом `--with` вы можете запустить редактор параллельно с другой командой:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## Конфигурация
 
 В вашем файле конфигурации Intlayer вы можете настроить параметры редактора:
@@ -146,6 +156,8 @@ export default config;
 
    > **Обратите внимание, что ваше приложение должно работать параллельно.** URL приложения должен совпадать с тем, который вы указали в конфигурации редактора (`applicationURL`).
 
+> **Учтите, что команда переэкспортируется пакетом `intlayer`. Вместо этого вы можете использовать `npx intlayer editor start`.**
+
 2. Затем откройте предоставленный URL. По умолчанию `http://localhost:8000`.
 
    Вы можете просмотреть каждое поле, индексированное Intlayer, наведя курсор на ваш контент.

package/docs/ru/intlayer_with_adonisjs.md

@@ -257,9 +257,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... Другие параметры конфигурации
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/ru/intlayer_with_astro.md

@@ -122,6 +122,30 @@ Intlayer — это больше, чем просто решение i18n. Он
 
 Установите необходимые пакеты с помощью вашего менеджера пакетов:
 
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> флаг `--interactive` необязателен. Используйте `intlayer-cli init`, если вы AI-агент.
+
+> Эта команда обнаружит вашу среду и установит необходимые пакеты. Например:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+```
+
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
 # Опционально: добавить поддержку островов React

package/docs/ru/intlayer_with_astro_lit.md

@@ -127,6 +127,18 @@ npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 npx intlayer init
 ```
 
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
 > Если вы хотите использовать свой контент в атрибуте `строки`, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции, например:
 
 > ```html
@@ -135,6 +147,10 @@ npx intlayer init
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
+```bash packageManager="npm"
+npm install intlayer astro-intlayer lit lit-intlayer @astrojs/lit
+```
+
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 
@@ -328,6 +344,14 @@ const { greeting } = getIntlayer("lit-demo", locale);
 </script>
 ```
 
+> Если вы хотите использовать ваше содержимое в атрибуте `string`, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции, например:
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **Примечание по конфигурации маршрутизации:**
 > Структура каталогов, которую вы используете, зависит от настройки `middleware.routing` в вашем `intlayer.config.ts`:
 >

package/docs/ru/intlayer_with_astro_preact.md

@@ -126,6 +126,18 @@ npm install intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 npx intlayer init
 ```
 
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
 > Если вы хотите использовать свой контент в атрибуте `строки`, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции, например:
 
 > ```html
@@ -134,6 +146,10 @@ npx intlayer init
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
+```bash packageManager="npm"
+npm install intlayer astro-intlayer preact preact-intlayer @astrojs/preact
+```
+
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 
@@ -322,6 +338,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> Если вы хотите использовать ваш контент в атрибуте `string`, например `alt`, `title`, `href`, `aria-label` и т.д., вы можете использовать значение функции, например:
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **Примечание по конфигурации маршрутизации:**
 > Структура каталогов, которую вы используете, зависит от настройки `middleware.routing` в вашем `intlayer.config.ts`:
 >

package/docs/ru/intlayer_with_astro_react.md

@@ -129,6 +129,18 @@ npm install intlayer astro-intlayer react react-dom react-intlayer @astrojs/reac
 npx intlayer init
 ```
 
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
 > Если вы хотите использовать свой контент в атрибуте `строки`, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции, например:
 
 > ```html
@@ -137,6 +149,10 @@ npx intlayer init
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
+```bash packageManager="npm"
+npm install intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
+```
+
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 
@@ -323,6 +339,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> Если вы хотите использовать ваш контент в `string` атрибуте, например `alt`, `title`, `href`, `aria-label` и т.д., вы можете использовать значение функции, например:
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **Примечание по конфигурации маршрутизации:**
 > Структура каталогов, которую вы используете, зависит от настройки `middleware.routing` в вашем `intlayer.config.ts`:
 >

package/docs/ru/intlayer_with_astro_solid.md

@@ -126,6 +126,18 @@ npm install intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
 npx intlayer init
 ```
 
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
 > Если вы хотите использовать свой контент в атрибуте `строки`, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции, например:
 
 > ```html
@@ -134,6 +146,10 @@ npx intlayer init
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
+```bash packageManager="npm"
+npm install intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
+```
+
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
 
@@ -319,6 +335,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> Если вы хотите использовать ваш контент в атрибуте `string`, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции, например:
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **Примечание по конфигурации маршрутизации:**
 > Структура каталогов, которую вы используете, зависит от настройки `middleware.routing` в вашем `intlayer.config.ts`:
 >

package/docs/ru/intlayer_with_astro_svelte.md

@@ -126,6 +126,18 @@ npm install intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
 npx intlayer init
 ```
 
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
 > Если вы хотите использовать свой контент в атрибуте `строки`, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции, например:
 
 > ```html
@@ -134,6 +146,10 @@ npx intlayer init
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
+```bash packageManager="npm"
+npm install intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
+```
+
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
 
@@ -319,6 +335,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> Если вы хотите использовать ваш контент в `string` атрибуте, таком как `alt`, `title`, `href`, `aria-label` и т.д., вы можете использовать значение функции, как:
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **Примечание по конфигурации маршрутизации:**
 > Структура каталогов, которую вы используете, зависит от настройки `middleware.routing` в вашем `intlayer.config.ts`:
 >

package/docs/ru/intlayer_with_astro_vanilla.md

@@ -126,6 +126,18 @@ npm install intlayer astro-intlayer vanilla-intlayer
 npx intlayer init
 ```
 
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
 > Если вы хотите использовать свой контент в атрибуте `строки`, таком как `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции, например:
 
 > ```html
@@ -134,6 +146,10 @@ npx intlayer init
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
+```bash packageManager="npm"
+npm install intlayer astro-intlayer vanilla-intlayer
+```
+
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer vanilla-intlayer
 
@@ -343,6 +359,14 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 </html>
 ```
 
+> Если вы хотите использовать ваш контент в атрибуте `string`, например `alt`, `title`, `href`, `aria-label` и т. д., вы можете использовать значение функции следующим образом:
+
+> ```html
+> <img src="{content.image.src.value}" alt="{content.image.value}" />
+> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
+> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```
+
 > **Примечание по конфигурации маршрутизации:**
 > Структура каталогов, которую вы используете, зависит от настройки `middleware.routing` в вашем `intlayer.config.ts`:
 >