@intlayer/docs 9.3.3 → 9.4.0

package/docs/vi/intlayer_with_react_router_v7_fs_routes.md

@@ -72,7 +72,7 @@ Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiệ
 
 <Accordion header="Đại lý AI">
 
-Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
 
 </Accordion>
 
@@ -131,6 +131,49 @@ Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh s
 
 See [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-template) on GitHub.
 
+<Steps>
+
+<Step number={1} title="Cài đặt Dependencies">
+
+Cài đặt các package cần thiết bằng package manager ưa thích của bạn:
+
+```bash packageManager="npm"
+npm install intlayer react-intlayer
+npm install vite-intlayer --save-dev
+npm install @react-router/fs-routes --save-dev
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer
+pnpm add vite-intlayer --save-dev
+pnpm add @react-router/fs-routes --save-dev
+```
+
+```bash packageManager="bun"
+bun add intlayer react-intlayer
+bun add vite-intlayer --dev
+bun add @react-router/fs-routes --dev
+bun x intlayer init
+```
+
+- **intlayer**
+
+Gói core cung cấp các công cụ quốc tế hóa để quản lý cấu hình, dịch thuật, [khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md), transpilation, và [lệnh CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/index.md).
+
+- **react-intlayer**
+  Package tích hợp Intlayer với ứng dụng React. Nó cung cấp context providers và hooks cho quốc tế hóa React.
+
+- **vite-intlayer**
+  Bao gồm plugin Vite để tích hợp Intlayer với [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), cũng như middleware để phát hiện ngôn ngữ ưa thích của người dùng, quản lý cookies và xử lý chuyển hướng URL.
+
+- **@react-router/fs-routes**
+  Package cho phép định tuyến dựa trên hệ thống tệp cho React Router v7.
+
+</Step>
+
+<Step number={2} title="Cấu hình dự án của bạn">
+
 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", "esm", "commonjs"]}
@@ -183,10 +226,14 @@ export default [
 ] satisfies RouteConfig;
 ```
 
+> Hàm `flatRoutes` từ `@react-router/fs-routes` cho phép định tuyến dựa trên hệ thống tệp, trong đó cấu trúc tệp trong thư mục `routes/` xác định các tuyến của ứng dụng của bạn. Tùy chọn `ignoredRouteFiles` đảm bảo rằng các tệp khai báo nội dung Intlayer (`.content.ts`, v.v.) không được coi là các tệp tuyến.
+
 </Step>
 
 <Step number={5} title="Tạo các Component Layout">
 
+Với file-system routing, bạn sử dụng quy ước đặt tên phẳng trong đó các dấu chấm (`.`) đại diện cho các phân đoạn đường dẫn và dấu ngoặc đơn `()` biểu thị các phân đoạn tùy chọn.
+
 Thiết lập root layout và các layout theo ngôn ngữ cụ thể:
 
 #### Cấu trúc File
@@ -260,70 +307,139 @@ export function Layout({
 
 #### Root Layout
 
-```tsx fileName="app/routes/layout.tsx"
-import { IntlayerProvider } from "react-intlayer";
-import { Outlet } from "react-router";
+```tsx fileName="app/components/localized-link.tsx"
+import type { FC } from "react";
+
+import { getLocalizedUrl, type LocalesValues } from "intlayer";
+import { useLocale } from "react-intlayer";
+import { Link, type LinkProps, type To } from "react-router";
 
-import type { Route } from "./+types/layout";
+const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);
+
+export const locacalizeTo = (to: To, locale: LocalesValues): To => {
+  if (typeof to === "string") {
+    if (isExternalLink(to)) {
+      return to;
+    }
+
+    return getLocalizedUrl(to, locale);
+  }
+
+  if (isExternalLink(to.pathname ?? "")) {
+    return to;
+  }
+
+  return {
+    ...to,
+    pathname: getLocalizedUrl(to.pathname ?? "", locale),
+  };
+};
+
+export const LocalizedLink: FC<LinkProps> = (props) => {
+  const { locale } = useLocale();
+
+  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
+};
+```
+
+#### Trang Chủ Đã Được Địa Phương Hóa
 
