セットアップ
開発環境をセットアップする
Riebeckite 本体を開発する場合は、リポジトリをクローンして依存関係をインストールします。
git clone https://github.com/rerurate/riebeckite.git
cd riebeckite
pnpm install
pnpm build
これで、ワークスペース内のパッケージを開発できる状態になります。
開発サーバーを起動する
pnpm dev
website の参照アプリを使うと、Riebeckite への変更を実際のサイトとして確認できます。
website は単なるデモではありません。フレームワーク開発時に、Core、プラグイン、テーマ、インテグレーションが正しく組み合わさることを確認するための参照アプリでもあります。
リポジトリの構成
Riebeckite は pnpm workspace を使ったモノレポです。大きく次のように分かれています。
Diagram source
flowchart TD
Repo["riebeckite/"]
Repo --> Packages["packages/"]
Repo --> Website["website/"]
Repo --> Docs["docs/"]
Repo --> Templates["templates/"]
Packages --> Core["core<br/>共通基盤"]
Packages --> CLI["cli<br/>CLI"]
Packages --> Integration["integrations/honox<br/>HonoX 接続"]
Packages --> Create["create-riebeckite<br/>サイト生成"]
Packages --> Plugins["plugins/*<br/>公式プラグイン"]
Packages --> Themes["themes/*<br/>公式テーマ"]
Website --> Web["app/<br/>ドキュメント / 参照アプリ"]
Docs --> DocSource["ドキュメントソース"]
Templates --> Analytics["analytics-cloudflare<br/>Analytics デプロイテンプレート"]
| パス | 役割 |
|---|---|
packages/core |
設定、コンテンツ、パイプライン、プラグイン、テーマ、診断、可観測性などの共通基盤 |
packages/cli |
riebeckite CLI |
packages/integrations/honox |
HonoX / Vite インテグレーションとスキャフォールドジェネレーター |
packages/create-riebeckite |
サイト作成用の公開エントリーポイント |
packages/plugins/* |
公式プラグイン |
packages/themes/* |
公式テーマ |
website |
公式ドキュメントサイトを兼ねたフレームワーク開発用の参照アプリ |
docs/ |
公式ドキュメントアプリが読み込むドキュメントソース |
templates/analytics-cloudflare |
Analytics Worker のデプロイ用テンプレート |
各パッケージの詳しい責務については Architecture を参照してください。
よく使うコマンド
フレームワーク開発でよく使うコマンドは次のとおりです。
| コマンド | 用途 |
|---|---|
pnpm dev |
開発用サイトを起動する |
pnpm build |
ワークスペースをビルドする |
pnpm check |
リポジトリ全体を検査する |
pnpm test |
テストを実行する |
pnpm typecheck |
TypeScript の型を検査する |
pnpm check:docs |
ドキュメントを検査する |
pnpm changes:new |
利用者に影響する変更のエントリを作成する |
pnpm changelog |
変更履歴とリリースノートページを再生成する |
pnpm check:changes |
変更エントリと生成ファイルを検証する |
pnpm docs:sync |
原本のプラグイン / テーマのドキュメントからパッケージ README を生成する |
pnpm check:plugin-docs |
プラグインのドキュメントと生成した README の同期を検査する |
pnpm check:theme-docs |
テーマのドキュメントと生成した README の同期を検査する |
pnpm check:scaffold |
生成される starter、minimal、showcase、empty の各プリセットを検査する |
対象を絞れる場合は、次のように限定的なコマンドを使います。
pnpm check:docsは Markdown のリンクとドキュメントの構造を検査します。pnpm check:scaffoldはstarter、minimal、showcase、emptyの各プリセットが生成するスキャフォールドの出力を検査します。pnpm typecheckはパッケージの型を検査します。pnpm --filter <package> testは、テストがある場合にそのパッケージのテストを実行します。
ドキュメントを変更した場合
pnpm check:docs
Markdown のリンクとドキュメントの構造を検査します。ドキュメントを追加・移動・削除したときに実行してください。
プラグイン / テーマのドキュメントを変更した場合
プラグイン / テーマのドキュメントは、次の所有関係で管理します。
原本:
docs/docs/plugins/<slug>.md
docs/docs/plugins/<slug>.ja.md
docs/docs/themes/<slug>.md
docs/docs/themes/<slug>.ja.md
生成物:
packages/plugins/<slug>/README.md
packages/plugins/<slug>/README_ja.md
packages/themes/<slug>/README.md
packages/themes/<slug>/README_ja.md
編集するのは原本のドキュメントだけです。生成された README を手動で編集しないでください。変更後は次を実行します。
pnpm docs:sync
pnpm check:plugin-docs
pnpm check:theme-docs
スキャフォールドを変更した場合
pnpm check:scaffold
生成される starter、minimal、showcase、empty の各プリセットが正しい構成になっているかを検査します。生成された設定とファイルだけを確認し、インストールとビルドは実行しないため、残り4つのプリセット(digital-garden、blog、docs、portfolio)は対象外です。次のようなものを変更した場合に重要です。
- スキャフォールドジェネレーター
- プリセット
- テンプレート
- 生成される
package.json - サイトの初期構成
パッケージの型を確認する
pnpm typecheck
TypeScript の型エラーを確認します。
特定のパッケージのテストを実行する
変更したパッケージだけを確認したい場合は、--filter を使用できます。
pnpm --filter <package> test
たとえば特定のプラグインだけを変更した場合は、最初からリポジトリ全体のテストを実行するのではなく、対象パッケージのテストから確認できます。