ibulog / smarthr-design-system Goto Github PK

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

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

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

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

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

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

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

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

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

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

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

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

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

/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 )から確認できます。