@intlayer/docs 9.5.4 → 9.5.6

package/docs/ur/intlayer_with_vite+lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-31
+updatedAt: 2026-09-20
 title: "Vite + Lit i18n - اپنی ایپ کو ترجمہ کرنے کا مکمل گائیڈ"
 description: "اب i18next کی ضرورت نہیں۔ 2026 میں Vite + Lit ایپ کو کثیر لسانی (i18n) بنانے کا گائیڈ۔ AI ایجنٹس سے ترجمہ کریں اور بنڈل سائز، SEO اور پرفارمنس بہتر بنائیں۔"
 keywords:
@@ -544,6 +544,76 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
+<Tabs>
+ <Tab value='Extract کمانڈ'>
+
+اپنے اجزاء کو تبدیل کرنے اور مواد نکالنے کے لیے ایکسٹریکٹر چلائیں
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bunx intlayer extract
+```
+
+ </Tab>
+ <Tab value='Babel کمپائلر'>
+
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
+> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
+
+ </Tab>
+ <Tab value='intlayer < 9'>
+
+`intlayerCompiler` پلگ ان شامل کرنے کے لیے اپنی `vite.config.ts` اپ ڈیٹ کریں:
+
+```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
+  ],
+});
+```
+
+ </Tab>
+ </Tabs>
+
+اپنے اجزاء کو تبدیل کرنے اور مواد نکالنے کے لیے اپنی ایپلیکیشن بلڈ کریں
+
+```bash packageManager="npm"
+npm run build # یا npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # یا pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # یا yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # یا bun run dev
+```
+
+ </Tab>
+</Tabs>
+
 </Step>
 
 </Steps>
@@ -582,7 +652,9 @@ const pathList = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+const sitemapXml = generateSitemap(pathList, {
+  siteUrl: "https://example.com",
+});
 fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
 
 const getAllMultilingualUrls = (urls) =>
@@ -595,7 +667,7 @@ const robotsTxt = [
   "Allow: /",
   ...disallowedPaths.map((path) => `Disallow: ${path}`),
   "",
-  `Sitemap: ${SITE_URL}/sitemap.xml`,
+  `Sitemap: https://example.com/sitemap.xml`,
 ].join("\n");
 
 fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

package/docs/ur/intlayer_with_vite+vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-31
+updatedAt: 2026-09-20
 title: "Vite + Vanilla JS i18n - اپنی ایپ کو ترجمہ کرنے کا مکمل گائیڈ"
 description: "اب i18next کی ضرورت نہیں۔ 2026 میں Vite + Vanilla JS ایپ کو کثیر لسانی (i18n) بنانے کا گائیڈ۔ AI ایجنٹس سے ترجمہ کریں اور بنڈل سائز، SEO اور پرفارمنس بہتر بنائیں۔"
 keywords:
@@ -559,8 +559,14 @@ bunx intlayer extract
  </Tab>
  <Tab value='Babel کمپائلر'>
 
+ <Tabs>
+ <Tab value='intlayer >= 9'>
+
 > Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
 
+ </Tab>
+ <Tab value='intlayer < 9'>
+
 `intlayerCompiler` پلگ ان شامل کرنے کے لیے اپنی `vite.config.ts` اپ ڈیٹ کریں:
 
 ```ts fileName="vite.config.ts"
@@ -575,6 +581,11 @@ export default defineConfig({
 });
 ```
 
+ </Tab>
+ </Tabs>
+
+اپنے اجزاء کو تبدیل کرنے اور مواد نکالنے کے لیے اپنی ایپلیکیشن بلڈ کریں
+
 ```bash packageManager="npm"
 npm run build # یا npm run dev
 ```
@@ -631,7 +642,9 @@ const pathList = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
+const sitemapXml = generateSitemap(pathList, {
+  siteUrl: "https://example.com",
+});
 fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);
 
 const getAllMultilingualUrls = (urls) =>
@@ -644,7 +657,7 @@ const robotsTxt = [
   "Allow: /",
   ...disallowedPaths.map((path) => `Disallow: ${path}`),
   "",
-  `Sitemap: ${SITE_URL}/sitemap.xml`,
+  `Sitemap: https://example.com/sitemap.xml`,
 ].join("\n");
 
 fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

package/docs/ur/introduction.md

@@ -189,7 +189,6 @@ Intlayer جدید ویب ڈیولپمنٹ کی ضروریات کو پورا کر
 - **[Astro + Solid کے ساتھ Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/intlayer_with_astro_solid.md)**
 - **[Astro + Preact کے ساتھ Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/intlayer_with_astro_preact.md)**
 - **[Astro + Lit کے ساتھ Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/intlayer_with_astro_lit.md)**
