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