Starlight

Traduction IA pour Starlight avec Lingo.dev CLI

Qu'est-ce que Starlight ?

Starlight est un thème de documentation construit sur le framework Astro. Il fournit des fonctionnalités intégrées de navigation sur le site, de recherche, d'internationalisation et de référencement SEO pour créer des sites de documentation beaux et accessibles.

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 Starlight. Vous apprendrez comment structurer un projet avec Starlight, configurer un pipeline de traduction et visualiser les résultats.

Étape 1. Configurer un projet Starlight

  1. Créez une nouvelle application Starlight :

    npm create astro@latest -- --template starlight

  2. Naviguez dans le répertoire du projet :

    cd <votre-projet-starlight>

Étape 2. Créer du contenu source

  1. Créez un répertoire pour stocker la documentation dans la locale source :

    mkdir -p src/content/docs/en

  2. Créez un fichier qui contient du contenu de documentation (par exemple, src/content/docs/en/index.mdx) :

    ---
title: "Bienvenue"
description: "Premiers pas avec notre documentation"
---

## Introduction

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 le 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": {
    "mdx": {
      "include": [
        "src/content/docs/[locale]/*.mdx",
        "src/content/docs/[locale]/*/*.mdx"
      ]
    }
  }
}

Ce fichier définit :

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

Dans ce cas, la configuration traduit les fichiers MDX 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, src/content/docs/en/index.mdx) et écrit à un emplacement différent (par exemple, src/content/docs/es/index.mdx).
  • Le CLI Lingo.dev ne prend pas en charge les modèles glob récursifs (par exemple, **/*.mdx). 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 4. Traduire le contenu

  1. Créez un compte Lingo.dev.

  2. Connectez-vous à Lingo.dev via l'interface de ligne de commande :

    npx lingo.dev@latest login

  3. Exécutez le pipeline de traduction :

    npx lingo.dev@latest run

    L'interface de ligne de commande créera un répertoire src/content/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 5. Utiliser les traductions

  1. Dans le fichier astro.config.mjs, configurez les locales prises en charge :

    import { defineConfig } from "astro/config";
import starlight from "@astrojs/starlight";

export default defineConfig({
  integrations: [
    starlight({
      title: "My Docs",
      defaultLocale: "en",
      locales: {
        en: {
          label: "English",
          lang: "en",
        },
        es: {
          label: "Español",
          lang: "es",
        },
      },
    }),
  ],
});

  2. Démarrez le serveur de développement :

    npm run dev

  3. Naviguez vers les URL suivantes :