-- **[Astro + Vanilla JS کے ساتھ Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/intlayer_with_astro_vanilla.md)**
 - **[Vite + Vue کے ساتھ Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/intlayer_with_vite+vue.md)**
 - **[Nuxt کے ساتھ Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/intlayer_with_nuxt.md)**
 - **[Vite + Svelte کے ساتھ Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ur/intlayer_with_vite+svelte.md)**

package/docs/vi/how_works_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-12
-updatedAt: 2025-06-29
+updatedAt: 2026-09-19
 title: Cách Thức Hoạt Động của Intlayer
 description: Tìm hiểu cách Intlayer hoạt động bên trong. Hiểu kiến trúc và các thành phần làm cho Intlayer mạnh mẽ.
 keywords:
@@ -131,49 +131,105 @@ Intlayer bao gồm nhiều gói, mỗi gói có một vai trò cụ thể trong
 
 Gói `intlayer` được sử dụng trong các ứng dụng để khai báo nội dung trong các tệp nội dung.
 
-### react-intlayer
+### Framework Frontend
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
 Gói `react-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng React.
 
-### next-intlayer
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
 
 Gói `next-intlayer` được sử dụng như một lớp trên `react-intlayer` để làm cho các từ điển Intlayer có thể sử dụng trong các ứng dụng Next.js. Nó tích hợp các tính năng thiết yếu để làm cho Intlayer hoạt động trong môi trường Next.js, chẳng hạn như middleware dịch thuật, định tuyến, hoặc cấu hình tệp `next.config.js`.
 
-### vue-intlayer
+  </Tab>
+  <Tab label="Vue" value="vue">
 
 Gói `vue-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Vue.
 
-### nuxt-intlayer
+  </Tab>
+  <Tab label="Nuxt" value="nuxt">
 
 Gói `nuxt-intlayer` là một module Nuxt để làm cho các từ điển Intlayer có thể sử dụng trong các ứng dụng Nuxt. Nó tích hợp các tính năng thiết yếu để làm cho Intlayer hoạt động trong môi trường Nuxt, chẳng hạn như middleware dịch thuật, định tuyến, hoặc cấu hình tệp `nuxt.config.js`.
 
-### svelte-intlayer (Đang phát triển)
+  </Tab>
+  <Tab label="Svelte" value="svelte">
 
 Gói `svelte-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Svelte.
 
-### solid-intlayer (Đang phát triển)
+  </Tab>
+  <Tab label="Solid" value="solid">
 
 Gói `solid-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Solid.js.
 
