いい感じに開発しながら品質の高い納品を目指す。
コード規約を守るため
bun install後に以下を実施して下さい。
bunx lefthook add pre-commit
commit時に自動でtype check eslint markup-lint prettierで整形とチェックをします。
bun i
: インストール
bun run dev
: ローカルサーバーでの開発
bun run build
: ビルド
npm run generate:components-export-list
: コンポーネントリスト生成。src/components/index.ts,recipes.tsから一括インポートできるようにするため
bun watch:components-export-list
: コンポーネント追加時にサーバーを止めたくないので監視
bun generate-component
: scaffdogで必要ファイルを生成
bun check
: tsc,biome,markuplint,stylelint,prettierを実行する
pages/inc
内から参照する.html
を追加する。アイコンはsvg spriteを使用する。ministaのIconコンポーネントは以下の点でデメリットがある。
アイコン自体はテキスト等でラベリングがない場合以外はAOMに挿入されないようにしたほうが良い。プレゼンテーションとしてのアイコンはaria-hidden="true"
とするか背景画像としてcssで表示させることが望ましい。マークアップしてからわざわざaria-hidden属性を付与するのも避けたいため、基本的にはbefore/after疑似要素の背景画像として設置する。
ライブラリとしてsvg-spriteを使用する。
アイコンはsrc/assets/icons
内に格納する。
以下コマンドを用意
svg sprite作成
bun generate:svg-sprite
一覧をローカルサーバーで確認
bun view-svg-sprite
(やはりアクセシビリティツリーからは除外したほうが管理し易い)
<svg aria-label="plus icon">
<title>icon title</title>
<use href="https://github.com/monosus/super-static/blob/main/assets/icons/sprite.svg#plus" />
</svg>
推奨
.icon-plus::before {
/* ... */
background: url('/assets/icons/sprite.svg#plus') no-repeat;
content: '';
}
svg-spriteを使用する場合cssでfillをコントロールすることが難しいため単色のアイコンの色を変更したい場合はministaのIconコンポーネントを使用する。
[.github/workflows/auto_create_branch.yml]
issueを作成し担当者のアサインとenhancement,bug,documentation
のいずれかのラベルを付与するとbranchがされドラフトでPRが作成されます。
branchでの作業が終わったらPRのドラフトを外しレビュー担当者を指定してください。