ダッシュボードのカスタマイズ

Lunaria では、プロジェクトの外観や仕様に合わせてローカライゼーションダッシュボードをカスタマイズするための複数の方法を提供しています。以下のガイドに従って、利用可能なすべてのカスタマイズオプションについて理解しましょう。

タイトルと説明

デフォルトでは、Lunaria はダッシュボード用にデフォルトのタイトルと説明を追加します。これを変更することで、検索エンジンを通じてプロジェクトのダッシュボードを簡単に識別・検索できるようにできます。

Lunaria 設定ファイルに dashboard.title オプションを追加します。定義されたタイトルは、ダッシュボードの見出しにも表示されます：
lunaria.config.json
```
{
  "dashboard": {
    "title": "Lunaria ローカライゼーション状況"
  }
}
```

Lunaria 設定ファイルに dashboard.description オプションを追加します：

 {
   "dashboard": {
     "title": "Lunaria ローカライゼーション状況",
     "description": "Lunaria プロジェクト用のローカライゼーション状況ダッシュボード。"
   }
 }

カノニカル URL

ダッシュボードの異なるバージョン（例えば、ダッシュボード自体のローカライズ版など）を公開したい場合、検索エンジンでのランキング最適化のためにカノニカル URL を設定すると役立ちます。

カノニカル URL を追加するには、Lunaria の設定ファイルで dashboard.site を設定できます：

{
  "dashboard": {
    "site": "https://localization.lunaria.dev/"
  }
}

ファビコン

ファビコンを設定すると、プロジェクトの雰囲気に合わせて、ユーザーのウェブブラウザでダッシュボードを簡単に識別できるようになります。Lunaria では、複数の外部ファビコンと1つのインラインファビコンの両方を定義できます。

ファビコンを追加するには、Lunaria 設定で dashboard.favicon を設定し、external または inline いずれか、または両方のプロパティを使用します。

外部ファビコン

外部ファビコンは、別の URL 経由で読み込むリソースとしてのファビコンです。dashboard.favicon の external プロパティに追加できます。以下の例では .svg および .ico ファビコンの両方を追加しています。

{
  "dashboard": {
    "favicon": {
      "external": [
        {
          "link": "https://lunaria.dev/favicon.svg",
          "type": "image/svg+xml"
        },
        {
          "link": "https://lunaria.dev/favicon.ico",
          "type": "image/x-icon"
        },
      ]
    }
  }
}

インラインファビコン

インラインファビコンは、データ URI によってダッシュボードに直接埋め込まれたローカルな .svg ファビコンです。dashboard.favicon の inline プロパティを通じて追加できます。

プロジェクト内のディレクトリ（例：src/assets/）にファビコンの SVG ファイルを追加します：
- ディレクトリsrc/
  - ディレクトリassets/
    favicon.svg
- lunaria.config.json
Lunaria 設定ファイルの dashboard.favicon にファビコンのパスを inline プロパティとして追加します：
lunaria.config.json
```
{
  "dashboard": {
    "favicon": {
      "inline": "./src/assets/favicon.svg"
    }
  }
}
```

隠しパスベース

ダッシュボードには、ソースコンテンツおよびローカライズ済みコンテンツへのリンクとして複数のパスが含まれています。プロジェクトのルートディレクトリからの距離によっては、これらのパスが非常に長くなることがあります。例えば、コンテンツファイルのパスの固有部分が src/content/docs/ 以降から始まる場合、この部分を隠して関係のある内容のみを表示（例：guides/my-content.mdx）した方がよいかもしれません。

そのような場合、dashboard.basesToHide オプションを Lunaria 設定ファイルに追加し、隠したいパスベースをすべて指定してください。この例では、src/content/docs/ または src/i18n/ から始まるコンテンツファイルを管理していると仮定しています：

{
  "dashboard": {
    "basesToHide": ["src/content/docs/", "src/i18n/"]
  }
}

これにより、src/content/docs/guide.mdx や src/i18n/dictionary.ts などのパス参照は、それぞれの固有部分（guide.mdx および dictionary.ts）に短縮されます。

カスタム CSS

カスタム CSS を追加することで、ダッシュボードをさらにカスタマイズでき、標準で提供される Lunaria のスタイルを編集または拡張できます。

