@intlayer/docs 5.7.7 → 5.8.0-canary.0

package/docs/en/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-06-29
+updatedAt: 2025-08-20
 title: Interest of Intlayer
 description: Discover the benefits and advantages of using Intlayer in your projects. Understand why Intlayer stands out among other frameworks.
 keywords:
@@ -11,41 +11,104 @@ keywords:
   - Comparison
 slugs:
   - doc
-  - concept
-  - interest
+  - why
 ---
 
-# Intlayer: A tailored way to translate your website
+# Why you should consider Intlayer?
 
-**Intlayer** is an internationalization library designed specifically for JavaScript developers. It allow the declaration of your content everywhere in your code. It converts declaration of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, **Intlayer** make your development stronger and more efficient.
+## What is Intlayer?
 
-## Example of usage
+**Intlayer** is an internationalization library designed specifically for JavaScript developers. It allows the declaration of your content everywhere in your code. It converts declarations of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, **Intlayer** makes your development stronger and more efficient.
+
+## Why was Intlayer created?
+
+Intlayer was created to solve a common problem that affects all common i18n libraries such as `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl`, and `vue-i18n`.
+
+All these solutions adopt a centralized approach to list and manage your content. For example:
+
+```bash
+.
+├── locales
+│   ├── en.json
+│   ├── es.json
+│   └── fr.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+Or here using namespaces:
+
+```bash
+.
+├── locales
+│   ├── en
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   ├── fr
+│   │  ├── footer.json
+│   │  └── navbar.json
+│   └── es
+│      ├── footer.json
+│      └── navbar.json
+├── i18n.ts
+└── src
+    └── components
+        └── MyComponent
+            └── index.tsx
+```
+
+This type of architecture slows down the development process and makes the codebase more complex to maintain for several reasons:
+
+1. **For any new component created, you should:**
+   - Create the new resource/namespace in the `locales` folder
+   - Remember to import the new namespace in your page
+   - Translate your content (often done manually by copy/paste from AI providers)
+
+2. **For any change made on your components, you should:**
+   - Search for the related resource/namespace (far from the component)
+   - Translate your content
+   - Ensure your content is up to date for any locale
+   - Verify your namespace doesn't include unused keys/values
+   - Ensure the structure of your JSON files is the same for all locales
+
+On professional projects using these solutions, localization platforms are often used to help manage the translation of your content. However, this can quickly become costly for large projects.
+
+To solve this problem, Intlayer adopts an approach that scopes your content per-component and keeps your content close to your component, as we often do with CSS (`styled-components`), types, documentation (`storybook`), or unit tests (`jest`).
 
 ```bash codeFormat="typescript"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.ts
+        ├── index.test.tsx
+        ├── index.stories.tsx
         └── index.tsx
 ```
 
 ```bash codeFormat="commonjs"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.cjs
-        └── index.mjs
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
 ```bash codeFormat="esm"
 .
-└── Components
+└── components
     └── MyComponent
         ├── index.content.mjs
-        └── index.js
+        ├── index.test.mjs
+        ├── index.stories.mjs
+        └── index.tsx
 ```
 
-```tsx fileName="./Components/MyComponent/index.content.ts" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.content.ts" codeFormat="typescript"
 import { t, type Dictionary } from "intlayer";
 
 const componentExampleContent = {
@@ -53,8 +116,8 @@ const componentExampleContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -62,7 +125,7 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { t } from "intlayer";
 
 /** @type {import('intlayer').Dictionary} */
@@ -71,8 +134,8 @@ const componentExampleContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -80,7 +143,7 @@ const componentExampleContent = {
 export default componentExampleContent;
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { t } = require("intlayer");
 
 /** @type {import('intlayer').Dictionary} */
@@ -89,8 +152,8 @@ const componentExampleContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -98,7 +161,7 @@ const componentExampleContent = {
 module.exports = componentExampleContent;
 ```
 
