Lingo.dev + .md/.mdx (Documentación)

Lingo.dev CLI traduce documentación en Markdown y MDX, blogs y contenido mientras preserva el formato, bloques de código, enlaces, componentes de React y elementos interactivos. La CLI utiliza el bucket mdx como la configuración recomendada tanto para archivos .md como .mdx, protegiendo bloques de código y código en línea de la traducción, preservando URLs mientras traduce descripciones, manteniendo los metadatos del frontmatter, conservando intactos los componentes e importaciones de React, traduciendo props JSX de manera inteligente, y funcionando perfectamente con Next.js, Gatsby y herramientas MDX.

Configuración rápida

Configure utilizando el bucket mdx tanto para archivos Markdown como MDX:

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "mdx": {
      "include": ["docs/[locale]/*.md", "content/[locale]/*.mdx"]
    }
  }
}

Recordatorio: [locale] es un marcador de posición que debe permanecer literalmente en la configuración, ya que se reemplaza con el locale real durante la ejecución de la CLI.

Traducir documentación

npx lingo.dev@latest i18n

Traduce el contenido mientras preserva todo el formato Markdown y los componentes React de MDX.

Manejo de contenido Markdown

Preservación de bloques de código

```javascript
const message = "Hello, world!";
console.log(message);
```

El código permanece sin traducir mientras que las explicaciones circundantes se localizan.

Manejo de enlaces y referencias

Visit [our website](https://example.com) for more details.

See the [configuration guide](./config.md) for setup instructions.

Las URLs y rutas relativas permanecen intactas mientras que el texto del enlace se traduce.

Protección del frontmatter

---

title: "Getting Started"
date: 2024-01-15
tags: ["tutorial", "beginner"]

---

# Getting Started

Your content begins here...

El frontmatter YAML permanece intacto mientras que el contenido se traduce.

Características de componentes MDX

Bloques de componentes React

import { Alert } from "@components/Alert";

# Guía de bienvenida

<Alert type="info">Esta es información importante para los usuarios.</Alert>

El contenido regular de markdown se traduce aquí.

Las importaciones de componentes y JSX permanecen intactos mientras que el contenido de texto se localiza.

Elementos JSX en línea

Aquí hay un botón <Button variant="primary">Comenzar</Button> en el texto.

El componente permanece, pero "Comenzar" se traduce.

Props con contenido traducible

<VideoPlayer
  title="Vídeo de introducción"
  description="Aprende lo básico en 5 minutos"
  src="/videos/intro.mp4"
/>

Las props de tipo string se traducen mientras que las props técnicas permanecen sin cambios.

Declaraciones de exportación

export const title = "Guía de usuario";
export const published = "2024-01-15";

# {title}

El contenido comienza aquí...

Las exportaciones con nombre que contienen contenido traducible se localizan.

Frontmatter con componentes

---

title: "Primeros pasos"
components:
  - Alert
  - CodeBlock

---

import { Alert, CodeBlock } from "@components";

<Alert>¡Bienvenidos a nuestra plataforma!</Alert>

Configuración avanzada

Múltiples directorios de contenido

"mdx": {
  "include": [
    "docs/[locale]/*.md",
    "content/[locale]/*.mdx",
    "blog/[locale]/*.{md,mdx}"
  ]
}

Nota: Los asteriscos dobles (**) no son compatibles en los patrones glob. Utilice un solo asterisco (*) para la coincidencia de archivos dentro de los directorios.

Excluir archivos específicos

"mdx": {
  "include": ["docs/[locale]/*.{md,mdx}"],
  "exclude": ["docs/[locale]/drafts/*.{md,mdx}"]
}

Bloquear props de componentes

"mdx": {
  "include": ["content/[locale]/*.{md,mdx}"],
  "lockedKeys": ["src", "href", "id", "className"]
}