@intlayer/docs 7.5.11 → 7.5.12

package/docs/uk/packages/intlayer/getConfiguration.md

@@ -0,0 +1,145 @@
+---
+createdAt: 2025-08-23
+updatedAt: 2025-08-23
+title: Документація функції getConfiguration | intlayer
+description: Дізнайтесь, як використовувати функцію getConfiguration для пакета intlayer
+keywords:
+  - getConfiguration
+  - переклад
+  - Intlayer
+  - intlayer
+  - інтернаціоналізація
+  - документація
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - packages
+  - intlayer
+  - getConfiguration
+history:
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Ініціалізація історії
+---
+
+# Документація: функція `getConfiguration` у `intlayer`
+
+## Опис
+
+Функція `getConfiguration` отримує повну конфігурацію для застосунку `intlayer`, витягуючи змінні оточення. Ця функція дає змогу використовувати одну й ту саму конфігурацію як на клієнтській, так і на серверній стороні, забезпечуючи узгодженість по всьому застосунку.
+
+---
+
+## Параметри
+
+Функція не приймає жодних параметрів. Замість цього вона використовує змінні оточення для налаштування.
+
+### Повертає
+
+- **Тип**: `IntlayerConfig`
+- **Опис**: Об'єкт, що містить повну конфігурацію для `intlayer`. Конфігурація включає такі розділи:
+  - `internationalization`: Налаштування, пов'язані з локалями та strict mode.
+  - `middleware`: Налаштування, пов'язані з керуванням URL та cookie.
+  - `content`: Налаштування, пов'язані з файлами контенту, директоріями та шаблонами.
+  - `editor`: Налаштування, специфічні для редактора.
+
+Див. [документацію з конфігурації Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md) для отримання додаткової інформації.
+
+---
+
+## Приклад використання
+
+### Отримання повної конфігурації
+
+```typescript codeFormat="typescript"
+import { getConfiguration } from "intlayer";
+
+const config = getConfiguration();
+console.log(config);
+// Вивід:
+// {
+//   internationalization: { ... },
+//   middleware: { ... },
+//   content: { ... },
+//   editor: { ... }
+// }
+```
+
+```javascript codeFormat="esm"
+import { getConfiguration } from "intlayer";
+
+const config = getConfiguration();
+console.log(config);
+// Вивід:
+// {
+//   internationalization: { ... },
+//   middleware: { ... },
+//   content: { ... },
+//   editor: { ... }
+// }
+```
+
+```javascript codeFormat="commonjs"
+const { getConfiguration } = require("intlayer");
+
+const config = getConfiguration();
+console.log(config);
+// Вивід:
+// {
+//   internationalization: { ... },
+//   middleware: { ... },
+//   content: { ... },
+//   editor: { ... }
+// }
+```
+
+### Отримання `availableLocales` та `defaultLocale`
+
+Розділ `internationalization` конфігурації надає налаштування, пов'язані з локалями, такі як `locales` (доступні локалі) та `defaultLocale` (мова за замовчуванням).
+
+```typescript codeFormat="typescript"
+import { getConfiguration } from "intlayer";
+
+const { internationalization, middleware } = getConfiguration();
+const { locales: availableLocales, defaultLocale } = internationalization;
+const { cookieName } = middleware;
+
+console.log(availableLocales); // Приклад виводу: ["en", "fr", "es"]
+console.log(defaultLocale); // Приклад виводу: "en"
+console.log(cookieName); // Вивід: "INTLAYER_LOCALE"
+```
+
+```javascript codeFormat="esm"
+import { getConfiguration } from "intlayer";
+
+const { internationalization, middleware } = getConfiguration();
+const { locales: availableLocales, defaultLocale } = internationalization;
+const { cookieName } = middleware;
+
+console.log(availableLocales); // Приклад виводу: ["en", "fr", "es"]
+console.log(defaultLocale); // Приклад виводу: "en"
+console.log(cookieName); // Вивід: "INTLAYER_LOCALE"
+```
+
+```javascript codeFormat="commonjs"
+const { getConfiguration } = require("intlayer");
+
+const { internationalization, middleware } = getConfiguration();
+const { locales: availableLocales, defaultLocale } = internationalization;
+const { cookieName } = middleware;
+
+console.log(availableLocales); // Приклад виводу: ["en", "fr", "es"]
+console.log(defaultLocale); // Приклад виводу: "en"
+console.log(cookieName); // Вивід: "INTLAYER_LOCALE"
+```
+
+## Примітки
+
+- Переконайтеся, що всі необхідні змінні середовища правильно встановлені перед викликом цієї функції. Відсутні змінні спричинять помилки під час ініціалізації.
+- Цю функцію можна використовувати як на клієнті, так і на сервері, що робить її універсальним інструментом для керування конфігураціями в уніфікований спосіб.
+
+## Використання в застосунках
+
+Функція `getConfiguration` є ключовою утилітою для ініціалізації та керування конфігурацією застосунку `intlayer`. Надаючи доступ до налаштувань, таких як locales, middleware та content directories, вона забезпечує узгодженість і масштабованість багатомовних і контент-орієнтованих застосунків.

