@intlayer/docs 9.5.5 → 9.5.7

package/docs/es/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-19
+updatedAt: 2026-09-21
 title: "Astro i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="Configurar tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, la integración `intlayer()` registrada en `astro.config.ts` compila tus diccionarios y agrega un middleware que resuelve la locale de cada solicitud y la expone en `Astro.locals.intlayer`. Las páginas residen bajo un segmento rest `src/pages/[...locale]/`, de modo que la locale predeterminada se sirve sin prefijo y cada otra locale obtiene su propia URL dedicada. Los archivos `.astro` leen el contenido con los hooks `useIntlayer` / `useLocale` de `astro-intlayer`, y las declaraciones de contenido se ubican junto a tus componentes en `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuración
+
 Crea un archivo de configuración para definir los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts"
@@ -400,7 +423,7 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Nota sobre la persistencia:**
-> `setLocale` del `useLocale` del lado del cliente guarda la preferencia de idioma del usuario en una cookie. Esto permite que el middleware de Intlayer recuerde la elección y redirija automáticamente al usuario a su idioma preferido en futuras visitas.
+> `setLocale` desde el `useLocale` del lado del cliente guarda la preferencia de idioma del usuario en una cookie. Esto permite que Intlayer recuerde la elección y redirija automáticamente al usuario a su idioma preferido en futuras visitas: las páginas renderizadas bajo demanda (un adaptador con `output: 'server'` o `prerender = false`) son redirigidas por el middleware de Intlayer antes de que se envíe cualquier HTML, mientras que las páginas prerenderizadas, servidas como archivos estáticos, son redirigidas por un pequeño script que la integración inyecta en cada página. Establece `routing.enableProxy` en `false` para desactivar ambos. En `astro dev`, la cookie se ignora como fuente de redirección a menos que `routing.enableProxy` esté establecido en `true`, por lo que una cookie obsoleta no puede secuestrar las páginas en las que estás trabajando.
 >
 > **Intercompatibilidad servidor / cliente:**
 > `astro-intlayer` resuelve a sus hooks de servidor en el frontmatter (leyendo `Astro.locals`) y a los hooks de cliente de `vanilla-intlayer` en bloques `<script>` e islas, con los mismos nombres y formato de contenido. `setLocale` y `onChange` solo actúan en el cliente, llama a `installIntlayer()` allí una vez para inicializar el almacén del cliente. `astro-intlayer/client` expone la entrada del cliente explícitamente.
@@ -427,10 +450,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -471,11 +494,12 @@ export const GET: APIRoute = ({ site }) => {
 
 Sigue construyendo tu aplicación con el framework que prefieras.
 
-- Intlayer + React: [Intlayer con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer con Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer con Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer con Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer con Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer con React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer con Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer con Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer con Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer con Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer con Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Extraer el contenido de tus componentes" isOptional={true}>
@@ -541,21 +565,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilador Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila tu aplicación para transformar tus componentes y extraer el contenido
 
 ```bash packageManager="npm"
 npm run build # O npm run dev