-export default function RootLayout({ params }: Route.ComponentProps) {
-  const { locale } = params;
+```tsx fileName="app/routes/[lang]/page.tsx"
+import { useIntlayer } from "react-intlayer";
+import { LocalizedLink } from "~/components/localized-link";
+
+export default function Page() {
+  const { title, description, aboutLink } = useIntlayer("page");
 
   return (
-    <IntlayerProvider locale={locale}>
-      <Outlet />
-    </IntlayerProvider>
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <nav>
+        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
+      </nav>
+    </div>
   );
 }
 ```
 
 </Step>
 
-<Step number={6} title="Khai báo Nội dung của bạn">
+<Step number={6} title="Khai báo Nội dung của Bạn">
 
-Tạo và quản lý các khai báo nội dung để lưu trữ bản dịch:
+Tạo và quản lý các khai báo nội dung của bạn để lưu trữ các bản dịch. Đặt các tệp nội dung cùng với các tệp route của bạn:
 
-```tsx fileName="app/routes/[lang]/page.content.ts"
+```tsx fileName="app/routes/($locale)._index.content.ts"
 import { t, type Dictionary } from "intlayer";
 
 const pageContent = {
   key: "page",
   content: {
     title: t({
+      vi: "Chào mừng đến với React Router v7 + Intlayer",
       en: "Welcome to React Router v7 + Intlayer",
       es: "Bienvenido a React Router v7 + Intlayer",
       fr: "Bienvenue sur React Router v7 + Intlayer",
     }),
     description: t({
-      en: "Xây dựng các ứng dụng đa ngôn ngữ một cách dễ dàng sử dụng React Router v7 và Intlayer.",
+      vi: "Xây dựng các ứng dụng đa ngôn ngữ một cách dễ dàng bằng cách sử dụng React Router v7 và Intlayer.",
+      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
       es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
       fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
     }),
     aboutLink: t({
-      en: "Tìm hiểu về chúng tôi",
+      vi: "Tìm Hiểu Về Chúng Tôi",
+      en: "Learn About Us",
       es: "Aprender Sobre Nosotros",
       fr: "En savoir plus sur nous",
     }),
+  },
+} satisfies Dictionary;
+
+export default pageContent;
+```
+
+```tsx fileName="app/routes/($locale).about.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const aboutContent = {
+  key: "about",
+  content: {
+    title: t({
+      vi: "Về chúng tôi",
+      en: "About Us",
+      es: "Sobre Nosotros",
+      fr: "À propos de nous",
+    }),
+    content: t({
+      vi: "Đây là nội dung của trang về chúng tôi.",
+      en: "This is the about page content.",
+      es: "Este es el contenido de la página de información.",
+      fr: "Ceci est le contenu de la page à propos.",
+    }),
     homeLink: t({
-      en: "Trang chủ",
+      vi: "Trang chủ",
+      en: "Home",
       es: "Inicio",
       fr: "Accueil",
     }),
   },
 } satisfies Dictionary;
 