-```tsx fileName="./Components/MyComponent/index.tsx" codeFormat="typescript"
+```tsx fileName="./components/MyComponent/index.tsx" codeFormat="typescript"
 import { useIntlayer } from "react-intlayer";
 
 export const ComponentExample = () => {
@@ -108,7 +171,7 @@ export const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.mjx" codeFormat="esm"
+```jsx fileName="./components/MyComponent/index.mjx" codeFormat="esm"
 import { useIntlayer } from "react-intlayer";
 
 const ComponentExample = () => {
@@ -118,7 +181,7 @@ const ComponentExample = () => {
 };
 ```
 
-```jsx fileName="./Components/MyComponent/index.csx" codeFormat="commonjs"
+```jsx fileName="./components/MyComponent/index.csx" codeFormat="commonjs"
 const { useIntlayer } = require("react-intlayer");
 
 const ComponentExample = () => {
@@ -128,29 +191,79 @@ const ComponentExample = () => {
 };
 ```
 
-## Why Choose Intlayer?
-
-| Feature                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **JavaScript-Powered Content Management** | Harness the flexibility of JavaScript to define and manage your content efficiently.                                                                                                                                                                                                                                                                                                                                                                                        |
-| **Type-Safe Environment**                 | Leverage TypeScript to ensure all your content definitions are precise and error-free.                                                                                                                                                                                                                                                                                                                                                                                      |
-| **Integrated Content Files**              | Keep your translations close to their respective components, enhancing maintainability and clarity.                                                                                                                                                                                                                                                                                                                                                                         |
-| **Simplified Setup**                      | Get up and running quickly with minimal configuration, especially optimized for Next.js projects.                                                                                                                                                                                                                                                                                                                                                                           |
-| **Server Component Support**              | Perfectly suited for Next.js server components, ensuring smooth server-side rendering.                                                                                                                                                                                                                                                                                                                                                                                      |
-| **Enhanced Routing**                      | Full support for Next.js app routing, adapting seamlessly to complex application structures.                                                                                                                                                                                                                                                                                                                                                                                |
-| **Organized Codebase**                    | Keep your codebase more organized: 1 component = 1 dictionary in the same folder.                                                                                                                                                                                                                                                                                                                                                                                           |
-| **CI Auto-translation**                   | Autofill your translations in your CI using your own OpenAI API key, eliminating the need for an L10n platform.                                                                                                                                                                                                                                                                                                                                                             |
-| **MCP Server Integration**                | Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. [Learn more](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md).                                                                                                                                                                                                        |
-| **Markdown Support**                      | Import and interpret markdown files for multilingual content like privacy policies.                                                                                                                                                                                                                                                                                                                                                                                         |
-| **Free Visual Editor & CMS**              | A free visual editor and CMS are available if you need to work with content writers for your translations, again removing the need for a localization platform and allowing content externalization from the codebase.                                                                                                                                                                                                                                                      |
-| **Simplified Content Retrieval**          | No need to call your `t` function for each piece of content; retrieve all your content directly using a single hook.                                                                                                                                                                                                                                                                                                                                                        |
-| **Consistent Implementation**             | The same implementation for both client and server components, no need to pass your `t` function across each server component.                                                                                                                                                                                                                                                                                                                                              |
-| **Tree-shakable Content**                 | The content is tree-shakable, which lightens the final bundle.                                                                                                                                                                                                                                                                                                                                                                                                              |
-| **Non-blocking Static Rendering**         | Intlayer doesn't block Static Rendering as `next-intl` does.                                                                                                                                                                                                                                                                                                                                                                                                                |
-| **Interoperability**                      | Allow interoperability with [react-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react-i18next.md), [next-i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_next-i18next.md), [next-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_next-intl.md), and [react-intl](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_react-intl.md). |
-
-## Doc History
-
-| Version | Date       | Changes      |
-| ------- | ---------- | ------------ |
-| 5.5.10  | 2025-06-29 | Init history |
+This approach allows you to:
+
+1. **Increase the speed of development**
+   - `.content.{{ts|mjs|cjs|json}}` files can be created using a VSCode extension
+   - Autocompletion AI tools in your IDE (such as GitHub Copilot) can help you declare your content, reducing copy/paste
+
+2. **Reduce the complexity of your codebase**
+
+3. **Increase the maintainability of your codebase**
+
+4. **Duplicate your components and their related content more easily (Example: login/register components, etc.)**
+   - By limiting the risk of impacting other components' content
+   - By copy/pasting your content from one application to another without external dependencies
+
+5. **Avoid polluting your codebase with unused keys/values for unused components**
+   - If you don't use a component, you don't need to import its content
+   - If you delete a component, you'll more easily remember to remove its related content as it will be present in the same folder
+
+6. **Reduce reasoning cost for AI agents to declare your multilingual content**
+   - The AI agent won't have to scan your entire codebase to know where to implement your content
+   - Translations can easily be done by autocompletion AI tools in your IDE (such as GitHub Copilot)
+
+7. **Optimize loading performance**
+   - If a component is lazy-loaded, its related content will be loaded at the same time
+
+## Additional features of Intlayer
+
+| Feature                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Cross-Frameworks Support**<br><br>Intlayer is compatible with all major frameworks and libraries, including Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, and more.                                                                                                                                                                                                                 |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.png?raw=true)       | **JavaScript-Powered Content Management**<br><br>Harness the flexibility of JavaScript to define and manage your content efficiently. <br><br> - [Content declaration](https://intlayer.org/doc/concept/content)                                                                                                                                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **Per-Locale Content Declaration File**<br><br>Speed up your development by declaring your content once, before auto generation.<br><br> - [Per-Locale Content Declaration File](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                           |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Type-Safe Environment**<br><br>Leverage TypeScript to ensure your content definitions and code are error-free, while also benefiting from IDE autocompletion.<br><br> - [TypeScript configuration](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                               |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Simplified Setup**<br><br>Get up and running quickly with minimal configuration. Adjust settings for internationalization, routing, AI, build, and content handling with ease. <br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Simplified Content Retrieval**<br><br>No need to call your `t` function for each piece of content. Retrieve all your content directly using a single hook.<br><br> - [React integration](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                            |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Consistent Server Component Implementation**<br><br>Perfectly suited for Next.js server components, use the same implementation for both client and server components, no need to pass your `t` function across each server component. <br><br> - [Server Components](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                     |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Organized Codebase**<br><br>Keep your codebase more organized: 1 component = 1 dictionary in the same folder. Translations close to their respective components enhance maintainability and clarity. <br><br> - [How Intlayer works](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                  |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Enhanced Routing**<br><br>Full support of app routing, adapting seamlessly to complex application structures, for Next.js, React, Vite, Vue.js, etc.<br><br> - [Explore Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                  |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Markdown Support**<br><br>Import and interpret locale files and remote Markdown for multilingual content like privacy policies, documentation, etc. Interpret and make Markdown metadata accessible in your code.<br><br> - [Content files](https://intlayer.org/doc/concept/content/file)                                                                                                 |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Free Visual Editor & CMS**<br><br>A free visual editor and CMS are available for content writers, removing the need for a localization platform. Keep your content synchronized using Git, or externalize it totally or partially with the CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](https://intlayer.org/doc/concept/cms)           |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Tree-shakable Content**<br><br>Tree-shakable content, reducing the size of the final bundle. Loads content per component, excluding any unused content from your bundle. Supports lazy loading to enhance app loading efficiency. <br><br> - [App build optimization](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                                          |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Static Rendering**<br><br>Doesn't block Static Rendering. <br><br> - [Next.js integration](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                    |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **AI-Powered Translation**<br><br>Transform your website into 231 languages with just one click using Intlayer's advanced AI-powered translation tools using your own AI provider/API key. <br><br> - [CI/CD integration](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](https://intlayer.org/doc/concept/cli) <br> - [Auto fill](https://intlayer.org/doc/concept/auto-fill) |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **MCP Server Integration**<br><br>Provides an MCP (Model Context Protocol) server for IDE automation, enabling seamless content management and i18n workflows directly within your development environment. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)                                                                             |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **VSCode Extension**<br><br>Intlayer provides a VSCode extension to help you manage your content and translations, building your dictionaries, translating your content, and more. <br><br> - [VSCode Extension](https://intlayer.org/doc/vs-code-extension)                                                                                                                                 |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Interoperability**<br><br>Allows interoperability with react-i18next, next-i18next, next-intl, and react-intl. <br><br> - [Intlayer and react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer and next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer and next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)        |
+
+## Comparison of Intlayer with other solutions
+
+| Feature                                       | Intlayer                                                                                                                         | React-i18next / i18next                                            | React-Intl (FormatJS)                              | LinguiJS                                           | next-intl                                          | next-i18next                                       | vue-i18n                                                  |
+| --------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | -------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------- | --------------------------------------------------------- |
+| **Translations Near Components**              | Yes, content collocated with each component                                                                                      | No                                                                 | No                                                 | No                                                 | No                                                 | No                                                 | Yes - using `Single File Components` (SFCs)               |
+| **TypeScript Integration**                    | Advanced, auto-generated strict types                                                                                            | Basic; extra config for safety                                     | Good, but less strict                              | Typings, needs config                              | Good                                               | Basic                                              | Good (types available; key-safety needs setup)            |
+| **Missing Translation Detection**             | Build-time error/warning                                                                                                         | Mostly fallback strings at runtime                                 | Fallback strings                                   | Needs extra config                                 | Runtime fallback                                   | Runtime fallback                                   | Runtime fallback/warnings (configurable)                  |
+| **Rich Content (JSX/Markdown/components)**    | Direct support, even React nodes                                                                                                 | Limited / interpolation only                                       | ICU syntax, not real JSX                           | Limited                                            | Not designed for rich nodes                        | Limited                                            | Limited (components via `<i18n-t>`, Markdown via plugins) |
+| **AI-powered Translation**                    | Yes, supports multiple AI providers. Usable using your own API keys. Considers the context of your application and content scope | No                                                                 | No                                                 | No                                                 | No                                                 | No                                                 | No                                                        |
+| **Visual Editor**                             | Yes, local Visual Editor + optional CMS; can externalize codebase content; embeddable                                            | No / available via external localization platforms                 | No / available via external localization platforms | No / available via external localization platforms | No / available via external localization platforms | No / available via external localization platforms | No / available via external localization platforms        |
+| **Localized Routing**                         | Built-in, middleware support                                                                                                     | Plugins or manual config                                           | Not built-in                                       | Plugin/manual config                               | Built-in                                           | Built-in                                           | Manual via Vue Router (Nuxt i18n handles it)              |
+| **Dynamic Route Generation**                  | Yes                                                                                                                              | Plugin/ecosystem or manual setup                                   | Not provided                                       | Plugin/manual                                      | Yes                                                | Yes                                                | Not provided (Nuxt i18n provides)                         |
+| **Pluralization**                             | Enumeration-based patterns; see docs                                                                                             | Configurable (plugins like i18next-icu)                            | Advanced (ICU)                                     | Advanced (ICU/messageformat)                       | Good                                               | Good                                               | Advanced (built-in plural rules)                          |
+| **Formatting (dates, numbers, currencies)**   | Optimized formatters (Intl under the hood)                                                                                       | Via plugins or custom Intl usage                                   | Advanced ICU formatters                            | ICU/CLI helpers                                    | Good (Intl helpers)                                | Good (Intl helpers)                                | Built-in date/number formatters (Intl)                    |
+| **Content Format**                            | .tsx, .ts, .js, .json, .md, .txt                                                                                                 | .json                                                              | .json, .js                                         | .po, .json                                         | .json, .js, .ts                                    | .json                                              | .json, .js                                                |
+| **ICU support**                               | WIP (native ICU)                                                                                                                 | Via plugin (i18next-icu)                                           | Yes                                                | Yes                                                | Yes                                                | Via plugin (i18next-icu)                           | Via custom formatter/compiler                             |
+| **SEO Helpers (hreflang, sitemap)**           | Built-in tools: helpers for sitemap, **robots.txt**, metadata                                                                    | Community plugins/manual                                           | Not core                                           | Not core                                           | Good                                               | Good                                               | Not core (Nuxt i18n provides helpers)                     |
+| **Ecosystem / Community**                     | Smaller but growing fast and reactive                                                                                            | Largest and most mature                                            | Large, enterprise                                  | Growing, smaller                                   | Mid-size, Next.js-focused                          | Mid-size, Next.js-focused                          | Large in Vue ecosystem                                    |
+| **Server-side Rendering & Server Components** | Yes, streamlined for SSR / React Server Components                                                                               | Supported, some config needed                                      | Supported in Next.js                               | Supported                                          | Full support                                       | Full support                                       | SSR via Nuxt/Vue SSR (no RSC)                             |
+| **Tree-shaking (load only used content)**     | Yes, per-component at build time via Babel/SWC plugins                                                                           | Usually loads all (can be improved with namespaces/code-splitting) | Usually loads all                                  | Not default                                        | Partial                                            | Partial                                            | Partial (with code-splitting/manual setup)                |
+| **Lazy loading**                              | Yes, per-locale/per-component                                                                                                    | Yes (e.g., backends/namespaces on demand)                          | Yes (split locale bundles)                         | Yes (dynamic catalog imports)                      | Yes (per-route/per-locale)                         | Yes (per-route/per-locale)                         | Yes (async locale messages)                               |
+| **Management of Large Projects**              | Encourages modular, suited for design-system                                                                                     | Needs good file discipline                                         | Central catalogs can get large                     | May get complex                                    | Modular with setup                                 | Modular with setup                                 | Modular with Vue Router/Nuxt i18n setup                   |
+
+## Document History
+
+| Version | Date       | Changes                  |
+| ------- | ---------- | ------------------------ |
+| 5.8.0   | 2025-08-19 | Update comparative table |
+| 5.5.10  | 2025-06-29 | Init history             |

package/docs/en/introduction.md

@@ -44,8 +44,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 } satisfies Dictionary;
@@ -62,8 +62,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };
@@ -80,8 +80,8 @@ const componentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
   },
 };

package/docs/en/packages/intlayer/index.md

@@ -148,8 +148,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",
@@ -174,8 +174,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",
@@ -200,8 +200,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",

package/docs/en/packages/next-intlayer/index.md

@@ -110,8 +110,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",
@@ -136,8 +136,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",
@@ -162,8 +162,8 @@ const clientComponentContent = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",

package/docs/en/packages/react-intlayer/index.md

@@ -110,8 +110,8 @@ const component1Content = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",
@@ -136,8 +136,8 @@ const component1Content = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",
@@ -162,8 +162,8 @@ const component1Content = {
   content: {
     myTranslatedContent: t({
       en: "Hello World",
-      fr: "Bonjour le monde",
       es: "Hola Mundo",
+      fr: "Bonjour le monde",
     }),
     numberOfCar: enu({
       "<-1": "Less than minus one car",

package/docs/en-GB/CI_CD.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-05-20
-updatedAt: 2025-06-29
+updatedAt: 2025-08-13
 title: CI/CD Integration
 description: Learn how to integrate Intlayer into your CI/CD pipeline for automated content management and deployment.
 keywords:
@@ -8,7 +8,7 @@ keywords:
   - Continuous Integration
   - Continuous Deployment
   - Automation
-  - Internationalization
+  - Internationalisation
   - Documentation
   - Intlayer
 slugs:
@@ -64,7 +64,7 @@ You can integrate translation generation into your local Git workflow using [Hus
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
-  internationalization: {
+  internationalisation: {
     locales: [Locales.ENGLISH, Locales.SPANISH, Locales.FRENCH],
     requiredLocales: [Locales.ENGLISH], // Optional locales are handled remotely
     defaultLocale: Locales.ENGLISH,
@@ -109,64 +109,90 @@ Intlayer provides a CLI command to autofill and review dictionary content. This
 
 ```yaml fileName=".github/workflows/intlayer-translate.yml"
 name: Intlayer Auto-Fill
+# Trigger conditions for this workflow
 on:
-  push:
-    branches: [ main ]
-    paths:
-      - 'src/**'
   pull_request:
-    branches: [ main ]
-    paths:
-      - 'src/**'
-  workflow_dispatch: {}
+    branches:
+      - "main"
+
+permissions:
+  contents: write
+  pull-requests: write
 
 concurrency:
-  group: 'autofill-${{ github.ref }}'
+  group: "autofill-${{ github.ref }}"
   cancel-in-progress: true
 
 jobs:
   autofill:
     runs-on: ubuntu-latest
     env:
-      INTLAYER_CLIENT_ID: ${{ secrets.INTLAYER_CLIENT_ID }}
-      INTLAYER_CLIENT_SECRET: ${{ secrets.INTLAYER_CLIENT_SECRET }}
-      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
+      # OpenAI
+      AI_MODEL: openai
+      AI_PROVIDER: gpt-5-mini
+      AI_API_KEY: ${{ secrets.AI_API_KEY }}
 
     steps:
+      # Step 1: Get the latest code from the repository
       - name: ⬇️ Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
-          persist-credentials: true
+          persist-credentials: true # Keep credentials for creating PRs
+          fetch-depth: 0 # Get full git history for diff analysis
 
+      # Step 2: Set up Node.js environment
       - name: 🟢 Set up Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20 # Use Node.js 20 LTS for stability
 
+      # Step 3: Install project dependencies
       - name: 📦 Install dependencies
-        run: npm ci
+        run: npm install
+
+      # Step 4: Install Intlayer CLI globally for translation management
+      - name: 📦 Install Intlayer
+        run: npm install -g intlayer-cli
 
+      # Step 5: Build the Intlayer project to generate translation files
       - name: ⚙️ Build Intlayer project
         run: npx intlayer build
 
+      # Step 6: Use AI to automatically fill missing translations
       - name: 🤖 Auto-fill missing translations
-        run: npx intlayer fill --git-diff --mode fill
-
-      - name: 📤 Create or update translation PR
-        uses: peter-evans/create-pull-request@v4
-        with:
-          commit-message: chore: auto-fill missing translations [skip ci]
-          branch: auto-translations
-          title: chore: update missing translations
-          labels: translation, automated
+        run: npx intlayer fill --git-diff --mode fill --provider $AI_PROVIDER --model $AI_MODEL --api-key $AI_API_KEY
+
+      # Step 7: Check if there are changes and commit them
+      - name: � Check for changes
+        id: check-changes
+        run: |
+          if [ -n "$(git status --porcelain)" ]; then
+            echo "has-changes=true" >> $GITHUB_OUTPUT
+          else
+            echo "has-changes=false" >> $GITHUB_OUTPUT
+          fi
+
+      # Step 8: Commit and push changes if any exist
+      - name: 📤 Commit and push changes
+        if: steps.check-changes.outputs.has-changes == 'true'
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add .
+          git commit -m "chore: auto-fill missing translations [skip ci]"
+          git push origin HEAD:${{ github.head_ref }}
 ```
 
-> Same as for Husky, in the case of a monorepo, you can use the `--base-dir` argument to sequentially treat each app.
+To set up the environment variables, go to GitHub → Settings → Secrets and variables → Actions and add the secret .
+
+> Same as for Husky, in the case of a monorepo, you can use the `--base-dir` argument to sequentially process each app.
 
-> By default, the `--git-diff` argument filters dictionaries that include changes from base (default `origin/main`) to current branch (default: `HEAD`).
+> By default, the `--git-diff` argument filters dictionaries that include changes from the base (default `origin/main`) to the current branch (default: `HEAD`).
 
 > For more information about Intlayer CLI commands and their usage, refer to the [CLI documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/intlayer_cli.md).
 
 ## Doc History
 
-- 5.5.10 - 2025-06-29: Init history
+| Version | Date       | Changes         |
+| ------- | ---------- | --------------- |
+| 5.5.10  | 2025-06-29 | Initial history |