方法

Astro Sarkaraを利用するには2種類の方法があります。一つ目はスターターをクローンする方法です。二つ目は新規または既存のAstroプロジェクトに手動でインストールする方法です。

その1 スターターを使用する

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

スタータープロジェクトのソースは以下になります。

その2 手動でインストール

新規または既存のAstroプロジェクトに手動でインストールする方法です。

0. Astroプロジェクトを作成

新規のAstroプロジェクトを作成する場合はAstroのドキュメントに従って作成してください。

npm create astro@latest

1. Panda CSSをインストール

Panda CSSを手順に沿ってインストールします。

npm install -D @pandacss/dev @pandacss/astro
npx panda init

astro.config.*とpackage.jsonを以下のように設定します。

// astro.config.ts
import { defineConfig } from 'astro/config';
import pandacss from '@pandacss/astro';
 
export default defineConfig({
  integrations: [pandacss()],
});

{
  "scripts": {
    "prepare": "panda codegen",
  }
}

2. Astro Sarkaraをインストール

Astro + Panda CSSプロジェクトの準備が整ったらAstro Sarkaraをインストールします。

npm install @cieloazul310/astro-sarkara

panda.config.tsを以下のように設定します。

// panda.config.ts
import { defineSarkaraConfig } from "@cieloazul310/astro-sarkara/preset";

export default defineSarkaraConfig({
  palette: { 
    primary: "teal", // メインカラー
    secondary: "yellow" // アクセントカラー
  },
  include: ["./src/**/*.{js,jsx,ts,tsx,astro,mdx}"],
  
  // ...pandaConfig,
});

defineSarkaraConfigはPanda CSSのdefineConfigにAstro Sarkaraの設定を組み込んだものです。palette.primary, palette.secondaryは必須の項目で、Panda CSSのデフォルトのカラートークンを設定します。

Astro Sarkaraのインストール、設定の手順は以上となります。