@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/es/formatters.md

@@ -54,46 +54,16 @@ Intlayer proporciona un conjunto de helpers ligeros construidos sobre las APIs n
 
 ## Intl en caché
 
-El `Intl` exportado es un wrapper ligero y en caché alrededor del `Intl` global. Memoiza instancias de `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator` y `PluralRules`, lo que evita reconstruir repetidamente el mismo formateador.
-
 Debido a que la construcción de formateadores es relativamente costosa, esta caché mejora el rendimiento sin cambiar el comportamiento. El wrapper expone la misma API que el `Intl` nativo, por lo que el uso es idéntico.
 
-- La caché es por proceso y transparente para los llamadores.
-
 > Si `Intl.DisplayNames` no está disponible en el entorno, se imprime una única advertencia solo para desarrolladores (considera usar un polyfill).
 
 Ejemplos:
 
-```ts
-import { Intl } from "intlayer";
-
-// Formateo de números
-const numberFormat = new Intl.NumberFormat("en-GB", {
-  style: "currency",
-  currency: "GBP",
-});
-numberFormat.format(1234.5); // "£1,234.50"
-
-// Nombres para idiomas, regiones, etc.
-const displayNames = new Intl.DisplayNames("fr", { type: "language" });
-displayNames.of("en"); // "anglais"
-
-// Ordenación para clasificación
-const collator = new Intl.Collator("fr", { sensitivity: "base" });
-collator.compare("é", "e"); // 0 (igual)
-
-// Reglas de pluralización
-const pluralRules = new Intl.PluralRules("fr");
-pluralRules.select(1); // "one"
-pluralRules.select(2); // "other"
-```
-
 ## Formateadores de React
 
 ### `Intl.DisplayNames`
 
-Para nombres localizados de idiomas, regiones, monedas y escrituras:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -122,8 +92,6 @@ Todos los hooks utilizan automáticamente la configuración regional de `Intlaye
 
 ### `Intl.Collator`
 
-Para la comparación y ordenación de cadenas conscientes del locale:
-
 ```ts
 import { Intl } from "intlayer";
 
@@ -155,8 +123,6 @@ pluralRules.select(11); // "many"
 
 ### `getLocaleName(displayLocale, targetLocale?)`
 
-Obtiene el nombre localizado de un locale en otro locale:
-
 ```ts
 import { getLocaleName } from "intlayer";
 
@@ -165,9 +131,6 @@ getLocaleName("en", "fr"); // "anglais"
 getLocaleName("de", "es"); // "alemán"
 ```
 
-- **displayLocale**: El locale para el cual obtener el nombre
-- **targetLocale**: El locale en el que se mostrará el nombre (por defecto es displayLocale)
-
 ### Composables Disponibles
 
 Todos los composables devuelven refs computadas que utilizan automáticamente la locale del `IntlayerProvider` inyectado.
@@ -235,16 +198,12 @@ getLocaleLang("fr-CA"); // "fr"
 getLocaleLang("de"); // "de"
 ```
 
-- **locale**: El locale del cual extraer el idioma (por defecto es el locale actual)
-
 ## Formateadores Vanilla JS / Node.js
 
 Para contextos sin framework, importa formateadores directamente desde `intlayer`. Ten en cuenta que debes pasar la locale manualmente.
 
 ### `getLocaleFromPath(inputUrl)`
 
-Extrae el segmento de locale de una URL o ruta:
-
 ```ts
 import { getLocaleFromPath } from "intlayer";
 
@@ -254,9 +213,6 @@ getLocaleFromPath("/dashboard"); // "en" (locale predeterminado)
 getLocaleFromPath("https://example.com/es/about"); // "es"
 ```
 
-- **inputUrl**: La cadena completa de URL o ruta a procesar
-- **returns**: El locale detectado o el locale predeterminado si no se encuentra ningún locale
-
 ### Funciones de Formato
 
 #### `number(value, options?)`
@@ -369,6 +325,30 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 
 Todos los helpers a continuación son exportados desde `intlayer`.
 
+```ts
+import { Intl } from "intlayer";
+
+// Formato de números
+const numberFormat = new Intl.NumberFormat("en-GB", {
+  style: "currency",
+  currency: "GBP",
+});
+numberFormat.format(1234.5); // "£1,234.50"
+
+// Nombres para mostrar de idiomas, regiones, etc.
+const displayNames = new Intl.DisplayNames("fr", { type: "language" });
+displayNames.of("en"); // "anglais"
+
+// Intercalación para ordenar
+const collator = new Intl.Collator("fr", { sensitivity: "base" });
+collator.compare("é", "e"); // 0 (equal)
+
+// Reglas de plural
+const pluralRules = new Intl.PluralRules("fr");
+pluralRules.select(1); // "one"
+pluralRules.select(2); // "other"
+```
+
 ### Características Intl Adicionales
 
 #### `Intl.DisplayNames`
@@ -420,12 +400,6 @@ pluralRules.select(11); // "many"
 
 ### `currency(value, options?)`
 
-Formatea un valor como moneda localizada. Por defecto es `USD` con dos dígitos decimales.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Campos comunes: `currency` (por ejemplo, `"EUR"`), `currencyDisplay` (`"symbol" | "code" | "name"`)
-
 Ejemplos:
 
 ```ts
