Contributing to Ratatui Website

ratatui.rs は Astro と Starlight で構築されています。

ソースは ratatui/ratatui-website GitHub リポジトリから入手できます。

貢献したい場合は、フォークしてリポジトリをクローンすることができます。PR を作成する前に、次の git lfs コマンドを必ず実行してください。

install git lfs

git lfs install
git lfs pull

サイトをローカルで構築して実行するには:

install necessary packages

npm install

run site

npm run dev

ドキュメントを改善したい場合は、お気軽に貢献し、PR を送信してください。

Some Guidelines

• 複数レベルの親リンクを使用するよりも、ルートからのリンクを優先します。(例: ../../backends/comparison/ ではなく /concepts/backends/comparison/)
• リンクの最後にスラッシュを追加することを優先します

Astro and Starlight features

Starlight は、.md ファイル内の Markdown 構文の全範囲と、YAML フロントマター内のタイトルと説明のメタ情報をサポートします。

Markdown でコンテンツを作成する方法の詳細については、starlight を参照してください。

Custom components

この Web サイトでは、カスタム コンポーネントと機能を使用して、保守しやすい高品質のドキュメントを簡単に生成できるようにしています。

LinkBadge

LinkBadge コンポーネントを使用します。

import LinkBadge from "/src/components/LinkBadge.astro";

<LinkBadge text="default" href="" variant="default" />
<LinkBadge text="outline" href="" variant="outline" />
<LinkBadge text="note" href="" variant="note" />
<LinkBadge text="danger" href="" variant="danger" />
<LinkBadge text="success" href="" variant="success" />
<LinkBadge text="caution" href="" variant="caution" />
<LinkBadge text="tip" href="" variant="tip" />

これは次のように表示されます。

default outline note danger success caution tip

Code include

テスト ファイルからコードを含めるには、remark-include-code プラグインを使用します。

```rust
{{#include @code/tutorials/hello-world/src/main.rs:imports}}
```

これは次のように表示されます。

use std::io;

use ratatui::{
    crossterm::event::{self, KeyCode, KeyEventKind},
    style::Stylize,
    widgets::Paragraph,
    DefaultTerminal,
};

svgbob

svgbob で図を描きます:

```svgbob
 ,-------------.
 |Get Key Event|
 `-----+-------'
       |
       |
 ,-----v------.
 |Update State|
 `-----+------'
       |
       |
   ,---v----.
   | Render |
   `--------'
```

これは次のように表示されます。

mermaidjs

mermaidjs で図を描きます:

```mermaid
sequenceDiagram
participant User
participant TUI Application

User->>TUI Application: Input/Event/Message
TUI Application->>TUI Application: Update (based on Model and Message)
TUI Application->>TUI Application: Render View (from Model)
TUI Application-->>User: Display UI
```

これは次のように表示されます。