masuP9/smarthr-design-system

Preview Guideline Page

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

Local development

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

開発の進め方

https://smarthr-inc.docbase.io/posts/1726096

SmartHR Design System 環境構築の手引き 〜GitHubはじめての人向け〜

https://smarthr-inc.docbase.io/posts/2162922

コンテンツを追加するまでの道のり 〜GitHubそんなにわからない人向けバージョン〜

https://smarthr-inc.docbase.io/posts/2083788

ローカル環境やプレビューで困ったときの解決メモ

https://smarthr-inc.docbase.io/posts/2289638

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

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

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

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

フロントマターのorderに指定するのは同階層での並び順です。

自身より下層のページがある場合、index.mdxをおく必要がありますが、index.mdxは常に、自身よりひとつ下の階層のファイルと横に並んでいることに注意してください。

例えば、画像のように並べたい場合、

「ライティングガイド」にあたる、/products/writing/index.mdxに指定するorderの値は6になりますが、

/products/writing/index.mdxはエディタでは次のように見えるので、同列に並んでいるbasic-concept.mdxと比べ、1とつけたくなってしまいがちです。

しかし、実際にはそれぞれの階層は次の画像のようになります。

というようにindex.mdxは常にひとつ下の階層と隣になるので、横にあるファイルの階層がひとつ下の階層であることに注意してください。

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

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

import { hoge } from '../../../../src/components/hoge'

ではなく、

import { hoge } from 'Components/hoge'

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

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

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

yarn export:zip-images

ローカルで従業員ログインを動作させる

yarn devで実行されるgatsby developコマンドで立ち上げたローカル環境では従業員ログインが動作しません。

画像のようにログインしていないはずなのに「ログイン済みです」と返ってくるはずです。

これはローカルでは/static/_redirectsに置かれたNetlifyのプロキシ設定が動作しないからです。

具体的な確認方法

ローカルで動作させるためにはNetlify CLIが必要です。

npm install netlify-cli 

で、netlify-cliをインストールし

netlify dev

コマンドでサーバーを立ち上げてください。(デフォルトでhttp://localhost:8888)

それとは別に、

yarn dev

でGatsbyのサーバーを立ち上げます。(デフォルトでhttp://localhost:8000)

そうすれば、netlify-cliで立ち上げたほうのサーバー( http://localhost:8888 )から確認できます。