-export default pageContent;
+export default aboutContent;
 ```
 
-> Các khai báo nội dung của bạn có thể được định nghĩa ở bất kỳ đâu trong ứng dụng của bạn miễn là chúng được bao gồm trong thư mục `contentDir` (mặc định là `./app`). Và phải phù hợp với phần mở rộng của tệp khai báo nội dung (mặc định là `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
+> Các khai báo nội dung của bạn có thể được định nghĩa ở bất kỳ đâu trong ứng dụng của bạn miễn là chúng được đưa vào thư mục `contentDir` (mặc định là `./app`). Và phải khớp với phần mở rộng tệp khai báo nội dung (mặc định là `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
+
+> Để tìm hiểu thêm về hook `useIntlayer`, hãy tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md).
 
-> Để biết thêm chi tiết, hãy tham khảo [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md).
+> Nếu ứng dụng của bạn đã tồn tại, bạn có thể sử dụng [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compiler.md) kết hợp với [lệnh extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/extract.md) để chuyển đổi hàng nghìn component chỉ trong một giây.
 
 </Step>
 
-<Step number={7} title="Tạo các thành phần nhận biết ngôn ngữ">
+<Step number={7} title="Tạo Các Thành Phần Nhận Biết Locale">
 
-Tạo một thành phần `LocalizedLink` để điều hướng nhận biết ngôn ngữ:
+Tạo một component `LocalizedLink` cho điều hướng nhận biết locale:
 
 ```tsx fileName="app/components/localized-link.tsx"
 import type { FC } from "react";
@@ -360,7 +476,7 @@ export const LocalizedLink: FC<LinkProps> = (props) => {
 };
 ```
 
-Trong trường hợp bạn muốn điều hướng đến các route đã được địa phương hóa, bạn có thể sử dụng hook `useLocalizedNavigate`:
+Trong trường hợp bạn muốn điều hướng đến các tuyến đường được bản địa hóa, bạn có thể sử dụng hook `useLocalizedNavigate`:
 
 ```tsx fileName="app/hooks/useLocalizedNavigate.ts"
 import { useLocale } from "react-intlayer";
@@ -384,37 +500,6 @@ export const useLocalizedNavigate = () => {
 
 </Step>
 
-<Step number={8} title="Sử dụng Intlayer trong các Trang của Bạn">
-
-Truy cập các từ điển nội dung của bạn trong toàn bộ ứng dụng:
-
-#### Trang Chủ Đã Được Địa Phương Hóa
-
-```tsx fileName="app/routes/[lang]/page.tsx"
-import { useIntlayer } from "react-intlayer";
-import { LocalizedLink } from "~/components/localized-link";
-
-export default function Page() {
-  const { title, description, aboutLink } = useIntlayer("page");
-
-  return (
-    <div>
-      <h1>{title}</h1>
-      <p>{description}</p>
-      <nav>
-        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
-      </nav>
-    </div>
-  );
-}
-```
-
-> Để tìm hiểu thêm về hook `useIntlayer`, hãy tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/packages/react-intlayer/useIntlayer.md).
-
-> Nếu ứng dụng của bạn đã tồn tại, bạn có thể sử dụng [Intlayer Compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compiler.md) kết hợp với [lệnh extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/extract.md) để chuyển đổi hàng nghìn component chỉ trong một giây.
-
-</Step>
-
 <Step number={9} title="Tạo Thành Phần Chuyển Đổi Ngôn Ngữ">
 
 Tạo một thành phần cho phép người dùng thay đổi ngôn ngữ:
@@ -497,8 +582,18 @@ export const useI18nHTMLAttributes = () => {
 };
 ```
 
+Hook này đã được sử dụng trong layout component (`($locale)._layout.tsx`) được hiển thị ở Bước 5.
+
+</Step>
+
 Sau đó sử dụng nó trong component gốc của bạn:
 
+Bạn cũng có thể sử dụng `intlayerProxy` để thêm định tuyến phía máy chủ vào ứng dụng của mình. Plugin này sẽ tự động phát hiện locale hiện tại dựa trên URL và đặt cookie locale thích hợp. Nếu không có locale nào được chỉ định, plugin sẽ xác định locale phù hợp nhất dựa trên tùy chọn ngôn ngữ trình duyệt của người dùng. Nếu không phát hiện được locale nào, nó sẽ chuyển hướng đến locale mặc định.
+
+> Lưu ý rằng để sử dụng `intlayerProxy` trong production, bạn cần chuyển package `vite-intlayer` từ `devDependencies` sang `dependencies`.
+
+> Kể từ Intlayer v9, `intlayerProxy()` được đóng gói trực tiếp vào plugin `intlayer()` và được bật theo mặc định thông qua tùy chọn `routing.enableProxy` (`true` theo mặc định). Việc đăng ký nó riêng biệt như được hiển thị bên dưới hiện là tùy chọn — nó được giữ lại để tương thích ngược và cho các cấu hình cần kiểm soát thứ tự plugin. Đặt `routing.enableProxy: false` để không sử dụng. Xem [ghi chú phát hành v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/releases/v9.md).
+
 ```tsx fileName="app/routes/layout.tsx"
 import { Outlet } from "react-router";
 import { IntlayerProvider } from "react-intlayer";

package/docs/vi/intlayer_with_solid_start.md

@@ -44,6 +44,18 @@ author: aymericzip
 />
 
   </Tab>
+
+<Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-solid-start-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo Intlayer Solid Start Template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
 </Tabs>
 
 ## Mục lục
@@ -78,7 +90,7 @@ Giới hạn phạm vi nội dung của ứng dụng **giúp dễ dàng bảo tr
 
 <Accordion header="AI Agent">
 
-Đặt nội dung cùng vị trí **giảm bớt ngữ cảnh cần thiết** cho các Mô hình Ngôn ngữ Lớn (LLM). Intlayer cũng đi kèm với một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch còn thiếu, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[kỹ năng agent](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm nhà phát triển (DX) trở nên mượt mà hơn nữa cho các AI agent.
+Đặt nội dung cùng vị trí **giảm bớt ngữ cảnh cần thiết** cho các Mô hình Ngôn ngữ Lớn (LLM). Intlayer cũng đi kèm với một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch còn thiếu, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md)**, để giúp trải nghiệm nhà phát triển (DX) trở nên mượt mà hơn nữa cho các AI agent.
 
 </Accordion>
 

package/docs/vi/intlayer_with_storybook.md

@@ -58,7 +58,7 @@ Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiệ
 
 <Accordion header="Đại lý AI">
 
-Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
 
 </Accordion>
 

package/docs/vi/intlayer_with_svelte_kit.md

@@ -86,7 +86,7 @@ Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiệ
 
 <Accordion header="Đại lý AI">
 
-Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent Skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
+Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
 
 </Accordion>
 
@@ -113,6 +113,8 @@ Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh s
 
 ## Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng SvelteKit
 
+Xem [Application Template](https://github.com/aymericzip/intlayer-sveltekit-template) trên GitHub.
+
 Để bắt đầu, hãy tạo một dự án SvelteKit mới. Dưới đây là cấu trúc cuối cùng mà chúng ta sẽ tạo:
 
 ```bash
@@ -267,6 +269,8 @@ export default heroContent;
 
 <Step number={5} title="Sử dụng Intlayer trong các Component của bạn">
 
+Bây giờ bạn có thể sử dụng hàm `useIntlayer` trong bất kỳ component Svelte nào. Nó trả về một reactive store tự động cập nhật khi locale thay đổi. Hàm sẽ tự động tôn trọng locale hiện tại (cả trong quá trình SSR và điều hướng client-side).
+
 để truy cập giá trị phản ứng của nó (ví dụ: `$content.title`).
 
 ```svelte fileName="src/lib/components/Component.svelte"
@@ -612,6 +616,8 @@ goto(localizedPath); // Điều hướng đến /en/about hoặc /fr/about tùy
 
 Để thêm proxy backend vào ứng dụng SvelteKit của bạn, bạn có thể sử dụng hàm `intlayerProxy` được cung cấp bởi plugin `vite-intlayer`. Plugin này sẽ tự động phát hiện locale tốt nhất cho người dùng dựa trên URL, cookie và sở thích ngôn ngữ trình duyệt.
 
+> Kể từ Intlayer v9, `intlayerProxy()` được bundled trực tiếp vào plugin `intlayer()` và được bật mặc định thông qua tùy chọn `routing.enableProxy` (`true` theo mặc định). Đăng ký nó riêng biệt như hình dưới đây bây giờ là tùy chọn — nó được giữ lại để tương thích ngược và cho các thiết lập cần kiểm soát thứ tự plugin. Đặt `routing.enableProxy: false` để loại bỏ. Xem [ghi chú phát hành v9](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/releases/v9.md).
+
 ```ts fileName="vite.config.ts"
 import { defineConfig } from "vite";
 import { intlayer } from "vite-intlayer";