@intlayer/docs 8.0.1 → 8.0.2

package/docs/it/dictionary/insertion.md

@@ -35,65 +35,119 @@ Quando integrato con React Intlayer o Next Intlayer, puoi semplicemente fornire
 
 ## Configurare il Contenuto di Inserimento
 
-Per configurare il contenuto di inserimento nel tuo progetto Intlayer, crea un modulo di contenuto che includa le tue definizioni di inserimento. Di seguito sono riportati esempi in vari formati.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
-import { insert, type Dictionary } from "intlayer";
-
-const myInsertionContent = {
-  key: "my_key",
-  content: {
-    myInsertion: insert("Ciao, mi chiamo {{name}} e ho {{age}} anni!"),
-    myInsertion2: "Ciao, mi chiamo {{name}} e ho {{age}} anni!", // 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("Ciao, mi chiamo {{name}} e ho {{age}} anni!"),
-    myInsertion2: "Ciao, mi chiamo {{name}} e ho {{age}} anni!", // 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("Ciao, mi chiamo {{name}} e ho {{age}} anni!"),
-    myInsertion2: "Ciao, mi chiamo {{name}} e ho {{age}} anni!", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
-  },
-};
-
-module.exports = myInsertionContent;
-```
-
-```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "my_key",
-  "content": {
-    "myInsertion": {
-      "nodeType": "insertion",
-      "insertion": "Ciao, mi chiamo {{name}} e ho {{age}} anni!",
-    },
-    "myInsertion2": "Ciao, mi chiamo {{name}} e ho {{age}} anni!", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
-  },
-}
-```
+Per configurare il contenuto di inserimento nel tuo progetto Intlayer, crea un modulo di contenuto che includa le tue definizioni di inserimento.
+
+<Tabs>
+  <Tab label="Avvolgimento manuale" value="manual-wrapping">
+    Usa la funzione `insert` per dichiarare esplicitamente il contenuto dell'inserimento.
+
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    import { insert, type Dictionary } from "intlayer";
+
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: insert("Ciao, mi chiamo {{name}} e ho {{age}} anni!"),
+      },
+    } 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("Ciao, mi chiamo {{name}} e ho {{age}} anni!"),
+      },
+    };
+
+    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("Ciao, mi chiamo {{name}} e ho {{age}} anni!"),
+      },
+    };
+
+    module.exports = myInsertionContent;
+    ```
+
+    ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+    {
+      "$schema": "https://intlayer.org/schema.json",
+      "key": "my_key",
+      "content": {
+        "myInsertion": {
+          "nodeType": "insertion",
+          "insertion": "Ciao, mi chiamo {{name}} e ho {{age}} anni!",
+        },
+      },
+    }
+    ```
+
+  </Tab>
+  <Tab label="Rilevamento automatico" value="automatic-detection">
+    Se la stringa contiene indicatori di inserimento comuni (come `{{name}}`), Intlayer la trasformerà automaticamente.
+
+    ```typescript fileName="**/*.content.ts" contentDeclarationFormat="typescript"
+    import { type Dictionary } from "intlayer";
+
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "Ciao, mi chiamo {{name}} e ho {{age}} anni!",
+      },
+    } satisfies Dictionary;
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "Ciao, mi chiamo {{name}} e ho {{age}} anni!",
+      },
+    };
+
+    export default myInsertionContent;
+    ```
+
+    ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
+    /** @type {import('intlayer').Dictionary} */
+    const myInsertionContent = {
+      key: "my_key",
+      content: {
+        myInsertion: "Ciao, mi chiamo {{name}} e ho {{age}} anni!",
+      },
+    };
+
+    module.exports = myInsertionContent;
+    ```
+
+    ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+    {
+      "$schema": "https://intlayer.org/schema.json",
+      "key": "my_key",
+      "content": {
+        "myInsertion": "Ciao, mi chiamo {{name}} e ho {{age}} anni!",
+      },
+    }
+    ```
+
+  </Tab>
+</Tabs>
 
 ## Utilizzo del contenuto di inserimento con React Intlayer
 

package/docs/it/intlayer_with_adonisjs.md

@@ -41,6 +41,16 @@ Internazionalizzando il backend, la tua applicazione non solo rispetta le differ
 
 ## Iniziare
 
+<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.
+
 ### Installazione
 
 Per iniziare a usare `adonis-intlayer`, installa il pacchetto usando npm:

package/docs/it/intlayer_with_express.md

@@ -47,6 +47,16 @@ Internazionalizzando il backend, la tua applicazione non solo rispetta le differ
 
 ## Iniziare
 
+<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.
+
 ### Installazione
 
 Per iniziare a utilizzare `express-intlayer`, installa il pacchetto utilizzando npm:

package/docs/it/intlayer_with_fastify.md

@@ -40,6 +40,16 @@ Internationalizzando il backend, la tua applicazione non solo rispetta le differ
 
 ## Per iniziare
 
+<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.
+
 ### Installazione
 
 Per iniziare a utilizzare `fastify-intlayer`, installa il pacchetto usando npm:

package/docs/it/intlayer_with_hono.md

@@ -44,6 +44,16 @@ Internazionalizzando il backend, la tua applicazione non solo rispetta le differ
 
 ## Iniziare
 
+<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.
+
 ### Installazione
 
 Per iniziare a usare `hono-intlayer`, installa il pacchetto usando npm:

package/docs/it/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 @@ Internazionalizzando il backend, la tua applicazione non solo rispetta le differ
 
 ## Iniziare
 
+<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.
+
 ### Creare un nuovo progetto NestJS
 
 ```bash packageManager="npm"

package/docs/ja/dictionary/html.md

@@ -44,8 +44,9 @@ HTML コンテンツは `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 @@ HTML コンテンツは `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/ja/dictionary/insertion.md

@@ -35,71 +35,125 @@ React IntlayerやNext Intlayerと統合すると、各プレースホルダー
 
 ## 挿入コンテンツの設定
 
-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}}歳です！"
-    ),
-    myInsertion2: "こんにちは、私の名前は{{name}}で、年齢は{{age}}歳です！", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
-  },
-};
-
-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/ja/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/ja/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/ja/intlayer_with_fastify.md

@@ -47,6 +47,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/ja/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/ja/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/docs/ko/dictionary/html.md

@@ -44,8 +44,9 @@ HTML 콘텐츠는 `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 @@ HTML 콘텐츠는 `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>",
       },
     };
     ```