カスタムコンポーネント

Methanol は components/ ディレクトリからコンポーネントを読み込み、すべての MDX ファイルで利用可能にします。コンポーネントは rEFui を使用してレンダリングされるため、カスタム UI を構築する際にはその JSX ランタイムや API を活用できます。

コンポーネントの検出

• サポートされている拡張子：.jsx, .tsx, .js, .ts
• ファイル名がそのままコンポーネント名になります。
• プロジェクト独自のコンポーネントは、テーマが提供する同名のコンポーネントを上書きします。

例：

components/
  Callout.jsx
  Hero.client.jsx
  Toc.static.jsx

クライアント専用コンポーネント

クライアント側でのみ実行されるコンポーネントには、.client サフィックスを付与します。これは、ブラウザ API に依存するコンポーネントに役立ちます。

components/ThemeSearch.client.jsx

静的コンポーネント

ビルド時に評価・レンダリングされるべきコンポーネントには、.static サフィックスを使用します。

クライアント専用コンポーネントに対応するサーバー/静的コンポーネントが存在しない場合、Methanol はクライアントコンポーネントを静的にレンダリングしようと試みます。クライアントコンポーネントがブラウザ専用の API を使用している場合は、サーバーサイドレンダリング用に適切な静的コンポーネントを用意する必要があります。

components/Notice.static.jsx

定義と使用例

// components/Callout.jsx
export default function Callout({ title }, ...children) {
	return (
		<div class="callout">
			<strong>{title}</strong>
			<div>{...children}</div>
		</div>
	)
}

<Callout title="Tip">
  段落を短く保つことで、情報の可読性を高めることができます。
</Callout>