@intlayer/docs 9.4.4 → 9.5.0

package/docs/uk/intlayer_with_tanstack.md

@@ -68,37 +68,31 @@ author: aymericzip
 Intlayer повністю оптимізовано для TanStack Start, забезпечуючи **багатомовну маршрутизацію**, **керування файлами cookie**, **генерацію карти сайту**, **динамічне завантаження вмісту** та всі функції, необхідні для масштабування ваших зусиль з інтернаціоналізації (i18n).
 
 </Accordion>
-
 <Accordion header="Розмір бандлу">
 
 Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
 
 </Accordion>
-
 <Accordion header="Підтримуваність">
 
 Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
 
 </Accordion>
-
 <Accordion header="Агент AI">
 
 Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
 
 </Accordion>
-
 <Accordion header="Автоматизація">
 
 Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
 
 </Accordion>
-
 <Accordion header="Продуктивність">
 
 Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
 
 </Accordion>
-
 <Accordion header="Співпраця з не-розробниками">
 
 Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
@@ -106,8 +100,6 @@ Intlayer повністю оптимізовано для TanStack Start, заб
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Покроковий посібник з налаштування Intlayer у застосунку Tanstack Start
 
 <Tabs defaultTab="video">
@@ -143,13 +135,11 @@ Intlayer повністю оптимізовано для TanStack Start, заб
 Перегляньте [Шаблон додатка](https://github.com/aymericzip/intlayer-tanstack-start-template) на GitHub.
 
 <Steps>
-
 <Step number={1} title="Створіть проект">
 
 Почніть зі створення нового проєкту TanStack Start, дотримуючись інструкції [Створення нового проєкту](https://tanstack.com/start/latest/docs/framework/react/quick-start) на сайті TanStack Start.
 
 </Step>
-
 <Step number={2} title="Встановіть пакети Intlayer">
 
 Встановіть необхідні пакети, використовуючи обраний менеджер пакетів:
@@ -205,9 +195,44 @@ bun add vite-intlayer --dev
   Містить плагін Vite для інтеграції Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також middleware для визначення пріоритетної локалі користувача, керування cookie та обробки перенаправлень URL.
 
 </Step>
-
 <Step number={3} title="Конфігурація вашого проєкту">
 
+### Архітектура
+
+У цій архітектурі всі локалізовані маршрути вкладені в сегмент маршруту `{-$locale}`. Цей підхід гарантує, що кожна мова має власну URL-адресу, забезпечуючи автоматичне додавання префікса локалі, валідацію та SEO-оптимізацію.
+
+```bash
+.
+├── src
+│   ├── components
+│   │   ├── Header.tsx
+│   │   ├── locale-switcher.content.ts
+│   │   ├── locale-switcher.tsx
+│   │   └── localized-link.tsx
+│   ├── hooks
+│   │   ├── useI18nHTMLAttributes.tsx
+│   │   └── useLocalizedNavigate.ts
+│   ├── routes
+│   │   ├── {-$locale}
+│   │   │   ├── 404.content.ts
+│   │   │   ├── 404.tsx
+│   │   │   ├── about.content.ts
+│   │   │   ├── about.tsx
+│   │   │   ├── index.content.tsx
+│   │   │   ├── index.tsx
+│   │   │   └── route.tsx             # Locale layout & prefix validation
+│   │   ├── __root.tsx                # Root route with IntlayerProvider
+│   │   └── sitemap[.]xml.ts
+│   ├── router.tsx
+│   └── styles.css
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+### Конфігурація
+
 Створіть файл конфігурації, щоб налаштувати мови вашого додатка:
 
 ```typescript fileName="intlayer.config.ts"
@@ -228,7 +253,6 @@ export default config;
 > За допомогою цього файлу конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, імена cookie, розташування та розширення декларацій контенту, вимкнути логування Intlayer у консолі та інше. Для повного переліку доступних параметрів див. [документацію з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
 </Step>
-
 <Step number={4} title="Інтегруйте Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer до вашої конфігурації:
@@ -264,7 +288,6 @@ export default config;
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у Vite-застосунку. Додатково він надає аліаси для оптимізації продуктивності.
 
 </Step>
-
 <Step number={5} title="Створіть кореневий Layout">
 
 Налаштуйте кореневий layout для підтримки інтернаціоналізації, використовуючи `useParams` для визначення поточної локалі та встановлення атрибутів `lang` і `dir` на тезі `html`.
@@ -320,7 +343,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 ```
 
 </Step>
-
 <Step number={6} title="Створіть Locale Layout">
 
 Створіть layout, який обробляє префікс локалі та виконує валідацію.
@@ -354,7 +376,6 @@ export const Route = createFileRoute("/{-$locale}")({
 > У режимах `'no-prefix'` або `'search-params'` ви можете повністю видалити слот.
 
 </Step>
-
 <Step number={7} title="Оголосіть ваш контент">
 
 Створюйте й керуйте деклараціями контенту для зберігання перекладів:
@@ -402,7 +423,6 @@ export default appContent;
 > Для детальнішої інформації зверніться до [документації з оголошення вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
 </Step>
-
 <Step number={8} title="Створіть компоненти та хуки, що враховують локаль">
 
 Створіть компонент `LocalizedLink` для навігації з урахуванням локалі:
@@ -507,7 +527,6 @@ export const useLocalizedNavigate = () => {
 ```
 
 </Step>
-
 <Step number={9} title="Використовуйте Intlayer на ваших сторінках">
 
 > Використовуйте **`useIntlayer`** за замовчуванням: це рекомендований спосіб читати контент усередині компонентів, і компілятор розвʼязує його у локаль, яка рендериться. Звертайтеся до `getIntlayer` / `getIntlayerAsync` лише поза деревом React: у `head` маршрутів, лоадерах і серверних функціях.
@@ -557,16 +576,15 @@ function RouteComponent() {
 
 > Якщо ви хочете використовувати вміст у атрибуті `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)}" />
+> ```tsx
+> <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)} />
 > ```
 
 > Щоб дізнатися більше про hook `useIntlayer`, звернітеся до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useIntlayer.md).
 
 </Step>
-
 <Step number={9} title="Створення компоненту перемикача локалей">
 
 Створіть компонент, щоб дозволити користувачам змінювати мови:
@@ -629,7 +647,6 @@ export const LocaleSwitcher: FC = () => {
 > Щоб дізнатися більше про hook `useLocale`, звернітеся до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md).
 
 </Step>
-
 <Step number={10} title="Управління HTML атрибутами">
 
 Як видно з кроку 5, ви можете керувати атрибутами `lang` та `dir` тега `html` за допомогою `useParams` у вашому кореневому компоненті. Це забезпечує встановлення правильних атрибутів на сервері та клієнті.
@@ -650,7 +667,6 @@ function RootDocument({ children }: { children: ReactNode }) {
 ```
 
 </Step>
-
 <Step number={11} title="Додавання middleware">
 
 Ви також можете використовувати `intlayerProxy` для додавання маршрутизації на стороні сервера до вашої програми. Цей плагін автоматично визначить поточну локаль на основі URL-адреси та встановить відповідну cookie-файл локалі. Якщо локаль не вказана, плагін визначить найбільш відповідну локаль на основі параметрів мови браузера користувача. Якщо локаль не виявлена, він перенаправить на локаль за замовчуванням.
@@ -686,7 +702,6 @@ export default defineConfig({
 ```
 
 </Step>
-
 <Step number={12} title="Інтернаціоналізація ваших метаданих">
 
 <Tabs>
@@ -879,7 +894,6 @@ export const Route = createFileRoute("/{-$locale}/")({
 | Developer experience | simplest              | one `await`                | content threaded through `loaderData`  |
 
 </Step>
-
 <Step number={13} title="Отримайте локаль у своїх серверних діях">
 
 Можливо, вам потрібно отримати доступ до поточної локалі всередині ваших серверних дій або API endpoints.
@@ -916,7 +930,6 @@ export const getLocaleServer = createServerFn().handler(async () => {
 ```
 
 </Step>
-
 <Step number={14} title="Керування сторінками «Не знайдено»">
 
 Коли користувач переходить на неіснуючу сторінку, ви можете відобразити власну сторінку «не знайдено», і префікс локалі може впливати на те, як ця сторінка викликається.
@@ -992,7 +1005,6 @@ export const Route = createFileRoute("/{-$locale}/$")({
 ```
 
 </Step>
-
 <Step number={15} title="Витягніть вміст ваших компонентів" isOptional={true}> isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
@@ -1092,7 +1104,6 @@ bun run build # Or bun run dev
 </Tabs>
 
 </Step>
-
 <Step number={16} title="Pre-render & Generate Sitemap">
 
 Intlayer має вбудований генератор sitemap, який допомагає легко створити sitemap для вашої програми. Він обробляє локалізовані маршрути та додає необхідні метадані для пошукових систем.
@@ -1167,7 +1178,6 @@ export const Route = createFileRoute("/sitemap.xml")({
 ```
 
 </Step>
-
 <Step number={17} title="Налаштувати TypeScript">
 
 Intlayer використовує module augmentation для отримання переваг TypeScript та зміцнення вашого codebase.
@@ -1199,8 +1209,6 @@ Intlayer використовує module augmentation для отримання
 .intlayer
 ```
 
----
-
 ## Розширення VS Code
 
 Щоб покращити ваш досвід розробки за допомогою Intlayer, ви можете встановити офіційне **розширення Intlayer VS Code Extension**.
@@ -1216,14 +1224,10 @@ Intlayer використовує module augmentation для отримання
 
 Для детальнішої інформації про використання розширення див. [документацію розширення Intlayer VS Code Extension](https://intlayer.org/doc/vs-code-extension).
 
----
-
 ## Йти далі
 
 Щоб йти далі, ви можете реалізувати [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md) або екстерналізувати ваш вміст за допомогою [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).
 
----
-
 ## Посилання на документацію
 
 - [Документація Intlayer](https://intlayer.org)
@@ -1247,25 +1251,21 @@ TanStack Start не має власного шару i18n:
 Див. [чому Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/interest_of_intlayer.md).
 
 </Question>
-
 <Question title="Скільки i18n додає до розміру бандла TanStack Start?">
 
 Значно менше, ніж рішення на основі просторів імен, оскільки сторінка ніколи не завантажує каталог, який вона не рендерить. Компілятор часу збирання замінює виклики `useIntlayer` точними записами словника, а [динамічні словники](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dynamic_dictionaries/index.md) розділяють залишок за локалями, зменшуючи бандл до 50%. Див. [оптимізацію бандла](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/bundle_optimization.md) та [бенчмарк](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/benchmark/index.md).
 
 </Question>
-
 <Question title="Чи можу я мігрувати з react-i18next або react-intl без переписування компонентів?">
 
 Так, за допомогою посібників з міграції або адаптерів сумісності.
 
 </Question>
-
 <Question title="Чи можу я зберігати мої існуючі JSON файли перекладів?">
 
 Так. [sync JSON плагін](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-json.md) зберігає ваші файли `/messages/{locale}/{namespace}.json` як джерело істини та генерує словники Intlayer з них в обох напрямках. [sync PO плагін](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-po.md) робить те ж саме для gettext каталогів, а [файли для окремих локалей](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/per_locale_file.md) дозволяють розділити контент за мовами замість групування локалей в один файл.
 
 </Question>
-
 <Question title="Чи потрібно переносити вміст ключ за ключем?">
 
 Ні. Запустіть `npx intlayer extract`, і Intlayer прочитає ваші файли, витягне призначені для користувача рядки і створить файл `.content` поруч із кожним компонентом, завдяки чому ви переглядаєте diff замість копіювання рядків у каталог вручну.
@@ -1275,7 +1275,6 @@ TanStack Start не має власного шару i18n:
 Варто знати два обмеження перед увімкненням компілятора. Він працює за допомогою статичного аналізу, тому рядки, які існують лише під час виконання, такі як коди помилок API або поля CMS, залишаються недосяжними. І він повинен відрізняти текст для користувача від логіки додатка, як-от `className="active"` або код статусу, що вимагає кількох анотацій у великій кодовій базі. [Команда extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md) уникає обох проблем, тримаючи вас у курсі.
 
 </Question>
-
 <Question title="Які інструменти для редактора та AI агентів доступні?">
 
 П'ять інструментів, усі опціональні:
@@ -1287,55 +1286,46 @@ TanStack Start не має власного шару i18n:
 - **[Плагін ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/eslint.md)**: правило `no-raw-text` відстежує жорстко закодовані рядки.
 
 </Question>
-
 <Question title="Чи підтримує Intlayer серверний рендеринг та попередній рендеринг у TanStack Start?">
 
 Так. Контент вирішується під час SSR, і посібник охоплює конфігурацію попереднього рендерингу для кожної локалі.
 
 </Question>
-
 <Question title="Як додати теги hreflang та локалізовану карту сайту?">
 
 Використовуйте `generateSitemap` у маршруті `src/routes/sitemap[.]xml.ts` для генерації тегів `xhtml:link` та запису `x-default`.
 
 </Question>
-
 <Question title="Чи обов'язково додавати локаль до URL?">
 
 Ні. Налаштування `routing.mode` приймає `"prefix-no-default"` (за замовчуванням), `"prefix-all"`, `"no-prefix"` та `"search-params"`.
 
 </Question>
-
 <Question title="Як створити перемикач мов, який зберігає поточний маршрут?">
 
 Використовуйте `useLocale` у поєднанні з локалізованим компонентом посилання з кроку 9.
 
 </Question>
-
 <Question title="Як обробляти сторінки 404 у локалізованих маршрутах?">
 
 Крок 14 описує це. `validatePrefix` перевіряє валідність сегмента мови в URL.
 
 </Question>
-
 <Question title="Як автоматично перекласти додаток TanStack Start за допомогою AI?">
 
 Запустіть `npx intlayer fill`. Утиліта знаходить пропущені рядки та заповнює їх за допомогою обраної LLM. Див. [команду fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/fill.md).
 
 </Question>
-
 <Question title="Чи підтримує Intlayer форми множини, стать та форматований текст (rich text)?">
 
 Так: [форми множини](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/plurial.md), [контент з урахуванням статі](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/gender.md), умови, [вставки (insertions)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/markdown.md) та [форматування](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/formatters.md) чисел, дат і валют.
 
 </Question>
-
 <Question title="Як перекладачі можуть редагувати вміст без втручання в код?">
 
 Через [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md), який дозволяє будь-кому редагувати тексти безпосередньо у працюючому додатку, або через [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md), яка відокремлює вміст і дозволяє оновлювати його без повторного розгортання коду.
 
 </Question>
-
 <Question title="Чи є Intlayer безкоштовним та відкритим кодом?">
 
 Так, під ліцензією Apache 2.0, включно з комерційним використанням. Хмарна CMS - це додаткова платна послуга, яку також можна [розгорнути самостійно (self-host)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/self_hosting.md).

package/docs/uk/intlayer_with_vanilla.md

@@ -68,37 +68,31 @@ author: aymericzip
 Intlayer оптимізовано для ідеальної роботи з Vanilla JavaScript, пропонуючи **незалежне від фреймворку керування вмістом**, **підтримку TypeScript** і всі функції, необхідні для масштабування інтернаціоналізації (i18n).
 
 </Accordion>
-
 <Accordion header="Розмір бандлу">
 
 Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
 
 </Accordion>
-
 <Accordion header="Підтримуваність">
 
 Організація вмісту за окремими областями (scoping) **полегшує технічне обслуговування** великомасштабних програм. Ви можете скопіювати або видалити окрему папку функцій без розумового навантаження перегляду всієї кодової бази вмісту. Крім того, Intlayer **повністю типізований (fully typed)**, щоб забезпечити точність вашого вмісту.
 
 </Accordion>
-
 <Accordion header="Агент AI">
 
 Спільне розміщення вмісту **зменшує контекст, необхідний** для великих мовних моделей (LLM). Intlayer також постачається з набором інструментів, наприклад **CLI** для перевірки відсутніх перекладів,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** і **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/agent_skills.md)**, щоб зробити роботу розробника (DX) ще зручнішою для агентів ШІ.
 
 </Accordion>
-
 <Accordion header="Автоматизація">
 
 Використовуйте автоматизацію для перекладу в конвеєрі CI/CD за допомогою LLM за вашим вибором за рахунок вашого постачальника штучного інтелекту. Intlayer також пропонує **компілятор** для автоматизації екстракція вмісту, а також [веб-платформу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), щоб допомогти **перекладати у фоновому режимі**.
 
 </Accordion>
-
 <Accordion header="Продуктивність">
 
 Підключення великих файлів JSON до компонентів може призвести до проблем з продуктивністю та реакцією. Intlayer оптимізує завантаження вмісту під час збірки (build time).
 
 </Accordion>
-
 <Accordion header="Співпраця з не-розробниками">
 
 Більше ніж просто рішення i18n, Intlayer пропонує **власний [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** і **[повний CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
@@ -106,12 +100,9 @@ Intlayer оптимізовано для ідеальної роботи з Vani
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Покроковий посібник із налаштування Intlayer у застосунку на Vanilla JS
 
 <Steps>
-
 <Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
@@ -173,9 +164,24 @@ bun x intlayer build
 > Експорт збірки (bundling) через CLI `intlayer standalone` створює оптимізований білд шляхом деревотрусу (tree-shaking) для невикористаних пакетів, локалей та другорядної логіки (наприклад, перенаправлень або префіксів), специфічної для вашої конфігурації.
 
 </Step>
-
 <Step number={2} title="Конфігурація вашого проєкту">
 
+### Архітектура
+
+У цій архітектурі ядро `intlayer` надає API JavaScript для оголошення та використання словників у стандартних середовищах JavaScript або TypeScript без інтерфейсного фреймворку.
+
+```bash
+.
+├── src
+│   ├── app.content.mjs
+│   └── main.js
+├── index.html
+├── intlayer.config.mjs
+└── package.json
+```
+
+### Конфігурація
+
 Створіть файл конфігурації для налаштування мов вашого застосунку:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
@@ -199,7 +205,6 @@ export default config;
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL, перенаправлення через middleware, імена кукі, розташування та розширення ваших оголошень контенту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів див. у [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
 </Step>
-
 <Step number={3} title="Імпорт збірки у ваш HTML">
 
 Після того, як ви згенерували збірку `intlayer.js`, ви можете імпортувати її у свій HTML-файл:
@@ -225,7 +230,6 @@ export default config;
 Збірка надає `Intlayer` та `VanillaIntlayer` як глобальні об'єкти на `window`.
 
 </Step>
-
 <Step number={4} title="Ініціалізація Intlayer у точці входу">
 
 У вашому `src/main.js` викличте `installIntlayer()` **до** того, як будь-який контент буде відмальовано, щоб глобальний синглтон мови був готовий.
@@ -247,7 +251,6 @@ installIntlayerMarkdown();
 ```
 
 </Step>
-
 <Step number={5} title="Оголошення вашого контенту">
 
 Створюйте та керуйте оголошеннями контенту для зберігання перекладів:
@@ -327,7 +330,6 @@ export default appContent;
 > Для отримання детальнішої інформації див. [документацію з оголошення контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
 </Step>
-
 <Step number={6} title="Використання Intlayer у вашому JavaScript">
 
 Об'єкт `window.VanillaIntlayer` надає допоміжні функції API: `useIntlayer(key, locale?)` повертає перекладений контент для заданого ключа.
@@ -363,7 +365,6 @@ document.querySelector(".read-the-docs").textContent = String(
 > ```
 
 </Step>
-
 <Step number={7} title="Зміна мови вашого контенту" isOptional={true}>
 
 Щоб змінити мову вашого контенту, використовуйте функцію `setLocale`, що надається `useLocale`.
@@ -400,7 +401,6 @@ export function setupLocaleSwitcher(container) {
 ```
 
 </Step>
-
 <Step number={8} title="Перемикання атрибутів мови та напрямку тексту HTML" isOptional={true}>
 
 Оновлюйте атрибути `lang` та `dir` тегу `<html>` відповідно до поточної мови для забезпечення доступності та SEO.
@@ -420,7 +420,6 @@ useLocale({
 ```
 
 </Step>
-
 <Step number={9} title="Ледаче завантаження словників за мовами" isOptional={true}>
 
 Якщо ви хочете завантажувати словники ледаче для кожної мови, ви можете використовувати `useDictionaryDynamic`. Це корисно, якщо ви не хочете включати всі переклади в початковий файл `intlayer.js`.
@@ -476,8 +475,6 @@ const unsubscribe = useDictionaryDynamic(
 
 Для отримання детальнішої інформації про використання розширення див. [документацію розширення Intlayer для VS Code](https://intlayer.org/doc/vs-code-extension).
 
----
-
 ### Йдіть далі
 
 Щоб піти далі, ви можете впровадити [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md) або винести ваш контент у зовнішнє середовище за допомогою [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).
@@ -491,25 +488,21 @@ const unsubscribe = useDictionaryDynamic(
 Так. Цей посібник присвячений саме цьому. Ви підключаєте пакет `vanilla-intlayer` прямо в HTML, ініціалізуєте його та читаєте контент через `useIntlayer` або `getIntlayer`.
 
 </Question>
-
 <Question title="Скільки i18n додає до ваги моєї сторінки?">
 
 Значно менше, ніж традиційні каталоги, оскільки сторінка ніколи не завантажує мову, яку не рендерить. Вміст надається в оптимізованих форматах. Див. [оптимізацію бандла](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/bundle_optimization.md).
 
 </Question>
-
 <Question title="Чи можу я мігрувати з i18next без переписування скриптів?">
 
 Більшою мірою так. Дотримуйтесь [посібника з міграції з i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/migration_from_i18next_to_intlayer.md).
 
 </Question>
-
 <Question title="Чи можу я зберігати мої існуючі JSON файли перекладів?">
 
 Так. [sync JSON плагін](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-json.md) зберігає ваші файли `/messages/{locale}/{namespace}.json` як джерело істини та генерує словники Intlayer з них в обох напрямках. [sync PO плагін](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/plugins/sync-po.md) робить те ж саме для gettext каталогів, а [файли для окремих локалей](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/per_locale_file.md) дозволяють розділити контент за мовами замість групування локалей в один файл.
 
 </Question>
-
 <Question title="Чи потрібно переносити вміст ключ за ключем?">
 
 Ні. Запустіть `npx intlayer extract`, і Intlayer прочитає ваші файли, витягне призначені для користувача рядки і створить файл `.content` поруч із кожним компонентом, завдяки чому ви переглядаєте diff замість копіювання рядків у каталог вручну. Див. [команду extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/extract.md).
@@ -517,7 +510,6 @@ const unsubscribe = useDictionaryDynamic(
 Для повної автоматизації [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/compiler.md) робить те саме під час збирання та генерує словники під час кожної зміни.
 
 </Question>
-
 <Question title="Які інструменти для редактора та AI агентів доступні?">
 
 П'ять інструментів, усі опціональні:
@@ -529,7 +521,6 @@ const unsubscribe = useDictionaryDynamic(
 - **[Плагін ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/eslint.md)**: правило `no-raw-text` відстежує жорстко закодовані рядки.
 
 </Question>
-
 <Question title="Які є різні рішення для інтернаціоналізації чистого JavaScript сайту?">
 
 - **Власний об'єкт словника**: без типізації та інструментів контролю якості.
@@ -539,49 +530,41 @@ const unsubscribe = useDictionaryDynamic(
 Див. [чому Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/interest_of_intlayer.md).
 
 </Question>
-
 <Question title="Як прочитати переклад і вставити його в DOM?">
 
 Викликайте `useIntlayer` з ключем словника і встановіть значення у вузол DOM власноруч, як показано на кроці 6.
 
 </Question>
-
 <Question title="Як визначається мова відвідувача?">
 
 З джерел, перелічених у `routing.storage`: зазвичай спочатку cookie, потім заголовок `Accept-Language`, а далі мова за замовчуванням. Див. [довідник конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
 </Question>
-
 <Question title="Як підтримувати мови з написанням справа наліво?">
 
 Крок 8 описує це. `getHTMLTextDir` повертає `ltr`, `rtl` або `auto` для локалі, тому ви встановлюєте атрибути `lang` та `dir` на елементі `html` або `body`.
 
 </Question>
-
 <Question title="Чи завантажують відвідувачі кожну мову?">
 
 Ні, якщо ви цього не бажаєте. Крок 9 описує ліниве завантаження (lazy loading) словників за мовами, тому сторінка завантажує лише активну мову.
 
 </Question>
-
 <Question title="Як автоматично перекласти додаток за допомогою AI?">
 
 Запустіть `npx intlayer fill`. Утиліта заповнює відсутні переклади через обрану LLM з вашим провайдером та ключем API, а прапорець `--git-diff` обмежує обробку зміненими файлами. Див. [команду fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/fill.md) та [інтеграцію CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/CI_CD.md).
 
 </Question>
-
 <Question title="Чи підтримує Intlayer форми множини, стать та форматований текст (rich text)?">
 
 Так: [форми множини](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/plurial.md), [контент з урахуванням статі](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/gender.md), умови, [вставки (insertions)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/insertion.md) та [форматування](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/formatters.md) чисел, дат і валют.
 
 </Question>
-
 <Question title="Як перекладачі можуть редагувати вміст без втручання в код?">
 
 Через [візуальний редактор](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_visual_editor.md), який дозволяє будь-кому редагувати тексти безпосередньо у працюючому додатку, або через [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md), яка відокремлює вміст і дозволяє оновлювати його без повторного розгортання коду.
 
 </Question>
-
 <Question title="Чи є Intlayer безкоштовним та відкритим кодом?">
 
 Так, під ліцензією Apache 2.0, включно з комерційним використанням. Хмарна CMS - це додаткова платна послуга, яку також можна [розгорнути самостійно (self-host)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/self_hosting.md).