blog-starter-typescript で作ったプロジェクトにstorybookを導入する

概要

前回 の続き
blog-starter-typescript で作ったプロジェクトのUIをいじっていきたいが、その前に開発に必要なstorybookを導入する

作業ログ

storybook の導入

基本は Get started with Storybook and Next.js を基に設定する

storybook を導入する

npx sb init --builder webpack5

.storybook/main.js に reactDocgen: false を追加しておく 追加しないとCannot find module 'webpack/lib/util/makeSerializable.jsのエラーが発生する

module.exports = {  
  "typescript" : { reactDocgen: false },  
// ...
}

静的ファイルを解決するために public を staticDirs に追加しておく

module.exports = {  
  // ...
  "staticDirs": ["../public"],
}

tailwindcss用の設定を追加する

tailwindcssのCSSを読み込むために .storybook/preview.js に以下のCSSを追加しておく

import 'src/styles/index.css'

storybookコマンドは以下のように修正しておくとCSSが即時反映されて便利

  "storybook": "TAILWIND_MODE=watch start-storybook -p 6006",

storybook-addon-next を導入する

next.config.js を空で作っておく

touch next.config.js

中身はこれでOK

module.exports = {}

storybook-addon-next をinstallする

yarn add --dev storybook-addon-next

.storybook/main.js の addons に追加する

module.exports = {  
  "addons": [  
    // ...
    "storybook-addon-next"  
  ],
// ...
}

ここまできたら yarn storybook でstorybookが起動できる

github-actions で storybook を自動でアップロードする

.github/workflows/storybook.yml ファイルを作り以下の内容を書く

name: github pages  
  
on:  
  push:  
    branches:  
      - main  
  
jobs:  
  build-deploy:  
    runs-on: ubuntu-latest  
    steps:  
      - name: checkout  
        uses: actions/checkout@v2  
      - name: install deps  
        run: yarn  
      - name: run build storybook  
        run: yarn build-storybook -o ./dist/storybook  
      - name: Deploy  
        uses: peaceiris/actions-gh-pages@v3  
        with:  
          personal_token: ${{ secrets.ACTIONS_DEPLOY_KEY }}  
          publish_dir: ./dist

ACTIONS_DEPLOY_KEY はリポジトリの settings/secrets/actions に Repository secrets として登録しておく、中身は repo 系全てに権限をつけた Personal access token

概要

前回 の続き
blog-starter-typescript で作った技術ブログのコードブロックにシンタックスハイライトを導入する

作業ログ

highlight.js を導入

Install via NPM package を参考に以下で導入

yarn add highlight.js

blog-starter-typescript で使われている remark 用の plugin である remark-highlight.js を入れようと思ったが

Stability: Legacy. This package is no longer recommended for use. It’s still covered by semantic-versioning guarantees and not yet deprecated, but use of this package should be avoided. Please use remark-rehype to move from remark (markdown) to rehype (HTML) and then replace remark-highlight.js with rehype-highlight.

とのことなので rehype と rehype-highlight を使うように移行する

remark -> rehype に移行してシンタックスハイライトを当てる

rehype-highlightでmarkdownにシンタックスハイライトを適用する を参考に

remark と remark-highlight を導入する

yarn add remark-parse remark-rehype rehype-highlight rehype-stringify

markdownToHtml.ts を以下のように書き換える

import { rehype } from 'rehype'  
import rehypeHighlight from 'rehype-highlight'  
import rehypeStringify from 'rehype-stringify'  
import remarkParse from 'remark-parse'  
import remarkRehype from 'remark-rehype'  
  
export default async function markdownToHtml(markdown: string) {  
  const result = await rehype()  
    .use(remarkParse)  
    .use(remarkRehype)  
    .use(rehypeHighlight)  
    .use(rehypeStringify)  
    .process(markdown)  
  return result.toString()  
}

_app.tsx に シンタックスハイライト用のcssを読み込ませる

//...
import 'highlight.js/styles/monokai.css'
//...

highlight.js/styles の下にいろんなスタイルがあるので好みのものを当てると良い( monokai なのは個人的な好み)

ついでに remark 周りで使わなくなったものを依存から外しておく

yarn remove remark remark-html