Starlight

KI-Übersetzung für Starlight mit Lingo.dev CLI

Was ist Starlight?

Starlight ist ein Dokumentations-Theme, das auf dem Astro-Framework basiert. Es bietet integrierte Website-Navigation, Suchfunktion, Internationalisierung und SEO-Funktionen, um schöne, zugängliche Dokumentationsseiten zu erstellen.

Was ist Lingo.dev CLI?

Lingo.dev ist eine KI-gestützte Übersetzungsplattform. Die Lingo.dev CLI liest Quelldateien, sendet übersetzbare Inhalte an Large Language Models und schreibt übersetzte Dateien zurück in dein Projekt.

Über diesen Leitfaden

Dieser Leitfaden erklärt, wie man die Lingo.dev CLI in einer Starlight-Dokumentationsseite einrichtet. Du lernst, wie man ein Projekt mit Starlight erstellt, eine Übersetzungspipeline konfiguriert und die Ergebnisse betrachtet.

Schritt 1. Einrichten eines Starlight-Projekts

  1. Erstelle eine neue Starlight-Anwendung:

    npm create astro@latest -- --template starlight

  2. Navigiere in das Projektverzeichnis:

    cd <dein-starlight-projekt>

Schritt 2. Erstelle Quellinhalt

  1. Erstelle ein Verzeichnis zum Speichern der Dokumentation in der Quellsprache:

    mkdir -p src/content/docs/en

  2. Erstelle eine Datei mit Dokumentationsinhalten (z.B. src/content/docs/en/index.mdx):

    ---
title: "Willkommen"
description: "Erste Schritte mit unserer Dokumentation"
---

## Einführung

Diese Dokumentation wird automatisch von Lingo.dev übersetzt.

## Funktionen

Unser Produkt umfasst leistungsstarke Funktionen für moderne Entwicklung.

Schritt 3. Konfiguriere die CLI

Erstelle im Stammverzeichnis des Projekts eine i18n.json-Datei:

{
  "$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"
      ]
    }
  }
}

Diese Datei definiert:

  • die Dateien, die Lingo.dev CLI übersetzen soll
  • die Sprachen, zwischen denen übersetzt werden soll

In diesem Fall übersetzt die Konfiguration MDX-Dateien von Englisch nach Spanisch.

Wichtig zu beachten ist:

  • [locale] ist ein Platzhalter, der zur Laufzeit ersetzt wird. Er stellt sicher, dass Inhalte von einem Ort (z.B. src/content/docs/en/index.mdx) gelesen und an einen anderen Ort (z.B. src/content/docs/es/index.mdx) geschrieben werden.
  • Lingo.dev CLI unterstützt keine rekursiven Glob-Muster (z.B. **/*.mdx). Du musst zusätzliche include-Muster erstellen, um Dateien zu übersetzen, die in verschachtelten Verzeichnissen existieren.

Weitere Informationen findest du unter i18n.json-Konfiguration.

Schritt 4. Übersetze den Inhalt

  1. Registriere dich für ein Lingo.dev-Konto.

  2. Melde dich über die CLI bei Lingo.dev an:

    npx lingo.dev@latest login

  3. Führe die Übersetzungspipeline aus:

    npx lingo.dev@latest run

    Die CLI erstellt ein Verzeichnis src/content/docs/es/ zur Speicherung der übersetzten Inhalte und eine i18n.lock-Datei, um zu verfolgen, was bereits übersetzt wurde (um unnötige Neuübersetzungen zu vermeiden).

Schritt 5. Verwende die Übersetzungen

  1. Konfiguriere in der Datei astro.config.mjs die unterstützten Sprachen:

    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. Starte den Entwicklungsserver:

    npm run dev

  3. Navigiere zu folgenden URLs: