@intlayer/docs 8.0.1 → 8.0.2

package/docs/vi/dictionary/insertion.md

@@ -35,20 +35,119 @@ Khi tích hợp với React Intlayer hoặc Next Intlayer, bạn chỉ cần cun
 
 ## Thiết Lập Nội Dung Chèn
 
-Để thiết lập nội dung chèn trong dự án Intlayer của bạn, hãy tạo một module nội dung bao gồm các định nghĩa chèn của bạn. Dưới đây là các ví dụ ở nhiều định dạng khác nhau.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
-import { insert, type Dictionary } from "intlayer";
-
-const myInsertionContent = {
-  key: "my_key",
-  content: {
-    myInsertion: insert("Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!"),
-  },
-} satisfies Dictionary;
-
-export default myInsertionContent;
-```
+Để thiết lập nội dung chèn trong dự án Intlayer của bạn, hãy tạo một module nội dung bao gồm các định nghĩa chèn của bạn.
+
+<Tabs>
+  <Tab label="Bọc thủ công" value="manual-wrapping">
+    Sử dụng hàm `insert` để khai báo nội dung chèn một cách rõ ràng.
+
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    import { insert, type Dictionary } from "intlayer";
+
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: insert("Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!"),
+      },
+    } satisfies Dictionary;
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+    import { insert } from "intlayer";
+
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: insert("Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!"),
+      },
+    };
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+    const { insert } = require("intlayer");
+
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: insert("Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!"),
+      },
+    };
+
+    module.exports = myInsertionContent;
+    ```
+
+    ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+    {
+      "$schema": "https://intlayer.org/schema.json",
+      "key": "my_key",
+      "content": {
+        "myInsertion": {
+          "nodeType": "insertion",
+          "insertion": "Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!",
+        },
+      },
+    }
+    ```
+
+  </Tab>
+  <Tab label="Phát hiện tự động" value="automatic-detection">
+    Nếu chuỗi chứa các chỉ báo chèn phổ biến (như `{{name}}`), Intlayer sẽ tự động chuyển đổi nó.
+
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    import { type Dictionary } from "intlayer";
+
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!",
+      },
+    } satisfies Dictionary;
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!",
+      },
+    };
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!",
+      },
+    };
+
+    module.exports = myInsertionContent;
+    ```
+
+    ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+    {
+      "$schema": "https://intlayer.org/schema.json",
+      "key": "my_key",
+      "content": {
+        "myInsertion": "Xin chào, tôi tên là {{name}} và tôi {{age}} tuổi!",
+      },
+    }
+    ```
+
+  </Tab>
+</Tabs>
 
 ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
 import { insert } from "intlayer";

package/docs/vi/intlayer_with_adonisjs.md

@@ -41,6 +41,16 @@ Bằng cách quốc tế hóa backend, ứng dụng của bạn không chỉ tô
 
 ## Bắt đầu
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-adonisjs-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+Xem [Application Template](https://github.com/aymericzip/intlayer-adonisjs-template) trên GitHub.
+
 ### Cài đặt
 
 Để bắt đầu sử dụng `adonis-intlayer`, hãy cài đặt gói bằng npm:

package/docs/vi/intlayer_with_express.md

@@ -44,6 +44,16 @@ Bằng cách quốc tế hóa backend, ứng dụng của bạn không chỉ tô
 
 ## Bắt Đầu
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-express-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+Xem [Application Template](https://github.com/aymericzip/intlayer-express-template) trên GitHub.
+
 ### Cài Đặt
 
 Để bắt đầu sử dụng `express-intlayer`, hãy cài đặt gói bằng npm:

package/docs/vi/intlayer_with_fastify.md

@@ -46,6 +46,16 @@ Bằng cách quốc tế hóa backend, ứng dụng của bạn không chỉ tô
 
 ## Bắt đầu
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-fastify-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+Xem [Application Template](https://github.com/aymericzip/intlayer-fastify-template) trên GitHub.
+
 ### Cài đặt
 
 Để bắt đầu sử dụng `fastify-intlayer`, cài gói bằng npm:

package/docs/vi/intlayer_with_hono.md

@@ -44,6 +44,16 @@ Bằng cách quốc tế hóa backend, ứng dụng của bạn không chỉ tô
 
 ## Bắt đầu
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-hono-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+Xem [Application Template](https://github.com/aymericzip/intlayer-hono-template) trên GitHub.
+
 ### Cài đặt
 
 Để bắt đầu sử dụng `hono-intlayer`, hãy cài đặt gói bằng npm:

package/docs/zh/dictionary/html.md

@@ -44,8 +44,9 @@ Intlayer 支持 HTML 内容，允许你在字典中嵌入丰富的结构化内
 
     const htmlDictionary = {
       key: "app",
+      contentAutoTransformation: true, // 可在配置文件中设置
       content: {
-        myHtmlContent: html("<p>Hello <strong>World</strong></p>"),
+        myHtmlContent:  html("<p>Hello <strong>World</strong></p>"),
       },
     } satisfies Dictionary;
 
@@ -59,8 +60,9 @@ Intlayer 支持 HTML 内容，允许你在字典中嵌入丰富的结构化内
     ```typescript fileName="htmlDictionary.content.ts"
     export default {
       key: "app",
+      contentAutoTransformation: true, // 可在配置文件中设置
       content: {
-        myHtmlContent: "<p>Hello <strong>World</strong></p>",
+        myHtmlContent:  "<p>Hello <strong>World</strong></p>",
       },
     };
     ```

package/docs/zh/dictionary/insertion.md

@@ -35,69 +35,123 @@ history:
 
 ## 设置插入内容
 
-要在您的 Intlayer 项目中设置插入内容，请创建一个包含插入定义的内容模块。以下是各种格式的示例。
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
-import { insert, type Dictionary } from "intlayer";
-
-const myInsertionContent = {
-  key: "my_key",
-  content: {
-    myInsertion: insert(
-      "你好，我的名字是 {{name}}，我今年 {{age}} 岁！" // 插入的字符串，包含动态占位符
-    ),
-    myInsertion2: "你好，我的名字是 {{name}}，我今年 {{age}} 岁！", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
-  },
-} satisfies Dictionary;
-
-export default myInsertionContent;
-```
-
-```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
-import { insert } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const myInsertionContent = {
-  key: "my_key",
-  content: {
-    myInsertion: insert(
-      "你好，我的名字是 {{name}}，我今年 {{age}} 岁！" // 插入的字符串，包含动态占位符
-    ),
-    myInsertion2: "你好，我的名字是 {{name}}，我今年 {{age}} 岁！", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
-  },
-};
-
-export default myInsertionContent;
-```
-
-```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
-const { insert } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-// 定义插入内容的字典类型
-const myInsertionContent = {
-  key: "my_key",
-  content: {
-    myInsertion: insert("你好，我的名字是 {{name}}，我今年 {{age}} 岁！"),
-  },
-};
-
-module.exports = myInsertionContent;
-```
-
-```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "my_key",
-  "content": {
-    "myInsertion": {
-      "nodeType": "insertion",
-      "insertion": "你好，我的名字是 {{name}}，我今年 {{age}} 岁！",
-    },
-    "myInsertion2": "你好，我的名字是 {{name}}，我今年 {{age}} 岁！", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
-  },
-}
-```
+要在您的 Intlayer 项目中设置插入内容，请创建一个包含插入定义的内容模块。
+
+<Tabs>
+  <Tab label="手动包裹" value="manual-wrapping">
+    使用 `insert` 函数显式声明插入内容。
+
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    import { insert, type Dictionary } from "intlayer";
+
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: insert(
+          "你好，我的名字是 {{name}}，我今年 {{age}} 岁！"
+        ),
+      },
+    } satisfies Dictionary;
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+    import { insert } from "intlayer";
+
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: insert(
+          "你好，我的名字是 {{name}}，我今年 {{age}} 岁！"
+        ),
+      },
+    };
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+    const { insert } = require("intlayer");
+
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: insert("你好，我的名字是 {{name}}，我今年 {{age}} 岁！"),
+      },
+    };
+
+    module.exports = myInsertionContent;
+    ```
+
+    ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+    {
+      "$schema": "https://intlayer.org/schema.json",
+      "key": "my_key",
+      "content": {
+        "myInsertion": {
+          "nodeType": "insertion",
+          "insertion": "你好，我的名字是 {{name}}，我今年 {{age}} 岁！",
+        },
+      },
+    }
+    ```
+
+  </Tab>
+  <Tab label="自动检测" value="automatic-detection">
+    如果字符串包含常见的插入指示符（如 `{{name}}`），Intlayer 将自动对其进行转换。
+
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    import { type Dictionary } from "intlayer";
+
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "你好，我的名字是 {{name}}，我今年 {{age}} 岁！",
+      },
+    } satisfies Dictionary;
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "你好，我的名字是 {{name}}，我今年 {{age}} 岁！",
+      },
+    };
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "你好，我的名字是 {{name}}，我今年 {{age}} 岁！",
+      },
+    };
+
+    module.exports = myInsertionContent;
+    ```
+
+    ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+    {
+      "$schema": "https://intlayer.org/schema.json",
+      "key": "my_key",
+      "content": {
+        "myInsertion": "你好，我的名字是 {{name}}，我今年 {{age}} 岁！",
+      },
+    }
+    ```
+
+  </Tab>
+</Tabs>
 
 ## 在 React Intlayer 中使用插入内容
 

