@intlayer/docs 9.5.4 → 9.5.6

package/docs/uk/how_works_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-12
-updatedAt: 2025-06-29
+updatedAt: 2026-09-19
 title: Як працює Intlayer
 description: Дізнайтеся, як Intlayer працює всередині. Зрозумійте архітектуру та компоненти, що роблять Intlayer потужним.
 keywords:
@@ -133,49 +133,105 @@ Intlayer складається з кількох пакетів, кожен і
 
 Пакет `intlayer` використовується в застосунках для оголошення контенту у файлах контенту.
 
-### react-intlayer
+### Фронтенд-фреймворки
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
 Пакет `react-intlayer` використовується для інтерпретації словників Intlayer і робить їх придатними для використання в React-застосунках.
 
-### next-intlayer
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
 
 Пакет `next-intlayer` використовується як шар поверх `react-intlayer`, щоб зробити словники Intlayer придатними для використання в Next.js-застосунках. Він інтегрує необхідні функції для роботи Intlayer у середовищі Next.js, такі як translation middleware, маршрутизація або конфігурація файлу `next.config.js`.
 
-### vue-intlayer
+  </Tab>
+  <Tab label="Vue" value="vue">
 
 Пакет `vue-intlayer` використовується для інтерпретації словників Intlayer і робить їх придатними для використання у Vue-застосунках.
 
-### nuxt-intlayer
+  </Tab>
+  <Tab label="Nuxt" value="nuxt">
 
 The `nuxt-intlayer` package is as Nuxt module to make Intlayer dictionaries usable in Nuxt applications. It integrates essential features to make Intlayer work in a Nuxt environment, such as translation middleware, routing, or the `nuxt.config.js` file configuration.
 
-### svelte-intlayer
+  </Tab>
+  <Tab label="Svelte" value="svelte">
 
 The `svelte-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Svelte applications.
 
-### solid-intlayer (WIP)
+  </Tab>
+  <Tab label="Solid" value="solid">
 
 The `solid-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Solid.js applications.
 
-### preact-intlayer
+  </Tab>
+  <Tab label="Preact" value="preact">
 
 The `preact-intlayer` package is used to interpret Intlayer dictionaries and make them usable in Preact applications.
 
-### angular-intlayer (WIP)
+  </Tab>
+  <Tab label="Angular" value="angular">
 
 Пакет `angular-intlayer` використовується для інтерпретації словників Intlayer та забезпечення їхнього використання в додатках Angular.
 
-### express-intlayer
+  </Tab>
+  <Tab label="Astro" value="astro">
 
-Пакет `express-intlayer` використовується для застосування Intlayer на бекенді Express.js.
+Пакет `astro-intlayer` надає необхідні інструменти для інтеграції Intlayer у додатки Astro. Він налаштовує маршрутизацію на основі локалі та керування словниками.
+
+  </Tab>
+  <Tab label="Remix" value="remix">
+
+Пакет `remix-intlayer` надає необхідні інструменти для інтеграції Intlayer у додатки Remix. Він налаштовує маршрутизацію на основі локалі, контекст на стороні сервера та керування словниками.
 
-### react-native-intlayer
+  </Tab>
+  <Tab label="React Native" value="react-native">
 
 Пакет `react-native-intlayer` надає інструменти для інтеграції плагінів, щоб Intlayer працював з бандлером Metro.
 
-### lynx-intlayer
+  </Tab>
+  <Tab label="Lit" value="lit">
+
+Пакет `lit-intlayer` надає інструменти та компоненти для інтерпретації та використання словників Intlayer у програмах Lit.
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+Пакет `vanilla-intlayer` надає інструменти для інтеграції Intlayer у програми на чистому JavaScript, HTML або PHP.
+
+  </Tab>
+</Tabs>
+
+### Бекенд-фреймворки
+
+<Tabs group="backend">
+  <Tab label="Express" value="express">
+
+Пакет `express-intlayer` використовується для застосування Intlayer на бекенді Express.js.
+
+  </Tab>
+  <Tab label="Fastify" value="fastify">
+
+Пакет `fastify-intlayer` надає плагін для додатків на Fastify для роботи з інтернаціоналізацією. Він визначає локаль користувача та декорує об'єкт запиту (request).
 
