@intlayer/docs 9.5.5 → 9.5.7

package/docs/es/intlayer_with_astro_vanilla.md

@@ -1,701 +0,0 @@
----
-createdAt: 2026-04-24
-updatedAt: 2026-08-30
-title: "Astro + Vanilla JS i18n - Guía completa para traducir tu aplicación"
-description: "Sin más i18next. La guía 2026 para crear una aplicación Astro + Vanilla JS multilingüe (i18n). Traduce con agentes de IA y optimiza el tamaño del bundle, SEO y rendimiento."
-keywords:
-  - internacionalización
-  - documentación
-  - Intlayer
-  - Astro
-  - Vanilla JS
-  - JavaScript
-  - TypeScript
-slugs:
-  - doc
-  - environment
-  - astro
-  - vanilla
-applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
-applicationShowcase: https://intlayer-astro-template.vercel.app
-history:
-  - 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"
-  - version: 8.7.7
-    date: 2026-04-24
-    changes: "Documentación inicial para Astro + Vanilla JS"
-author: aymericzip
----
-
-# Traducir tu sitio Astro + Vanilla JS con Intlayer | Internacionalización (i18n)
-
-<Tabs defaultTab="code">
-  <Tab label="Código" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-astro-template?file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Cómo internacionalizar tu aplicación con Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Demo" value="demo">
-
-<iframe
-  src="https://intlayer-astro-template.vercel.app"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo - intlayer-astro-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
-## Tabla de Contenidos
-
-<TOC/>
-
-## ¿Por qué Intlayer en lugar de alternativas?
-
-En comparación con soluciones principales como `astro-i18n` o `i18next`, Intlayer es una solución que viene con optimizaciones integradas como:
-
-<AccordionGroup>
-<Accordion header="Soporte completo de Astro">
-
-Intlayer está optimizado para funcionar perfectamente con Astro 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.
-
-</Accordion>
-</AccordionGroup>
-
-## Guía paso a paso para configurar Intlayer en Astro + Vanilla JS
-
-Consulta la [plantilla de aplicación](https://github.com/aymericzip/intlayer-astro-template) en GitHub.
-
-<Steps>
-<Step number={1} title="Instalar dependencias">
-
-Instala los paquetes necesarios utilizando tu gestor de paquetes preferido:
-
-```bash packageManager="npm"
-npx intlayer init --interactive
-```
-
-```bash packageManager="pnpm"
-pnpm dlx intlayer init --interactive
-```
-
-```bash packageManager="yarn"
-yarn dlx intlayer init --interactive
-```
-
-```bash packageManager="bun"
-bunx intlayer init --interactive
-```
-
-> la bandera `--interactive` es opcional. Usa `intlayer-cli init` si eres un agente de IA.
-
-> Este comando detectará su entorno e instalará los paquetes necesarios. Por ejemplo:
-
-```bash packageManager="npm"
-npm install intlayer astro-intlayer vanilla-intlayer
-```
-
-```bash packageManager="pnpm"
-pnpm add intlayer astro-intlayer vanilla-intlayer
-```
-
-```bash packageManager="yarn"
-yarn add intlayer astro-intlayer vanilla-intlayer
-```
-
-```bash packageManager="bun"
-bun add intlayer astro-intlayer vanilla-intlayer
-```
-
-- **intlayer**
-  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.
-
-- **vanilla-intlayer**
-  Paquete para integrar Intlayer con aplicaciones de Vanilla JavaScript / TypeScript. Proporciona un singleton pub/sub (`IntlayerClient`) y helpers basados en callbacks (`useIntlayer`, `useLocale`, etc.) permitiendo que cualquier parte de tus etiquetas `<script>` de Astro responda a los cambios de idioma sin necesidad de un framework.
-
-</Step>
-<Step number={2} title="Configurar tu proyecto">
-
-Crea un archivo de configuración para definir los idiomas de tu aplicación:
-
-```typescript fileName="intlayer.config.ts"
-import { Locales, type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Tus otros idiomas
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-> A través de este archivo de configuración, puedes configurar URLs localizadas, redirecciones de middleware, nombres de cookies, ubicación y extensiones de las declaraciones de contenido, desactivar los logs de Intlayer en la consola, y más. Para una lista completa de los parámetros disponibles, consulta la [documentación de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
-
-</Step>
-<Step number={3} title="Integrar Intlayer en tu configuración de Astro">
-
-Añade el plugin `intlayer` a tu configuración de Astro. Para Vanilla JS, no se requiere ninguna integración de framework de UI adicional.
-
-```typescript fileName="astro.config.ts"
-// @ts-check
-
-import { intlayer } from "astro-intlayer";
-import { defineConfig } from "astro/config";
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [intlayer()],
-});
-```
-
-> El plugin de integración `intlayer()` se utiliza para integrar Intlayer con Astro. Asegura la generación de los archivos de declaración de contenido y los vigila en modo desarrollo. Define las variables de entorno de Intlayer dentro de la aplicación Astro y proporciona alias para optimizar el rendimiento.
-
-</Step>
-<Step number={4} title="Declarar tu contenido">
-
-Crea y gestiona tus declaraciones de contenido para almacenar traducciones:
-
-```typescript fileName="src/app.content.ts"
-import { t, type Dictionary } from "intlayer";
-
-const appContent = {
-  key: "app",
-  content: {
-    greeting: t({
-      en: "Hello World",
-      fr: "Bonjour le monde",
-      es: "Hola mundo",
-    }),
-    description: t({
-      en: "Welcome to my multilingual Astro site.",
-      fr: "Bienvenue sur mon site Astro multilingue.",
-      es: "Bienvenido a mi sitio Astro multilingüe.",
-    }),
-    switchLocale: t({
-      en: "Switch language:",
-      fr: "Changer de langue :",
-      es: "Cambiar idioma:",
-    }),
-  },
-} satisfies Dictionary;
-
-export default appContent;
-```
-
-> Las declaraciones de contenido pueden definirse en cualquier lugar de tu aplicación, siempre que estén incluidas en el `contentDir` (por defecto `./src`) y coincidan con la extensión de los archivos de declaración de contenido (por defecto `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`).
-
-> Para más información, consulta 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={5} title="Usar el contenido en Astro">
-
-Para Vanilla JS, todo el renderizado del lado del servidor se realiza utilizando `getIntlayer` directamente dentro de los archivos `.astro`. Posteriormente, un bloque `<script>` inicializa `vanilla-intlayer` en el cliente para manejar el cambio de idioma.
-
-```astro fileName="src/pages/[...locale]/index.astro"
----
-import {
-  getIntlayer,
-  getLocaleFromPath,
-  getLocalizedUrl,
-  getPrefix,
-  getLocaleName,
-  localeMap,
-  locales,
-  defaultLocale,
-  getPathWithoutLocale,
-  type LocalesValues,
-} from "intlayer";
-
-export const getStaticPaths = () => {
-  return localeMap(({ locale }) => ({
-    params: { locale: getPrefix(locale).localePrefix },
-  }));
-};
-
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
-const { greeting, description, switchLocale } = getIntlayer("app", locale);
----
-
-<!doctype html>
-<html lang={locale} dir={getHTMLTextDir(locale)}>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <title>{greeting}</title>
-
-    <!-- Enlace Canónico -->
-    <link
-      rel="canonical"
-      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
-    />
-
-    <!-- Enlaces Hreflang -->
-    {
-      localeMap(({ locale: mapLocale }) => (
-        <link
-          rel="alternate"
-          hreflang={mapLocale}
-          href={new URL(
-            getLocalizedUrl(Astro.url.pathname, mapLocale),
-            Astro.site
-          )}
-        />
-      ))
-    }
-
-    <link
-      rel="alternate"
-      hreflang="x-default"
-      href={new URL(
-        getLocalizedUrl(Astro.url.pathname, defaultLocale),
-        Astro.site
-      )}
-    />
-  </head>
-  <body>
-    <main>
-      <h1 id="greeting">{greeting}</h1>
-      <p id="description">{description}</p>
-
-      <div class="locale-switcher">
-        <span class="switcher-label">{switchLocale}</span>
-        <div class="locale-buttons">
-          {
-            locales.map((localeItem) => (
-              <a
-                href={localeItem === locale ? undefined : getLocalizedUrl(pathWithoutLocale, localeItem)}
-                class={`locale-btn ${localeItem === locale ? "active" : ""}`}
-                data-locale={localeItem}
-                aria-disabled={localeItem === locale}
-              >
-                {getLocaleName(localeItem)}
-              </a>
-            ))
-          }
-        </div>
-      </div>
-    </main>
-  </body>
-</html>
-```
-
-> Si desea utilizar su contenido en un atributo de `cadena`, como `alt`, `title`, `href`, `aria-label`, etc., puede utilizar el valor de la función, como:
-
-> ```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)} />
-> ```
-
-> **Nota sobre la configuración de rutas:**
-> La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:
->
-> - **`prefix-no-default` (por defecto):** mantiene el idioma por defecto en la raíz (sin prefijo) y añade prefijos a los demás. Usa `[...locale]` para capturar todos los casos.
-> - **`prefix-all`:** todos los URLs tienen prefijo de idioma. Puedes usar el estándar `[locale]` si no necesitas manejar la raíz por separado.
-> - **`search-param` o `no-prefix`:** no se necesitan directorios de idioma. El idioma se maneja a través de parámetros de consulta o cookies.
-
-</Step>
-<Step number={6} title="Añadir funcionalidad de cambio de idioma">
-
-En Astro con Vanilla JS, el selector de idioma se renderiza como enlaces normales en el servidor y se hidrata en el cliente a través de un bloque `<script>`. Cuando un usuario hace clic en un enlace de idioma, `vanilla-intlayer` establece la cookie de idioma mediante `setLocale` antes de navegar a la URL localizada.
-
-```astro fileName="src/pages/[...locale]/index.astro"
-<!-- Consulta el marcado del servidor en el Paso 5 anterior -->
-
-<script>
-  import { installIntlayer, useLocale } from "vanilla-intlayer";
-  import { getLocaleFromPath, getLocalizedUrl, type LocalesValues } from "intlayer";
-
-  // Inicializar Intlayer en el cliente con el idioma de la URL actual
-  const locale = getLocaleFromPath(window.location.pathname);
-  installIntlayer({ locale: locale as LocalesValues });
-
-  const { setLocale } = useLocale({
-    onLocaleChange: (newLocale: LocalesValues) => {
-      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
-    },
-  });
-
-  // Vincular eventos de clic a los enlaces del selector de idioma
-  const localeLinks = document.querySelectorAll("[data-locale]");
-  localeLinks.forEach((link) => {
-    link.addEventListener("click", (e) => {
-      const localeValue = link.getAttribute("data-locale") as LocalesValues;
-      if (localeValue && localeValue !== locale) {
-        e.preventDefault();
-        setLocale(localeValue);
-      }
-    });
-  });
-</script>
-```
-
-> **Nota sobre la persistencia:**
-> `installIntlayer` inicializa el singleton de Intlayer con el idioma definido por el servidor. `useLocale` con `onLocaleChange` asegura que la cookie de idioma se establezca a través del middleware antes de la navegación, para que la preferencia del usuario se recuerde en futuras visitas.
-
-> **Nota sobre la mejora progresiva:**
-> Los enlaces del selector funcionan como etiquetas `<a>` estándar incluso sin JavaScript. Si JS está disponible, las llamadas a `setLocale` actualizan la cookie antes de navegar, permitiendo que el middleware realice la redirección correcta.
-
-</Step>
-<Step number={7} title="Sitemap y Robots.txt">
-
-Intlayer ofrece utilidades para crear dinámicamente tu sitemap localizado y tus archivos robots.txt.
-
-#### 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.
-
-> El sitemap generado por Intlayer admite el espacio de nombres `xhtml:link` (Hreflang XML Extensions). A diferencia de los generadores de sitemap predeterminados que solo enumeran URL sin procesar, Intlayer crea automáticamente los enlaces bidireccionales necesarios entre todas las versiones de idioma de una página (por ejemplo, `/about`, `/about?lang=fr` y `/about?lang=es`). Esto garantiza que los motores de búsqueda indexen y sirvan correctamente la versión de idioma adecuada a la audiencia adecuada.
-
-Crea `src/pages/sitemap.xml.ts` para generar un sitemap que incluya todas tus rutas localizadas.
-
-```typescript fileName="src/pages/sitemap.xml.ts"
-import type { APIRoute } from "astro";
-import { generateSitemap, type SitemapUrlEntry } from "intlayer";
-
-const pathList: SitemapUrlEntry[] = [
-  { path: "/", changefreq: "daily", priority: 1.0 },
-  { 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 });
-
-  return new Response(xmlOutput, {
-    headers: { "Content-Type": "application/xml" },
-  });
-};
-```
-
-#### Robots.txt
-
-Crea `src/pages/robots.txt.ts` para controlar el rastreo de los motores de búsqueda.
-
-```typescript fileName="src/pages/robots.txt.ts"
-import type { APIRoute } from "astro";
-import { getMultilingualUrls } from "intlayer";
-
-const getAllMultilingualUrls = (urls: string[]) =>
-  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
-
-const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
-
-export const GET: APIRoute = ({ site }) => {
-  const robotsTxt = [
-    "User-agent: *",
-    "Allow: /",
-    ...disallowedPaths.map((path) => `Disallow: ${path}`),
-    "",
-    `Sitemap: ${new URL("/sitemap.xml", site).href}`,
-  ].join("\n");
-
-  return new Response(robotsTxt, {
-    headers: { "Content-Type": "text/plain" },
-  });
-};
-```
-
-</Step>
-<Step number={15} 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.
-
-Para facilitar este proceso, Intlayer propone un [compilador](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/extract.md) para transformar tus componentes y extraer el contenido.
-
-Para configurarlo, puedes agregar una sección `compiler` en tu archivo `intlayer.config.ts` :
-
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig } from "intlayer";
-
-const config: IntlayerConfig = {
-  // ... Resto de tu configuración
-  compiler: {
-    /**
-     * Indica si el compilador debe estar habilitado.
-     */
-    enabled: true,
-
-    /**
-     * Define la ruta de los archivos de salida
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
-
-    /**
-     * Indica si los componentes deben guardarse después de ser transformados. De esa manera, el compilador se puede ejecutar solo una vez para transformar la aplicación y luego se puede eliminar.
-     */
-    saveComponents: false,
-
-    /**
-     * Prefijo de clave de diccionario
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
-
-export default config;
-```
-
-<Tabs>
- <Tab value='Comando de extracción'>
-
-Ejecuta el extractor para transformar tus componentes y extraer el contenido
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-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
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # O npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # O pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # O yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Or bun run dev
-```
-
- </Tab>
-</Tabs>
-
-</Step>
-
-</Steps>
-
-### Configuración de TypeScript
-
-Intlayer utiliza el aumento de módulos (module augmentation) para aprovechar TypeScript, haciendo que tu código sea más robusto.
-
-![Autocompletado](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
-
-![Error de traducción](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.webp?raw=true)
-
-Asegúrate de que tu configuración de TypeScript incluya los tipos autogenerados.
-
-```json5 fileName="tsconfig.json"
-{
-  // ... tu configuración de TypeScript existente
-  "include": [
-    // ... tu configuración de TypeScript existente
-    ".intlayer/**/*.ts", // Incluir tipos autogenerados
-  ],
-}
-```
-
-### Configuración de Git
-
-Se recomienda ignorar los archivos generados por Intlayer. Esto evita incluirlos en tu repositorio de Git.
-
-Para hacerlo, añade las siguientes instrucciones a tu archivo `.gitignore`:
-
-```bash
-# Ignorar archivos generados por Intlayer
-.intlayer
-```
-
-### Extensión de VS Code
-
-Para mejorar tu experiencia de desarrollo con Intlayer, puedes instalar la **extensión oficial de Intlayer para VS Code**.
-
-[Instalar desde el VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-Esta extensión proporciona:
-
-- **Autocompletado** para las claves de traducción.
-- **Detección de errores en tiempo real** para traducciones faltantes.
-- **Previsualización en línea** del contenido traducido.
-- **Acciones rápidas** para crear y actualizar traducciones fácilmente.
-
-Para más información sobre el uso de la extensión, consulta la [documentación de la extensión para VS Code](https://intlayer.org/doc/vs-code-extension).
-
-### Profundiza más
-
-Si quieres saber más, también puedes implementar el [Editor Visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) o usar el [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_CMS.md) para externalizar tus contenidos.
-
-## Preguntas frecuentes
-
-<FAQ>
-
-<Question title="¿Qué soluciones existen para internacionalizar un sitio Astro sin un framework de UI?">
-
-La opción `i18n` integrada de Astro gestiona los prefijos de idioma y las redirecciones, pero te deja el contenido a ti. A partir de ahí:
-
-- **Diccionarios escritos a mano**, objetos JSON o TypeScript planos importados por página: sin dependencias, pero sin tipado, sin reglas de plural y sin herramientas para encontrar traducciones que faltan.
-- **`Intlayer`**: contenido declarado junto a la página o el componente que lo renderiza, compilado en tiempo de compilación y tipado, con traducción con IA, comprobaciones de traducciones que faltan en CI, un editor visual y un CMS.
-
-Sin un framework de UI, el coste en tiempo de ejecución de una biblioteca de i18n es lo que quieres evitar, e Intlayer resuelve el contenido en tiempo de compilación, así que una página Astro estática entrega HTML traducido y ningún diccionario. Consulta [por qué Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/interest_of_intlayer.md).
-
-</Question>
-<Question title="¿Cuánto añade la i18n al tamaño del bundle de mi sitio Astro?">
-
-Mucho menos que una configuración basada en espacios de nombres, porque una página nunca descarga un catálogo que no renderiza. Las páginas de Astro se renderizan en tiempo de compilación, así que entregan HTML traducido y ningún diccionario; solo las islas reciben uno. El compilador de tiempo de compilación resuelve las llamadas de contenido a las entradas exactas que usa un componente, 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/index.md).
-
-</Question>
-<Question title="¿Puedo migrar desde `i18next` o un diccionario escrito a mano 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.
-
-Para una canalización totalmente automatizada, el [compilador de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/compiler.md) hace lo mismo en tiempo de compilación: escanea tu código JSX, TSX, Vue y Svelte en cada cambio, genera los diccionarios y los mantiene sincronizados mediante el reemplazo de módulos en caliente, así que no hay ninguna clave que mantener a mano.
-
-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:
-
-- **[Extensión de VS Code](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/vs_code_extension.md)**: salta de una clave `useIntlayer` al archivo de contenido que la declara, extrae contenido de un componente y ejecuta build, fill, test, push y pull desde la paleta de comandos o desde una pestaña de Intlayer dedicada.
-- **[Servidor LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/lsp.md)**: el mismo conocimiento en cualquier editor que hable LSP, con ir a la definición, buscar todas las referencias, vistas previas al pasar el cursor de un valor traducido, autocompletado de claves y campos, y un aviso cuando una clave no está declarada en ninguna parte. También resuelve las llamadas a `i18next`, `react-i18next`, `next-intl` y `use-intl`, lo que ayuda durante la migración.
-- **[Servidor MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/mcp_server.md)**: expone la documentación y la CLI de Intlayer a Cursor, VS Code, Claude Desktop, Claude Code y ChatGPT, para que un asistente responda a partir de la documentación actual en lugar de adivinar, y pueda ejecutar comandos como `intlayer fill` por sí mismo.
-- **[Habilidades para agentes](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/agent_skills.md)**: habilidades específicas como `intlayer-config`, `intlayer-cli` e `intlayer-content`, además de una por framework, que enseñan a un agente tu configuración de enrutamiento y los tipos de nodo de contenido.
-- **[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="¿Necesito JavaScript en la página para que funcionen las traducciones?">
-
-No. Astro renderiza las páginas en tiempo de compilación e Intlayer resuelve el contenido durante ese renderizado, así que el HTML generado ya contiene el texto traducido. `vanilla-intlayer` solo se necesita para las partes que haces interactivas en el navegador.
-
-</Question>
-<Question title="¿Puedo añadir una isla interactiva más adelante sin cambiar mi contenido?">
-
-Sí, y ese es el objetivo de una única capa de contenido. Las mismas declaraciones las leen `astro-intlayer` en la página y el binding del framework de la isla que añadas, ya sea [React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_react.md), [Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_vue.md), [Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_svelte.md), [Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_solid.md), [Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_preact.md) o [Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_astro_lit.md).
-
-</Question>
-<Question title="¿Cómo configuro el enrutamiento localizado y un selector de idioma?">
-
-El paso 6 cubre el selector. `routing.mode` decide el esquema de URL: `"prefix-no-default"` (el valor por defecto), `"prefix-all"`, `"no-prefix"` o `"search-params"`, y `routing.domains` asigna un idioma a su propio dominio. `getLocalizedUrl` reescribe la ruta actual para que cambiar de idioma mantenga al lector en la misma página. Consulta la [referencia de configuración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/configuration.md).
-
-</Question>
-<Question title="¿Cómo genero un sitemap localizado y etiquetas hreflang?">
-
-El paso 7 cubre `sitemap.xml` y `robots.txt`. `getMultilingualUrls` construye las alternativas para cada idioma declarado, incluida `x-default`, que es lo que usan los motores de búsqueda para servir la versión de idioma correcta de una página.
-
-</Question>
-<Question title="¿Cómo traduzco el sitio 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) para texto extenso, 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="¿Cuál es el costo del editor visual? ¿Es excesivo si no lo necesito?">
-
-El [editor visual de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_visual_editor.md) tiene un **costo cero** en su aplicación si no está configurado. La lógica adicional solo se carga si se habilita explícitamente y es necesaria.
-
-Si está habilitado, el impacto es extremadamente ligero (+5 KB, cargado dinámicamente solo cuando se activa) porque la mayor parte de la lógica es manejada por el editor del servidor en [app.intlayer.org](https://app.intlayer.org) o a través del paquete `intlayer-editor`. Si solo necesita una solución de traducción simple sin edición visual, Intlayer no agrega ninguna sobrecarga a su aplicación.
-
-</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).
-
-</Question>
-
-</FAQ>