Components

@kkhys/ui の共有 Astro コンポーネントと、base.css が全サイトに与える挙動。

Button

components.css のクラスベース。<button> にも<a> にも載る(me / studio)。既定は塗り、--outline /--ghost / --size-icon / --size-sm の修飾子を持つ。

@import "@kkhys/styles/components.css" layer(components);

<button class="btn">Post</button>
<button class="btn btn--outline">Sync</button>
<button class="btn btn--ghost">Cancel</button>
<button class="btn btn--ghost btn--size-sm">Reply</button>

Spinner

無限スクロールの読み込み表示(memo / lgtm)。色は --c-sub を参照する。

import Spinner from "@kkhys/ui/spinner.astro";

BudouX

スロットの日本語を文節境界で <wbr> 区切りにする(me / trends)。.budoux クラス(word-break: keep-all)と組で使う。

import Budoux from "@kkhys/ui/budoux.astro";

<h1 class="budoux"><Budoux>タイトル</Budoux></h1>

LinkCard

OG メタデータ付きの外部リンクカード(me / memo)。メタデータの取得は各アプリの データ層が行い、このコンポーネントは表示だけを担う。og:image があれば blur-up 付きで横型(モバイルは縦積み)になる。

import LinkCard from "@kkhys/ui/link-card.astro";

<LinkCard href={url} title={title} description={description}
  imageSrc={image?.src} favicon={favicon} external />

SiteHeader

小さなサイトの中央寄せヘッダー(memo / lgtm)。href でブランドリンクに、showBack で左端に戻るボタンが付く。

import SiteHeader from "@kkhys/ui/site-header.astro";

<SiteHeader title="LGTM" href="/" />
<SiteHeader title="Thread" showBack />

SiteFooter

中央寄せの © フッター(memo / lgtm)。links で法務リンク列、authorUrl で名前がリンクになる。

import SiteFooter from "@kkhys/ui/site-footer.astro";

<SiteFooter author="Keisuke Hayashi" authorUrl="https://kkhys.me" links={[...]} />

フォーカスリング

キーボードフォーカス(Tab)で全サイト共通のリングが出る。outline ベースなので角丸に追従し、レイアウトを揺らさず、Forced Colors でも消えない。

スクロールバー

ページ・要素とも 8px の細いつまみ(--c-scrollbar)。トラックは透明。