Gatsby -> Astro 移行

[arrow2nd]

やったこと

• Gatsby -> Astro 移行

変更箇所

ディレクトリ

• 記事が content/articles → src/content/articles に
• 静的ファイルが /static → /public に

コンポーネントのimport周り

• エイリアスが @Components/ から @/components に
• MDX内でimportするコンポーネントを @/components/article/* に集約
• named export から default export に
  • Astroコンポーネントが default export になるのでそれに寄せた形です

ツールチェーン周り

• yarn → pnpm
• styled-componnets → 一部を残して CSS Modules + Sass
• ts-node → tsx
  • type: "module" なスクリプトを実行するため
• husky で push 前に astro check が通るか確認するように
• ESLintの設定をFlatConfigに

データの取得

SmartHR UIとChromaticのデータ (gatsby-source-ui-versions)

• ./scripts/fetch-ui-data.ts をビルド前に実行して取得するように
• 取得したデータは ./src/cache/ にJSONで保存されます
• pnpm dev pnpm build すると必ず実行されるので、直接実行する必要はありません

Storybookのキャプチャ (gatsby-source-component-captures)

• 生成は今まで通り./scripts/component-thumbnails.ts
• Storybookからのデータ取得は ./src/lib/fetchComponentCaptures.ts で行なうように
  • 使用箇所が <ComponentCaptures> 内のみなので、キャッシュ等の仕組みは実装していません

<ComponentStory>で表示するStoryのコード

• ビルド時にGitHubから取得するように

ページのサイドバー (メニュー / 目次) 周り

左側のメニュー

order が同一の場合順不同に

右側の目次

目次の生成をビルド時に行うように

Algoliaのインデックスの更新

• デプロイのワークフローで ./scripts/update-algoliasearch.ts を実行して行なうように

MDXの記法

開く

太字

文章中に ()や「」など記号を含む太字 を挿入する場合は、左右にスペースが必要に

❌️ 文章中に**()など記号を含む太字**を挿入
⭕️ 文章中に **()など記号を含む太字** を挿入

エスケープが必要な文字

{} を表示するには、\{\}のようにバックスラッシュでのエスケープが必要に

コメント

HTML形式ではなくJSX形式に
textlintのコメントも同様です

❌️ <!-- コメント -->
⭕️ {/* コメント */}

リンク

リンク先が外部の場合は自動で別タブで開くように (aタグが不要に)

❌️
<a href="https://smarthr.jp" target="_blank">SmartHR</a>
<a href="https://smarthr.jp" target="_blank">https://smarthr.jp</a>

⭕️
[SmartHR](https://smarthr.jp)
https://smarthr.jp

コードブロック

codeBlock の指定が不要に

❌️
```md codeBlock
# h1
# h2

⭕️
```md
# h1
## h2

インラインコードは今まで通り、<code> or `` です

記事内で使用するコンポーネントの仕様変更

直接コンポーネントを定義している箇所

開く

ReactのAPIを使っていたり、PropsでReactコンポーネントを受け取るコンポーネントは別ファイルに切り出して使うように

❌️

import ComponentPreview from '@/components/ComponentPreview/ComponentPreview'

// useStateを使っている
export const DynamicMessageDialog = () => {
  const [isOpen, setIsOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setIsOpen(true)}>MessageDialogを開く</Button>
      <MessageDialog
        isOpen={isOpen}
        title="メッセージダイアログタイトル"
        description="本文が入ります。"
        closeText="閉じる"
        width={480}
        onClickClose={() => setIsOpen(false)}
        onPressEscape={() => setIsOpen(false)}
        id="dialog-message"
      />
    </>
  )
}

<ComponentPreview>
  <DynamicMessageDialog />
</ComponentPreview>

import { Button, FaCirclePlusIcon } from 'smarthr-ui'

// prefixでReactコンポーネントを受け取っている
<Button prefix={<FaCirclePlusIcon />} size="default">ボタン</Button>

⭕️

import ComponentPreview from '@/components/ComponentPreview/ComponentPreview'

// 別ファイルに切り出した
import DynamicMessageDialog from './_components/DynamicMessageDialog'

<ComponentPreview>
  // 内部でuseStateを使っているで client:load を付けてクライアント側で動くように
  <DynamicMessageDialog client:load />
</ComponentPreview>

// Reactコンポーネントを受け取らないよう修正したコンポーネントを使うように
import SampleButton from './_components/SampleButton'
import { FaCirclePlusIcon } from 'smarthr-ui'

<SampleButton Prefix={FaCirclePlusIcon} size="default">ボタン</SampleButton>

StaticImage

astro:assets の Image コンポーネントを使うように

❌️
<StaticImage src={imageUrl} />

⭕️
import { Image } from 'astro:assets'

<Image src={imageUrl} />

DoAndDont

• img に要素を渡すのではなく、 要素に slot="img" を付けるように
• label に要素を渡すのではなく、要素に slot="label" を付けるように

❌️
<DoAndDont
 type="do"
 img={<StaticImage src={imageUrl} alt="Do" />}
 label={<Text>ほげほげ</Text>}
 width="calc(50% - 8px)"
/>

⭕️
<DoAndDont type="do" width="calc(50% - 8px)">
 <Image slot="img" src={imageUrl} alt="Do" />
 <Text slot="label">ほげほげ</Text>
</DoAndDont>

PageIndex

• <Description> が <div> に (任意のタグが利用可能)
• パス名をname= から slot= で指定するように

❌️
<PageIndex path="/operational-guideline/page-template/" excludes={[]} heading="h2">
  <Description name="style-template">
    ページ（mdxファイル）のスタイル見本です。
  </Description>
  <Description name="component-template">
    [プロダクトのコンポーネント](/products/components/)カテゴリのページを書く際のテンプレートです。
  </Description>
  <Description name="design-patterns-template">
    [プロダクトのデザインパターン](/products/design-patterns/)カテゴリのページを書く際のテンプレートです。
  </Description>
</PageIndex>

⭕️
<PageIndex basePath="/operational-guideline/page-template/">
  <div slot="style-template">
    ページ（mdxファイル）のスタイル見本です。
  </div>
  <div slot="component-template">
    [プロダクトのコンポーネント](/products/components/)カテゴリのページを書く際のテンプレートです。
  </div>
  <div slot="design-patterns-template">
    [プロダクトのデザインパターン](/products/design-patterns/)カテゴリのページを書く際のテンプレートです。
  </div>
</PageIndex>

削除箇所

UIバージョンの切り替え機能

• 仕様からオミットされたため

ツールチェーン周り

• stylelint
  • styled-componnets をほぼ使わなくなったため

改善・修正箇所

• /products/usability/accessibility/ を開いた際にヘッダーのアクセシビリティ、プロダクト両方が選択状態になる
• /products/components/time-picker%20/ -> /products/components/time-picker/ に
• 右の目次の表示速度が向上しました

[uknmr]

GoGo!

[oremega]

No Look LGTM