VuePress - Lingo.dev CLI

¿Qué es VuePress?

VuePress es un generador de sitios estáticos impulsado por Vue para crear sitios de documentación. Proporciona un tema optimizado para documentación técnica e integración de componentes Vue.

¿Qué es Lingo.dev CLI?

Lingo.dev es una plataforma de traducción impulsada por IA. El CLI de Lingo.dev lee archivos fuente, envía contenido traducible a modelos de lenguaje de gran escala y escribe los archivos traducidos de vuelta a tu proyecto.

Acerca de esta guía

Esta guía explica cómo configurar Lingo.dev CLI en un sitio de documentación VuePress. Aprenderás cómo estructurar un proyecto con VuePress, configurar un proceso de traducción y ver los resultados.

Paso 1. Configurar un proyecto VuePress

Crea un nuevo proyecto VuePress:
```
npm create vuepress@latest my-docs
```
Navega al directorio del proyecto:
```
cd my-docs
```
Instala las dependencias:
```
npm install
```

Paso 2. Crear contenido fuente

Crea un directorio para almacenar la documentación en el idioma de origen:
```
mkdir docs/en
```

Crea un archivo que contenga contenido de documentación (por ejemplo, docs/en/README.md):

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

## Getting started

This documentation is automatically translated by Lingo.dev.

## Features

Our product includes powerful capabilities for modern development.

Paso 3. Configurar enlaces simbólicos

VuePress espera que el contenido del idioma de origen esté en el directorio raíz docs, con el contenido del idioma de destino en subdirectorios, pero Lingo.dev CLI no admite esta combinación.

Como solución alternativa, recomendamos:

Almacenar los archivos de contenido fuente en un directorio de idioma (por ejemplo, docs/en/)
Generar enlaces simbólicos para que los archivos también aparezcan en el directorio raíz docs

Para simplificar este proceso:

Crea un script para generar los enlaces simbólicos (por ejemplo, scripts/symlinks.sh):

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

Haz que el script sea ejecutable:
```
chmod +x scripts/symlinks.sh
```
Ejecuta el script:
```
./scripts/symlinks.sh
```

Deberás volver a ejecutar el script cada vez que agregues archivos al directorio docs/en/.

Paso 4. Configurar la CLI

En la raíz del proyecto, crea un archivo 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"]
    }
  }
}

Este archivo define:

los archivos que la CLI de Lingo.dev debe traducir
los idiomas entre los que traducir

En este caso, la configuración traduce archivos Markdown del inglés al español.

Es importante tener en cuenta que:

[locale] es un marcador de posición que se reemplaza en tiempo de ejecución. Asegura que el contenido se lea desde una ubicación (por ejemplo, docs/en/README.md) y se escriba en una ubicación diferente (por ejemplo, docs/es/README.md).
La CLI de Lingo.dev no admite patrones glob recursivos (por ejemplo, **/*.md). Necesitarás crear patrones include adicionales para traducir archivos que existan dentro de directorios anidados.

Para obtener más información, consulta configuración de i18n.json.

Paso 5. Traducir el contenido

Regístrate para obtener una cuenta de Lingo.dev.
Inicia sesión en Lingo.dev a través de la CLI:
```
npx lingo.dev@latest login
```
Ejecuta el proceso de traducción:
```
npx lingo.dev@latest run
```
La CLI creará un directorio docs/es/ para almacenar el contenido traducido y un archivo i18n.lock para realizar un seguimiento de lo que se ha traducido (para evitar retraducciones innecesarias).

Paso 6. Utilizar las traducciones

En el archivo docs/.vuepress/config.js:

Añade una propiedad locales a la configuración del tema:

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

Añade una propiedad locales a nivel raíz para definir la configuración de idioma para cada localización:

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

Inicia el servidor de desarrollo:
```
npm run docs:dev
```
Navega a http://localhost:8080. Deberías ver un menú desplegable para cambiar entre idiomas.