@intlayer/docs 9.5.6 → 9.5.8

package/docs/es/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Aprenda cómo declarar y usar contenido Markdown en su sitio web multilingüe con Intlayer. Siga los pasos de esta documentación en línea para integrar Markdown sin problemas en su proyecto.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ La renderización de Markdown admite **MDX** — use cualquier componente JSX/fr
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    En Remix 3, los nodos Markdown se renderizan en el servidor en una cadena HTML. Inyéctala con la prop `innerHTML` de Remix JSX, o con `html.raw` en una vista `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix escapa los valores interpolados por defecto. `innerHTML` y `html.raw` son las dos opciones de exclusión, que es lo que necesita una cadena Markdown renderizada.
+
+    También puedes proporcionar anulaciones locales para etiquetas específicas utilizando el método `.use()`. Las anulaciones son funciones que devuelven una cadena HTML:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` es la cadena HTML renderizada, mientras que `String()` / `.toString()` devuelven la fuente Markdown sin procesar:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Y puedes acceder a los metadatos de tu markdown así:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    En Astro, los nodos Markdown se renderizan en una cadena HTML. Inyéctala con la directiva `set:html` en la plantilla, o con `innerHTML` en un `<script>` del cliente.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro escapa las `{expresiones}` por defecto. `set:html` es la opción de exclusión, que es lo que necesita una cadena Markdown renderizada.
+
+    También puedes proporcionar anulaciones locales para etiquetas específicas utilizando el método `.use()`. Las anulaciones son funciones que devuelven una cadena HTML:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` es la cadena HTML renderizada, mientras que `String()` / `.toString()` devuelven la fuente Markdown sin procesar:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Y puedes acceder a los metadatos de tu markdown así:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Utilidades Auxiliares (Solo Cadenas Markdown)
@@ -698,6 +805,60 @@ Estas utilidades renderizan **únicamente cadenas Markdown puras** y son indepen
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### Hook `useMarkdownRenderer()`
+
+    Obtén una función de renderizado preconfigurada por `installIntlayerMarkdown()`. Devuelve una cadena HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Utilidad `renderMarkdown()`
+
+    Utilidad independiente que ignora la configuración global.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### Hook `useMarkdownRenderer()`
+
+    Obtén una función de renderizado preconfigurada por `installIntlayerMarkdown()`. Devuelve una cadena HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Utilidad `renderMarkdown()`
+
+    Utilidad independiente que ignora la configuración global.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Configuración Global con `MarkdownProvider`
@@ -998,6 +1159,73 @@ También puedes usar tu propio renderizador de markdown:
     > Importar su renderizador de Markdown dinámicamente es una buena manera de reducir el tamaño del bundle de su aplicación.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix no tiene un árbol de componentes para contener un proveedor, por lo que la configuración se instala una vez, como un singleton, al inicio del servidor. Configura el renderizador devuelto por `useMarkdownRenderer()`. Los nodos `md` devueltos por `useIntlayer` se renderizan con el compilador predeterminado; anula sus etiquetas por nodo con `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    También puedes usar tu propio renderizador de markdown:
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Usa `installIntlayerMarkdownDynamic(async () => …)` para cargar el renderizador de forma perezosa; el cargador solo se ejecuta en la primera llamada.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro no tiene un árbol de componentes para contener un proveedor, por lo que la configuración se instala una vez, como un singleton, en el middleware (servidor) y en un `<script>` del cliente (navegador). Configura el renderizador devuelto por `useMarkdownRenderer()`. Los nodos `md` devueltos por `useIntlayer` se renderizan con el compilador predeterminado; anula sus etiquetas por nodo con `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Se ejecuta una vez cuando el servidor se inicia; el middleware de Intlayer es
+    // registrado por la integración, antes de este archivo.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    También puedes usar tu propio renderizador de markdown:
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Usa `installIntlayerMarkdownDynamic(async () => …)` para cargar el renderizador de forma perezosa; el cargador solo se ejecuta en la primera llamada.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1326,6 +1554,40 @@ Puede usar la función `parseMarkdown` del paquete Intlayer de su framework en e
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 renderiza en el servidor y transmite HTML, por lo que ningún AST necesita pasar al cliente. Analiza una vez y renderiza el AST donde se construya la página:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Analizar el markdown en un AST serializable (por ejemplo, una vez, al cargar el módulo)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Renderizar el AST: el renderizador acepta una cadena cruda o el AST analizado
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Las páginas de Astro se renderizan en el servidor, por lo que ningún AST necesita pasar al cliente. Analiza el Markdown en el frontmatter y renderízalo con `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Analizar el markdown en un AST serializable
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Renderizar el AST: el renderizador acepta una cadena cruda o el AST analizado -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Este patrón garantiza que la lógica de análisis de Markdown se ejecute completamente en el servidor, lo que reduce significativamente el tiempo de ejecución en el cliente y mejora la velocidad de hidratación inicial.

