Starlight

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: "ようこそ"
   description: "ドキュメントの使い方"
   ---
   
   ## はじめに
   
   このドキュメントはLingo.devによって自動翻訳されています。
   
   ## 機能
   
   当社の製品には、最新の開発のための強力な機能が含まれています。
   

ステップ3. CLIの設定

プロジェクトのルートに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"
      ]
    }
  }
}

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

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

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

重要な点として：

• [locale]は実行時に置き換えられるプレースホルダーです。これにより、コンテンツが一つの場所（例：src/content/docs/en/index.mdx）から読み込まれ、別の場所（例：src/content/docs/es/index.mdx）に書き込まれることを保証します。
• Lingo.dev CLIは再帰的なグロブパターン（例：**/*.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にアクセス：

   • 英語コンテンツは http://localhost:4321/en
   • スペイン語コンテンツは http://localhost:4321/es