Gatsby Theme Aoi 概要

Gatsby Theme Aoi は、@cieloazul310 が作成した Gatsby テーマです。Gatsby Theme Aoi には以下のような機能があります。

• MUI v5 に対応
• MUI や emotion の設定不要
• レスポンシブで拡張性のあるレイアウト (Aoi レイアウト)
• 独自のコンポーネント (Aoi コンポーネント)
• サイト全体のグローバルな state を実装 (App State)
• ダークモードを実装

Gatsby Theme Aoi の特徴

MUI v5 に対応

MUI (旧Material-UI) は、Google が開発しているマテリアルデザインで構成された React コンポーネントです。

Gatsby Theme Aoi は2021年9月にリリースされた MUI v5 で構成されています。

MUI や emotion の設定不要

Gatsby で MUI を使うには、Gatsby プロジェクト内に自作のプラグインを作成して Gatsby サイト全体を包む ThemeProvider を設定する必要があります。

Gatsby Theme Aoi では、自作プラグインで MUI や emotion の設定をする必要なく、すぐに MUI コンポーネントを使うことができます。また MUI テーマは Gatsby テーマの Shadowing という機能を使って、Gatsby プロジェクト内で設定することができます。

レスポンシブで拡張性のあるレイアウト (Aoi レイアウト)

Gatsby Theme Aoi では、MUI で構成されたシンプルなレイアウトコンポーネント (Aoi レイアウト) を利用できます。Aoi レイアウトに含まれる Drawer、BottomNavigation、Fab は、props から表示を制御できます。

Aoi レイアウトは手動でインポートする方式なので利用は任意です。また Gatsby テーマ の Shadowing 機能で Aoi レイアウトを部分的に改造することができます。

独自のコンポーネント (Aoi コンポーネント)

Gatsby Theme Aoi では MUI ベース作成したコンポーネント (Aoi コンポーネント) を利用できます。 Aoi コンポーネントには、例えば、MUI の Link コンポーネントに Gatsby Link コンポーネントを実装した <AppLink> などがあります。

サイト全体のグローバルな state を実装 (App State)

Gatsby Theme Aoi では、Gatsby サイト全体で使えるグローバルな state (App State) を実装しています。App State はグローバルな state なのでページを移動しても維持されます。App State はリデューサによる実装で、React フックを使って state や dispatch をどのページからも受け取ることができます。

App State は Gatsby テーマ の Shadowing 機能で Gatsby プロジェクト内から設定することができます。

ダークモードを実装

ダークモードを実装しています。

次へ