@@ -437,12 +411,6 @@ currency("5000", { locale: "fr", currency: "CAD", currencyDisplay: "code" }); //
 
 ### `date(date, optionsOrPreset?)`
 
-Formatea un valor de fecha/hora con `Intl.DateTimeFormat`.
-
-- **date**: `Date | string | number`
-- **optionsOrPreset**: `Intl.DateTimeFormatOptions & { locale?: LocalesValues }` o uno de los preajustes:
-  - Preajustes: `"short" | "long" | "dateOnly" | "timeOnly" | "full"`
-
 Ejemplos:
 
 ```ts
@@ -454,14 +422,6 @@ date("2025-08-02T14:30:00Z", { locale: "fr", month: "long", day: "numeric" }); /
 
 ### `relativeTime(from, to = new Date(), options?)`
 
-Formatea el tiempo relativo entre dos instantes con `Intl.RelativeTimeFormat`.
-
-- Pasa "now" como primer argumento y el objetivo como segundo para obtener una frase natural.
-- **from**: `Date | string | number`
-- **to**: `Date | string | number` (por defecto `new Date()`)
-- **options**: `{ locale?: LocalesValues; unit?: Intl.RelativeTimeFormatUnit; numeric?: Intl.RelativeTimeFormatNumeric; style?: Intl.RelativeTimeFormatStyle }`
-  - El valor predeterminado de `unit` es `"second"`.
-
 Ejemplos:
 
 ```ts
@@ -477,13 +437,6 @@ relativeTime(now, twoHoursAgo, { unit: "hour", numeric: "auto" }); // "hace 2 ho
 
 ### `units(value, options?)`
 
-Formatea un valor numérico como una cadena de unidad localizada usando `Intl.NumberFormat` con `style: 'unit'`.
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }`
-  - Campos comunes: `unit` (por ejemplo, `"kilometer"`, `"byte"`), `unitDisplay` (`"short" | "narrow" | "long"`)
-  - Valores predeterminados: `unit: 'day'`, `unitDisplay: 'short'`, `useGrouping: false`
-
 Ejemplos:
 
 ```ts
@@ -495,11 +448,6 @@ units(1024, { unit: "byte", unitDisplay: "narrow" }); // "1,024B" (dependiente d
 
 ### `compact(value, options?)`
 
-Formatea un número usando notación compacta (por ejemplo, `1.2K`, `1M`).
-
-- **value**: `number | string`
-- **options**: `Intl.NumberFormatOptions & { locale?: LocalesValues }` (usa internamente `notation: 'compact'`)
-
 Ejemplos:
 
 ```ts
@@ -511,13 +459,6 @@ compact("1000000", { locale: "fr", compactDisplay: "long" }); // "1 million"
 
 ### `list(values, options?)`
 
-Formatea un arreglo de valores en una cadena de lista localizada usando `Intl.ListFormat`.
-
-- **values**: `(string | number)[]`
-- **options**: `Intl.ListFormatOptions & { locale?: LocalesValues }`
-  - Campos comunes: `type` (`"conjunction" | "disjunction" | "unit"`), `style` (`"long" | "short" | "narrow"`)
-  - Valores por defecto: `type: 'conjunction'`, `style: 'long'`
-
 Ejemplos:
 
 ```ts
@@ -582,34 +523,6 @@ const MyComponent = () => {
 };
 ```
 
-Componentes del servidor (o tiempo de ejecución del servidor React):
-
-```ts
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "react-intlayer/server/format";
-// o en aplicaciones Next.js
-import {
-  useNumber,
-  useCurrency,
-  useDate,
-  usePercentage,
-  useCompact,
-  useList,
-  useRelativeTime,
-  useUnit,
-} from "next-intlayer/server/format";
-```
-
-> Estos hooks considerarán la configuración regional desde el `IntlayerProvider` o `IntlayerServerProvider`
-
 ### Vue
 
 Componentes cliente:
@@ -627,8 +540,6 @@ import {
 } from "vue-intlayer/format";
 ```
 
