Gatsbyベースのブログ環境のライブラリアップデート 2022年秋
ひさびさにブログでも書こうと思ったら、ブログ環境を壊してしまっていることに気がつきました。
このブログ環境はGatsbyを利用しており、 piyoppi/piyoppi.github.io をフォークして開発しています。 依存ライブラリの更新にDependabotを活用しておりますが、まじめに変更差分をチェックせずにDependabotが作ってくれるPull Requestをポチポチとマージしてしまっていたのでした。
破壊的変更を含むライブラリ更新も含まれていたようで、動かなくなってしまっていたのでした。
ということで直していきます。
gatsby-plugin-mdx
MDXをレンダリングするために gatsby-plugin-mdx
を利用しておりましたが、 バージョン4以降は MDX v2 互換となった影響で破壊的変更が入っています。
マイグレーションガイド に従って作業します。
remark-gfm の導入
表などのマークダウン表記は GitHub Flavored Markdown に基づくものですが、 gatsby-plugin-mdx
バージョン4以降は remark-gfm
を別途インストールしないと <table>
要素に変換されません。
remark-gfm
をインストールしたうえで、以下の差分を gatsby-config.js
に追加します。
plugins: [
{
resolve: "gatsby-plugin-mdx",
options: {
+ mdxOptions: {
+ remarkPlugins: [
+ require('remark-gfm')
+ ],
},
},
],
}
gatsby-remark-prismjs の利用をやめて @mapbox/rehype-prism を使う(様子見)
最新の gatsby-remark-prismjs
をインストールすると、インライン要素として表示してほしい <code>
要素がブロック要素である <div>
要素で囲まれるようになってしまいました。
以下のように記述すると、本来であれば同じ行に code1
と code2
が描画されてほしいのですが、それぞれ <div>
タグで囲われてしまい、同じ行に表示されません。
`code1` `code2`
原因は結局わからずなのですが、ひとまず MDX - Syntax higilighting で解説されている @mapbox/rehype-prism
を利用することとして回避しました。
@mapbox/rehype-prism
をインストールしたうえで、以下の差分を gatsby-config.js
に追加します。
plugins: [
{
resolve: "gatsby-plugin-mdx",
options: {
mdxOptions: {
+ rehypePlugins: [
+ require('@mapbox/rehype-prism')
+ ]
}
},
},
],
}
しばらくはこれで様子を見ようと思います。
ブログ記事ページの <MDXRenderer>
の置き換え
※詳細は公式ドキュメントのマイグレーションガイドをご覧ください。
これまでは、MDXフォーマットのテキストを <MDXRenderer>
タグで囲むことで描画していました。
export default function BlogPost({ data }) {
return (
// data.mdx.body には mdxファイルのテキストが入っている
<MDXRenderer>
{ data.mdx.body }
</MDXRenderer>
)
}
export const query = graphql`
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
}
body
}
}`
v4以降は <MDXRenderer>
が廃止されたようなので、マイグレーションガイドに従い、ページコンポーネントを以下のように修正します。
- export default function BlogPost({ data }) {
+ export default function BlogPost({ children }) {
return (
- <MDXRenderer>
- { data.mdx.body }
+ { children }
- </MDXRenderer>
)
}
export const query = graphql`
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
}
body
}
}`
また、 gatsby.config.js
を以下のように修正します。createPage
の際のページコンポーネントのパスに ?__contentFilePath
クエリパラメータをつけることで、ページコンポーネントに渡されるオブジェクトに、上記のように children
(コンパイル済みMDXコンポーネント)が追加されるようです。
exports.createPages = async ({ graphql, actions }) => {
const posts = await graphql(`
query {
- allMdx(filter: {fileAbsolutePath: {regex: "/posts/"}}) {
+ allMdx(filter: {internal: {contentFilePath: {regex: "/posts/"}}}) {
nodes {
id
- slug
+ fields {
+ slug
+ },
+ internal {
+ contentFilePath
+ }
}
}
}
`)
}
posts.data.allMdx.nodes.forEach(param => {
createPage({
path: `/weblog/${param.fields.slug}`,
- component: path.resolve(`./src/templates/post.js`),
+ component: path.resolve(`./src/templates/post.js`) + `?__contentFilePath=${param.internal.contentFilePath}`,
context: {
id: param.id,
},
})
})