プロジェクト内のディレクトリ（例：src/styles/）に CSS ファイルを追加します。たとえば、デフォルトの本文フォントファミリーを変更できます：
src/styles/lunaria.css
```
:root {
    --ln-font-body: Tahoma, sans-serif;
}
```
CSS ファイルのパスを Lunaria 設定の dashboard.customCss 配列プロパティに追加します：
lunaria.config.json
```
{
  "dashboard": {
    "customCss": ["./src/styles/lunaria.css"]
  }
}
```

カスタムラベルと言語

デフォルトでは、Lunaria ダッシュボードの UI ラベルは英語で提供されています。これらのラベルは、単純なテキストラベル、言語値、あるいは動的な文（例：「完了: X、古くなった: X、欠落: X」）を含めて、完全に変更可能です。

テキストラベル

たとえば、ロケールのローカライズが 100% 完了した場合に表示されるデフォルトメッセージを変更するには、dashboard.ui にある statusByLocale.completeLocalization プロパティを変更します：

{
  "dashboard": {
    "ui": {
      "statusByLocale.completeLocalization": "未完成や古くなった変更は見つかりません。おめでとうございます！"
    }
  }
}

フォーマットラベル

名前が Format で終わる一部のラベルは、{} ブロックが含まれており、これらは他の UI ラベルや内部コンテキストから取得した値で動的に置換されます。たとえば：

"statusByLocale.detailsTitleFormat": "{locale_name} ({locale_tag})",

これらも変更できますが、デフォルトで存在する {} ブロックを削除しないことが強く推奨されます。なぜなら、期待された動的値が挿入されなくなる可能性があるためです。

たとえば、デフォルトの statusByLocale.detailsTitleFormat 値を少しだけ変更することで、言語詳細の要約を Deutsch (de) から Deutsch - de に変更できます：

{
  "dashboard": {
    "ui": {
      "statusByLocale.detailsTitleFormat": "{locale_name} - {locale_tag}",
    }
  }
}

`lang` と `dir`

すべてのラベルを変更可能であるため、ダッシュボードを完全に別の言語に翻訳する必要はありません。これをさらに簡単にするために、dashboard.ui は、直接 HTML lang および dir 属性にマッピングされる lang および dir プロパティを公開しています。

たとえば、ダッシュボードの言語をブラジルポルトガル語に変更するには、以下のようにします（簡潔さのため、多くのプロパティは省略しています）：

{
  "dashboard": {
    "ui": {
      "lang": "pt-BR",
      "statusByFile.heading": "ファイルごとのローカライズ状況",
      "statusByFile.tableRowFile": "ファイル",
    }
  }
}

カスタム UI 要素

Lunaria のダッシュボードは、カスタム CSS と利用可能な設定オプションを通じて柔軟かつ容易にカスタマイズできるように設計されています。それだけでは十分でない場合、Lunaria はレンダラー API を使用してダッシュボードの UI を拡張・上書きできます。

次の内容で、プロジェクトに renderer.config.ts または renderer.config.js ファイルを追加します：

import { defineRendererConfig } from '@lunariajs/core';

export default defineRendererConfig({
  // オプションはここに記述...
});

レンダラー設定ファイルのパスを、Lunaria 設定の renderer 設定プロパティに追加します：
lunaria.config.json
```
{
  "renderer": "./renderer.config.ts"
}
```

カスタムコンポーネント

Lunaria のすべての UI 要素は、フレームワークを使わずに、純粋な HTML で構築されています。作成体験を向上させるために、Lunaria は独自の html タグ付きテンプレートを内蔵しており、自身のコンポーネントを作成するのに役立ちます。

Lunaria におけるコンポーネントは、いくつかのパラメータを受け取り、文字列形式の HTML を返す関数です：

import { html } from '@lunariajs/core';

const CustomParagraph = () => html`<p>これは私のカスタムパラグラフコンポーネントです！</p>`;

これらのコンポーネントはテンプレートリテラルであるため、通常の JavaScript と同じように ${} 表記を使って値を統合できます：

import { html } from '@lunariajs/core';

const favoriteColor = "red";

const ColorComponent = () => html`<p>私の好きな色は ${favoriteColor} です！</p>`.

出力される HTML を見る

<p>私の好きな色は red です！</p>

リスト型の値（例：配列）に対しては .map() メソッドを使って統合することもできます：

import { html } from '@lunariajs/core';

const catColors = ["grey", "white", "black", "orange", "buff"];

const CatColorsList = () => html`<ul>${catColors.map((catColor) => html`<li>${catColor}</li>`)}</ul>`