-> Esos composables considerarán la configuración regional del `IntlayerProvider` inyectado.
-
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
 Recupera y transforma contenido de un diccionario:

package/docs/es/how_works_intlayer.md

@@ -99,6 +99,9 @@ Intlayer también proporciona un editor visual para permitirte editar tu conteni
 
 ![editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.gif?raw=true)
 
+- El servidor es una aplicación Express simple que escucha las solicitudes del cliente y recupera el contenido de tu aplicación, como los `dictionaries` y la configuración para hacerlo accesible en el lado del cliente.
+- Por otro lado, el cliente es una aplicación React que se utiliza para interactuar con tu contenido usando una interfaz visual.
+
 - El servidor es una aplicación simple de Express que escucha las solicitudes del cliente y recupera el contenido de tu aplicación, como los `dictionaries` y la configuración para hacerlo accesible en el lado del cliente.
 - Por otro lado, el cliente es una aplicación React que se usa para interactuar con tu contenido mediante una interfaz visual.
   Cuando llamas a tu contenido usando `useIntlayer` y el editor está habilitado, automáticamente envuelve tus cadenas con un objeto Proxy llamado `IntlayerNode`. Este nodo utiliza `window.postMessage` para comunicarse con un iframe envuelto que contiene la interfaz del editor visual.  
@@ -109,6 +112,8 @@ Intlayer también proporciona un editor visual para permitirte editar tu conteni
 Para optimizar el tamaño del bundle de tu aplicación, Intlayer proporciona dos plugins para optimizar la construcción de tu aplicación: los plugins `@intlayer/babel` y `@intlayer/swc`.
 Los plugins de Babel y SWC funcionan analizando el Árbol de Sintaxis Abstracta (AST) de tu aplicación para reemplazar las llamadas a las funciones de Intlayer con código optimizado. Este proceso hace que tu paquete final sea más ligero en producción al asegurar que solo se importen los diccionarios que realmente se usan, optimizando la división en fragmentos y reduciendo el tamaño del bundle.
 
+Los plugins de Babel y SWC funcionan analizando el Árbol de Sintaxis Abstracta (AST) de tu aplicación para reemplazar las llamadas a funciones de Intlayer con código optimizado. Este proceso hace que tu bundle final sea más ligero en producción al garantizar que solo se importen los diccionarios que se utilizan realmente, optimizando el chunking y reduciendo el tamaño del bundle.
+
 En modo de desarrollo, Intlayer utiliza una importación estática centralizada para los diccionarios para simplificar la experiencia de desarrollo.
 
 Al activar la opción `importMode = "dynamic"` en la configuración `dictionary` de la [configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md), Intlayer usará la importación dinámica para cargar los diccionarios. Esta opción está desactivada por defecto para evitar el procesamiento asíncrono al renderizar la aplicación.

package/docs/es/intlayer_CMS.md

