サイトツール

DOCUMENTS / DEVELOP

フロントエンドと共通部品

共通ページ構造、Reader、操作規約で既存の読書体験を守りながら拡張します。

ページ構成

主要領域は百科、記事、探索、LABs、貢献です。機能のパスと分類は src/lib/siteFeatures.mjs に集約し、トップページ、ナビゲーション、下位ページに別々の固定パスを書きません。下位ページには WorkspaceShell と WorkspaceHeader などの共通部品を使い、戻る操作と主操作の位置をそろえます。新機能の入口を増やす前に所属領域と狭い画面の配置を決めます。

読書と表示

百科項目、記事、説明書はそれぞれ適切な Reader.astro の形態を再利用します。この説明書は variant="guide" に Markdown の見出し情報を渡し、既存の目次とアンカー動作を使います。似た CSS を新設してリーダーの代用にはしません。トップページの鮮明なホバー背景、項目リーダーの背景、画像と名前の形態切替、分割展開は回帰確認の基準です。共通スタイルを変える際は必ず確認します。

操作と動き

ページ移動、表示切替、条件絞り込みは意味が異なります。スライダーは実際の表示切替にだけ使います。操作部品には明確なフォーカス、読み込み、空、失敗の状態を用意し、画像とフォントの寸法を先に確保します。アニメーションは途中で切り替え可能とし、動きを減らす設定に従います。背景やホバー表現を削ってレイアウトの跳びを隠さないでください。共通 UI は中性色を使い、項目のテーマ色は対応する内容に限ります。

コンポーネントより先に意味を決める

ページ間移動はテキストリンク・パンくず・WorkspaceLinkNavigation、同一ページ内の排他的な表示は ContentTabs または現在位置の明確な選択組、絞り込みは検索と WorkspaceFilters を使います。読み込み・空結果・エラーには WorkspaceState と WorkspaceEmptyState を使います。戻る操作は見出しの上、主操作は見出しの右(狭い画面では下)です。無関係なページに装飾的なスライダーを追加しません。

長文は Reader.astro を使います。百科は画像とサイドバーを持つ variant="entry"、記事は essay レイアウト、マニュアルは variant="guide" とレンダラーの headings を使用します。目次の slug と本文見出しの id は一致させます。Reader がスクロール追跡、狭い画面、キーボード、動きを減らす設定を扱うため、ページごとに似たスクリプトを作りません。

視覚・操作の回帰確認

ホームの項目・楽曲・リリースの鮮明なホバー画像、項目の背景と局所テーマ色、画像と名前の形態選択、分割展開を保ちます。画像比率と控えの寸法を確保し、初回配置は移動アニメーションを再生しません。素早い切替では前のアニメーションを中断します。明暗、キーボード焦点、狭い画面、動きを減らす設定を確認します。ページ CSS は内容配置に絞り、共通ボタンや絞り込み状態を上書きしません。

KAMITSUBAKI WIKI

観測站にログイン

既存の AI アカウントを利用できます。ブックマークを端末間で同期。記事はログインせずに読めます。

マイスペース →