VuePress - Lingo.dev CLI

Qu'est-ce que VuePress ?

VuePress est un générateur de sites statiques propulsé par Vue pour créer des sites de documentation. Il fournit un thème optimisé pour la documentation technique et l'intégration de composants Vue.

Qu'est-ce que Lingo.dev CLI ?

Lingo.dev est une plateforme de traduction alimentée par l'IA. Le CLI Lingo.dev lit les fichiers source, envoie le contenu traduisible aux modèles de langage avancés, et écrit les fichiers traduits dans votre projet.

À propos de ce guide

Ce guide explique comment configurer le CLI Lingo.dev dans un site de documentation VuePress. Vous apprendrez comment structurer un projet avec VuePress, configurer un pipeline de traduction et visualiser les résultats.

Étape 1. Configurer un projet VuePress

Créez un nouveau projet VuePress :
```
npm create vuepress@latest my-docs
```
Naviguez dans le répertoire du projet :
```
cd my-docs
```
Installez les dépendances :
```
npm install
```

Étape 2. Créer du contenu source

Créez un répertoire pour stocker la documentation dans la locale source :
```
mkdir docs/en
```

Créez un fichier qui contient du contenu de documentation (par exemple, docs/en/README.md) :

---
home: true
title: Home
heroText: VuePress Documentation
tagline: Documentation powered by VuePress
---

## Premiers pas

Cette documentation est automatiquement traduite par Lingo.dev.

## Fonctionnalités

Notre produit inclut des capacités puissantes pour le développement moderne.

Étape 3. Configurer des liens symboliques

VuePress s'attend à ce que le contenu de la locale source soit dans le répertoire racine docs, avec le contenu des locales cibles dans des sous-répertoires, mais le CLI Lingo.dev ne prend pas en charge cette combinaison.

Comme solution de contournement, nous recommandons :

Stocker les fichiers de contenu source dans un répertoire de locale (par exemple, docs/en/)
Générer des liens symboliques pour que les fichiers apparaissent également dans le répertoire racine docs

Pour simplifier ce processus :

Créez un script pour générer les liens symboliques (par exemple, scripts/symlinks.sh) :

for file in docs/en/*; do ln -sf "en/$(basename "$file")" "docs/$(basename "$file")"; done

Rendez le script exécutable :
```
chmod +x scripts/symlinks.sh
```
Exécutez le script :
```
./scripts/symlinks.sh
```

Vous devrez réexécuter le script chaque fois que vous ajoutez des fichiers au répertoire docs/en/.

Étape 4. Configurer la CLI

À la racine du projet, créez un fichier i18n.json :

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": 1.8,
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "markdown": {
      "include": ["docs/[locale]/*.md", "docs/[locale]/*/*.md"]
    }
  }
}

Ce fichier définit :

les fichiers que la CLI Lingo.dev doit traduire
les langues entre lesquelles traduire

Dans ce cas, la configuration traduit les fichiers Markdown de l'anglais vers l'espagnol.

Il est important de noter que :

[locale] est un placeholder qui est remplacé à l'exécution. Il garantit que le contenu est lu depuis un emplacement (par exemple, docs/en/README.md) et écrit à un emplacement différent (par exemple, docs/es/README.md).
La CLI Lingo.dev ne prend pas en charge les modèles glob récursifs (par exemple, **/*.md). Vous devrez créer des modèles include supplémentaires pour traduire les fichiers qui existent dans des répertoires imbriqués.

Pour en savoir plus, consultez configuration i18n.json.

Étape 5. Traduire le contenu

Inscrivez-vous pour un compte Lingo.dev.
Connectez-vous à Lingo.dev via la CLI :
```
npx lingo.dev@latest login
```
Exécutez le pipeline de traduction :
```
npx lingo.dev@latest run
```
La CLI créera un répertoire docs/es/ pour stocker le contenu traduit et un fichier i18n.lock pour suivre ce qui a été traduit (afin d'éviter des retraductions inutiles).

Étape 6. Utiliser les traductions

Dans le fichier docs/.vuepress/config.js :

Ajoutez une propriété locales à la configuration du thème :

theme: defaultTheme({
  locales: {
    "/": {
      selectLanguageName: "English",
    },
    "/es/": {
      selectLanguageName: "Español",
    },
  },
}),

Ajoutez une propriété locales au niveau racine pour définir la configuration linguistique pour chaque locale :

{
  locales: {
    "/": {
      lang: "en",
      title: "VuePress",
    },
    "/es/": {
      lang: "es",
      title: "VuePress",
    },
  },
}

Démarrez le serveur de développement :
```
npm run docs:dev
```
Naviguez vers http://localhost:8080. Vous devriez voir un menu déroulant pour basculer entre les langues.