KJR020's Blog

コンポーネント

ボタン、カード、入力欄、ナビゲーションの用途と使い分けを確認できます。標本では、表示と操作を確認します。各部品の状態、アクセシビリティ、実装元も示します。

4. 基本部品

ボタン、バッジ、カード、入力など、複数の場所で使う最小単位のUIです。同じ用途では、同じ部品を使います。部品ごとの状態と操作も確認できます。

4-1. Button

操作を開始する部品です。

  • ラベル
    • 押したあとに起きることを具体的に書く
  • variantとsize
    • 用途に合うvariantとsizeを、同じButtonコンポーネントから選ぶ

Source src/components/ui/button.tsx

4-2. Badge / Tag

  • Badge
    • 短い状態を示す
  • Tag
    • 記事の分類と、絞り込みへのリンクを示す
  • 使わない場面
    • 主要な操作や長い説明には使わない
Default Astro Error Design System

Tag interaction

記事の分類リンクは、TagListの実装をそのまま使用する。

状態正規仕様
Rest細い輪郭と#記号で、記事リンクとは別のリンクであることを示す
Hover / Focus輪郭と文字を墨色(--foreground)へ、面を--secondaryへ変える。変化の時間は実装の--duration-fastを使う。Focusではフォーカスの輪郭線も表示する
Row coordinationTag上では親PostListItemのタイトル下線と矢印のhoverを重ねない
Reduced motion移動を伴う演出を持たない。色の変化だけで状態を示す

Source src/components/ui/badge.tsx src/components/TagList.astro

4-3. Card

関連する情報と操作を1つの単位にまとめる部品です。Card、Header、Title、Description、Content、Footerを組み合わせて構成します。

デザインシステム
ブログと同じ部品の表示と操作を確認できます。
Connected

カード内の余白は、情報どうしの関係に合わせて選びます。

Source src/components/ui/card.tsx

4-4. Input / TextLink / Kbd

  • Input
    • 目的はlabelで伝える
    • Placeholderは入力内容の補助に限る
  • TextLink
    • 遷移を示す
  • Kbd
    • 利用できるショートカットを示す
テキストリンク ⌘K

Source src/components/ui/input.tsx src/components/Header.astro

6. ブログ固有部品

記事を探す・読む・関連情報へ移動するために、KJR020's Blog固有の情報構造を持つ部品です。実データと状態を含めて再利用し、ページごとに別の見た目や挙動を作りません。

6-1. PageHero

欧文の大見出しと日本語の説明で、ページの目的を一覧本文より先に伝えます。mascotを指定した場合は、下端の罫線上にくりを立たせます。

Posts

ブログ記事一覧です。

Source src/components/PageHero.astro

6-2. PostListItem

罫線で区切った索引の1行です。

  • リンク
    • タイトルのリンクを行全体へ広げる
    • タグリンクだけ前面へ出す
  • Hover
    • タイトルへ下線を引く
    • 矢印を進める

Source src/components/PostListItem.astro src/components/TagList.astro

6-5. Kuri

栗のマスコットです。

  • 配置
    • 罫線を地面に見立てて立たせる
  • 描画
    • public/images/kuri.svgのパスをそのまま使う
    • ライトは塗り、ダークは線画で描く
  • アクション
    • 視線がポインターを追う
    • まばたきする
    • クリックで跳ねる
    • prefers-reduced-motion: reduceでは、移動を伴う動きを省く。まばたきの切り替えは残す
sleepy
asleep

Source src/components/Kuri.astro

6-3. Table of Contents

  • Wide
    • 13〜16列に置き、画面内に追従させる。内部でスクロールでき、常時表示する
  • CompactとMedium
    • 記事ヘッダーの直後に置く
    • Radix Collapsibleで開閉する
    • 項目を選ぶと閉じる
Wide画面内に追従・内部スクロール・常時表示CompactとMedium記事ヘッダー直後・折りたたみ・aria-expanded

Source src/components/toc/TableOfContents.tsx src/components/toc/MobileTOC.tsx

6-4. Scrapbox Card List

Cosenseのメモを、タイトル・説明・更新日の一覧として縦に並べます。

  • リンク
    • 各項目は外部リンクで開く
  • 0件のとき
    • 非表示のdata-notes-empty要素を出力する。親のレイアウトはこの要素を検出して、空のNotes領域を畳む

Source src/components/scrapbox/ScrapboxCardList.tsx