package/docs/es/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Analog multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Configuración de tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, `angular-intlayer` proporciona `provideIntlayer()`, registrado en `src/app/app.config.ts` para que cada componente y página basada en archivos pueda leer su contenido a través de la señal `useIntlayer`. Analog se basa en Vite, por lo que el plugin `intlayer()` de `vite-intlayer` se agrega junto a `analog()` en `vite.config.ts` para observar y reconstruir tus declaraciones de contenido y ejecutar el proxy de locale. Las declaraciones de contenido se ubican junto a los componentes y páginas en `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### Configuración
+
 Crea un archivo de configuración para configurar los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/es/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Angular 19 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Configuración de tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, `angular-intlayer` proporciona `provideIntlayer()`, registrado en `src/app/app.config.ts` para que cada componente pueda leer su contenido a través de la señal `useIntlayer`. La CLI de Angular se cambia al builder personalizado de Webpack, y `webpack.config.ts` combina el plugin de Intlayer en la compilación para observar y reconstruir tus declaraciones de contenido. Las declaraciones de contenido se ubican junto a los componentes en `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### Configuración
+
 Crea un archivo de configuración para configurar los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/es/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Angular 22 multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Configuración de tu proyecto">
 
+### Arquitectura
+
+En esta arquitectura, `angular-intlayer` proporciona `provideIntlayer()`, registrado en `src/app/app.config.ts` para que cada componente pueda leer su contenido a través de la señal `useIntlayer`. La CLI de Angular se cambia al builder personalizado de esbuild, y `esbuild.plugins.ts` registra el plugin de Intlayer en la compilación para observar y reconstruir tus declaraciones de contenido. Las declaraciones de contenido se ubican junto a los componentes en `src/app/`.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Configuración
+
 Crea un archivo de configuración para establecer los idiomas de tu aplicación:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/es/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+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"

package/docs/es/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+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:
@@ -168,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"

package/docs/es/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+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:
@@ -167,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"

package/docs/es/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-20
+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:
@@ -170,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"

package/docs/es/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Solid i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Solid multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -167,6 +167,31 @@ bun add intlayer astro-intlayer solid-js solid-intlayer @astrojs/solid-js
 </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 Solid (`src/components/solid/SolidIsland.tsx`) recibe la locale detectada por el servidor como prop y la pasa a `solid-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
+│   │   └── solid
+│   │       ├── LocaleSwitcher.tsx    # Locale switcher rendered inside the island
+│   │       └── SolidIsland.tsx       # Solid 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 solid() 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"

package/docs/es/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-09-20
+updatedAt: 2026-09-21
 title: "Astro + Svelte i18n - Guía completa para traducir tu aplicación"
 description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Svelte multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
 keywords:
@@ -167,6 +167,30 @@ bun add intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
 </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 Svelte (`src/components/svelte/SvelteIsland.svelte`) recibe la locale detectada por el servidor como prop y la pasa a `svelte-intlayer` para la parte interactiva. Las declaraciones de contenido se ubican junto a tus componentes en `src/`.
+
+```bash
+.
+├── src
+│   ├── app.content.ts                # App content declaration
+│   ├── components
+│   │   └── svelte
+│   │       └── SvelteIsland.svelte   # Svelte island (content + locale switcher)
+│   └── 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 svelte() 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"