-Пакет `lynx-intlayer` надає інструменти для інтеграції плагінів, щоб Intlayer працював з бандлером Lynx.
+  </Tab>
+  <Tab label="Hono" value="hono">
+
+Пакет `hono-intlayer` надає проміжне програмне забезпечення (middleware) для додатків Hono для обробки інтернаціоналізації. Він виявляє локаль користувача та заповнює об'єкт контексту.
+
+  </Tab>
+  <Tab label="Elysia" value="elysia">
+
+Пакет `elysia-intlayer` надає плагін для додатків на Elysia для роботи з інтернаціоналізацією. Він визначає локаль користувача та впроваджує об'єкт `intlayer` у контекст маршруту.
+
+  </Tab>
+  <Tab label="AdonisJS" value="adonis">
+
+Пакет `adonis-intlayer` надає проміжне ПЗ для додатків AdonisJS для обробки інтернаціоналізації. Він визначає локаль користувача та надає функції перекладу.
+
+  </Tab>
+</Tabs>
 
 ### vite-intlayer
 
@@ -185,6 +241,10 @@ The `preact-intlayer` package is used to interpret Intlayer dictionaries and mak
 
 Містить команди та плагіни `react-scripts-intlayer` для інтеграції Intlayer з додатком на базі Create React App. Ці плагіни засновані на [craco](https://craco.js.org/) і включають додаткову конфігурацію для бандлера [Webpack](https://webpack.js.org/).
 
+### eslint-plugin-intlayer
+
+Пакет `eslint-plugin-intlayer` надає правила ESLint та oxlint для виявлення неперекладених рядків, перевірки визначень словників та дотримання найкращих практик i18n.
+
 ### intlayer-editor
 
 Пакет `intlayer-editor` використовується для забезпечення можливості використання візуального редактора. Цей пакет є опціональним, його можна встановити в застосунках, і він буде використовуватися пакетом `react-intlayer`.
@@ -218,6 +278,18 @@ The `@intlayer/webpack` package is used to provide a Webpack configuration to ma
 
 Пакет `@intlayer/mcp` забезпечує сервер MCP (Model Context Protocol), який надає підтримку IDE на базі ШІ, адаптовану до екосистеми Intlayer. Він автоматично завантажує документацію та інтегрується з Intlayer CLI.
 
+### @intlayer/lsp
+
+Пакет `@intlayer/lsp` надає сервер Language Server Protocol (LSP), адаптований для Intlayer. Він забезпечує функції IDE, такі як перехід до визначення, пошук посилань, попередній перегляд при наведенні, автодоповнення ключів словника та діагностичні попередження.
+
+### @intlayer/ai
+
+Пакет `@intlayer/ai` надає можливості SDK для програм Intlayer, уможливлюючи автоматизований переклад і генерацію контенту за допомогою ШІ.
+
+### @intlayer/analytics
+
+Пакет `@intlayer/analytics` надає інструменти для збору метрик показів контенту, аналітики на рівні сторінок/локалей та вузлів, а також забезпечує A/B-тестування контенту.
+
 ### @intlayer/dictionaries-entry
 
 Пакет `@intlayer/dictionaries-entry` повертає шлях entry словників Intlayer: об'єднані словники з кореня, а також необ'єднані, віддалені, динамічні та fetch-словники з підшляхів `/unmerged`, `/remote`, `/dynamic` та `/fetch`. Оскільки з браузера неможливо виконувати пошук по файловій системі, використання bundler-ів, таких як Webpack або Rollup, для отримання шляху entry словників неможливе. Пакет та його підшляхи розроблені для того, щоб їх можна було alias-ити, що дозволяє оптимізувати bundling для різних збирачів, таких як Vite, Webpack та Turbopack.

package/docs/uk/intlayer_visual_editor.md

@@ -287,6 +287,13 @@ pnpm intlayer-editor start -e development
 
 Він створений для середовищ розробки та стейджингу, де допустима перезбірка після редагування. Для редагування контенту на живих сайтах рекомендується [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_CMS.md).
 
+</Question>
+<Question title="Яка вартість візуального редактора? Чи не є він надлишковим, якщо він мені не потрібен?">
+
+Візуальний редактор Intlayer має **нульову вартість** для вашого застосунку, якщо він не налаштований. Додаткова логіка завантажується лише тоді, коли вона явно увімкнена та необхідна.
+
+Навіть якщо він увімкнений, вплив є надзвичайно малим (+5 кБ, завантажується динамічно лише під час активації), оскільки основна логіка обробляється серверним редактором на [app.intlayer.org](https://app.intlayer.org) або через пакет `intlayer-editor`. Якщо вам потрібне просте рішення для перекладу без візуального редагування, Intlayer не створює жодних накладних витрат для вашого застосунку.
+
 </Question>
 <Question title="Чи є візуальний редактор безкоштовним?">
 

package/docs/uk/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-06-23
+updatedAt: 2026-09-20
 title: "Astro i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -18,6 +18,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Додано хуки useIntlayer / useLocale та middleware Astro.locals до astro-intlayer"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Оновлення використання API useIntlayer у Solid для прямого доступу до властивостей"
@@ -152,7 +155,7 @@ bun add intlayer astro-intlayer
   Основний пакет, що надає інструменти i18n для керування конфігурацією, перекладами, [декларацією вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md), транспіляцією та [командами CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md).
 
 - **astro-intlayer**
-  Плагін інтеграції Astro для зв'язку Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production); він також включає middleware для визначення бажаної мови користувача, керування cookie та обробки перенаправлень URL.
+  Включає плагін інтеграції Astro для інтеграції Intlayer із [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), middleware, що розпізнає локаль кожного запиту в `Astro.locals.intlayer`, та хуки `useIntlayer` / `useDictionary` / `useLocale`. Той самий шлях імпорту розпізнається як серверна реалізація у фронтматтері `.astro` та як клієнтська (на базі `vanilla-intlayer`) у блоках `<script>`.
 
 </Step>
 <Step number={2} title="Налаштуйте свій проект">
@@ -230,26 +233,28 @@ export default appContent;
 </Step>
 <Step number={5} title="Використання вмісту в Astro">
 
-Ви можете використовувати словники безпосередньо у ваших `.astro` файлах, використовуючи основні допоміжні функції, експортовані з `intlayer`.
+Використовуйте ваші словники у файлах `.astro` за допомогою хуків, що експортуються `astro-intlayer`. Вони мають такі ж сигнатури, як і `react-intlayer`: `useIntlayer("key")` повертає вміст словника, а `useLocale()` поточну локаль, без необхідності передавати аргументи.
+
+Локаль надходить із middleware `astro-intlayer`, яке інтеграція реєструє перед вашим власним `src/middleware.ts`. Воно визначає її для кожного запиту, на основі префікса URL, потім збереженої клієнтом локалі (cookie або заголовок), потім `Accept-Language`, і зберігає в `Astro.locals.intlayer`. Попередньо відрендерені сторінки використовують лише URL, оскільки вони рендеряться один раз для кожного відвідувача.
+
+Вам також слід додати SEO-метадані, такі як hreflang і канонічні посилання, на кожну сторінку та включити перемикач мов, щоб користувачі могли змінювати мову.
 
 ```astro fileName="src/pages/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
   defaultLocale,
   localeMap,
   getHTMLTextDir,
-  type LocalesValues,
 } from "intlayer";
 import LocaleSwitcher from "../components/LocaleSwitcher.astro";
 
-// Get the current locale from the URL (e.g. /es/about -> 'es')
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+// Локаль, визначена middleware (напр. /uk/about -> 'uk')
+const { locale } = useLocale();
 
-// Get the content for the 'app' dictionary
-const { title } = getIntlayer("app", locale);
+// Вміст словника 'app' для цієї локалі
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -301,6 +306,8 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> `Astro.locals.intlayer` також надає доступ до `locale`, `defaultLocale` та `availableLocales` у ваших власних middleware та ендпоінтах. Передайте локаль або селектор другим аргументом (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), щоб перевизначити локаль запиту для одного виклику.
+
 </Step>
 <Step number={6} title="Локалізована маршрутизація">
 
@@ -325,44 +332,51 @@ const { title } = getIntlayer('app');
 
 ```astro fileName="src/components/LocaleSwitcher.astro"
 ---
-import {
-  locales,
-  getLocaleName,
-  getLocalizedUrl,
-  getLocaleFromPath,
-  getPathWithoutLocale,
-  type LocalesValues,
-} from "intlayer";
+import { useLocale } from "astro-intlayer";
+import { getLocaleName, getLocalizedUrl, getPathWithoutLocale } from "intlayer";
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const { locale, availableLocales } = useLocale();
 const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ---
 
-<nav>
-  {
-    locales.map((localeItem) => (
-      <a
-        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
-        data-locale={localeItem}
-        aria-current={localeItem === locale ? "page" : undefined}
-      >
-        {getLocaleName(localeItem)}
-      </a>
-    ))
-  }
+<nav aria-label="Languages">
+  <ul>
+    {
+      availableLocales.map((localeItem) => (
+        <li key={localeItem} class="p-1">
+          <a
+            href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+            data-locale={localeItem}
+            aria-current={localeItem === locale ? "page" : undefined}
+          >
+            {getLocaleName(localeItem)}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
 </nav>
 
 <script>
-  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+  // У браузері той самий імпорт розпізнається як клієнтська реалізація
+  import { useLocale } from "astro-intlayer";
+  import { getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  // Зберігає вибір у cookie локалі, після чого переходить на локалізований URL
+  const { setLocale } = useLocale({
+    onLocaleChange: (newLocale) => {
+      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
+    },
+  });
 
   const localeLinks = document.querySelectorAll("[data-locale]");
 
   localeLinks.forEach((link) => {
-    link.addEventListener("click", (e) => {
+    link.addEventListener("click", (event) => {
       const locale = link.getAttribute("data-locale") as LocalesValues;
 
-      // Update the locale cookie
-      setLocaleInStorageClient(locale);
+      event.preventDefault();
+      setLocale(locale);
     });
   });
 </script>
@@ -372,6 +386,13 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
     display: flex;
     gap: 1rem;
   }
+  ul {
+    display: flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    gap: 0.5rem;
+  }
   a[aria-current="page"] {
     font-weight: bold;
     text-decoration: underline;
@@ -379,8 +400,11 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 </style>
 ```
 
-> **Примітка щодо збереження налаштувань:**
-> Використання `setLocaleInStorageClient` у клієнтському скрипті гарантує, що мовні уподобання користувача зберігаються у кукі. Це дозволяє проміжному ПЗ Intlayer запам'ятати вибір і автоматично перенаправляти користувача на бажану мову при наступних візитах.
+> **Примітка щодо збереження стану:**
+> `setLocale` із клієнтського `useLocale` зберігає мовні вподобання користувача в cookie. Це дозволяє Intlayer запам'ятовувати вибір і автоматично перенаправляти користувача на бажану мову під час наступних візитів: сторінки, що рендерилися на вимогу (адаптер з `output: 'server'` або `prerender = false`), перенаправляються middleware Intlayer до надсилання будь-якого HTML, тоді як попередньо згенеровані сторінки, що надаються як статичні файли, перенаправляються невеликим скриптом, який інтеграція вставляє в кожну сторінку. Встановіть `routing.enableProxy` в `false`, щоб вимкнути обидва механізми. В `astro dev` cookie ігнорується як джерело перенаправлення, якщо тільки `routing.enableProxy` не встановлено в `true`, тому застарілий cookie не зможе перехопити сторінки, над якими ви працюєте.
+>
+> **Взаємосумісність сервера та клієнта:**
+> `astro-intlayer` розпізнається як серверні хуки у фронтматтері (зчитуючи `Astro.locals`) та як клієнтські хуки `vanilla-intlayer` у блоках `<script>` та островах (islands), з тими самими іменами та структурою даних. `setLocale` та `onChange` діють лише на клієнті, викличте `installIntlayer()` один раз для ініціалізації клієнтського сховища. `astro-intlayer/client` експортує клієнтську точку входу явно.
 
 </Step>
 <Step number={8} title="Sitemap та Robots.txt">
@@ -404,10 +428,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -448,11 +472,12 @@ export const GET: APIRoute = ({ site }) => {
 
 Продовжуйте будувати свій додаток, використовуючи фреймворк за вашим вибором.
 
-- Intlayer + React: [Intlayer з React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer з Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer з Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer з Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer з Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer з React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer з Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer з Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer з Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer з Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer з Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Витягніть вміст ваших компонентів" isOptional={true}>
@@ -518,21 +543,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Компілятор Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Оновіть свій `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Зберіть застосунок, щоб перетворити ваші компоненти та витягти вміст
 
 ```bash packageManager="npm"
 npm run build # Або npm run dev

package/docs/uk/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-06-23
+updatedAt: 2026-09-20
 title: "Astro + Lit i18n - Повний посібник з перекладу вашого застосунку"
 description: "Більше ніякого i18next. Посібник 2026 зі створення багатомовного (i18n) застосунку Astro + Lit. Перекладайте за допомогою ШІ-агентів та оптимізуйте розмір бандлу, SEO та продуктивність."
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Використання хуків useIntlayer / useLocale з astro-intlayer на сторінці Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Оновлення використання API useIntlayer у Solid для прямого доступу до властивостей"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   Основний пакет, що надає інструменти i18n для керування конфігурацією, перекладами, [декларацією вмісту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md), транспіляцією та [командами CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/cli/index.md).
 
 - **astro-intlayer**
-  Плагін інтеграції Astro для зв'язку Intlayer з [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production); він також включає middleware для визначення бажаної мови користувача, керування cookie та обробки перенаправлень URL.
+  Включає плагін інтеграції Astro для інтеграції Intlayer із [бандлером Vite](https://vite.dev/guide/why.html#why-bundle-for-production), middleware, що розпізнає локаль кожного запиту в `Astro.locals.intlayer`, та хуки `useIntlayer` / `useDictionary` / `useLocale`. Той самий шлях імпорту розпізнається як серверна реалізація у фронтматтері `.astro` та як клієнтська (на базі `vanilla-intlayer`) у блоках `<script>`.
 
 - **lit**
   Основний пакет Lit для створення швидких і легких Web Components.
@@ -246,19 +249,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Використання вмісту в Astro">
 
-Ви можете використовувати словники безпосередньо у ваших `.astro` файлах, використовуючи основні допоміжні функції, експортовані з `intlayer`. Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці. Lit custom elements імпортуються за допомогою блоку `<script>` на стороні клієнта і розміщуються в body.
+Використовуйте ваші словники у файлах `.astro` за допомогою хуків, що експортуються `astro-intlayer`. Вони мають такі ж сигнатури, як і `react-intlayer`: `useIntlayer("key")` повертає вміст словника, а `useLocale()` поточну локаль, без необхідності передавати аргументи.
+
+Локаль надходить із middleware `astro-intlayer`, яке інтеграція реєструє перед вашим власним `src/middleware.ts`. Воно визначає її для кожного запиту, на основі префікса URL, потім збереженої клієнтом локалі (cookie або заголовок), потім `Accept-Language`, і зберігає в `Astro.locals.intlayer`. Попередньо відрендерені сторінки використовують лише URL, оскільки вони рендеряться один раз для кожного відвідувача.
+
+Lit custom elements імпортуються за допомогою блоку `<script>` на стороні клієнта і розміщуються в body.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 
 export const getStaticPaths = () => {
@@ -267,8 +272,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Локаль, визначена middleware (напр. /uk/about -> 'uk')
+const { locale } = useLocale();
+
+// Вміст словника 'lit-demo' для цієї локалі
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -327,6 +335,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` також надає доступ до `locale`, `defaultLocale` та `availableLocales` у ваших власних middleware та ендпоінтах. Передайте локаль або селектор другим аргументом (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), щоб перевизначити локаль запиту для одного виклику.
+
 > **Примітка щодо налаштування маршрутизації:**
 > Структура каталогів, яку ви використовуєте, залежить від параметра `middleware.routing` у `intlayer.config.ts`:
 >
@@ -483,10 +493,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -586,21 +596,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Компілятор Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Оновіть свій `vite.config.ts`, щоб включити плагін `intlayerCompiler`:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Зберіть застосунок, щоб перетворити ваші компоненти та витягти вміст
 
 ```bash packageManager="npm"
 npm run build # Або npm run dev