@intlayer/docs 5.5.8 → 5.5.10

package/en/intlayer_with_react_native+expo.md

@@ -20,15 +20,18 @@ With Intlayer, you can:
 From your React Native project, install the following packages:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer react-native-intlayer
+npm install intlayer react-intlayer
+npm install --save-dev react-native-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer react-native-intlayer
+pnpm add intlayer react-intlayer
+pnpm add --save-dev react-native-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer react-native-intlayer
+yarn add intlayer react-intlayer
+yarn add --save-dev react-native-intlayer
 ```
 
 ### Packages

package/en/intlayer_with_vite+preact.md

@@ -24,15 +24,18 @@ With Intlayer, you can:
 Install the necessary packages using npm:
 
 ```bash packageManager="npm"
-npm install intlayer preact-intlayer vite-intlayer
+npm install intlayer preact-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer preact-intlayer vite-intlayer
+pnpm add intlayer preact-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer preact-intlayer vite-intlayer
+yarn add intlayer preact-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -505,13 +508,7 @@ module.exports = App;
 > If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > Note: In Preact, `className` is typically written as `class`.
@@ -1235,24 +1232,8 @@ module.exports = LocaleSwitcher;
 ```
 
 > Documentation references:
-
-> - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useLocale.md) (API is similar for `preact-intlayer`)
-
-> - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocaleName.md)
-
-> - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocalizedUrl.md)
-
-> - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getHTMLTextDir.md)
-
-> - [`hreflang` attribute](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
-> - [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
-> - [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
-> - [`aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
-
-> - [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+>
+> > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useLocale.md) (API is similar for `preact-intlayer`)> - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocaleName.md)> - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocalizedUrl.md)> - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getHTMLTextDir.md)> - [`hreflang` attribute](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)> - [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)> - [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)> - [`aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)> - [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
 
 Below is the updated **Step 9** with added explanations and refined code examples:
 

package/en/intlayer_with_vite+react.md

@@ -22,15 +22,18 @@ With Intlayer, you can:
 Install the necessary packages using npm:
 
 ```bash packageManager="npm"
-npm install intlayer react-intlayer vite-intlayer
+npm install intlayer react-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer react-intlayer vite-intlayer
+pnpm add intlayer react-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer react-intlayer vite-intlayer
+yarn add intlayer react-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -532,13 +535,7 @@ module.exports = App;
 > If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useIntlayer.md).
