Astro SarkaraにはいくつかのAstroコンポーネントを用意しています。これを利用するには、Astroコンポーネント内のフロントマターでインポートを行います。また同様にMDXファイル内でも使用することができます。

---
import {
  Badge,
  Button,
  IconButton,
  Link,
  PanelLink,
  Paper,
  PaperLink,
} from "@cieloazul310/astro-sarkara";
---

基本コンポーネント

Alert

アラートを表示するコンポーネント。

<Alert status="success" title="Good job!">成功しました。</Alert>
<Alert status="info">AstroはTypeScriptにデフォルトで対応しています。</Alert>
<Alert status="warning">`mjs`と`cjs`が混在しないように注意してください</Alert>
<Alert status="danger" title="Error">失敗です。</Alert>
<Alert status="tips" title="Tips">コンテンツコレクションを使うことができます。</Alert>

Badge

バッジコンポーネント。

<Badge>Badge</Badge>
<Badge colorPalette="primary">Primary</Badge>
<Badge colorPalette="red" size="md">Red</Badge>
<Badge colorPalette="secondary" as="a" href="/">As link</Badge>

Badge Primary Red As link

Button

ボタンコンポーネント。

<Button>Button</Button>
<Button size="sm" colorPalette="primary">Primary sm</Button>
<Button colorPalette="secondary" visual="outline">
  Outline
</Button>
<Button size="lg" icon="mdi:arrow-right-bold-circle" iconPlace="end">
  With Icon
</Button>
<Button colorPalette="primary" as="a" href="/">
  As Link
</Button>

Button Primary sm Outline With Icon As Link

IconButton

アイコンボタンコンポーネント。アイコンはastro-iconで実装し、Iconifyでアイコンネームを取得可能です。

<IconButton icon="mdi:menu" />
<IconButton icon="mdi:menu" shape="circle" colorPalette="primary" />
<IconButton icon="mdi:download" visual="outline" colorPalette="secondary" />

Link

AstroはGatsbyと異なり、リンクのベースパスのプレフィックスを行いません。https://xxx.github.io/base-path/がサイトのURLだとすると、サイト内リンクのすべてに<a href="/base-path/{path}/">のようにベースパスを記載する必要があります。

Astro Sarkaraの<Link>コンポーネントはastro.configで指定されたベースパスを取得し自動的に付与する機能があります。また外部リンクの場合はtarget="_blank"とrel="noreferrer noopener"を自動的に付与します。

この機能は他のリンクコンポーネントにも実装しています。また自作のAstroコンポーネントに使う場合は同様の機能を実装するフックを用意しています。

<Link href="/">Internal</Link>
<Link href="https://panda-css.com/">External</Link>
<Link href="https://panda-css.com/" colorPalette="secondary">Secondary color</Link>

Internal
External
Secondary color

PanelLink

パネル型のリンクコンポーネント。

<PanelLink href="/">Internal</PanelLink>
<PanelLink href="https://iconify.design/">External</PanelLink>
<PanelLink href="https://iconify.design/" colorPalette="secondary" disableBorder>Disable border</PanelLink>

Paper

Astro Sarkaraデザインの基礎となるプライマリーカラーの半透明の背景を持つ<div>要素。

---
import { vstack } from "@cieloazul310/sarkara-css/patterns";
---

<div class={vstack({ gap: 2, alignItems: "stretch" })}>
  <Paper>Paper</Paper>
  <Paper>
    <Paper>Nested</Paper>
  </Paper>
  <Paper colorPalette="secondary">
    Secondary
  </Paper>
</div>

PaperButton

Paperのスタイルを持ったボタン型のリンク。

---
import { vstack } from "@cieloazul310/sarkara-css/patterns";
---

<div class={vstack({ gap: 2, alignItems: "stretch" })}>
  <PaperLink href="/">Internal</PaperLink>
  <PaperLink href="https://astro.build" colorPalette="secondary">
    External
  </PaperLink>
  <PaperLink href="/" selected>Selected</PaperLink>
</div>