@intlayer/docs 9.5.6 → 9.5.8

package/docs/vi/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Tìm hiểu cách khai báo và sử dụng nội dung Markdown trong trang web đa ngôn ngữ của bạn với Intlayer. Làm theo các bước trong tài liệu trực tuyến này để tích hợp Markdown một cách liền mạch vào dự án của bạn.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Render Markdown hỗ trợ **MDX** — sử dụng bất kỳ component JSX/fram
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Trong Remix 3, các nút Markdown được hiển thị trên máy chủ thành một chuỗi HTML. Chèn chuỗi đó bằng prop `innerHTML` của Remix JSX hoặc với `html.raw` trong chế độ xem `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix mặc định thoát các giá trị được nội suy. `innerHTML` và `html.raw` là hai cách từ chối thoát, đây là điều mà một chuỗi Markdown được hiển thị cần.
+
+    Bạn cũng có thể cung cấp các ghi đè cục bộ cho các thẻ cụ thể bằng phương thức `.use()`. Các ghi đè là các hàm trả về một chuỗi HTML:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` là chuỗi HTML đã hiển thị, trong khi `String()` / `.toString()` trả về nguồn Markdown thô:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Trong Astro, các nút Markdown được hiển thị thành một chuỗi HTML. Chèn chuỗi đó bằng chỉ thị `set:html` trong mẫu hoặc với `innerHTML` trong `<script>` phía client.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro mặc định thoát `{biểu thức}`. `set:html` là cách từ chối thoát, đây là điều mà một chuỗi Markdown được hiển thị cần.
+
+    Bạn cũng có thể cung cấp các ghi đè cục bộ cho các thẻ cụ thể bằng phương thức `.use()`. Các ghi đè là các hàm trả về một chuỗi HTML:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` là chuỗi HTML đã hiển thị, trong khi `String()` / `.toString()` trả về nguồn Markdown thô:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Và bạn có thể truy cập siêu dữ liệu markdown của mình như sau:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Các tiện ích hỗ trợ (Chỉ Chuỗi Markdown)
@@ -698,6 +805,60 @@ Các tiện ích này **chỉ render các chuỗi Markdown thô** và độc l
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useMarkdownRenderer()`
+
+    Lấy một hàm renderer được cấu hình sẵn bởi `installIntlayerMarkdown()`. Nó trả về một chuỗi HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Tiện ích `renderMarkdown()`
+
+    Tiện ích độc lập bỏ qua cấu hình toàn cục.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useMarkdownRenderer()`
+
+    Lấy một hàm renderer được cấu hình sẵn bởi `installIntlayerMarkdown()`. Nó trả về một chuỗi HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Tiện ích `renderMarkdown()`
+
+    Tiện ích độc lập bỏ qua cấu hình toàn cục.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Cấu hình Toàn cục với `MarkdownProvider`
@@ -997,6 +1158,73 @@ Các tiện ích này **chỉ render các chuỗi Markdown thô** và độc l
     > Việc nhập trình render Markdown của bạn một cách động là một cách tuyệt vời để giảm dung lượng bundle của ứng dụng.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix không có cây thành phần để chứa provider, do đó cấu hình được cài đặt một lần, dưới dạng singleton, khi máy chủ khởi động. Nó cấu hình renderer được trả về bởi `useMarkdownRenderer()`. Các nút `md` được trả về bởi `useIntlayer` được hiển thị bằng trình biên dịch mặc định; ghi đè các thẻ của chúng trên mỗi nút bằng `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    Bạn cũng có thể sử dụng trình hiển thị markdown của riêng mình:
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Sử dụng `installIntlayerMarkdownDynamic(async () => …)` để tải chậm chính renderer; trình tải chỉ chạy trong lần gọi đầu tiên.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro không có cây thành phần để chứa provider, do đó cấu hình được cài đặt một lần, dưới dạng singleton, trong middleware (máy chủ) và trong `<script>` phía client (trình duyệt). Nó cấu hình renderer được trả về bởi `useMarkdownRenderer()`. Các nút `md` được trả về bởi `useIntlayer` được hiển thị bằng trình biên dịch mặc định; ghi đè các thẻ của chúng trên mỗi nút bằng `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Chạy một lần khi máy chủ khởi động; bản thân middleware Intlayer
+    // được đăng ký bởi tích hợp, trước tệp này.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    Bạn cũng có thể sử dụng trình hiển thị markdown của riêng mình:
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Sử dụng `installIntlayerMarkdownDynamic(async () => …)` để tải chậm chính renderer; trình tải chỉ chạy trong lần gọi đầu tiên.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1325,6 +1553,40 @@ Bạn có thể sử dụng hàm `parseMarkdown` từ gói Intlayer của framew
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 hiển thị trên máy chủ và phát trực tuyến HTML, vì vậy không có AST nào cần truyền sang máy khách. Phân tích cú pháp một lần và hiển thị AST ở bất kỳ nơi nào trang được xây dựng:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Phân tích cú pháp markdown thành AST có thể tuần tự hóa (ví dụ: một lần khi tải mô-đun)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Hiển thị AST: trình hiển thị chấp nhận chuỗi thô hoặc AST đã được phân tích cú pháp
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Các trang Astro được hiển thị trên máy chủ, vì vậy không có AST nào cần truyền sang máy khách. Phân tích cú pháp Markdown trong frontmatter và hiển thị nó bằng `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Phân tích cú pháp markdown thành AST có thể tuần tự hóa
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Hiển thị AST: trình hiển thị chấp nhận chuỗi thô hoặc AST đã được phân tích cú pháp -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Mẫu này đảm bảo logic phân tích cú pháp Markdown được thực thi hoàn toàn trên server, giảm đáng kể thời gian thực thi phía client và cải thiện tốc độ hydrat hóa ban đầu.