package/docs/uk/vs_code_extension.md

@@ -0,0 +1,133 @@
+---
+createdAt: 2025-03-17
+updatedAt: 2025-09-30
+title: Офіційне розширення VS Code
+description: Дізнайтеся, як використовувати розширення Intlayer у VS Code для покращення робочого процесу розробки. Швидко переходьте між локалізованим контентом і ефективно керуйте своїми словниками.
+keywords:
+  - Розширення VS Code
+  - Intlayer
+  - Локалізація
+  - Інструменти розробки
+  - React
+  - Next.js
+  - JavaScript
+  - TypeScript
+slugs:
+  - doc
+  - vs-code-extension
+history:
+  - version: 7.3.0
+    date: 2025-11-25
+    changes: Додано команду Extract Content
+  - version: 6.1.5
+    date: 2025-09-30
+    changes: Додано демонстраційний GIF
+  - version: 6.1.0
+    date: 2025-09-24
+    changes: Додано розділ вибору середовища
+  - version: 6.0.0
+    date: 2025-09-22
+    changes: Вкладка Intlayer / команди Fill & Test
+  - version: 5.5.10
+    date: 2025-06-29
+    changes: Ініціалізація історії
+---
+
+# Офіційне розширення VS Code
+
+## Огляд
+
+[**Intlayer**](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) — офіційне розширення Visual Studio Code для **Intlayer**, створене для покращення досвіду розробника під час роботи з локалізованим контентом у ваших проєктах.
+
+![Розширення Intlayer для VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vs_code_extension_demo.gif?raw=true)
+
+Посилання на розширення: [https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension)
+
+## Особливості
+
+![Витяг вмісту](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_extract_content.gif?raw=true)
+
+- **Витяг вмісту** – Витягує вміст із ваших компонентів React / Vue / Svelte
+
+![Заповнення словників](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_fill_active_dictionary.gif?raw=true)
+
+- **Миттєва навігація** – Швидко переходьте до відповідного файлу вмісту, натиснувши на ключ `useIntlayer`.
+- **Заповнення словників** – Заповнює словники вмістом із вашого проєкту.
+
+![Список команд](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_list_commands.gif?raw=true)
+
+- **Простий доступ до команд Intlayer** – Build, push, pull, fill, test словників вмісту з легкістю.
+
+![Створити файл вмісту](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_create_content_file.gif?raw=true)
+
+- **Генератор декларацій вмісту** – Створюйте файли словників вмісту в різних форматах (`.ts`, `.esm`, `.cjs`, `.json`).
+
+![Тест словників](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_test_missing_dictionary.gif?raw=true)
+
+- **Тестування словників** – Перевірка словників на наявність відсутніх перекладів.
+
+![Перебудова словника](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_rebuild_dictionary.gif?raw=true)
+
+- **Тримайте свої словники в актуальному стані** – Оновлюйте словники останнім вмістом з вашого проєкту.
+
+![Вкладка Intlayer (Панель активності)](https://github.com/aymericzip/intlayer-vs-code-extension/blob/master/assets/vscode_extention_search_dictionary.gif?raw=true)
+
+- **Вкладка Intlayer (Панель активності)** – Оглядайте та шукайте словники у виділеній бічній вкладці з панеллю інструментів і контекстними діями (Build, Pull, Push, Fill, Refresh, Test, Create File).
+
+## Використання
+
+### Швидка навігація
+
+1. Відкрийте проєкт, що використовує **react-intlayer**.
+2. Знайдіть виклик `useIntlayer()`, наприклад:
+
+   ```tsx
+   const content = useIntlayer("app");
+   ```
+
+3. **Command-click** (`⌘+Click` на macOS) або **Ctrl+Click** (на Windows/Linux) по ключу (наприклад, `"app"`).
+4. VS Code автоматично відкриє відповідний файл словника, наприклад, `src/app.content.ts`.
+
+### Вкладка Intlayer (Панель активності)
+
+Використовуйте бічну вкладку для перегляду та керування словниками:
+
+- Відкрийте значок Intlayer на Панелі активності.
+- У **Search** введіть текст, щоб у реальному часі фільтрувати словники та записи.
+- У **Dictionaries** переглядайте середовища, словники та файли. Використовуйте панель інструментів для Build, Pull, Push, Fill, Refresh, Test та Create Dictionary File. Натисніть правою кнопкою для контекстних дій (Pull/Push для словників, Fill для файлів). Поточний файл у редакторі автоматично відображається в дереві, коли це доречно.
+
+### Доступ до команд
+
+Ви можете викликати команди через **Command Palette**.
+
+```sh
+Cmd + Shift + P (macOS) / Ctrl + Shift + P (Windows/Linux)
+```
+
+- **Build Dictionaries**
+- **Надіслати словники**
+- **Отримати словники**
+- **Заповнити словники**
+- **Тестувати словники**
+- **Створити файл словника**
+
+### Завантаження змінних оточення
+
+Intlayer рекомендує зберігати ваші AI API keys, а також Intlayer client ID і secret у змінних оточення.
+
+Розширення може завантажувати змінні оточення з вашого робочого простору, щоб виконувати команди Intlayer у правильному контексті.
+
+- **Порядок завантаження (за пріоритетом)**: `.env.<env>.local` → `.env.<env>` → `.env.local` → `.env`
+- **Недеструктивно**: існуючі значення `process.env` не перезаписуються.
+- **Область застосування**: файли визначаються з налаштованого базового каталогу (за замовчуванням — корінь робочого простору).
+
+#### Вибір активного середовища
+
+- **Палітра команд**: відкрийте палітру та виконайте `Intlayer: Select Environment`, потім оберіть середовище (наприклад, `development`, `staging`, `production`). Розширення намагатиметься завантажити перший доступний файл зі списку пріоритетів вище та покаже повідомлення на кшталт «Завантажено env з .env.<env>.local».
+- **Налаштування**: перейдіть у `Settings → Extensions → Intlayer` та встановіть:
+  - **Environment**: назва середовища, яка використовується для визначення файлів `.env.<env>*`.
+  - (Необов'язково) **Env File**: явний шлях до файлу `.env`. Якщо вказано, він має пріоритет над виведеним вище списком.
+
+#### Монорепозиторії та власні каталоги
+
+Якщо ваші файли `.env` розташовані поза коренем робочого простору, встановіть **Базовий каталог** у `Settings → Extensions → Intlayer`. Завантажувач шукатиме файли `.env` відносно цього каталогу.

package/docs/vi/intlayer_with_next-i18next.md

@@ -593,7 +593,6 @@ const config: IntlayerConfig = {
   },
   plugins: [
     syncJSON({
-      format: "i18next",
       source: ({ locale }) => `./locales/${locale}.json`,
     }),
   ],

package/docs/vi/intlayer_with_nextjs_14.md

@@ -105,6 +105,34 @@ bunx intlayer init
 
 ### Bước 2: Cấu hình Dự án của Bạn
 
+Here is the final structure that we will make:
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── [locale]
+│   │   │   ├── layout.tsx            # Locale layout for the Intlayer provider
+│   │   │   ├── page.content.ts
+│   │   │   └── page.tsx
+│   │   └── layout.tsx                # Root layout for style and global providers
+│   ├── components
+│   │   ├── client-component-example.content.ts
+│   │   ├── ClientComponentExample.tsx
+│   │   ├── LocaleSwitcher
+│   │   │   ├── localeSwitcher.content.ts
+│   │   │   └── LocaleSwitcher.tsx
+│   │   ├── server-component-example.content.ts
+│   │   └── ServerComponentExample.tsx
+│   └── middleware.ts
+├── intlayer.config.ts
+├── next.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+> If you don't want locale routing, intlayer can be used as a simple provider / hook. See [this guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md) for more details.
+
 Tạo một file cấu hình để cấu hình các ngôn ngữ cho ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"

package/docs/vi/intlayer_with_nextjs_15.md

@@ -137,6 +137,34 @@ bunx intlayer init
 
 ### Bước 2: Cấu hình Dự án của Bạn
 
+Here is the final structure that we will make:
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── [locale]
+│   │   │   ├── layout.tsx            # Locale layout for the Intlayer provider
+│   │   │   ├── page.content.ts
+│   │   │   └── page.tsx
+│   │   └── layout.tsx                # Root layout for style and global providers
+│   ├── components
+│   │   ├── client-component-example.content.ts
+│   │   ├── ClientComponentExample.tsx
+│   │   ├── LocaleSwitcher
+│   │   │   ├── localeSwitcher.content.ts
+│   │   │   └── LocaleSwitcher.tsx
+│   │   ├── server-component-example.content.ts
+│   │   └── ServerComponentExample.tsx
+│   └── middleware.ts
+├── intlayer.config.ts
+├── next.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+> If you don't want locale routing, intlayer can be used as a simple provider / hook. See [this guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md) for more details.
+
 Tạo một file cấu hình để cấu hình các ngôn ngữ của ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"

package/docs/vi/intlayer_with_nextjs_16.md

@@ -104,6 +104,34 @@ bunx intlayer init
 
 ### Bước 2: Cấu hình Dự án của Bạn
 
+Here is the final structure that we will make:
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── [locale]
+│   │   │   ├── layout.tsx            # Locale layout for the Intlayer provider
+│   │   │   ├── page.content.ts
+│   │   │   └── page.tsx
+│   │   └── layout.tsx                # Root layout for style and global providers
+│   ├── components
+│   │   ├── client-component-example.content.ts
+│   │   ├── ClientComponentExample.tsx
+│   │   ├── LocaleSwitcher
+│   │   │   ├── localeSwitcher.content.ts
+│   │   │   └── LocaleSwitcher.tsx
+│   │   ├── server-component-example.content.ts
+│   │   └── ServerComponentExample.tsx
+│   └── proxy.ts
+├── intlayer.config.ts
+├── next.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+> If you don't want locale routing, intlayer can be used as a simple provider / hook. See [this guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_no_locale_path.md) for more details.
+
 Tạo một file cấu hình để cấu hình các ngôn ngữ của ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat="typescript"