@@ -255,6 +255,14 @@ Para la guía de configuración completa (activación, inicio del servidor Live
 
 ### Servicios iniciados
 
+```bash packageManager="npm"
+npm install @intlayer/api
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/api
+```
+
 | Servicio                   | Puerto(s)                            | Propósito                                             |
 | -------------------------- | ------------------------------------ | ----------------------------------------------------- |
 | **app** (panel de control) | `3000`                               | Interfaz CMS TanStack Start                           |
@@ -270,6 +278,11 @@ Chromium (para la generación de capturas de pantalla con Puppeteer) está inclu
 
 Apunta tu configuración de Intlayer a tu propio backend y panel de control en lugar de `intlayer.org`:
 
+1. `createIntlayerCMS` — crea un **autenticador** ligero. Solo lleva las credenciales y el token de acceso gestionado; no sabe nada sobre ningún dominio específico.
+2. `dictionaryEndpoint`, `projectEndpoint`, … — **vinculadores de endpoint** por dominio, cada uno importado desde su propia ruta (`@intlayer/api/dictionary`, `@intlayer/api/project`, …). Pasas el autenticador al endpoint que necesitas.
+
+Debido a que cada endpoint se importa por separado, tu bundle incluye solo los dominios que realmente usas — importar `dictionaryEndpoint` nunca incluye el proyecto, AI, u ningún otro cliente de dominio.
+
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
@@ -295,6 +308,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
+> [!WARNING]
+> Las credenciales del CMS (`clientId` / `clientSecret`) otorgan **acceso de escritura** a tu contenido. Solo crea el autenticador en el **lado del servidor** (server actions, route handlers, scripts, CI). Nunca las importes en código del lado del cliente ni expongas tus credenciales al navegador.
+
 Establece las variables de entorno correspondientes en tu proyecto:
 
 ```sh
@@ -308,8 +324,6 @@ Crea credenciales de acceso en tu panel de control auto-alojado en `http://local
 
 ### SDK `@intlayer/api`: apuntar a un backend auto-alojado
 
-Al usar el SDK de forma programática, pasa `backendURL` explícitamente a `createIntlayerCMS`:
-
 ```typescript fileName="cms.ts" codeFormat="typescript"
 import { createIntlayerCMS } from "@intlayer/api";
 import { dictionaryEndpoint } from "@intlayer/api/dictionary";
@@ -327,8 +341,6 @@ const { data: dictionaries } = await dictionaryEndpoint(cms).getDictionaries();
 
 ### Características opcionales
 
-Estas características requieren cuentas externas y funcionan correctamente cuando sus claves no están presentes en el `.env` auto-alojado:
-
 | Característica                         | Variable(s) de entorno                          |
 | -------------------------------------- | ----------------------------------------------- |
 | Traducción / auditoría con IA          | `OPENAI_API_KEY`                                |
@@ -340,8 +352,6 @@ Estas características requieren cuentas externas y funcionan correctamente cuan
 
 ### Persistencia de datos y actualizaciones
 
-Tres volúmenes de Docker contienen todo el estado persistente: `mongo-data`, `redis-data` y `minio-data`. Sobreviven a los reinicios y actualizaciones de contenedores. Volver a ejecutar el instalador descarga las últimas imágenes y realiza un `docker compose up -d` progresivo.
-
 Puertos expuestos en el host:
 
 | Puerto | Servicio                                                            |
@@ -354,8 +364,6 @@ Puertos expuestos en el host:
 
 Para una referencia completa de todas las variables de entorno disponibles y opciones avanzadas (proxy inverso, dominios personalizados, respaldo/restauración), consulta la [Guía de Auto-alojamiento](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md).
 
----
-
 ### Extrayendo un método único
 
 Cada método de endpoint ya está autenticado y es independiente (maneja su propio token), por lo que puedes extraer uno y pasarlo — por ejemplo para inyectarlo como una dependencia:

package/docs/es/intlayer_visual_editor.md

@@ -85,6 +85,16 @@ pnpm add intlayer-editor --save-dev
 bun add intlayer-editor --dev
 ```
 
+Con el flag `--with`, puedes iniciar el editor en paralelo con otro comando:
+
+```json5 fileName="package.json"
+{
+  "scripts": {
+    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
+  },
+}
+```
+
 ## Configuración
 
 En tu archivo de configuración de Intlayer, puedes personalizar los ajustes del editor:
@@ -146,6 +156,8 @@ export default config;
 
    > **Nota: debes ejecutar tu aplicación en paralelo.** La URL de la aplicación debe coincidir con la que configuraste en la configuración del editor (`applicationURL`).
 
+   > **Nota que el comando se reexporta mediante el paquete `intlayer`. Puedes usar `npx intlayer editor start` en su lugar.**
+
 2. Luego, abre la URL proporcionada. Por defecto `http://localhost:8000`.
 
    Puedes ver cada campo indexado por Intlayer pasando el cursor sobre tu contenido.

package/docs/es/intlayer_with_adonisjs.md

@@ -254,9 +254,11 @@ import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
   // ... Otras opciones de configuración
-  middleware: {
-    headerName: "my-locale-header",
-    cookieName: "my-locale-cookie",
+  routing: {
+    storage: [
+      { type: "header", name: "my-locale-header" },
+      { type: "cookie", name: "my-locale-cookie" },
+    ],
   },
 };
 

package/docs/es/intlayer_with_astro.md

@@ -122,6 +122,30 @@ Consulta la [plantilla de aplicación](https://github.com/aymericzip/intlayer-as
 
 Instala los paquetes necesarios utilizando tu gestor de paquetes preferido:
 
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer@canary init --interactive
+```
+
+```bash packageManager="bun"
+bunx intlayer@canary init --interactive
+```
+
+> la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
+
+> Este comando detectará tu entorno e instalará los paquetes requeridos. Por ejemplo:
+
+```bash packageManager="npm"
+npm install intlayer astro-intlayer
+```
+
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
 # Opcional: si añades soporte para islas de React

package/docs/es/intlayer_with_astro_preact.md

@@ -600,6 +600,12 @@ bun run build # Or bun run dev
 
 ### Configuración de TypeScript
 
+Intlayer utiliza module augmentation para aprovechar los beneficios de TypeScript y fortalecer tu codebase.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+
+![Error de traducción](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+
 Intlayer utiliza el aumento de módulos (module augmentation) para aprovechar TypeScript, haciendo que tu código sea más robusto. Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados y esté configurada para Preact:
 
 ```json5 fileName="tsconfig.json"

package/docs/es/intlayer_with_create_react_app.md

@@ -31,12 +31,58 @@ author: aymericzip
 
 # Traduce tu Create React App con Intlayer | Internacionalización (i18n)
 
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-react-cra-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Cómo internacionalizar tu aplicación usando Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 Consulta [Application Template](https://github.com/aymericzip/intlayer-react-cra-template) en GitHub.
 
 ## ¿Qué es Intlayer?
 
+En comparación con soluciones principales como `react-i18next` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas tales como:
+
+<AccordionGroup>
+
+<Accordion header="Cobertura completa de React">
+
 **Intlayer** es una biblioteca innovadora y de código abierto para la internacionalización (i18n) diseñada para simplificar el soporte multilingüe en aplicaciones web modernas.
 
+</Accordion>
+
+<Accordion header="Tamaño del bundle">
+
+En lugar de cargar archivos JSON masivos en tus páginas, carga solo el contenido necesario. Intlayer te ayuda a **reducir el tamaño de tu bundle y páginas hasta un 50%**.
+
+</Accordion>
+
+<Accordion header="Mantenibilidad">
+
+Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
+
+</Accordion>
+
+<Accordion header="Agente de IA">
+
+Co-localizar contenido **reduce el contexto necesario** para los Modelos de Lenguaje Grande (LLMs). Intlayer también viene con un conjunto de herramientas, como un **CLI** para probar traducciones faltantes, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md)**, y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/agent_skills.md)**, para hacer la experiencia del desarrollador (DX) aún más fluida para agentes de IA.
+
+</Accordion>
+
+<Accordion header="Automatización">
+
+Utiliza automatización para traducir en tu pipeline de CI/CD usando el LLM de tu elección al costo de tu proveedor de IA. Intlayer también ofrece un **compilador** para automatizar la extracción de contenido, así como una [plataforma web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) para ayudarte a **traducir en segundo plano**.
+
+</Accordion>
+
+<Accordion header="Rendimiento">
+
+Conectar archivos JSON masivos a componentes puede causar problemas de rendimiento y reactividad. Intlayer optimiza la carga de contenido en tiempo de compilación.
+
+</Accordion>
+
 Con Intlayer, puedes:
 
 - **Gestionar fácilmente las traducciones** utilizando diccionarios declarativos a nivel de componente.
@@ -44,6 +90,11 @@ Con Intlayer, puedes:
 - **Garantizar soporte para TypeScript** con tipos autogenerados, mejorando la autocompletación y la detección de errores.
 - **Aprovechar características avanzadas**, como la detección dinámica de locales y el cambio entre ellos.
 
+</Accordion>
+</AccordionGroup>
+
+---
+
 ## Guía paso a paso para configurar Intlayer en una aplicación React
 
 <Steps>
@@ -186,32 +237,6 @@ const appContent = {
 export default appContent;
 ```
 
-```jsx fileName="src/app.content.csx" codeFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const appContent = {
-  key: "app",
-  content: {
-    getStarted: t({
-      en: "Get started by editing",
-      fr: "Commencez par éditer",
-      es: "Comience por editar",
-    }),
-    reactLink: {
-      href: "https://reactjs.org",
-      content: t({
-        en: "Learn React",
-        fr: "Apprendre React",
-        es: "Aprender React",
-      }),
-    },
-  },
-};
-
-module.exports = appContent;
-```
-
 > Tus declaraciones de contenido pueden definirse en cualquier lugar de tu aplicación siempre que estén incluidas en el directorio `contentDir` (por defecto, `./src`). Y coincidan con la extensión del archivo de declaración de contenido (por defecto, `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
 
 > Para más detalles, consulta la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
@@ -269,6 +294,8 @@ export default App;
 >
 > Para aprender más sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useIntlayer.md).
 
+> Para obtener más información sobre el hook `useIntlayer`, consulta la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/react-intlayer/useIntlayer.md).
+
 </Step>
 
 <Step number={6} title="Cambiar el idioma de tu contenido" isOptional={true}>
@@ -630,6 +657,8 @@ Para ello, puedes agregar las siguientes instrucciones a tu archivo `.gitignore`
 
 ### Extensión para VS Code
 
+Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la extensión oficial **Intlayer VS Code Extension**.
+
 Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la extensión oficial **Intlayer VS Code Extension**.
 [Instalar desde el Marketplace de VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)