-### preact-intlayer
+  </Tab>
+  <Tab label="Preact" value="preact">
 
 Gói `preact-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Preact.
 
-### angular-intlayer (Đang phát triển)
+  </Tab>
+  <Tab label="Angular" value="angular">
 
 Gói `angular-intlayer` được sử dụng để diễn giải các từ điển Intlayer và làm cho chúng có thể sử dụng trong các ứng dụng Angular.
 
-### express-intlayer
+  </Tab>
+  <Tab label="Astro" value="astro">
 
-Gói `express-intlayer` được sử dụng để dùng Intlayer trên backend Express.js.
+Gói `astro-intlayer` cung cấp các công cụ cần thiết để tích hợp Intlayer vào các ứng dụng Astro. Nó cấu hình định tuyến theo locale và quản lý từ điển.
+
+  </Tab>
+  <Tab label="Remix" value="remix">
+
+Gói `remix-intlayer` cung cấp các công cụ cần thiết để tích hợp Intlayer vào các ứng dụng Remix. Nó cấu hình định tuyến theo locale, ngữ cảnh phía máy chủ và quản lý từ điển.
 
-### react-native-intlayer
+  </Tab>
+  <Tab label="React Native" value="react-native">
 
 Gói `react-native-intlayer` cung cấp các công cụ tích hợp plugin để Intlayer hoạt động với Metro bundler.
 
-### lynx-intlayer
+  </Tab>
+  <Tab label="Lit" value="lit">
+
+Gói `lit-intlayer` cung cấp các công cụ và thành phần để diễn giải và sử dụng từ điển Intlayer trong các ứng dụng Lit.
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+Gói `vanilla-intlayer` cung cấp các công cụ để tích hợp Intlayer vào các ứng dụng JavaScript thuần, HTML hoặc PHP.
+
+  </Tab>
+</Tabs>
+
+### Framework Backend
+
+<Tabs group="backend">
+  <Tab label="Express" value="express">
+
+Gói `express-intlayer` được sử dụng để dùng Intlayer trên backend Express.js.
+
+  </Tab>
+  <Tab label="Fastify" value="fastify">
+
+Gói `fastify-intlayer` cung cấp một plugin cho các ứng dụng Fastify để xử lý internationalization. Nó phát hiện locale của người dùng và mở rộng (decorate) đối tượng request.
 
-Gói `lynx-intlayer` cung cấp các công cụ tích hợp plugin để Intlayer hoạt động với Lynx bundler.
+  </Tab>
+  <Tab label="Hono" value="hono">
+
+Gói `hono-intlayer` cung cấp một middleware cho các ứng dụng Hono để xử lý quốc tế hóa. Nó phát hiện ngôn ngữ của người dùng và điền vào đối tượng ngữ cảnh.
+
+  </Tab>
+  <Tab label="Elysia" value="elysia">
+
+Gói `elysia-intlayer` cung cấp một plugin cho các ứng dụng Elysia để xử lý internationalization. Nó phát hiện locale của người dùng và tiêm một đối tượng `intlayer` vào route context.
+
+  </Tab>
+  <Tab label="AdonisJS" value="adonis">
+
+Gói `adonis-intlayer` cung cấp một middleware cho các ứng dụng AdonisJS để xử lý quốc tế hóa. Nó phát hiện ngôn ngữ của người dùng và cung cấp các hàm dịch.
+
+  </Tab>
+</Tabs>
 
 ### vite-intlayer
 
@@ -183,6 +239,10 @@ Bao gồm plugin Vite để tích hợp Intlayer với [Vite bundler](https://vi
 
 Bao gồm các lệnh và plugin `react-scripts-intlayer` để tích hợp Intlayer với ứng dụng dựa trên Create React App. Các plugin này dựa trên [craco](https://craco.js.org/) và bao gồm cấu hình bổ sung cho bundler [Webpack](https://webpack.js.org/).
 
+### eslint-plugin-intlayer
+
+Gói `eslint-plugin-intlayer` cung cấp các quy tắc ESLint và oxlint để phát hiện chuỗi chưa được dịch, xác thực định nghĩa từ điển và thực thi các phương pháp hay nhất về i18n.
+
 ### intlayer-editor
 
 Gói `intlayer-editor` được sử dụng để cho phép sử dụng trình soạn thảo trực quan. Gói này là tùy chọn, có thể được cài đặt trong các ứng dụng và sẽ được gói `react-intlayer` sử dụng.
@@ -216,6 +276,18 @@ Gói `@intlayer/cli` là một gói NPM được sử dụng để khai báo cá
 
 Gói `@intlayer/mcp` cung cấp một server MCP (Model Context Protocol) mang đến sự hỗ trợ IDE được trang bị AI, được tùy chỉnh cho hệ sinh thái Intlayer. Nó tự động tải tài liệu và tích hợp với CLI của Intlayer.
 
+### @intlayer/lsp
+
+Gói `@intlayer/lsp` cung cấp máy chủ Language Server Protocol (LSP) dành riêng cho Intlayer. Nó mang lại các tính năng IDE như Đi đến định nghĩa, Tìm tham chiếu, xem trước khi di chuột, tự động hoàn thành khóa từ điển và cảnh báo chẩn đoán.
+
+### @intlayer/ai
+
+Gói `@intlayer/ai` cung cấp các khả năng SDK cho các ứng dụng Intlayer, cho phép dịch tự động và tạo nội dung bằng AI.
+
+### @intlayer/analytics
+
+Gói `@intlayer/analytics` cung cấp các công cụ để thu thập số liệu lượt hiển thị nội dung, phân tích cấp độ trang/ngôn ngữ và nút, đồng thời hỗ trợ thử nghiệm A/B nội dung.
+
 ### @intlayer/dictionaries-entry
 
 Gói `@intlayer/dictionaries-entry` trả về đường dẫn entry của các từ điển Intlayer: các từ điển đã hợp nhất từ thư mục gốc, và các từ điển chưa hợp nhất, từ xa (remote), động (dynamic) và fetch từ các đường dẫn con `/unmerged`, `/remote`, `/dynamic` và `/fetch`. Vì việc tìm kiếm hệ thống tập tin từ trình duyệt là không thể, nên việc sử dụng các bundler như Webpack hoặc Rollup để lấy đường dẫn entry của các từ điển cũng không khả thi. Gói này và các đường dẫn con của nó được thiết kế để được alias, cho phép tối ưu hóa bundling trên nhiều bundler khác nhau như Vite, Webpack và Turbopack.

package/docs/vi/intlayer_visual_editor.md

@@ -287,6 +287,13 @@ Editor hiển thị ứng dụng trong iframe, do đó Content Security Policy (
 
 Editor được thiết kế cho môi trường development và staging, nơi việc build lại sau khi chỉnh sửa là chấp nhận được. Để chỉnh sửa nội dung trên trang web production trực tiếp, nên sử dụng [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md).
 
+</Question>
+<Question title="Chi phí của trình chỉnh sửa trực quan là bao nhiêu? Nó có dư thừa nếu tôi không cần đến không?">
+
+Trình chỉnh sửa trực quan Intlayer có **chi phí bằng không** đối với ứng dụng của bạn nếu không được thiết lập. Logic bổ sung chỉ được tải nếu được bật rõ ràng và khi cần thiết.
+
+Ngay cả khi được bật, chi phí cũng cực kỳ nhẹ (+5 KB, chỉ tải động khi được kích hoạt) vì phần lớn logic được xử lý bởi trình chỉnh sửa máy chủ trên [app.intlayer.org](https://app.intlayer.org) hoặc thông qua gói `intlayer-editor`. Nếu bạn chỉ cần một giải pháp dịch thuật đơn giản mà không cần chỉnh sửa trực quan, Intlayer sẽ không tạo ra bất kỳ tải phụ nào cho ứng dụng của bạn.
+
 </Question>
 <Question title="Visual editor có miễn phí không?">
 

package/docs/vi/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-06-23
+updatedAt: 2026-09-20
 title: "Astro i18n - Hướng dẫn đầy đủ để dịch ứng dụng của bạn"
 description: "Không còn i18next nữa. Hướng dẫn 2026 để xây dựng ứng dụng Astro đa ngôn ngữ (i18n). Dịch với các AI agent và tối ưu hóa kích thước bundle, SEO và hiệu suất."
 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: "Thêm các hook useIntlayer / useLocale và middleware Astro.locals vào astro-intlayer"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Cập nhật cách sử dụng API useIntlayer của Solid sang truy cập thuộc tính trực tiếp"
@@ -152,7 +155,7 @@ bun add intlayer astro-intlayer
   Gói cốt lõi cung cấp các công cụ i18n để quản lý cấu hình, bản dịch, [khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md), chuyển mã và [các lệnh CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/index.md).
 
 - **astro-intlayer**
-  Plugin tích hợp Astro để kết nối Intlayer với [trình đóng gói Vite](https://vite.dev/guide/why.html#why-bundle-for-production); nó cũng bao gồm middleware để phát hiện ngôn ngữ ưa thích của người dùng, quản lý cookie và xử lý chuyển hướng URL.
+  Bao gồm plugin tích hợp Astro để tích hợp Intlayer với [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), một middleware phân giải ngôn ngữ của mỗi yêu cầu vào `Astro.locals.intlayer`, và các hook `useIntlayer` / `useDictionary` / `useLocale`. Cùng một đường dẫn import sẽ phân giải thành triển khai máy chủ trong frontmatter `.astro` của bạn và thành triển khai máy khách (được hỗ trợ bởi `vanilla-intlayer`) trong các khối `<script>`.
 
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
@@ -230,26 +233,28 @@ export default appContent;
 </Step>
 <Step number={5} title="Sử dụng nội dung trong Astro">
 
-Bạn có thể sử dụng các từ điển trực tiếp trong các file `.astro` bằng cách sử dụng các hàm hỗ trợ cốt lõi được xuất từ `intlayer`.
+Sử dụng từ điển của bạn trong các tệp `.astro` với các hook được xuất bởi `astro-intlayer`. Chúng chia sẻ chữ ký của `react-intlayer`: `useIntlayer("key")` trả về nội dung của từ điển và `useLocale()` trả về ngôn ngữ hiện tại mà không cần truyền tham số.
+
+Ngôn ngữ đến từ middleware `astro-intlayer`, mà tích hợp tự động đăng ký trước `src/middleware.ts` của riêng bạn. Nó phân giải ngôn ngữ cho mỗi yêu cầu, từ tiền tố URL, sau đó đến ngôn ngữ được lưu trữ bởi máy khách (cookie hoặc tiêu đề), sau đó đến `Accept-Language`, và lưu trữ trong `Astro.locals.intlayer`. Các trang được kết xuất trước chỉ sử dụng URL vì chúng được kết xuất một lần cho mọi khách truy cập.
+
+Bạn cũng nên thêm siêu dữ liệu SEO như hreflang và liên kết chuẩn (canonical) vào mỗi trang và bao gồm bộ chuyển đổi ngôn ngữ để cho phép người dùng thay đổi ngôn ngữ.
 
 ```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;
+// Ngôn ngữ được phân giải bởi middleware (ví dụ /vi/about -> 'vi')
+const { locale } = useLocale();
 
-// Get the content for the 'app' dictionary
-const { title } = getIntlayer("app", locale);
+// Nội dung của từ điển 'app' cho ngôn ngữ đó
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -301,6 +306,8 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> `Astro.locals.intlayer` cũng hiển thị `locale`, `defaultLocale` và `availableLocales` cho middleware và điểm cuối của riêng bạn. Truyền ngôn ngữ hoặc bộ chọn làm đối số thứ hai (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) để ghi đè ngôn ngữ yêu cầu cho một lệnh gọi.
+
 </Step>
 <Step number={6} title="Định tuyến bản địa hóa">
 
@@ -325,44 +332,51 @@ Tích hợp Astro thêm middleware Vite giúp định tuyến nhận biết ngô
 
 ```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";
+  // Trong trình duyệt, cùng một import sẽ phân giải thành triển khai máy khách
+  import { useLocale } from "astro-intlayer";
+  import { getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  // Lưu lựa chọn vào cookie ngôn ngữ, sau đó điều hướng đến URL đã bản địa hóa
+  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;
@@ -380,7 +401,10 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Lưu ý về tính bền vững:**
-> Sử dụng `setLocaleInStorageClient` trong tập lệnh phía khách hàng để đảm bảo rằng ưu tiên ngôn ngữ của người dùng được lưu trong cookie. Điều này cho phép phần mềm trung gian Intlayer nhớ lựa chọn và tự động chuyển hướng người dùng đến ngôn ngữ ưu tiên của họ trong các chuyến viếng thăm tương lai.
+> `setLocale` từ `useLocale` phía client lưu tùy chọn ngôn ngữ của người dùng vào cookie. Điều này cho phép Intlayer ghi nhớ lựa chọn và tự động chuyển hướng người dùng đến ngôn ngữ ưa thích của họ trong các lần truy cập sau: các trang được render theo yêu cầu (một adapter với `output: 'server'` hoặc `prerender = false`) được chuyển hướng bởi middleware Intlayer trước khi bất kỳ mã HTML nào được gửi đi, trong khi các trang được render sẵn, được phân phối dưới dạng tệp tĩnh, được chuyển hướng bởi một đoạn script nhỏ mà tích hợp đưa vào mỗi trang. Đặt `routing.enableProxy` thành `false` để tắt cả hai. Trong `astro dev`, cookie bị bỏ qua như một nguồn chuyển hướng trừ khi `routing.enableProxy` được đặt thành `true`, do đó cookie cũ không thể chiếm quyền kiểm soát các trang bạn đang phát triển.
+>
+> **Khả năng tương thích giữa máy chủ và máy khách:**
+> `astro-intlayer` phân giải thành các hook máy chủ trong frontmatter (đọc `Astro.locals`) và thành các hook máy khách của `vanilla-intlayer` trong các khối `<script>` và đảo (islands), với cùng tên và cấu trúc nội dung. `setLocale` và `onChange` chỉ hoạt động trên máy khách, hãy gọi `installIntlayer()` một lần ở đó để khởi tạo bộ lưu trữ máy khách. `astro-intlayer/client` hiển thị mục nhập máy khách một cách rõ ràng.
 
 </Step>
 <Step number={8} title="Sitemap và 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 }) => {
 
 Tiếp tục xây dựng ứng dụng của bạn bằng cách sử dụng framework mà bạn chọn.
 
-- Intlayer + React: [Intlayer với React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer với Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer với Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer với Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer với Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer với React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer với Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer với Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer với Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer với Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer với Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Trích xuất nội dung các thành phần của bạn" isOptional={true}>
@@ -518,21 +543,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Trình biên dịch Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Cập nhật `vite.config.ts` của bạn để bao gồm plugin `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
-  ],
-});
-```
+Build ứng dụng của bạn để chuyển đổi các thành phần và trích xuất nội dung
 
 ```bash packageManager="npm"
 npm run build # Hoặc npm run dev