@intlayer/docs 5.5.8 → 5.5.10

package/en-GB/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-GB/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**
@@ -515,13 +518,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`.
@@ -1245,23 +1242,15 @@ module.exports = LocaleSwitcher;
 ```
 
 > Documentation references:
-
+>
 > - [`useLocale` hook](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/packages/react-intlayer/useLocale.md) (API is similar for `preact-intlayer`)
-
 > - [`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)
-
 > - [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-GB/intlayer_with_vite+react.md

@@ -24,15 +24,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**
@@ -561,13 +564,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-GB/packages/react-intlayer/useIntlayer.md).

package/en-GB/intlayer_with_vite+vue.md

@@ -24,15 +24,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**
@@ -261,52 +264,61 @@ const helloWorldContent = {
 export default helloWorldContent;
 ```
 
----
-
+```javascript fileName="src/helloWorld.content.cjs" contentDeclarationFormat="commonjs"
 const { t } = require("intlayer");
 
-/\*_ @type {import('intlayer').Dictionary} _/
+/** @type {import('intlayer').Dictionary} */
 const appContent = {
-key: "helloworld",
-content: {
-count: t({ 'en-GB': "count is ", en: "count is ", fr: "le compte est ", es: "el recuento es " }),
-edit: t({
-'en-GB': "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
-en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
-fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
-es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
-}),
-checkOut: t({ 'en-GB': "Check out ", en: "Check out ", fr: "Vérifiez ", es: "Compruebe " }),
-officialStarter: t({
-'en-GB': "the official Vue + Vite starter",
-en: "the official Vue + Vite starter",
-fr: "le starter officiel Vue + Vite",
-es: "el starter oficial Vue + Vite",
-}),
-learnMore: t({
-'en-GB': "Learn more about IDE Support for Vue in the ",
-en: "Learn more about IDE Support for Vue in the ",
-fr: "En savoir plus sur le support IDE pour Vue dans le ",
-es: "Aprenda más sobre el soporte IDE para Vue en el ",
-}),
-vueDocs: t({
-'en-GB': "Vue Docs Scaling up Guide",
-en: "Vue Docs Scaling up Guide",
-fr: "Vue Docs Scaling up Guide",
-es: "Vue Docs Scaling up Guide",
-}),
-readTheDocs: t({
-'en-GB': "Click on the Vite and Vue logos to learn more",
-en: "Click on the Vite and Vue logos to learn more",
-fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
-es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
-}),
-},
+  key: "helloworld",
+  content: {
+    count: t({
+      "en-GB": "count is ",
+      en: "count is ",
+      fr: "le compte est ",
+      es: "el recuento es ",
+    }),
+    edit: t({
+      "en-GB":
+        "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
+      en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
+      fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
+      es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
+    }),
+    checkOut: t({
+      "en-GB": "Check out ",
+      en: "Check out ",
+      fr: "Vérifiez ",
+      es: "Compruebe ",
+    }),
+    officialStarter: t({
+      "en-GB": "the official Vue + Vite starter",
+      en: "the official Vue + Vite starter",
+      fr: "le starter officiel Vue + Vite",
+      es: "el starter oficial Vue + Vite",
+    }),
+    learnMore: t({
+      "en-GB": "Learn more about IDE Support for Vue in the ",
+      en: "Learn more about IDE Support for Vue in the ",
+      fr: "En savoir plus sur le support IDE pour Vue dans le ",
+      es: "Aprenda más sobre el soporte IDE para Vue en el ",
+    }),
+    vueDocs: t({
+      "en-GB": "Vue Docs Scaling up Guide",
+      en: "Vue Docs Scaling up Guide",
+      fr: "Vue Docs Scaling up Guide",
+      es: "Vue Docs Scaling up Guide",
+    }),
+    readTheDocs: t({
+      "en-GB": "Click on the Vite and Vue logos to learn more",
+      en: "Click on the Vite and Vue logos to learn more",
+      fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
+      es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
+    }),
+  },
 };
 
 module.exports = appContent;
-
-````
+```
 
 ```json fileName="src/helloWorld.content.json" contentDeclarationFormat="json"
 {
@@ -378,7 +390,7 @@ module.exports = appContent;
     }
   }
 }
-````
+```
 
 > Your content declarations can be defined anywhere in your application as long as they are included in the `contentDir` directory (by default, `./src`). They must also match the content declaration file extension (by default, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
 
@@ -446,23 +458,18 @@ const count = ref(0);
 </template>
 ```
 
-> If you want to use your content in an attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function with `.value`, like:
-
-> ```html
->
-> ```
+#### Accessing Content in Intlayer Intlayer offers different APIs to access your content
 
-> <img src="./logo.svg" :alt="content.image.value" />
-
-> ```
->
-> ```
+- **Component-based syntax** (recommended): 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-GB/intlayer_visual_editor.md) and [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/en-GB/intlayer_CMS.md).
+- **String-based syntax**: 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 a Proxy with the content. This proxy can be destructured to access the content while maintaining 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
 
-To change the language of your content, you can use the `setLocale` function provided by the `useLocale` composable. This function allows you to set the locale of the application and update the content accordingly.
-
-Create a component to switch between languages:
+To change the language of your content, you can use the `setLocale` function provided by the `useLocale` composable. This function allows you to set the locale of the application and update the content accordingly. Create a component to switch between languages:
 
 ```vue fileName="src/components/LocaleSwitcher.vue"
 <template>
@@ -533,7 +540,6 @@ Example:
 
 ```plaintext
 - https://example.com/about
-
 - https://example.com/en-GB/about
 - https://example.com/fr/about
 ```
@@ -843,7 +849,7 @@ useI18nHTMLAttributes();
 
 ### (Optional) Step 10: Creating a Localised Link Component
 
-To ensure that your application’s navigation respects the current locale, you can create a custom `Link` component. This component automatically prefixes internal URLs with the current language, so that, for example, when a French-speaking user clicks on a link to the "About" page, they are redirected to `/fr/about` instead of `/about`.
+To ensure that your application's navigation respects the current locale, you can create a custom `Link` component. This component automatically prefixes internal URLs with the current language, so that, for example, when a French-speaking user clicks on a link to the "About" page, they are redirected to `/fr/about` instead of `/about`.
 
 This behaviour is useful for several reasons:
 

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

@@ -0,0 +1,31 @@
+# nuxt-intlayer: NPM Package to internationalise (i18n) a 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 internationalise your Vue application. It provides context providers and hooks for Vue internationalisation.
+
+## Why Internationalise Your Vue Application?
+
+Internationalising 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-GB/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/{{locale}}/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/{{locale}}/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/{{locale}}/dictionary/markdown.md)
 
 ### 4. Conditional Rendering
@@ -41,7 +41,7 @@ Intlayer is a content management and internationalization solution designed to s
 - Helps tailor personalized experiences without duplicating content across multiple files.
 
 > Resources:
-
+>
 > - [Conditional Rendering](https://github.com/aymericzip/intlayer/blob/main/docs/{{locale}}/dictionary/condition.md)
 
 ### 5. Content Declaration Formats
@@ -86,7 +86,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/{{locale}}/intlayer_with_nextjs_15.md)
 
 ### 2. Vite
@@ -94,7 +94,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/{{locale}}/intlayer_with_vite+react.md)
 
 ### 3. Express