package/docs/es/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Lit multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Uso de los hooks useIntlayer / useLocale de astro-intlayer en la página de Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   El paquete core que proporciona herramientas de i18n para la gestión de la configuración, traducciones, [declaración de contenidos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpilación y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
 
 - **astro-intlayer**
-  Incluye el plugin de integración de Astro para conectar Intlayer con el [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como el middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar redirecciones de URL.
+  Incluye el plugin de integración de Astro para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware que resuelve el idioma de cada solicitud en `Astro.locals.intlayer`, y los hooks `useIntlayer` / `useDictionary` / `useLocale`. La misma ruta de importación resuelve a la implementación de servidor en tu frontmatter `.astro` y a la de cliente (respaldada por `vanilla-intlayer`) en bloques `<script>`.
 
 - **lit**
   El paquete core de Lit para construir Web Components rápidos y ligeros.
@@ -165,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="Configurar tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, la integración `intlayer()` registrada en `astro.config.ts` compila tus diccionarios y agrega un middleware que resuelve la locale de cada solicitud y la expone en `Astro.locals.intlayer`. Las páginas residen bajo un segmento rest `src/pages/[...locale]/`, de modo que la locale predeterminada se sirve sin prefijo y cada otra locale obtiene su propia URL dedicada. Los archivos `.astro` leen el contenido con los hooks `useIntlayer` / `useLocale` de `astro-intlayer` para el renderizado en el servidor, y la isla de Lit (`src/components/lit/LitDemo.ts`) recibe la locale detectada por el servidor como prop y la pasa a `lit-intlayer` para la parte interactiva. Las declaraciones de contenido se ubican junto a tus componentes en `src/`.
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuración
+
 Crea un archivo de configuración para definir los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts"
@@ -243,19 +270,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Usar el contenido en Astro">
 
-Puedes consumir los diccionarios directamente en tus archivos `.astro` utilizando los helpers core exportados por `intlayer`. También deberías añadir metadatos SEO (como hreflang y enlaces canónicos) a cada página. Los elementos personalizados de Lit se importan mediante un `<script>` del cliente y se colocan en el body.
+Consume tus diccionarios en archivos `.astro` con los hooks exportados por `astro-intlayer`. Comparten las firmas de `react-intlayer`: `useIntlayer("key")` devuelve el contenido de un diccionario y `useLocale()` el idioma actual, sin necesidad de pasar argumentos.
+
+El idioma proviene del middleware `astro-intlayer`, que la integración registra automáticamente antes de tu propio `src/middleware.ts`. Lo resuelve para cada solicitud, a partir del prefijo de URL, luego del idioma guardado por el cliente (cookie o encabezado), luego de `Accept-Language`, y lo almacena en `Astro.locals.intlayer`. Las páginas pre-renderizadas solo usan la URL, ya que se renderizan una vez para cada visitante.
+
+Los elementos personalizados de Lit se importan mediante un `<script>` del cliente y se colocan en el body.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 
 export const getStaticPaths = () => {
@@ -264,8 +293,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Idioma resuelto por el middleware (ej. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Contenido del diccionario 'lit-demo' para ese idioma
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -324,6 +356,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` también expone `locale`, `defaultLocale` y `availableLocales` a tus propios middlewares y endpoints. Pasa un idioma o un selector como segundo argumento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) para anular el idioma de la solicitud en una llamada.
+
 > **Nota sobre la configuración de rutas:**
 > La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:
 >
@@ -480,10 +514,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -583,21 +617,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilador Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila tu aplicación para transformar tus componentes y extraer el contenido
 
 ```bash packageManager="npm"
 npm run build # O npm run dev

package/docs/es/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + Preact i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Preact multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Uso de los hooks useIntlayer / useLocale de astro-intlayer en la página de Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
@@ -150,7 +153,7 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
   El paquete core que proporciona herramientas de i18n para la gestión de la configuración, traducciones, [declaración de contenidos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpilación y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
 
 - **astro-intlayer**
-  Incluye el plugin de integración de Astro para conectar Intlayer con el [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como el middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar redirecciones de URL.
+  Incluye el plugin de integración de Astro para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware que resuelve el idioma de cada solicitud en `Astro.locals.intlayer`, y los hooks `useIntlayer` / `useDictionary` / `useLocale`. La misma ruta de importación resuelve a la implementación de servidor en tu frontmatter `.astro` y a la de cliente (respaldada por `vanilla-intlayer`) en bloques `<script>`.
 
 - **preact**
   El paquete core de Preact - una alternativa rápida y ligera a React.
@@ -164,6 +167,31 @@ bun add intlayer astro-intlayer preact preact-intlayer @astrojs/preact
 </Step>
 <Step number={2} title="Configurar tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, la integración `intlayer()` registrada en `astro.config.ts` compila tus diccionarios y agrega un middleware que resuelve la locale de cada solicitud y la expone en `Astro.locals.intlayer`. Las páginas residen bajo un segmento rest `src/pages/[...locale]/`, de modo que la locale predeterminada se sirve sin prefijo y cada otra locale obtiene su propia URL dedicada. Los archivos `.astro` leen el contenido con los hooks `useIntlayer` / `useLocale` de `astro-intlayer` para el renderizado en el servidor, y la isla de Preact (`src/components/preact/PreactIsland.tsx`) recibe la locale detectada por el servidor como prop y la pasa a `preact-intlayer` para la parte interactiva. Las declaraciones de contenido se ubican junto a tus componentes en `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── preact
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── PreactIsland.tsx      # Preact island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and preact() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuración
+
 Crea un archivo de configuración para definir los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts"
@@ -241,19 +269,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Usar el contenido en Astro">
 
-Puedes consumir los diccionarios directamente en tus archivos `.astro` utilizando los helpers core exportados por `intlayer`. También deberías añadir metadatos SEO (como hreflang y enlaces canónicos) a cada página e introducir una isla de Preact para el contenido interactivo del lado del cliente.
+Consume tus diccionarios en archivos `.astro` con los hooks exportados por `astro-intlayer`. Comparten las firmas de `react-intlayer`: `useIntlayer("key")` devuelve el contenido de un diccionario y `useLocale()` el idioma actual, sin necesidad de pasar argumentos.
+
+El idioma proviene del middleware `astro-intlayer`, que la integración registra automáticamente antes de tu propio `src/middleware.ts`. Lo resuelve para cada solicitud, a partir del prefijo de URL, luego del idioma guardado por el cliente (cookie o encabezado), luego de `Accept-Language`, y lo almacena en `Astro.locals.intlayer`. Las páginas pre-renderizadas solo usan la URL, ya que se renderizan una vez para cada visitante.
+
+También deberías añadir metadatos SEO (como hreflang y enlaces canónicos) a cada página e introducir una isla de Preact para el contenido interactivo del lado del cliente.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { PreactIsland } from "../../components/preact/PreactIsland";
 
@@ -263,8 +293,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Idioma resuelto por el middleware (ej. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Contenido del diccionario 'app' para ese idioma
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -320,6 +353,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` también expone `locale`, `defaultLocale` y `availableLocales` a tus propios middlewares y endpoints. Pasa un idioma o un selector como segundo argumento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) para anular el idioma de la solicitud en una llamada.
+
 > **Nota sobre la configuración de rutas:**
 > La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:
 >
@@ -436,10 +471,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -539,21 +574,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilador Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila tu aplicación para transformar tus componentes y extraer el contenido
 
 ```bash packageManager="npm"
 npm run build # O npm run dev

package/docs/es/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + React i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + React multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Uso de los hooks useIntlayer / useLocale de astro-intlayer en la página de Astro"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
@@ -153,7 +156,7 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
   El paquete core que proporciona herramientas de i18n para la gestión de la configuración, traducciones, [declaración de contenidos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md), transpilación y [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md).
 
 - **astro-intlayer**
-  Incluye el plugin de integración de Astro para conectar Intlayer con el [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), así como el middleware para detectar el idioma preferido del usuario, gestionar cookies y manejar redirecciones de URL.
+  Incluye el plugin de integración de Astro para integrar Intlayer con el [empaquetador Vite](https://vite.dev/guide/why.html#why-bundle-for-production), un middleware que resuelve el idioma de cada solicitud en `Astro.locals.intlayer`, y los hooks `useIntlayer` / `useDictionary` / `useLocale`. La misma ruta de importación resuelve a la implementación de servidor en tu frontmatter `.astro` y a la de cliente (respaldada por `vanilla-intlayer`) en bloques `<script>`.
 
 - **react**, **react-dom**
   Paquetes core de React necesarios para renderizar componentes de React en el navegador.
@@ -167,6 +170,31 @@ bun add intlayer astro-intlayer react react-dom react-intlayer @astrojs/react
 </Step>
 <Step number={2} title="Configurar tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, la integración `intlayer()` registrada en `astro.config.ts` compila tus diccionarios y agrega un middleware que resuelve la locale de cada solicitud y la expone en `Astro.locals.intlayer`. Las páginas residen bajo un segmento rest `src/pages/[...locale]/`, de modo que la locale predeterminada se sirve sin prefijo y cada otra locale obtiene su propia URL dedicada. Los archivos `.astro` leen el contenido con los hooks `useIntlayer` / `useLocale` de `astro-intlayer` para el renderizado en el servidor, y la isla de React (`src/components/react/ReactIsland.tsx`) recibe la locale detectada por el servidor como prop y la pasa a `react-intlayer` para la parte interactiva. Las declaraciones de contenido se ubican junto a tus componentes en `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── react
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── ReactIsland.tsx       # React island wrapping the tree in IntlayerProvider
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the island
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and react() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuración
+
 Crea un archivo de configuración para definir los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts"
@@ -241,19 +269,21 @@ export default appContent;
 </Step>
 <Step number={5} title="Usar el contenido en Astro">
 
-Puedes consumir los diccionarios directamente en tus archivos `.astro` utilizando los helpers core exportados por `intlayer`. También deberías añadir metadatos SEO (como hreflang y enlaces canónicos) a cada página e introducir una isla de React para el contenido interactivo del lado del cliente.
+Consume tus diccionarios en archivos `.astro` con los hooks exportados por `astro-intlayer`. Comparten las firmas de `react-intlayer`: `useIntlayer("key")` devuelve el contenido de un diccionario y `useLocale()` el idioma actual, sin necesidad de pasar argumentos.
+
+El idioma proviene del middleware `astro-intlayer`, que la integración registra automáticamente antes de tu propio `src/middleware.ts`. Lo resuelve para cada solicitud, a partir del prefijo de URL, luego del idioma guardado por el cliente (cookie o encabezado), luego de `Accept-Language`, y lo almacena en `Astro.locals.intlayer`. Las páginas pre-renderizadas solo usan la URL, ya que se renderizan una vez para cada visitante.
+
+También deberías añadir metadatos SEO (como hreflang y enlaces canónicos) a cada página e introducir una isla de React para el contenido interactivo del lado del cliente.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 import { ReactIsland } from "../../components/react/ReactIsland";
 
@@ -263,8 +293,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { title } = getIntlayer("app", locale);
+// Idioma resuelto por el middleware (ej. /es/about -> 'es')
+const { locale } = useLocale();
+
+// Contenido del diccionario 'app' para ese idioma
+const { title } = useIntlayer("app");
 ---
 
 <!doctype html>
@@ -320,6 +353,8 @@ const { title } = getIntlayer("app", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` también expone `locale`, `defaultLocale` y `availableLocales` a tus propios middlewares y endpoints. Pasa un idioma o un selector como segundo argumento (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`) para anular el idioma de la solicitud en una llamada.
+
 > **Nota sobre la configuración de rutas:**
 > La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:
 >
@@ -432,10 +467,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -535,21 +570,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Compilador Babel'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Actualiza tu archivo `vite.config.ts` para incluir el plugin `intlayerCompiler` :
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Compila tu aplicación para transformar tus componentes y extraer el contenido
 
 ```bash packageManager="npm"
 npm run build # O npm run dev