@intlayer/docs 8.11.1 → 8.11.3

package/docs/uk/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Як перекласти додаток Tanstack Start у 2026
-description: Дізнайтеся, як додати інтернаціоналізацію (i18n) до вашого застосунку Tanstack Start за допомогою Intlayer. Дотримуйтесь цього вичерпного посібника, щоб зробити ваш додаток багатомовним із маршрутизацією з урахуванням локалі.
+updatedAt: 2026-05-31
+title: Tanstack Start i18n - Повний посібник з перекладу TanStack Start
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть TanStack Start застосунок багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -54,17 +54,47 @@ history:
 
 Цей посібник демонструє, як інтегрувати **Intlayer** для плавної інтернаціоналізації в проєктах Tanstack Start з маршрутизацією, що враховує локаль, підтримкою TypeScript та сучасними практиками розробки.
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer**, інноваційна open-source бібліотека для інтернаціоналізації (i18n), призначена для спрощення підтримки кількох мов у сучасних вебзастосунках.
+Порівняно з основними рішеннями, такими як `react-i18next` або `use-intl` або `paraglide`, Intlayer — це рішення, яке має такі інтегровані оптимізації, як:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повна підтримка TanStack Start">
 
-- **Легко керувати перекладами** за допомогою декларативних словників на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Забезпечити підтримку TypeScript** за допомогою автогенерованих типів, що покращує автозаповнення та виявлення помилок.
-- **Скористатися розширеними можливостями**, такими як динамічне визначення локалі та її перемикання.
-- **Увімкніть маршрутизацію з урахуванням локалі** за допомогою файлової системи маршрутизації Tanstack Start.
+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)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -102,11 +132,15 @@ history:
 
 Перегляньте [Шаблон додатка](https://github.com/aymericzip/intlayer-tanstack-start-template) на GitHub.
 
-### Крок 1: Створіть проект
+<Steps>
+
+<Step number={1} title="Створіть проект">
 
 Почніть зі створення нового проєкту TanStack Start, дотримуючись інструкції [Створення нового проєкту](https://tanstack.com/start/latest/docs/framework/react/quick-start) на сайті TanStack Start.
 
-### Крок 2: Встановіть пакети Intlayer
+</Step>
+
+<Step number={2} title="Встановіть пакети Intlayer">
 
 Встановіть необхідні пакети, використовуючи обраний менеджер пакетів:
 
@@ -144,7 +178,9 @@ bun x intlayer init
 - **vite-intlayer**
   Містить плагін Vite для інтеграції Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), а також middleware для визначення пріоритетної локалі користувача, керування cookie та обробки перенаправлень URL.
 
-### Крок 3: Конфігурація вашого проєкту
+</Step>
+
+<Step number={3} title="Конфігурація вашого проєкту">
 
 Створіть файл конфігурації, щоб налаштувати мови вашого додатка:
 
@@ -165,7 +201,9 @@ export default config;
 
 > За допомогою цього файлу конфігурації ви можете налаштувати локалізовані URL-адреси, перенаправлення через middleware, імена cookie, розташування та розширення декларацій контенту, вимкнути логування Intlayer у консолі та інше. Для повного переліку доступних параметрів див. [документацію з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 4: Інтегруйте Intlayer у вашу конфігурацію Vite
+</Step>
+
+<Step number={4} title="Інтегруйте Intlayer у вашу конфігурацію Vite">
 
 Додайте плагін intlayer до вашої конфігурації:
 
@@ -195,7 +233,9 @@ export default config;
 
 > Плагін Vite `intlayer()` використовується для інтеграції Intlayer з Vite. Він забезпечує побудову файлів декларацій контенту та відстежує їх у режимі розробки. Він визначає змінні середовища Intlayer у Vite-застосунку. Додатково він надає аліаси для оптимізації продуктивності.
 
-### Крок 5: Створіть кореневий Layout
+</Step>
+
+<Step number={5} title="Створіть кореневий Layout">
 
 Налаштуйте кореневий layout для підтримки інтернаціоналізації, використовуючи `useParams` для визначення поточної локалі та встановлення атрибутів `lang` і `dir` на тезі `html`.
 
@@ -255,7 +295,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Крок 6: Створіть Locale Layout
+</Step>
+
+<Step number={6} title="Створіть Locale Layout">
 
 Створіть layout, який обробляє префікс локалі та виконує валідацію.
 
@@ -287,7 +329,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > У режимі `'prefix-all'` можливо краще змінити слот на `$locale`.
 > У режимах `'no-prefix'` або `'search-params'` ви можете повністю видалити слот.
 
-### Крок 7: Оголосіть ваш контент
+</Step>
+
+<Step number={7} title="Оголосіть ваш контент">
 
 Створюйте й керуйте деклараціями контенту для зберігання перекладів:
 
@@ -333,7 +377,9 @@ export default appContent;
 
 > Для детальнішої інформації зверніться до [документації з оголошення вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 8: Створіть компоненти та хуки, що враховують локаль
+</Step>
+
+<Step number={8} title="Створіть компоненти та хуки, що враховують локаль">
 
 Створіть компонент `LocalizedLink` для навігації з урахуванням локалі:
 
@@ -437,7 +483,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Крок 9: Використовуйте Intlayer на ваших сторінках
+</Step>
+
+<Step number={9} title="Використовуйте Intlayer на ваших сторінках">
 
 Отримуйте доступ до словників контенту по всьому застосунку:
 
@@ -485,7 +533,9 @@ function RouteComponent() {
 
 > Щоб дізнатися більше про хук `useIntlayer`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useIntlayer.md).
 
-### Крок 10: Створіть компонент перемикача локалі
+</Step>
+
+<Step number={10} title="Створіть компонент перемикача локалі">
 
 Створіть компонент, щоб дозволити користувачам змінювати мову:
 
@@ -546,7 +596,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md).
 
-### Крок 11: Керування атрибутами HTML
+</Step>
+
+<Step number={11} title="Керування атрибутами HTML">
 
 Як показано в Кроці 5, ви можете керувати атрибутами `lang` і `dir` тега `html`, використовуючи `useParams` у вашому кореневому компоненті. Це забезпечує правильне встановлення атрибутів на сервері та клієнті.
 
@@ -565,7 +617,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Крок 12: Додати middleware (необов'язково)
+</Step>
+
+<Step number={12} title="Додати middleware">
 
 Ви також можете використовувати `intlayerProxy` для додавання маршрутизації на стороні сервера у вашому додатку. Цей плагін автоматично визначатиме поточну локаль на основі URL і встановлюватиме відповідний cookie з локаллю. Якщо локаль не вказана, плагін визначить найбільш підходящу локаль на основі мовних налаштувань браузера користувача. Якщо локаль не буде виявлена, відбудеться перенаправлення на локаль за замовчуванням.
 
@@ -596,7 +650,9 @@ export default defineConfig({
 
 ---
 
-### Крок 13: Інтернаціоналізуйте свої метадані (необов'язково)
+</Step>
+
+<Step number={13} title="Інтернаціоналізуйте свої метадані">
 
 Ви також можете використовувати хук `getIntlayer`, щоб отримувати ваші словники контенту по всьому застосунку:
 
@@ -643,7 +699,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Крок 14: Отримання локалі у серверних діях (Необов'язково)
+</Step>
+
+<Step number={14} title="Отримання локалі у серверних діях">
 
 Можливо, ви захочете отримувати поточну локаль всередині серверних дій або API-ендпоїнтів.
 Ви можете зробити це за допомогою хелпера `getLocale` з `intlayer`.
@@ -680,7 +738,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Крок 15: Керування сторінками «Не знайдено» (необов'язково)
+</Step>
+
+<Step number={15} title="Керування сторінками «Не знайдено»">
 
 Коли користувач переходить на неіснуючу сторінку, ви можете відобразити власну сторінку «не знайдено», і префікс локалі може впливати на те, як ця сторінка викликається.
 
@@ -756,7 +816,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### Крок 16: Налаштування TypeScript (необов'язково)
+</Step>
+
+<Step number={16} title="Налаштування TypeScript">
 
 Intlayer використовує module augmentation, щоб отримати переваги TypeScript і зміцнити ваш codebase.
 
@@ -774,7 +836,9 @@ Intlayer використовує module augmentation, щоб отримати
 
 ---
 
-### (Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
+</Step>
+
+<Step number={1} title="Витягніть вміст ваших компонентів" isOptional={true}>
 
 Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
 
@@ -885,6 +949,10 @@ bun run build # Or bun run dev
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Розширення VS Code
 
 Щоб покращити досвід розробки з Intlayer, ви можете встановити офіційне **Intlayer VS Code Extension**.

package/docs/uk/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: Vanilla JS i18n - Як перекласти застосунок Vanilla JS у 2026 році
-description: Дізнайтеся, як зробити свій вебсайт на Vanilla JS багатомовним. Дотримуйтесь документації з інтернаціоналізації (i18n) та перекладу.
+updatedAt: 2026-05-31
+title: Vanilla JS i18n - Повний посібник з перекладу Vanilla JS
+description: Найкраще рішення для розміру бандлу, SEO, продуктивності & підтримуваності. Зробіть Vanilla JS сайт багатомовним у 2026, переклад LLM, Agent Skills & MCP.
 keywords:
   - Інтернаціоналізація
   - Документація
@@ -57,28 +57,55 @@ history:
 
 <TOC/>
 
-## Що таке Intlayer?
+## Чому варто обрати Intlayer, а не альтернативи?
 
-**Intlayer** - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення багатомовної підтримки в сучасних вебзастосунках.
+Порівняно з основними рішеннями, такими як `i18next` або `i18n.js`, Intlayer — це рішення, яке поставляється з інтегрованою оптимізацією, як-от:
 
-За допомогою Intlayer ви можете:
+<AccordionGroup>
+<Accordion header="Повна підтримка Vanilla JS">
 
-- **Легко керувати перекладами**, використовуючи декларативні словники на рівні компонентів.
-- **Динамічно локалізувати метадані**, маршрути та контент.
-- **Забезпечити підтримку TypeScript** завдяки типам, що генеруються автоматично, що покращує автодоповнення та виявлення помилок.
-- **Користуватися розширеними функціями**, такими як динамічне визначення та зміна мови.
+Intlayer оптимізовано для ідеальної роботи з Vanilla JavaScript, пропонуючи **незалежне від фреймворку керування вмістом**, **підтримку TypeScript** і всі функції, необхідні для масштабування інтернаціоналізації (i18n).
 
-Цей посібник демонструє, як використовувати Intlayer у застосунку на Vanilla JavaScript **без використання менеджера пакетів або збірника** (такого як Vite, Webpack тощо).
+</Accordion>
+<Accordion header="Розмір бандлу">
 
-Якщо ваш застосунок використовує збірник (наприклад, Vite), ми рекомендуємо натомість дотримуватися [Посібника з Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+vanilla.md).
+Замість того, щоб завантажувати великі файли JSON на свої сторінки, завантажуйте лише необхідний вміст. Intlayer допомагає **зменшити розмір бандлу і сторінок до 50%**.
 
-Використовуючи автономну збірку (standalone bundle), ви можете імпортувати Intlayer безпосередньо у свої HTML-файли через один JavaScript-файл, що робить його ідеальним для застарілих проєктів або простих статичних сайтів.
+</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)** і **[навички агента](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/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)**, щоб допомогти вам керувати своїм багатомовним вмістом у **реальному часі**, спрощуючи співпрацю з перекладачами, копірайтерами та іншими членами команди. Контент можна зберігати локально та/або віддалено.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Покроковий посібник із налаштування Intlayer у застосунку на Vanilla JS
 
-### Крок 1: Встановлення залежностей
+<Steps>
+
+<Step number={1} title="Встановлення залежностей">
 
 Встановіть необхідні пакети за допомогою npm:
 
@@ -138,7 +165,9 @@ bun x intlayer build
 
 > Експорт збірки (bundling) через CLI `intlayer standalone` створює оптимізований білд шляхом деревотрусу (tree-shaking) для невикористаних пакетів, локалей та другорядної логіки (наприклад, перенаправлень або префіксів), специфічної для вашої конфігурації.
 
-### Крок 2: Конфігурація вашого проєкту
+</Step>
+
+<Step number={2} title="Конфігурація вашого проєкту">
 
 Створіть файл конфігурації для налаштування мов вашого застосунку:
 
@@ -162,7 +191,9 @@ export default config;
 
 > Через цей файл конфігурації ви можете налаштувати локалізовані URL, перенаправлення через middleware, імена кукі, розташування та розширення ваших оголошень контенту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів див. у [документації з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md).
 
-### Крок 3: Імпорт збірки у ваш HTML
+</Step>
+
+<Step number={3} title="Імпорт збірки у ваш HTML">
 
 Після того, як ви згенерували збірку `intlayer.js`, ви можете імпортувати її у свій HTML-файл:
 
@@ -186,7 +217,9 @@ export default config;
 
 Збірка надає `Intlayer` та `VanillaIntlayer` як глобальні об'єкти на `window`.
 
-### Крок 4: Ініціалізація Intlayer у точці входу
+</Step>
+
+<Step number={4} title="Ініціалізація Intlayer у точці входу">
 
 У вашому `src/main.js` викличте `installIntlayer()` **до** того, як будь-який контент буде відмальовано, щоб глобальний синглтон мови був готовий.
 
@@ -206,7 +239,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Крок 5: Оголошення вашого контенту
+</Step>
+
+<Step number={5} title="Оголошення вашого контенту">
 
 Створюйте та керуйте оголошеннями контенту для зберігання перекладів:
 
@@ -284,7 +319,9 @@ export default appContent;
 >
 > Для отримання детальнішої інформації див. [документацію з оголошення контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
 
-### Крок 6: Використання Intlayer у вашому JavaScript
+</Step>
+
+<Step number={6} title="Використання Intlayer у вашому JavaScript">
 
 Об'єкт `window.VanillaIntlayer` надає допоміжні функції API: `useIntlayer(key, locale?)` повертає перекладений контент для заданого ключа.
 
@@ -318,7 +355,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Опціонально) Крок 7: Зміна мови вашого контенту
+</Step>
+
+<Step number={7} title="Зміна мови вашого контенту" isOptional={true}>
 
 Щоб змінити мову вашого контенту, використовуйте функцію `setLocale`, що надається `useLocale`.
 
@@ -353,7 +392,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Опціонально) Крок 8: Перемикання атрибутів мови та напрямку тексту HTML
+</Step>
+
+<Step number={8} title="Перемикання атрибутів мови та напрямку тексту HTML" isOptional={true}>
 
 Оновлюйте атрибути `lang` та `dir` тегу `<html>` відповідно до поточної мови для забезпечення доступності та SEO.
 
@@ -371,7 +412,9 @@ useLocale({
 });
 ```
 
-### (Опціонально) Крок 9: Ледаче завантаження словників за мовами
+</Step>
+
+<Step number={9} title="Ледаче завантаження словників за мовами" isOptional={true}>
 
 Якщо ви хочете завантажувати словники ледаче для кожної мови, ви можете використовувати `useDictionaryDynamic`. Це корисно, якщо ви не хочете включати всі переклади в початковий файл `intlayer.js`.
 
@@ -427,3 +470,7 @@ const unsubscribe = useDictionaryDynamic(
 ### Йдіть далі
 
 Щоб піти далі, ви можете впровадити [візуальний редактор](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).
+
+</Step>
+
+</Steps>