Starlight

Lingo.dev CLIを使用したStarlightのAI翻訳

Starlightとは？

Starlightは、Astroフレームワーク上に構築されたドキュメンテーションテーマです。美しくアクセシブルなドキュメントサイトを作成するために、サイトナビゲーション、検索、国際化、SEO機能が組み込まれています。

Lingo.dev CLIとは？

Lingo.devは、AI駆動の翻訳プラットフォームです。Lingo.dev CLIはソースファイルを読み取り、翻訳可能なコンテンツを大規模言語モデルに送信し、翻訳されたファイルをプロジェクトに書き戻します。

このガイドについて

このガイドでは、StarlightドキュメントサイトでLingo.dev CLIをセットアップする方法を説明します。Starlightでプロジェクトをスキャフォールドし、翻訳パイプラインを設定し、結果を確認する方法を学びます。

ステップ1. Starlightプロジェクトをセットアップする

  1. 新しいStarlightアプリケーションを作成します：

    npm create astro@latest -- --template starlight

  2. プロジェクトディレクトリに移動します：

    cd <your-starlight-project>

ステップ2. ソースコンテンツを作成する

  1. ソースロケールでドキュメントを保存するディレクトリを作成します：

    mkdir -p src/content/docs/en

  2. ドキュメントコンテンツを含むファイルを作成します（例：src/content/docs/en/index.mdx）：

    ---
title: "Welcome"
description: "Getting started with our documentation"
---

## Introduction

This documentation is automatically translated by Lingo.dev.

## Features

Our product includes powerful capabilities for modern development.

ステップ3. CLIを設定する

プロジェクトのルートに、i18n.jsonファイルを作成します：

{
  "$schema": "https://lingo.dev/schema/i18n.json",
  "version": "1.10",
  "locale": {
    "source": "en",
    "targets": ["es"]
  },
  "buckets": {
    "mdx": {
      "include": [
        "src/content/docs/[locale]/*.mdx",
        "src/content/docs/[locale]/*/*.mdx"
      ]
    }
  }
}

このファイルは以下を定義します：

  • Lingo.dev CLIが翻訳すべきファイル
  • 翻訳する言語間の設定

この場合、設定は英語からスペイン語へMDXファイルを翻訳します。

注意すべき重要な点は次のとおりです：

  • [locale]は実行時に置き換えられるプレースホルダーです。これにより、コンテンツが1つの場所（例：src/content/docs/en/index.mdx）から読み取られ、別の場所（例：src/content/docs/es/index.mdx）に書き込まれることが保証されます。
  • Lingo.dev CLIは再帰的なglobパターン（例：**/*.mdx）をサポートしていません。ネストされたディレクトリ内に存在するファイルを翻訳するには、追加のincludeパターンを作成する必要があります。

詳細については、i18n.json設定を参照してください。

ステップ4. コンテンツを翻訳する

  1. Lingo.devアカウントにサインアップしてください。

  2. CLI経由でLingo.devにログインします：

    npx lingo.dev@latest login

  3. 翻訳パイプラインを実行します：

    npx lingo.dev@latest run

    CLIは翻訳されたコンテンツを保存するためのsrc/content/docs/es/ディレクトリと、翻訳済みの内容を追跡する（不要な再翻訳を防ぐため）i18n.lockファイルを作成します。

ステップ5. 翻訳を使用する

  1. astro.config.mjsファイルで、サポートするロケールを設定します：

    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. 開発サーバーを起動します：

    npm run dev

  3. 以下のURLにアクセスします：