package/docs/vi/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Analog 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 Analog đ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:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, `angular-intlayer` cung cấp `provideIntlayer()`, được đăng ký trong `src/app/app.config.ts` để mọi component và trang dựa trên tệp đều có thể đọc nội dung thông qua signal `useIntlayer`. Analog được xây dựng trên Vite, vì vậy plugin `intlayer()` của `vite-intlayer` được thêm cạnh `analog()` trong `vite.config.ts` để theo dõi, xây dựng lại các khai báo nội dung và chạy proxy locale. Các khai báo nội dung được đặt cùng với các component và trang trong `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### Cấu hình
+
 Tạo một tệp cấu hình để thiết lập các ngôn ngữ cho ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/vi/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 19 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 Angular 19 đ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:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, `angular-intlayer` cung cấp `provideIntlayer()`, được đăng ký trong `src/app/app.config.ts` để mọi component đều có thể đọc nội dung của nó thông qua signal `useIntlayer`. Angular CLI được chuyển sang builder Webpack tùy chỉnh, và `webpack.config.ts` hợp nhất plugin Intlayer vào bản dựng để theo dõi và xây dựng lại các khai báo nội dung của bạn. Các khai báo nội dung được đặt cùng với các component trong `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### Cấu hình
+
 Tạo một tệp cấu hình để thiết lập các ngôn ngữ cho ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/vi/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 22 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 Angular 22 đ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:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, `angular-intlayer` cung cấp `provideIntlayer()`, được đăng ký trong `src/app/app.config.ts` để mọi component đều có thể đọc nội dung của nó thông qua signal `useIntlayer`. Angular CLI được chuyển sang builder esbuild tùy chỉnh, và `esbuild.plugins.ts` đăng ký plugin Intlayer vào bản dựng để theo dõi và xây dựng lại các khai báo nội dung của bạn. Các khai báo nội dung được đặt cùng với các component trong `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một tập tin cấu hình để thiết lập ngôn ngữ cho ứng dụng của bạn:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/vi/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 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:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer`, và các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/vi/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Lit 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 + Lit đ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:
@@ -168,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer` để render phía máy chủ, và đảo Lit (`src/components/lit/LitDemo.ts`) nhận locale do máy chủ phát hiện dưới dạng prop và chuyển nó tới `lit-intlayer` cho phần tương tác. Các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/vi/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Preact 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 + Preact đ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:
@@ -167,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer` để render phía máy chủ, và đảo Preact (`src/components/preact/PreactIsland.tsx`) nhận locale do máy chủ phát hiện dưới dạng prop và chuyển nó tới `preact-intlayer` cho phần tương tác. Các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── preact
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── PreactIsland.tsx      # Preact island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and preact() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/vi/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + React 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 + React đ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:
@@ -170,6 +170,31 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer` để render phía máy chủ, và đảo React (`src/components/react/ReactIsland.tsx`) nhận locale do máy chủ phát hiện dưới dạng prop và chuyển nó tới `react-intlayer` cho phần tương tác. Các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── react
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── ReactIsland.tsx       # React island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and react() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/vi/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Solid 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 + Solid đ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:
@@ -167,6 +167,31 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer` để render phía máy chủ, và đảo Solid (`src/components/solid/SolidIsland.tsx`) nhận locale do máy chủ phát hiện dưới dạng prop và chuyển nó tới `solid-intlayer` cho phần tương tác. Các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── solid
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── SolidIsland.tsx       # Solid island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and solid() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"

package/docs/vi/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Svelte 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 + Svelte đ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:
@@ -167,6 +167,30 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
 </Step>
 <Step number={2} title="Cấu hình dự án của bạn">
 
+### Kiến trúc
+
+Trong kiến trúc này, tích hợp `intlayer()` được đăng ký trong `astro.config.ts` sẽ xây dựng các từ điển của bạn và thêm một middleware giúp xử lý locale của mỗi yêu cầu và hiển thị nó trên `Astro.locals.intlayer`. Các trang nằm dưới phân đoạn rest `src/pages/[...locale]/`, do đó locale mặc định được phân phối mà không có tiền tố và mọi locale khác đều có URL riêng biệt. Các tệp `.astro` đọc nội dung bằng các hook `useIntlayer` / `useLocale` của `astro-intlayer` để render phía máy chủ, và đảo Svelte (`src/components/svelte/SvelteIsland.svelte`) nhận locale do máy chủ phát hiện dưới dạng prop và chuyển nó tới `svelte-intlayer` cho phần tương tác. Các khai báo nội dung được đặt cùng với các component của bạn trong `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.ts                # App content declaration
+│   ├── components
+│   │   └── svelte
+│   │       └── SvelteIsland.svelte   # Svelte island (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and svelte() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Cấu hình
+
 Tạo một file cấu hình để xác định các ngôn ngữ của ứng dụng:
 
 ```typescript fileName="intlayer.config.ts"