Panda CSSでスタイリングをしたAstroのコンポーネントライブラリAstro Sarkaraを作成しました。このサイトのレイアウトおよびデザインはこのライブラリを作成しています。基本的には自分で使うためのライブラリですが、NPMで公開しているので誰でも使うことができます。

Astro Sarkaraの特徴

• 簡単に使えるいくつかのコンポーネント
• 簡単に使えて拡張性の高いレイアウト (ドロワー付き)
• ダークモードの実装
• SEOの設定済み

使い方

その1 テンプレートを使用する

npm create astro@latest -- --template cieloazul310/astro-sarkara-starter

Astro Sarkaraのテンプレートを用意しています。上記のコマンドでプロジェクトを作れるので、Astro Sarkaraのみならず、AstroとPanda CSSをサクッと使ってみたいという場合におすすめです。

その2 既存のAstroプロジェクトに導入する

# Panda CSSのインストールと初期化
npm install -D @pandacss/dev @pandacss/astro
npx panda init

# Astro Sarkaraのインストール
npm install @cieloazul310/astro-sarkara

既存のAstroプロジェクトにインストールする場合は、Panda CSSのインストールが必要になります。詳しい使い方は下記チュートリアルをご覧ください。

リポジトリの構造

Turborepo を導入したmonorepoで作成しています。
バージョン管理とリリースは changesets で行い、リリースとNPMへの公開はGitHub Actionsで自動化しています。

ライブラリ作成によって得られたTipsは別途記事にしていきたいと思います。

Okade Okkadu / Rajinikanth (1995)