Lingo.dev + .md/.mdx (Documentation)

Lingo.dev CLI traduit la documentation Markdown et MDX, les blogs et le contenu tout en préservant la mise en forme, les blocs de code, les liens, les composants React et les éléments interactifs. Le CLI utilise le bucket mdx comme configuration recommandée pour les fichiers .md et .mdx, protégeant les blocs de code et le code en ligne de la traduction, préservant les URL tout en traduisant les descriptions, maintenant les métadonnées frontmatter, conservant les composants React et les imports intacts, traduisant intelligemment les props JSX, et fonctionnant parfaitement avec Next.js, Gatsby et les outils MDX.

Configuration rapide

Configurez en utilisant le bucket mdx pour les fichiers Markdown et MDX :

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

Rappel : [locale] est un placeholder qui doit rester littéralement dans la configuration, car il est remplacé par la locale réelle pendant l'exécution du CLI.

Traduire la documentation

npx lingo.dev@latest i18n

Traduit le contenu tout en préservant tout le formatage Markdown et les composants React MDX.

Gestion du contenu Markdown

Préservation des blocs de code

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

Le code reste non traduit tandis que les explications environnantes sont localisées.

Gestion des liens et références

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

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

Les URL et les chemins relatifs restent intacts tandis que le texte des liens est traduit.

Protection du frontmatter

---

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

---

# Getting Started

Your content begins here...

Le frontmatter YAML reste intact tandis que le contenu est traduit.

Fonctionnalités des composants MDX

Blocs de composants React

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

# Guide de bienvenue

<Alert type="info">
  Voici des informations importantes pour les utilisateurs.
</Alert>

Le contenu markdown standard est traduit ici.

Les importations de composants et JSX restent intacts tandis que le contenu textuel est localisé.

Éléments JSX en ligne

Voici un bouton <Button variant="primary">Commencer</Button> dans le texte.

Le composant reste, mais "Commencer" est traduit.

Props avec contenu traduisible

<VideoPlayer
  title="Vidéo d'introduction"
  description="Apprenez les bases en 5 minutes"
  src="/videos/intro.mp4"
/>

Les props de type chaîne sont traduits tandis que les props techniques restent inchangés.

Déclarations d'exportation

export const title = "Guide d'utilisateur";
export const published = "2024-01-15";

# {title}

Le contenu commence ici...

Les exportations nommées avec du contenu traduisible sont localisées.

Frontmatter avec composants

---

title: "Premiers pas"
components:
  - Alert
  - CodeBlock

---

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

<Alert>Bienvenue sur notre plateforme !</Alert>

Configuration avancée

Multiples répertoires de contenu

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

Remarque : Les doubles astérisques (**) ne sont pas pris en charge dans les modèles glob. Utilisez un seul astérisque (*) pour la correspondance de fichiers dans les répertoires.

Exclure des fichiers spécifiques

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

Verrouiller les props des composants

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