main branch: https://smarthr-design-system.netlify.app
.node-versionに記載されているバージョンのNode.jsと最新のpnpmがインストールされている必要があります。
- Clone this repo
- In the terminal, navigate (
cd) to the repo directory pnpmto install dependenciespnpm devto start the dev server
https://smarthr-inc.docbase.io/posts/1726096
https://smarthr-inc.docbase.io/posts/2162922
https://smarthr-inc.docbase.io/posts/2083788
https://smarthr-inc.docbase.io/posts/2289638
https://github.com/kufu/smarthr-design-system/blob/main/CONTRIBUTING.md
index.mdxがないディレクトリがあった場合、左側のサイドバーや、探すページのサイトマップの表示が狂うので注意してください。
フロントマターのorderに指定するのは同階層での並び順です。
自身より下層のページがある場合、index.mdxをおく必要がありますが、index.mdxは常に、自身より1つ下の階層のファイルと横に並んでいることに注意してください。
例えば、画像のように並べたい場合、
「ライティングガイド」にあたる、/products/writing/index.mdxに指定するorderの値は6になりますが、
/products/writing/index.mdxはエディタでは次のように見えるので、同列に並んでいるbasic-concept.mdxと比べ、1とつけたくなってしまいがちです。
しかし、実際にはそれぞれの階層は次の画像のようになります。
というようにindex.mdxは常に1つ下の階層と隣になるので、横にあるファイルの階層が1つ下の階層であることに注意してください。
例外的に/products/components/以下の各コンポーネントのページではorderは適用されません。コンポーネントの名前順に並びます。
また、第2階層（「はじめに」「基本原則」など）については別途/src/data/navigationItem.jsonに定義された順序が適用されます。このJSONはヘッダー・フッター・検索ページ下部のサイトマップに反映されます。
/srcのエイリアスが@/として設定されているので、 mdxファイル内で
import Hoge from '../../../../src/components/hoge
'ではなく、
import Hoge from '@/components/hoge
'と書けるようになっています。積極的に利用してください。
イラスト画像はzipでダウンロードできるようにしているため、変更があった場合はzipも更新する必要があります。下記のコマンドを実行してください。
pnpm export:zip-images
Gotchaの画像はサイズが大きいため、画像配信CDNCloudinaryを利用しています。画像の追加・更新の際はCloudinaryのsdsフォルダに追加したい画像をアップロードしてください。
アップロードすると、Cloudinary上で名前がつきますので、/src/data/gotchaItem.jsonにその画像名と、タイトルなどの情報を記載してください。
※Cloudinaryは、1回目の画像アクセス時に画像の最適化・キャッシュを行なうので、初回表示時のみ数秒程度の時間がかかるかもしれません。2回目以降の表示が高速であれば問題ありません。
アイテムを削除したい場合は、/src/data/gotchaItem.jsonから該当の項目を削除すれば表示されなくなります。Cloudinary上の画像もあわせて削除しても構いません。