@@ -103,7 +103,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/{{locale}}/intlayer_with_express.md)
 
 ---
@@ -120,7 +120,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/{{locale}}/intlayer_visual_editor.md)
 
 ### 2. Intlayer CMS (Remote)
@@ -130,7 +130,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/{{locale}}/intlayer_CMS.md)
 
 ---
@@ -142,7 +142,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/{{locale}}/intlayer_cli.md)
 
 ---
@@ -159,7 +159,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/{{locale}}/intlayer_CMS.md)
 
 ---

package/es/autoFill.md

@@ -67,9 +67,8 @@ src/components/example/example.filled.content.ts
 ```
 
 > La generación de archivos `.js`, `.ts` y similares funciona de la siguiente manera:
-
+>
 > - Si el archivo ya existe, Intlayer lo analizará usando el AST (Árbol de Sintaxis Abstracta) para localizar cada campo e insertar las traducciones faltantes.
-
 > - Si el archivo no existe, Intlayer lo generará usando la plantilla predeterminada para archivos de declaración de contenido.
 
 ## Rutas Absolutas

package/es/how_works_intlayer.md

@@ -196,7 +196,7 @@ El paquete `@intlayer/editor-react` proporciona estados, contextos, hooks y comp
 
 El paquete `@intlayer/babel` proporciona herramientas que optimizan el empaquetado de diccionarios para aplicaciones basadas en Vite y Webpack.
 
-### @intlayer/swc (WIP)
+### @intlayer/swc
 
 El paquete `@intlayer/swc` proporciona herramientas que optimizan el empaquetado de diccionarios para aplicaciones Next.js.
 

package/es/intlayer_with_create_react_app.md

@@ -325,13 +325,7 @@ const App = () => (
 > Nota: Si deseas usar tu contenido en un atributo `string`, como `alt`, `title`, `href`, `aria-label`, etc., debes llamar al valor de la función, como:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > Para aprender más sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/react-intlayer/useIntlayer.md).
@@ -973,21 +967,14 @@ const LocaleSwitcher = () => {
 ```
 
 > Referencias de documentación:
-
+>
 > - [Hook `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/react-intlayer/useLocale.md)
-
 > - [Hook `getLocaleName`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getLocaleName.md)
-
 > - [Hook `getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getLocalizedUrl.md)
-
 > - [Hook `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getHTMLTextDir.md)
-
 > - [Atributo `hrefLang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
 > - [Atributo `lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [Atributo `dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [Atributo `aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ### (Opcional) Paso 9: Cambiar los atributos de idioma y dirección del HTML

package/es/intlayer_with_nextjs_14.md

@@ -568,13 +568,7 @@ const ServerComponentExample = () => {
 > Si deseas usar tu contenido en un atributo `string`, como `alt`, `title`, `href`, `aria-label`, etc., debes llamar al valor de la función, como:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > Para aprender más sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/next-intlayer/useIntlayer.md).
@@ -1042,21 +1036,14 @@ const LocaleSwitcher = () => {
 ```
 
 > Referencias de documentación:
-
+>
 > - [Hook `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/next-intlayer/useLocale.md)
-
 > - [Hook `getLocaleName`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getLocaleName.md)
-
 > - [Hook `getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getLocalizedUrl.md)
-
 > - [Hook `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getHTMLTextDir.md)
-
 > - [Atributo `hrefLang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=es)
-
 > - [Atributo `lang`](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/lang)
-
 > - [Atributo `dir`](https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/dir)
-
 > - [Atributo `aria-current`](https://developer.mozilla.org/es/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ### (Opcional) Paso 11: Crear un componente de enlace localizado

package/es/intlayer_with_nextjs_15.md

@@ -582,13 +582,7 @@ const ServerComponentExample = () => {
 > Si deseas usar tu contenido en un atributo `string`, como `alt`, `title`, `href`, `aria-label`, etc., debes llamar al valor de la función, como:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > Para aprender más sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/next-intlayer/useIntlayer.md).
@@ -1097,21 +1091,14 @@ export const LocaleSwitcher = () => {
 ```
 
 > Referencias de documentación:
-
+>
 > - [Hook `useLocale`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/next-intlayer/useLocale.md)
-
 > - [Hook `getLocaleName`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getLocaleName.md)
-
 > - [Hook `getLocalizedUrl`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getLocalizedUrl.md)
-
 > - [Hook `getHTMLTextDir`](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getHTMLTextDir.md)
-
 > - [Atributo `hrefLang`](https://developers.google.com/search/docs/specialty/international/localized-versions?hl=fr)
-
 > - [Atributo `lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
-
 > - [Atributo `dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
-
 > - [Atributo `aria-current`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
 ### (Opcional) Paso 11: Crear un componente de enlace localizado

package/es/intlayer_with_nextjs_page_router.md

@@ -530,13 +530,7 @@ const ComponentExample = () => {
 > Al usar traducciones en atributos de tipo `string` (por ejemplo, `alt`, `title`, `href`, `aria-label`), llama al valor de la función de la siguiente manera:
 
 > ```jsx
->
-> ```
-
 > <img src={content.image.src.value} alt={content.image.value} />
-
-> ```
->
 > ```
 
 > Para aprender más sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/next-intlayer/useIntlayer.md).
@@ -866,19 +860,13 @@ const LocaleSwitcher = () => {
 > La API `useLocalePageRouter` es la misma que `useLocale`. Para aprender más sobre el hook `useLocale`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/next-intlayer/useLocale.md).
 
 > Referencias de la documentación:
-
+>
 > - [`getLocaleName` hook](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getLocaleName.md)
-
 > - [`getLocalizedUrl` hook](https://github.com/aymericzip/intlayer/blob/main/docs/es/packages/intlayer/getLocalizedUrl.md)
-
 > - [`getHTMLTextDir` hook](https://github.com/aymericzip/intlayer/blob/main/docs/es/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)
 
 ### (Opcional) Paso 10: Crear un Componente de Enlace Localizado