@intlayer/docs 9.4.4 → 9.5.0

package/docs/es/intlayer_with_svelte_kit.md

@@ -70,37 +70,31 @@ En comparación con soluciones principales como `svelte-i18n` o `i18next`, Intla
 Intlayer está optimizado para funcionar perfectamente con SvelteKit al ofrecer **enrutamiento multilingüe**, **soporte SSR** y todas las funciones necesarias para escalar la internacionalización (i18n).
 
 </Accordion>
-
 <Accordion header="Tamaño del bundle">
 
 En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
 
 </Accordion>
-
 <Accordion header="Mantenibilidad">
 
 Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
 
 </Accordion>
-
 <Accordion header="Agente de IA">
 
 La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
 
 </Accordion>
-
 <Accordion header="Automatización">
 
 Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su 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/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
 
 </Accordion>
-
 <Accordion header="Actuación">
 
 La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
 
 </Accordion>
-
 <Accordion header="Escalando sin ningún desarrollador">
 
 Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
@@ -108,8 +102,6 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Guía paso a paso para configurar Intlayer en una aplicación SvelteKit
 
 Ver [Plantilla de Aplicación](https://github.com/aymericzip/intlayer-sveltekit-template) en GitHub.
@@ -157,7 +149,6 @@ Para comenzar, crea un nuevo proyecto SvelteKit. Aquí está la estructura final
 ```
 
 <Steps>
-
 <Step number={1} title="Instalar dependencias">
 
 Instala los paquetes necesarios usando npm:
@@ -207,7 +198,6 @@ bun add vite-intlayer --save-dev
 - **vite-intlayer**: El plugin de Vite para integrar las declaraciones de contenido con el proceso de build.
 
 </Step>
-
 <Step number={2} title="Configuración de tu proyecto">
 
 Crea un archivo de configuración en la raíz de tu proyecto:
@@ -226,7 +216,6 @@ export default config;
 ```
 
 </Step>
-
 <Step number={3} title="Integra Intlayer en tu configuración de Vite">
 
 Actualiza tu `vite.config.ts` para incluir el plugin de Intlayer. Este plugin se encarga de la transpilación de tus archivos de contenido.
@@ -242,7 +231,6 @@ export default defineConfig({
 ```
 
 </Step>
-
 <Step number={4} title="Declara Tu Contenido">
 
 Crea tus archivos de declaración de contenido en cualquier lugar dentro de tu carpeta `src` (por ejemplo, `src/lib/content` o junto a tus componentes). Estos archivos definen el contenido traducible para tu aplicación usando la función `t()` para cada locale.
@@ -265,7 +253,6 @@ export default heroContent;
 ```
 
 </Step>
-
 <Step number={5} title="Utiliza Intlayer en Tus Componentes">
 
 Ahora puedes usar la función `useIntlayer` en cualquier componente de Svelte. Devuelve un store reactivo que se actualiza automáticamente cuando cambia la configuración regional. La función respetará automáticamente la configuración regional actual (tanto durante SSR como durante la navegación del lado del cliente).
@@ -291,7 +278,6 @@ para acceder a su valor reactivo (por ejemplo, `$content.title`).
 ```
 
 </Step>
-
 <Step number={6} title="Configurar el enrutamiento" isOptional={true}>
 
 Los siguientes pasos muestran cómo configurar el enrutamiento basado en el locale en SvelteKit. Esto permite que tus URLs incluyan el prefijo del locale (por ejemplo, `/en/about`, `/fr/about`) para mejorar el SEO y la experiencia del usuario.
@@ -318,7 +304,6 @@ Los siguientes pasos muestran cómo configurar el enrutamiento basado en el loca
 ```
 
 </Step>
-
 <Step number={7} title="Manejar la detección del locale en el servidor">
 
 En SvelteKit, el servidor necesita conocer el locale del usuario para renderizar el contenido correcto durante SSR. Usamos `hooks.server.ts` para detectar el locale desde la URL o las cookies.
@@ -532,7 +517,6 @@ export const prerender = true;
 ```
 
 </Step>
-
 <Step number={8} title="Enlaces internacionalizados" isOptional={true}>
 
 Para SEO, se recomienda prefijar tus rutas con la locale (por ejemplo, `/en/about`, `/fr/about`). Este componente automáticamente prefija cualquier enlace con la locale actual.
@@ -567,7 +551,6 @@ goto(localizedPath); // Navega a /en/about o /fr/about dependiendo del locale
 ```
 
 </Step>
-
 <Step number={9} title="Selector de idioma" isOptional={true}>
 
 Para permitir a los usuarios cambiar de idioma, actualiza la URL.
@@ -610,7 +593,6 @@ Para permitir a los usuarios cambiar de idioma, actualiza la URL.
 ```
 
 </Step>
-
 <Step number={10} title="Añadir proxy backend" isOptional={true}>
 
 Para añadir un proxy backend a tu aplicación SvelteKit, puedes usar la función `intlayerProxy` proporcionada por el plugin `vite-intlayer`. Este plugin detectará automáticamente la mejor locale para el usuario basándose en la URL, cookies y preferencias de idioma del navegador.
@@ -636,7 +618,6 @@ export default defineConfig({
 ```
 
 </Step>
-
 <Step number={11} title="Configurar el editor / CMS de intlayer" isOptional={true}>
 
 Para configurar el editor de intlayer, debes seguir la [documentación del editor de intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md).
@@ -663,7 +644,6 @@ Para poder visualizar el selector del editor intlayer, deberás usar la sintaxis
 ```
 
 </Step>
-
 <Step number={12} title="Extraer el contenido de tus componentes" isOptional={true}>
 
 Si tienes una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
@@ -774,8 +754,6 @@ Se recomienda ignorar los archivos generados por Intlayer.
 .intlayer
 ```
 
----
-
 ### Ir Más Allá
 
 - **Editor Visual**: Integra el [Editor Visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) para editar las traducciones directamente desde la interfaz de usuario.
@@ -794,25 +772,21 @@ Se recomienda ignorar los archivos generados por Intlayer.
 En SvelteKit la diferencia se nota en las piezas del lado del servidor: la detección del idioma en los hooks, los enlaces localizados y la integración del editor vienen con la biblioteca en lugar de montarse por proyecto. Consulta [por qué Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/interest_of_intlayer.md) y el [benchmark de i18n de Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/svelte.md).
 
 </Question>
-
 <Question title="¿Cuánto añade la i18n al tamaño del bundle de mi aplicación SvelteKit?">
 
 Mucho menos que una configuración basada en espacios de nombres, porque una página nunca descarga un catálogo que no renderiza. El marcado renderizado en el servidor resuelve su contenido en el servidor, y el compilador de tiempo de compilación reemplaza las llamadas a `useIntlayer` por las entradas de diccionario exactas que usa un componente, de modo que se descartan las claves sin usar y los idiomas sin usar, y los [diccionarios dinámicos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/index.md) reparten el resto por idioma. Frente a las alternativas habituales, Intlayer reduce el tamaño del bundle y de la página hasta en un 50%. Consulta la [optimización del bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/bundle_optimization.md) y el [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/svelte.md).
 
 </Question>
-
 <Question title="¿Puedo migrar desde `svelte-i18n` o `typesafe-i18n` sin reescribir mis componentes?">
 
 En gran medida. Sigue la [guía de migración de Svelte I18n](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compat/svelte-i18n.md) para trasladar el contenido. También puedes migrar de forma gradual: el [plugin de sincronización JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md) mantiene tus catálogos JSON existentes como fuente de verdad y genera diccionarios de Intlayer a partir de ellos, de modo que ambas capas se mantienen sincronizadas mientras trasladas los componentes uno a uno.
 
 </Question>
-
 <Question title="¿Puedo conservar mis archivos de traducción JSON existentes?">
 
 Sí. El [plugin de sincronización JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md) mantiene tus archivos `/messages/{locale}/{namespace}.json` como fuente de verdad y genera diccionarios de Intlayer a partir de ellos, en ambas direcciones. Un [plugin de sincronización PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-po.md) hace lo mismo para los catálogos gettext, y los [archivos por idioma](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/per_locale_file.md) te permiten dividir el contenido por idioma en lugar de agrupar los idiomas en un solo archivo.
 
 </Question>
-
 <Question title="¿Tengo que trasladar mi contenido clave por clave?">
 
 No. Ejecuta `npx intlayer extract` e Intlayer lee tus componentes, extrae las cadenas visibles para el usuario y escribe un archivo `.content` junto a cada uno, así que revisas un diff en lugar de copiar cadenas a un catálogo una por una. El paso 12 de esta guía lo explica paso a paso.
@@ -822,7 +796,6 @@ Para una canalización totalmente automatizada, el [compilador de Intlayer](http
 Conviene conocer dos límites antes de activar el compilador. Funciona por análisis estático, así que las cadenas que solo existen en tiempo de ejecución, como los códigos de error de la API o los campos del CMS, quedan fuera de su alcance. Y tiene que distinguir el texto visible para el usuario de la lógica de la aplicación, como `className="active"` o un código de estado, lo que requiere unas pocas anotaciones en una base de código grande. El [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md) evita ambos manteniéndote en el proceso.
 
 </Question>
-
 <Question title="¿Qué herramientas para editores y agentes de IA están disponibles?">
 
 Cinco piezas, todas opcionales:
@@ -834,43 +807,36 @@ Cinco piezas, todas opcionales:
 - **[Plugin de ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/eslint.md)**: `no-raw-text` marca las cadenas codificadas de forma fija, con reglas adicionales para claves de diccionario estáticas y contenido sin usar.
 
 </Question>
-
 <Question title="¿Intlayer funciona con el renderizado en el servidor y el prerenderizado de SvelteKit?">
 
 Sí. El paso 7 cubre la detección del idioma en el servidor en `hooks.server.ts`, así que la primera respuesta HTML ya lleva el idioma correcto, que es lo que leen los motores de búsqueda y los rastreadores sociales. Las rutas prerenderizadas resuelven su contenido en tiempo de compilación.
 
 </Question>
-
 <Question title="¿Cómo configuro rutas localizadas y enlaces internacionalizados?">
 
 Lo cubren los pasos 6 y 8. Un segmento de idioma en el árbol de rutas más `getLocalizedUrl` para los enlaces mantiene la navegación dentro del idioma activo, y `routing.mode` decide si el idioma por defecto lleva prefijo siquiera. Consulta la [referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
 </Question>
-
 <Question title="¿Cómo creo un selector de idioma en Svelte?">
 
 El paso 9 muestra el componente. `useLocale` expone el idioma activo, los idiomas declarados y un setter que conserva la elección en una cookie, mientras que `getLocalizedUrl` reescribe la ruta actual para que el lector permanezca en la misma página tras el cambio.
 
 </Question>
-
 <Question title="¿Cómo traduzco una aplicación SvelteKit automáticamente con IA?">
 
 Ejecuta `npx intlayer fill`, que rellena las traducciones que faltan con el LLM de tu elección usando tu propio proveedor y tu clave de API, y `--git-diff` limita la ejecución al contenido modificado en la rama. Consulta el [comando fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/fill.md) y la [integración de CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/CI_CD.md).
 
 </Question>
-
 <Question title="¿Intlayer admite plurales, género y texto enriquecido?">
 
 Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/plurial.md), [contenido según el género](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/gender.md), condiciones, [inserciones](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/markdown.md) y [formateadores](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/formatters.md) para números, fechas y monedas.
 
 </Question>
-
 <Question title="¿Cómo pueden los traductores editar el contenido sin tocar el código?">
 
 A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), que se ejecuta en tu propia infraestructura y permite que cualquiera edite texto en su sitio en la aplicación en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
 
 </Question>
-
 <Question title="¿Es Intlayer gratuito y de código abierto?">
 
 Sí, bajo la licencia Apache 2.0, uso comercial incluido. El CMS alojado es un servicio de pago opcional que también puede [autoalojarse](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md).

package/docs/es/intlayer_with_tanstack+solid.md

@@ -52,37 +52,31 @@ En comparación con soluciones principales como `react-i18next` o `i18next`, Int
 Intlayer está optimizado para funcionar perfectamente con TanStack Start y Solid al ofrecer **enrutamiento multilingüe**, **mapa del sitio** y todas las funciones necesarias para escalar la internacionalización (i18n).
 
 </Accordion>
-
 <Accordion header="Tamaño del bundle">
 
 En lugar de cargar archivos JSON masivos en sus páginas, cargue solo el contenido necesario. Intlayer ayuda a **reducir el tamaño de su bundle y de sus páginas hasta en un 50%**.
 
 </Accordion>
-
 <Accordion header="Mantenibilidad">
 
 Determinar el alcance del contenido de su aplicación **facilita el mantenimiento** para aplicaciones a gran escala. Puede duplicar o eliminar una sola carpeta de funciones sin la carga mental de revisar todo el código base de contenido. Además, Intlayer está **completamente escrito** para garantizar la precisión de su contenido.
 
 </Accordion>
-
 <Accordion header="Agente de IA">
 
 La ubicación conjunta de contenido **reduce el contexto necesario** para los modelos de lenguajes grandes (LLM). Intlayer también viene con un conjunto de herramientas, como una **CLI** para comprobar si faltan traducciones,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** y **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/agent_skills.md)**, para que la experiencia del desarrollador (DX) sea aún más fluida para los agentes de IA.
 
 </Accordion>
-
 <Accordion header="Automatización">
 
 Utilice la automatización para traducir su canal de CI/CD utilizando el LLM de su elección al costo de su 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/en/intlayer_CMS.md) para ayudar a **traducir en segundo plano**.
 
 </Accordion>
-
 <Accordion header="Actuación">
 
 La conexión de archivos JSON masivos a componentes puede provocar problemas de rendimiento y reactividad. Intlayer optimiza la carga de su contenido en el momento de la compilación.
 
 </Accordion>
-
 <Accordion header="Escalando sin ningún desarrollador">
 
 Más que una simple solución i18n, Intlayer proporciona un **[editor visual] autohospedado(https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** y un **[CMS completo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** para ayudarle a administrar su contenido multilingüe en **tiempo real**, lo que facilita la colaboración con traductores, redactores y otros miembros del equipo. El contenido se puede almacenar de forma local y/o remota.
@@ -90,8 +84,6 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Guía paso a paso para configurar Intlayer en una aplicación Tanstack Start
 
 <Tabs defaultTab="video">
@@ -127,13 +119,11 @@ Más que una simple solución i18n, Intlayer proporciona un **[editor visual] au
 Ver [Plantilla de aplicación](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) en GitHub.
 
 <Steps>
-
 <Step number={1} title="Crear el proyecto">
 
 Comience creando un nuevo proyecto TanStack Start siguiendo la guía [Iniciar nuevo proyecto](https://tanstack.com/start/latest/docs/framework/solid/quick-start) en el sitio web de TanStack Start.
 
 </Step>
-
 <Step number={2} title="Instalar los paquetes de Intlayer">
 
 Instale los paquetes necesarios utilizando su gestor de paquetes preferido:
@@ -189,9 +179,42 @@ bun add vite-intlayer --dev
   Incluye el plugin de Vite para integrar 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 la redirección de URL.
 
 </Step>
-
 <Step number={3} title="Configuración de su proyecto">
 
+### Arquitectura
+
+En esta arquitectura, todas las rutas localizadas están anidadas bajo el segmento de ruta `{-$locale}` en Solid. Este enfoque garantiza que cada idioma tenga una URL dedicada, al tiempo que permite el prefijo automático de locale, la validación y la optimización para SEO.
+
+```bash
+.
+├── src
+│   ├── components
+│   │   ├── Header.content.ts
+│   │   ├── Header.tsx
+│   │   ├── LocaleSwitcher.content.ts
+│   │   ├── LocaleSwitcher.tsx
+│   │   └── LocalizedLink.tsx
+│   ├── routes
+│   │   ├── {-$locale}
+│   │   │   ├── 404.content.ts
+│   │   │   ├── 404.tsx
+│   │   │   ├── about.content.ts
+│   │   │   ├── about.tsx
+│   │   │   ├── index.content.tsx
+│   │   │   ├── index.tsx
+│   │   │   └── route.tsx             # Locale layout & prefix validation
+│   │   ├── __root.tsx                # Root route with IntlayerProvider
+│   │   └── sitemap[.]xml.ts
+│   ├── router.tsx
+│   └── styles.css
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+### Configuración
+
 Cree un archivo de configuración para configurar los idiomas de su aplicación:
 
 ```typescript fileName="intlayer.config.ts"
@@ -212,7 +235,6 @@ export default config;
 > A través de este archivo de configuración, puede configurar URLs localizadas, redirección de middleware, nombres de cookies, la ubicación y extensión de sus declaraciones de contenido, desactivar los registros de Intlayer en la consola, y más. Para una lista completa de los parámetros disponibles, consulte la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
 </Step>
-
 <Step number={4} title="Integrar Intlayer en su configuración de Vite">
 
 Añada el plugin de intlayer en su configuración:
@@ -246,7 +268,6 @@ export default defineConfig({
 > El plugin de Vite `intlayer()` se utiliza para integrar Intlayer con Vite. Asegura la construcción de los archivos de declaración de contenido y los monitoriza en modo de desarrollo. Define las variables de entorno de Intlayer dentro de la aplicación Vite. Además, proporciona alias para optimizar el rendimiento.
 
 </Step>
-
 <Step number={5} title="Crear el diseño raíz">
 
 Configure su diseño raíz para soportar la internacionalización utilizando `useParams` para detectar el idioma actual y estableciendo los atributos `lang` y `dir` en la etiqueta `html`.
@@ -291,7 +312,6 @@ const RootComponent: ParentComponent = (props) => {
 ```
 
 </Step>
-
 <Step number={6} title="Crear el diseño de idioma">
 
 Cree un diseño que maneje el prefijo de idioma y realice la validación. Este diseño asegurará que solo se procesen idiomas válidos.
@@ -328,7 +348,6 @@ export const Route = createFileRoute("/{-$locale}")({
 > Para el modo `'no-prefix'` o `'search-params'`, puede eliminar el hueco por completo.
 
 </Step>
-
 <Step number={7} title="Declarar su contenido">
 
 Cree y gestione sus declaraciones de contenido para almacenar traducciones:
@@ -376,7 +395,6 @@ export default appContent;
 > Para más detalles, consulte la [documentación de declaración de contenido](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/content_file.md).
 
 </Step>
-
 <Step number={8} title="Utilizar componentes y hooks conscientes del idioma">
 
 Cree un componente `LocalizedLink` para una navegación consciente del idioma:
@@ -457,7 +475,6 @@ export const useLocalizedNavigate = () => {
 ```
 
 </Step>
-
 <Step number={9} title="Utilizar Intlayer en sus páginas">
 
 > Usa **`useIntlayer`** por defecto: es la forma recomendada de leer contenido dentro de los componentes, y el compilador lo resuelve a la locale que se está renderizando. Recurre a `getIntlayer` / `getIntlayerAsync` solo fuera del árbol de Solid: el `head` de las rutas, los loaders y las server functions.
@@ -491,10 +508,10 @@ function RouteComponent() {
 }
 ```
 
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```tsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
 > En Solid, `useIntlayer` devuelve contenido reactivo (por ejemplo, `content`). Puedes acceder a sus propiedades directamente.
@@ -502,7 +519,6 @@ function RouteComponent() {
 > Para saber más sobre el hook `useIntlayer`, consulte la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/solid-intlayer/useIntlayer.md).
 
 </Step>
-
 <Step number={10} title="Crear un componente selector de idioma">
 
 Cree un componente para permitir a los usuarios cambiar de idioma:
@@ -548,7 +564,6 @@ export default LocaleSwitcher;
 > Para saber más sobre el hook `useLocale`, consulte la [documentación](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/packages/solid-intlayer/useLocale.md).
 
 </Step>
-
 <Step number={11} title="Gestión de atributos HTML">
 
 Como vimos en el Paso 5, puede gestionar los atributos `lang` y `dir` de la etiqueta `html` utilizando `useParams` en su componente raíz. Esto asegura que se establezcan los atributos correctos tanto en el servidor como en el cliente.
@@ -567,7 +582,6 @@ const RootComponent: ParentComponent = (props) => {
 ```
 
 </Step>
-
 <Step number={12} title="Añadir middleware">
 
 También puede utilizar `intlayerProxy` para añadir enrutamiento del lado del servidor a su aplicación. Este plugin detectará automáticamente el idioma actual basándose en la URL y establecerá la cookie de idioma adecuada. Si no se especifica ningún idioma, el plugin determinará el idioma más apropiado basándose en las preferencias de idioma del navegador del usuario. Si no se detecta ningún idioma, redirigirá al idioma predeterminado.
@@ -603,7 +617,6 @@ export default defineConfig({
 ```
 
 </Step>
-
 <Step number={13} title="Internacionalizar sus metadatos">
 
 <Tabs>
@@ -796,7 +809,6 @@ Conservas el chunk por locale sin pagar su coste en la ruta crítica del `head`.
 | Experiencia de desarrollo | la más simple                | un solo `await`                           | contenido pasado por `loaderData`      |
 
 </Step>
-
 <Step number={13} title="Recuperar el idioma en sus acciones de servidor">
 
 Es posible que desee acceder al idioma actual desde sus acciones de servidor o endpoints de API.
@@ -833,7 +845,6 @@ export const getLocaleServer = createServerFn().handler(async () => {
 ```
 
 </Step>
-
 <Step number={14} title="Gestionar páginas no encontradas">
 
 Cuando un usuario visita una página inexistente, puede mostrar una página 404 personalizada y el prefijo de idioma puede afectar a la forma en que se activa la página no encontrada.
@@ -909,7 +920,6 @@ export const Route = createFileRoute("/{-$locale}/$")({
 ```
 
 </Step>
-
 <Step number={15} title="Extraer el contenido de sus componentes" isOptional={true}>
 
 Si tiene una base de código existente, transformar miles de archivos puede llevar mucho tiempo.
@@ -1024,7 +1034,6 @@ bun run build # O bun run dev
 </Tabs>
 
 </Step>
-
 <Step number={16} title="Generar un Sitemap">
 
 Intlayer viene con un generador de sitemap integrado para ayudarte a crear fácilmente un sitemap para tu aplicación. Maneja las rutas localizadas y agrega los metadatos necesarios para los motores de búsqueda.
@@ -1097,7 +1106,6 @@ export const Route = createFileRoute("/sitemap.xml")({
 ```
 
 </Step>
-
 <Step number={17} title="Configurar TypeScript">
 
 Intlayer utiliza el aumento de módulos para aprovechar las ventajas de TypeScript y hacer que su base de código sea más robusta.
@@ -1129,8 +1137,6 @@ Para hacerlo, puede añadir las siguientes instrucciones a su archivo `.gitignor
 .intlayer
 ```
 
----
-
 ## Extensión de VS Code
 
 Para mejorar su experiencia de desarrollo con Intlayer, puede instalar la **Extensión oficial de Intlayer VS Code**.
@@ -1146,14 +1152,10 @@ Esta extensión proporciona:
 
 Para más detalles sobre cómo utilizar la extensión, consulte la [documentación de la extensión Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
 
----
-
 ## Ir más allá
 
 Para ir más allá, puede implementar el [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o externalizar su contenido utilizando el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md).
 
----
-
 ## Referencias de documentación
 
 - [Documentación de Intlayer](https://intlayer.org)
@@ -1178,25 +1180,21 @@ TanStack Start no incluye ninguna capa de i18n, y las opciones del ecosistema de
 Consulta [por qué Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/interest_of_intlayer.md) y el [benchmark de i18n de TanStack Start](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/tanstack.md).
 
 </Question>
-
 <Question title="¿Cuánto añade la i18n al tamaño del bundle de mi aplicación TanStack Start?">
 
 Mucho menos que una configuración basada en espacios de nombres, porque una página nunca descarga un catálogo que no renderiza. El marcado renderizado en el servidor resuelve su contenido en el servidor, y el compilador de tiempo de compilación reemplaza las llamadas a `useIntlayer` por las entradas de diccionario exactas que usa un componente, de modo que se descartan las claves sin usar y los idiomas sin usar, y los [diccionarios dinámicos](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dynamic_dictionaries/index.md) reparten el resto por idioma. Frente a las alternativas habituales, Intlayer reduce el tamaño del bundle y de la página hasta en un 50%. Consulta la [optimización del bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/bundle_optimization.md) y el [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/benchmark/tanstack.md).
 
 </Question>
-
 <Question title="¿Puedo migrar desde `@solid-primitives/i18n` o `i18next` sin reescribir mis componentes?">
 
 En gran medida. Sigue la [guía de migración de i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/migration_from_i18next_to_intlayer.md) para trasladar el contenido. También puedes migrar de forma gradual: el [plugin de sincronización JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md) mantiene tus catálogos JSON existentes como fuente de verdad y genera diccionarios de Intlayer a partir de ellos, de modo que ambas capas se mantienen sincronizadas mientras trasladas los componentes uno a uno.
 
 </Question>
-
 <Question title="¿Puedo conservar mis archivos de traducción JSON existentes?">
 
 Sí. El [plugin de sincronización JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-json.md) mantiene tus archivos `/messages/{locale}/{namespace}.json` como fuente de verdad y genera diccionarios de Intlayer a partir de ellos, en ambas direcciones. Un [plugin de sincronización PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/plugins/sync-po.md) hace lo mismo para los catálogos gettext, y los [archivos por idioma](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/per_locale_file.md) te permiten dividir el contenido por idioma en lugar de agrupar los idiomas en un solo archivo.
 
 </Question>
-
 <Question title="¿Tengo que trasladar mi contenido clave por clave?">
 
 No. Ejecuta `npx intlayer extract` e Intlayer lee tus componentes, extrae las cadenas visibles para el usuario y escribe un archivo `.content` junto a cada uno, así que revisas un diff en lugar de copiar cadenas a un catálogo una por una. El paso 15 de esta guía lo explica paso a paso.
@@ -1206,7 +1204,6 @@ Para una canalización totalmente automatizada, el [compilador de Intlayer](http
 Conviene conocer dos límites antes de activar el compilador. Funciona por análisis estático, así que las cadenas que solo existen en tiempo de ejecución, como los códigos de error de la API o los campos del CMS, quedan fuera de su alcance. Y tiene que distinguir el texto visible para el usuario de la lógica de la aplicación, como `className="active"` o un código de estado, lo que requiere unas pocas anotaciones en una base de código grande. El [comando extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md) evita ambos manteniéndote en el proceso.
 
 </Question>
-
 <Question title="¿Qué herramientas para editores y agentes de IA están disponibles?">
 
 Cinco piezas, todas opcionales:
@@ -1218,61 +1215,51 @@ Cinco piezas, todas opcionales:
 - **[Plugin de ESLint](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/eslint.md)**: `no-raw-text` marca las cadenas codificadas de forma fija, con reglas adicionales para claves de diccionario estáticas y contenido sin usar.
 
 </Question>
-
 <Question title="¿Intlayer admite el renderizado en el servidor y el prerenderizado aquí?">
 
 Sí. El contenido se resuelve durante el SSR, y el paso 16 cubre la configuración de prerenderizado que emite un documento estático por ruta localizada, además del sitemap localizado generado a partir de la misma tabla de rutas.
 
 </Question>
-
 <Question title="¿Cambiar el idioma vuelve a renderizar toda mi aplicación?">
 
 No. El contenido se respalda con señales de Solid, así que cambiar de idioma actualiza solo los nodos del DOM que leen los valores modificados.
 
 </Question>
-
 <Question title="¿Cómo añado etiquetas hreflang y un sitemap localizado?">
 
 Usa la función `generateSitemap` integrada en una ruta `src/routes/sitemap[.]xml.ts`. Emite el espacio de nombres `xhtml:link`, así que cada versión de idioma de una página enlaza bidireccionalmente con las demás. Los metadatos localizados de `head` se cubren en el paso 12.
 
 </Question>
-
 <Question title="¿Cómo gestiono las páginas 404 en rutas localizadas?">
 
 Lo cubre el paso 14. `validatePrefix` te indica si el segmento de idioma de la URL es un idioma declarado, así que `/xx/about` devuelve un 404 real en lugar de indexarse como una página duplicada.
 
 </Question>
-
 <Question title="¿Tengo que poner el idioma en la URL?">
 
 No. `routing.mode` acepta `"prefix-no-default"` (el valor por defecto), `"prefix-all"`, `"no-prefix"` y `"search-params"`, y `routing.domains` asigna cada idioma a su propio dominio. Consulta la [referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
 
 </Question>
-
 <Question title="¿Cómo creo un selector de idioma que conserve la ruta actual?">
 
 El paso 9 muestra el componente. `useLocale` expone el idioma activo, los idiomas disponibles y un setter que conserva la elección, mientras que `getLocalizedUrl` reescribe la ruta actual al idioma de destino para que el usuario permanezca en la misma página.
 
 </Question>
-
 <Question title="¿Cómo traduzco la aplicación automáticamente con IA?">
 
 Ejecuta `npx intlayer fill`. Rellena las traducciones que faltan con el LLM de tu elección, usando tu propio proveedor y tu clave de API, y `--git-diff` limita la ejecución al contenido modificado en la rama. Consulta el [comando fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/fill.md) y la [integración de CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/CI_CD.md).
 
 </Question>
-
 <Question title="¿Intlayer admite plurales, género y texto enriquecido?">
 
 Sí: [formas plurales](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/plurial.md), [contenido según el género](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/gender.md), condiciones, [inserciones](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/markdown.md) y [formateadores](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/formatters.md) para números, fechas y monedas.
 
 </Question>
-
 <Question title="¿Cómo pueden los traductores editar el contenido sin tocar el código?">
 
 A través del [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md), que se ejecuta en tu propia infraestructura y permite que cualquiera edite texto en su sitio en la aplicación en ejecución, o del [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md), que externaliza el contenido para que pueda cambiar sin un despliegue.
 
 </Question>
-
 <Question title="¿Es Intlayer gratuito y de código abierto?">
 
 Sí, bajo la licencia Apache 2.0, uso comercial incluido. El CMS alojado es un servicio de pago opcional que también puede [autoalojarse](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/self_hosting.md).