package/docs/zh/intlayer_with_adonisjs.md

@@ -41,6 +41,16 @@ history:
 
 ## 入门
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-adonisjs-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-adonisjs-template) on GitHub.
+
 ### 安装
 
 要开始使用 `adonis-intlayer`，请使用 npm 安装该包：

package/docs/zh/intlayer_with_express.md

@@ -46,6 +46,16 @@ history:
 
 ## 入门
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-express-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-express-template) on GitHub.
+
 ### 安装
 
 要开始使用 `express-intlayer`，请使用 npm 安装该包：

package/docs/zh/intlayer_with_fastify.md

@@ -46,6 +46,16 @@ history:
 
 ## 入门
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-fastify-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-fastify-template) on GitHub.
+
 ### 安装
 
 要开始使用 `fastify-intlayer`，请使用 npm 安装该包：

package/docs/zh/intlayer_with_hono.md

@@ -44,6 +44,16 @@ history:
 
 ## 入门指南
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-hono-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-hono-template) on GitHub.
+
 ### 安装
 
 要开始使用 `hono-intlayer`，请使用 npm 安装该包：

package/docs/zh/intlayer_with_nestjs.md

@@ -14,7 +14,7 @@ slugs:
   - doc
   - environment
   - nest
-applicationTemplate: https://github.com/AydinTheFirst/nestjs-intlayer
+applicationTemplate: https://github.com/aymericzip/intlayer-nestjs-template
 author: AydinTheFirst
 history:
   - version: 7.5.9
@@ -49,6 +49,16 @@ history:
 
 ## 入门指南
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-nestjs-template?embed=1&ctl=1&file=intlayer.config.ts"
+  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 CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+See [Application Template](https://github.com/aymericzip/intlayer-nestjs-template) on GitHub.
+
 ### 创建一个新的 NestJS 项目
 
 ```bash packageManager="npm"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/docs",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "private": false,
   "description": "Intlayer documentation",
   "keywords": [
@@ -73,13 +73,13 @@
     "watch": "webpack --config ./webpack.config.ts --watch"
   },
   "dependencies": {
-    "@intlayer/config": "8.0.1",
-    "@intlayer/core": "8.0.1",
-    "@intlayer/types": "8.0.1"
+    "@intlayer/config": "8.0.2",
+    "@intlayer/core": "8.0.2",
+    "@intlayer/types": "8.0.2"
   },
   "devDependencies": {
-    "@intlayer/api": "8.0.1",
-    "@intlayer/cli": "8.0.1",
+    "@intlayer/api": "8.0.2",
+    "@intlayer/cli": "8.0.2",
     "@types/node": "25.0.10",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",