@@ -1217,21 +1214,14 @@ const LocaleSwitcher = () => {
 ```
 
 > Documentation references:
-
+>
 > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/react-intlayer/useLocale.md)
-
 > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hrefLang` attribute](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
 > - [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 Below is the updated **Step 9** with added explanations and refined code examples:

package/en/intlayer_with_vite+solid.md

@@ -24,15 +24,18 @@ With Intlayer, you can:
 Install the necessary packages using npm:
 
 ```bash packageManager="npm"
-npm install intlayer solid-intlayer vite-intlayer
+npm install intlayer solid-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer solid-intlayer vite-intlayer
+pnpm add intlayer solid-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer solid-intlayer vite-intlayer
+yarn add intlayer solid-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**

package/en/intlayer_with_vite+svelte.md

@@ -24,15 +24,18 @@ With Intlayer, you can:
 Install the necessary packages using npm:
 
 ```bash packageManager="npm"
-npm install intlayer svelte-intlayer vite-intlayer
+npm install intlayer svelte-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer svelte-intlayer vite-intlayer
+pnpm add intlayer svelte-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer svelte-intlayer vite-intlayer
+yarn add intlayer svelte-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**

package/en/intlayer_with_vite+vue.md

@@ -22,15 +22,18 @@ With Intlayer, you can:
 Install the necessary packages using npm:
 
 ```bash packageManager="npm"
-npm install intlayer vue-intlayer vite-intlayer
+npm install intlayer vue-intlayer
+npm install --save-dev vite-intlayer
 ```
 
 ```bash packageManager="pnpm"
-pnpm add intlayer vue-intlayer vite-intlayer
+pnpm add intlayer vue-intlayer
+pnpm add --save-dev vite-intlayer
 ```
 
 ```bash packageManager="yarn"
-yarn add intlayer vue-intlayer vite-intlayer
+yarn add intlayer vue-intlayer
+yarn add --save-dev vite-intlayer
 ```
 
 - **intlayer**
@@ -410,13 +413,21 @@ const countRef = ref(0);
 
 #### Accessing Content in Intlayer
 
-Intlayer offers two APIs to access your content:
+Intlayer offers different APIs to access your content:
 
 - **Component-based syntax** (recommended):
-  Use the `<myContent />` syntax to render content as an Intlayer Node. This integrates seamlessly with the [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_visual_editor.md) and [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_CMS.md).
+  Use the `<myContent />`, or `<Component :is="myContent" />` syntax to render content as an Intlayer Node. This integrates seamlessly with the [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_visual_editor.md) and [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_CMS.md).
 
 - **String-based syntax**:
-  Use `{{ myContent }}` to render the content as plain text, without any interactivity.
+  Use `{{ myContent }}` to render the content as plain text, without Visual Editor support.
+
+- **Raw HTML syntax**:
+  Use `<div v-html="myContent" />` to render the content as raw HTML, without Visual Editor support.
+
+- **Destructuration syntax**:
+  The `useIntlayer` composable returns an Proxy with the content. This proxy can be destructured to access the content while keeping the reactivity.
+  - Use `const content = useIntlayer("myContent");` And `{{ content.myContent }}` / `<content.myContent />`.
+  - Or use `const { myContent } = useIntlayer("myContent");` And `{{ myContent}}` / `<myContent/>` to destructure the content.
 
 ### (Optional) Step 6: Change the language of your content
 

package/en/packages/nuxt-intlayer/index.md

@@ -0,0 +1,31 @@
+# nuxt-intlayer: NPM Package to internationalize (i18n) an Vue application
+
+**Intlayer** is a suite of packages designed specifically for JavaScript developers. It is compatible with frameworks like Vue, Vue, and Express.js.
+
+**The `nuxt-intlayer` package** allows you to internationalize your Vue application. It provides context providers and hooks for Vue internationalization.
+
+## Why Internationalize Your Vue Application?
+
+Internationalizing your Vue application is essential for serving a global audience effectively. It allows your application to deliver content and messages in the preferred language of each user. This capability enhances user experience and broadens your application's reach by making it more accessible and relevant to people from different linguistic backgrounds.
+
+## Why to integrate Intlayer?
+
+- **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.
+
+## Installation
+
+Install the necessary package using your preferred package manager:
+
+```bash packageManager="npm"
+npm install nuxt-intlayer
+```
+
+```bash packageManager="yarn"
+yarn add nuxt-intlayer
+```
+
+```bash packageManager="pnpm"
+pnpm add nuxt-intlayer
+```

package/en/roadmap.md

@@ -14,7 +14,7 @@ Intlayer is a content management and internationalization solution designed to s
 - **Distributed**: Alternatively, split your content into separate files at the component or feature level for better maintainability. This keeps your content close to the relevant code (components, tests, Storybook, etc.). Removing a component ensures any associated content is also removed, preventing leftover data from cluttering your codebase.
 
 > Resources:
-
+>
 > - [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/get_started.md)
 
 ### 2. Internationalization
@@ -23,7 +23,7 @@ Intlayer is a content management and internationalization solution designed to s
 - Easily manage translations for all these locales from one place.
 
 > Resources:
-
+>
 > - [Internationalization](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/translation.md)
 
 ### 3. Markdown Support
@@ -32,7 +32,7 @@ Intlayer is a content management and internationalization solution designed to s
 - Ideal for blog posts, articles, documentation pages, or any scenario where rich text formatting is needed.
 
 > Resources:
-
+>
 > - [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/markdown.md)
 
 ### 4. External file support
@@ -43,7 +43,7 @@ Intlayer is a content management and internationalization solution designed to s
 - Enables multilingual content management by linking language-specific Markdown files dynamically.
 
 > Resources:
-
+>
 > - [File Content Embedding](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/file.md)
 
 ### 5. Dynamic Content & Function Fetching
@@ -132,7 +132,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - Fully compatible with the new Next.js Turbopack as well as traditional Webpack.
 
 > Resources:
-
+>
 > - [Next.js](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_nextjs_15.md)
 
 ### 2. Vite
@@ -140,7 +140,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - Similar to Next.js, you can integrate Intlayer with Vite and use a **middleware** to redirect users to content based on their preferred language.
 
 > Resources:
-
+>
 > - [Vite](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_vite+react.md)
 
 ### 3. Express
@@ -149,7 +149,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - Personalize emails, error messages, push notifications, and more with localized text.
 
 > Resources:
-
+>
 > - [Express](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_express.md)
 
 ### 4. React Native
@@ -158,7 +158,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - Supports both iOS and Android platforms.
 
 > Resources:
-
+>
 > - [React Native](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_react_native.md)
 
 ### 5. Lynx
@@ -167,7 +167,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - Supports both iOS and Android platforms.
 
 > Resources:
-
+>
 > - [Lynx](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_with_lynx.md)
 
 ---
@@ -184,7 +184,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - Can be hosted locally or deployed on a remote server.
 
 > Resources:
-
+>
 > - [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_visual_editor.md)
 
 ### 2. Intlayer CMS (Remote)
@@ -194,7 +194,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - Interact with your content via your live application interface.
 
 > Resources:
-
+>
 > - [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_CMS.md)
 
 ---
@@ -206,7 +206,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - Useful for **CI/CD pipelines**, ensuring your content is always synchronized with your code.
 
 > Resources:
-
+>
 > - [CLI](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_cli.md)
 
 ---
@@ -223,7 +223,7 @@ Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring co
 - When using remote dictionaries and the Intlayer CMS, you can **update your application’s content on the fly**, without needing to redeploy.
 
 > Resources:
-
+>
 > - [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/en/intlayer_CMS.md)
 
 ---

package/en/t.md

@@ -14,7 +14,7 @@ Intlayer is a content management and internationalization solution designed to s
 - **Distributed**: Alternatively, split your content into separate files at the component or feature level for better maintainability. This keeps your content close to the relevant code (components, tests, Storybook, etc.). Removing a component ensures any associated content is also removed, preventing leftover data from cluttering your codebase.
 
 > Resources:
-
+>
 > - [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/get_started.md)
 
 ### 2. Internationalization
@@ -23,7 +23,7 @@ Intlayer is a content management and internationalization solution designed to s
 - Easily manage translations for all these locales from one place.
 
 > Resources:
-
+>
 > - [Internationalization](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/translation.md)
 
 ### 3. Markdown Support
@@ -32,7 +32,7 @@ Intlayer is a content management and internationalization solution designed to s
 - Ideal for blog posts, articles, documentation pages, or any scenario where rich text formatting is needed.
 
 > Resources:
-
+>
 > - [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/markdown.md)
 
 ### 4. External file support
@@ -43,7 +43,7 @@ Intlayer is a content management and internationalization solution designed to s
 - Enables multilingual content management by linking language-specific Markdown files dynamically.
 
 > Resources:
-
+>
 > - [File Content Embedding](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/file.md)
 
 ### 5. Dynamic Content & Logic-Based Rendering
@@ -157,7 +157,7 @@ This section ensures all related dynamic content and logic-driven features are g
 Intlayer supports **TypeScript** (also JavaScript) and **JSON** for declaring content.
 
 > Resources:
-
+>
 > - [Content Declaration Formats](https://github.com/aymericzip/intlayer/blob/main/docs/en/dictionary/content_extention_customization.md)
 
 (Other sections remain unchanged.)

package/en-GB/how_works_intlayer.md

@@ -67,21 +67,29 @@ Intlayer allows you to declare content locally, and then export it to the CMS to
 
 Thus, you will be able to push and pull content from the CMS to your application, in a similar way to what you do with Git for your code.
 
-If configured on your project, Intlayer will automatically manage the fetching of the content from the CMS when the application starts (dev) / builds (prod).
+For externalized dictionaries using the CMS, Intlayer performs a basic fetch operation to retrieve distant dictionaries and merges them with your local ones. If configured on your project, Intlayer will automatically manage the fetching of the content from the CMS when the application starts (dev) / builds (prod).
 
 ## Visual editor
 
 Intlayer also provides a visual editor to allow you to edit your content in a visual way. This [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/intlayer_visual_editor.md) is available in the external `intlayer-editor` package.
 
+The visual editor is a standalone application that can be used to edit your content. It's composed on two parts: the server and the client.
+
 ![visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif)
 
+- The server is a simple Express application that listens to requests from the client and retreives the content of your application, such as the `dictionaries` and the configuration to make it accessible on the client side.
+- On the other hand, the client is a React application that is used to interact with your content using a visual interface.
+
+When you call your content using `useIntlayer` and the editor is enabled, it automatically wraps your strings with an Proxy object named `IntlayerNode`. This node uses `window.sendMessage` to communicate with a wrapped iframe containing the visual editor interface.
+On the editor side, the editor listens to these messages and simulates real interaction with your content, allowing you to edit text directly in your application's context.
+
 ## App build optimisation
 
 To optimise the bundle size of your application, Intlayer provides two plugins to optimise the build of your application: `@intlayer/babel` and `@intlayer/swc` plugins.
 
-In development mode, Intlayer uses a centralised static import for dictionaries to simplify the development experience.
+The Babel and SWC plugins work by analyzing your application's Abstract Syntax Tree (AST) to replace calls of Intlayer functions with optimized code. This process makes your final bundle lighter in production by ensuring that only the dictionaries that are actually used are imported, optimizing chunking and reducing bundle size.
 
-By optimising the build, Intlayer will replace all calls of dictionaries to optimise chunking. That way the final bundle will import only the dictionaries that are used.
+In development mode, Intlayer uses a centralised static import for dictionaries to simplify the development experience.
 
 By activating the option `activateDynamicImport` in the [configuration](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/configuration.md), Intlayer will use the dynamic import to load the dictionaries. This option is disabled by default to avoid asynchronous processing when rendering the application.
 
@@ -176,6 +184,10 @@ The `@intlayer/webpack` package is used to provide a Webpack configuration to ma
 
 The `@intlayer/cli` package is an NPM package that is used to declare the scripts related to the Intlayer command line interfaces. It ensures the uniformity of all Intlayer CLI commands. This package is notably consumed by the [intlayer-cli](https://github.com/aymericzip/intlayer/tree/main/docs/en-GB/packages/intlayer-cli/index.md), and the [intlayer](https://github.com/aymericzip/intlayer/tree/main/docs/en-GB/packages/intlayer/index.md) packages.
 
+### @intlayer/mcp
+
+The `@intlayer/mcp` package provides an MCP (Model Context Protocol) server that delivers AI-powered IDE assistance tailored for the Intlayer ecosystem. It automatically loads documentation and integrates with the Intlayer CLI.
+
 ### @intlayer/dictionaries-entry & @intlayer/unmerged-dictionaries-entry & @intlayer/dynamic-dictionaries-entry
 
 The `@intlayer/dictionaries-entry`, `@intlayer/unmerged-dictionaries-entry` and `@intlayer/dynamic-dictionaries-entry` packages return the entry path of the Intlayer dictionaries. Since searching the filesystem from the browser is impossible, using bundlers like Webpack or Rollup to retrieve the entry path of the dictionaries is not possible. These packages are designed to be aliased, allowing for bundling optimisation across various bundlers such as Vite, Webpack, and Turbopack.
@@ -196,7 +208,7 @@ The `@intlayer/editor-react` package provides states, contexts, hooks and compon
 
 The `@intlayer/babel` package provides tools that optimise bundling of dictionaries for Vite and Webpack-based applications.
 
-### @intlayer/swc (WIP)
+### @intlayer/swc
 
 The `@intlayer/swc` package provides tools that optimise bundling of dictionaries for Next.js applications.
 

package/en-GB/intlayer_with_create_react_app.md

@@ -325,13 +325,7 @@ const App = () => (
 > Note: If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/react-intlayer/useIntlayer.md).
@@ -973,21 +967,14 @@ const LocaleSwitcher = () => {
 ```
 
 > Documentation references:
-
+>
 > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/react-intlayer/useLocale.md)
-
 > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hrefLang` attribute](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
 > - [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ### (Optional) Step 9: Switch the HTML Language and Direction Attributes

package/en-GB/intlayer_with_nextjs_14.md

@@ -568,13 +568,7 @@ const ServerComponentExample = () => {
 > If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/next-intlayer/useIntlayer.md).
@@ -1051,21 +1045,14 @@ const LocaleSwitcher = () => {
 ```
 
 > Documentation references:
-
+>
 > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/next-intlayer/useLocale.md)
-
 > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalisedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getLocalisedUrl.md)
-
 > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hrefLang` attribute](https://developers.google.com/search/docs/specialty/international/localised-versions?hl=fr)
-
 > - [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ### (Optional) Step 11: Creating a Localised Link Component

package/en-GB/intlayer_with_nextjs_15.md

@@ -582,13 +582,7 @@ const ServerComponentExample = () => {
 > If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/next-intlayer/useIntlayer.md).
@@ -1097,21 +1091,14 @@ export const LocaleSwitcher = () => {
 ```
 
 > Documentation references:
-
+>
 > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/next-intlayer/useLocale.md)
-
 > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hrefLang` attribute](https://developers.google.com/search/docs/specialty/international/localised-versions?hl=fr)
-
 > - [`lang` attribute](https://developer.mozilla.org/en-GB/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` attribute](https://developer.mozilla.org/en-GB/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` attribute](https://developer.mozilla.org/en-GB/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ### (Optional) Step 11: Creating a Localised Link Component

package/en-GB/intlayer_with_nextjs_page_router.md

@@ -529,13 +529,7 @@ const ComponentExample = () => {
 > value of the function as follows:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > To Learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/next-intlayer/useIntlayer.md).
@@ -865,19 +859,13 @@ const LocaleSwitcher = () => {
 > The `useLocalePageRouter` API is the same as `useLocale`. To Learn more about the `useLocale` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/next-intlayer/useLocale.md).
 
 > Documentation references:
-
+>
 > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/intlayer/getHTMLTextDir.md)
-
 > - [`hrefLang` attribute](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
 > - [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [`aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ### (Optional) Step 10: Creating a Localised Link Component