このドキュメントはSmartHR Design Systemの開発者向けです。Astroに関すること、独自に実装している機能、デプロイなどについて記載します。
ローカルでの環境構築や、サイトのコンテンツに関することはREADME.mdを参照してください。
Astroの機能や導入しているプラグインの概要です。
バージョン4系を使っています。
src/pages/以下にあります。
| ファイル | 対応するパス |
|---|---|
| index.astro | / (= トップページ) |
| 404.astro | /404 (= 404ページ) |
| search.astro | /search |
| [...slug].astro | /{slug} |
[...slug].astroは、src/content/articles/以下にある.mdxファイルから生成しています。
@astrojs/mdxを使っています。 内部で使用されているMDXのバージョンは3系です。
ページ生成時には、src/layouts/ArticleLayout.astroをレイアウトに使用し、[...slug].astroでMDXをレンダリングしています。
- 左サイドバーに表示するメニューの生成
- 右サイドバーに表示する目次の生成
- 各ページ最後にある「前へ」「次へ」リンクの生成
詳しくはテンプレート内のコメントもあわせて参照してください。
- 目次のための見出し情報の生成
- タグ変換時のカスタムコンポーネントの適用
- MDXのレンダリング
以下のプラグインで、マークダウン変換時に絵文字の変換やマークアップに必要なデータの生成などを行なっています。
- remark-emoji
- remark-code-block (独自)
- remark-index-id-header (独自)
詳しくは独自プラグインの階層にあるREADME.mdを参照してください。
src/components/article/以下には、MDX内から呼び出すコンポーネントがあります。
また、コードの表示・ライブエディタやSmartHR UIのStorybookを表示しているコンポーネントなどは、Reactで実装されています。 詳しくはそれぞれの階層以下にあるREADME.mdを参照してください。
ビルド時にscripts/fetch-ui-data.tsを実行してSmartHR UIのデータを取得し、src/cache/以下に保存しています。
このディレクトリは.gitignoreに登録されているため、リポジトリには含まれません。
Astroと直接関連しない、独自の機能もいくつかあります。
/scripts以下に、コンテンツの生成やチェックに使うスクリプトがあります。また、それらのスクリプトやLinterを、GitHub Actionsやhuskyなどで自動実行しています。詳しくは以下の各ディレクトリを参照してください。
/scripts: 独自に用意しているスクリプト.husky: コミット時に自動実行されるもの.github/workflows: GitHub Actionsで自動実行されるもの
検索機能にAlgoliaを利用しています。Algoliaのインデックスは、mainブランチのビルド時に更新されます。
インデックスの登録にはscripts/update-algoliasearch.tsを、検索UIにはalgloliasearchとreact-instantsearch-domを使っています。
OGP画像の動的生成とGoatcha画像のホスティングにCloudinaryを利用しています。