smarthr-design-system

Preview Guideline Page

main branch: https://smarthr-design-system.netlify.app

Local development

.node-versionに記載されているバージョンのNode.jsと最新のpnpmがインストールされている必要があります。

1. Clone this repo
2. In the terminal, navigate (cd) to the repo directory
3. pnpm to install dependencies
4. pnpm dev to start the dev server

関連ドキュメント

• 開発の進め方
• SmartHR Design System 環境構築の手引き 〜GitHubはじめての人向け〜
• コンテンツを追加するまでの道のり 〜GitHubそんなにわからない人向けバージョン〜
• ローカル環境やプレビューで困ったときの解決メモ
• Astroやコンポーネントに関する開発者向けドキュメント

コンテンツを編集するときに注意すること

1. ディレクトリにはindex.mdxが必要です。

index.mdxがないディレクトリがあった場合、左側のサイドバーや、探すページのサイトマップの表示が狂うので注意してください。

2. フロントマターのorderには同階層と比べた位置を指定する

フロントマターの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はヘッダー・フッター・検索ページ下部のサイトマップに反映されます。

3. コンポーネントを使う際の注意

/srcのエイリアスが@/として設定されているので、 mdxファイル内で

import Hoge from '../../../../src/components/hoge'

ではなく、

import Hoge from '@/components/hoge'

と書けるようになっています。積極的に利用してください。

イラスト画像の追加・削除・編集時の注意

イラスト画像はzipでダウンロードできるようにしているため、変更があった場合はzipも更新する必要があります。下記のコマンドを実行してください。

pnpm export:zip-images

Gotchaアイテムの追加・削除・編集方法

Gotchaの画像はサイズが大きいため、画像配信CDNCloudinaryを利用しています。画像の追加・更新の際はCloudinaryのsdsフォルダに追加したい画像をアップロードしてください。

アップロードすると、Cloudinary上で名前がつきますので、/src/data/gotchaItem.jsonにその画像名と、タイトルなどの情報を記載してください。

※Cloudinaryは、1回目の画像アクセス時に画像の最適化・キャッシュを行なうので、初回表示時のみ数秒程度の時間がかかるかもしれません。2回目以降の表示が高速であれば問題ありません。

アイテムを削除したい場合は、/src/data/gotchaItem.jsonから該当の項目を削除すれば表示されなくなります。Cloudinary上の画像もあわせて削除しても構いません。

より詳細なドキュメント

• 開発者向けの情報

スクリプトや自動実行

• GitHub Actions
• Git hooksとhusky
• リンクチェック

Reactコンポーネント

• ComponentPreview
• ComponentStory
• CodeBlock