Mermaidを実装したよ

contentlayerというのでデータを作って.contentlayerに収納してるっぽい👀

app/blog/[...slug]/page.tsx

import { allBlogs, allAuthors } from 'contentlayer/generated'

export default async function Page({ params }: { params: { slug: string[] } }) {
	const post = allBlogs.find((p) => p.slug === slug) as Blog

	return (
	<Layout content={mainContent} authorDetails={authorDetails} next={next} prev={prev}>

		<MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc} />

	</Layout>
		)
	}

参考記事

Contentlayer で記事を markdown 管理する

公式Doc

// contentlayer.config.ts
import { makeSource } from '@contentlayer/source-files'
import highlight from 'rehype-highlight'
import remarkGfm from 'remark-gfm'

export default makeSource({
  // ...
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [highlight],
  },
})

Contentlayer/MDX-plugins

やってみた

contentlayer.config.ts

export default makeSource({
	contentDirPath: 'data',
	documentTypes: [Blog, Authors],
	mdx: {
     cwd: process.cwd(),
     remarkPlugins: [
       remarkExtractFrontmatter,
       remarkGfm,
       remarkCodeTitles,
       remarkMath,
       remarkImgToJsx,
	  ],
	rehypePlugins: [
      rehypeSlug,
      rehypeAutolinkHeadings,
      rehypeKatex,
      [rehypeCitation, { path: path.join(root, 'data') }],
      [rehypePrismPlus, { defaultLanguage: 'js', ignoreMissing: true }],
      rehypePresetMinify,
+     rehypeMermaid,
	 ],
},

rehypeMermaidの部分がハイライトエラーになってる。

   ╔═════════════════════════════════════════════════════════╗
   ║ Looks like Playwright Test or Playwright was just installed or updated.
   ║ Please run the following command to download new browsers:
   ║                                                                                                                          ║
   ║     yarn playwright install                                                                                ║
   ║                                                                                                                          ║
   ║ <3 Playwright Team                                                                                        ║
   ╚═════════════════════════════════════════════════════════╝

yarn add playwrightして、yarn playwright installしてみた。

できたーーーーーーー＼(^o^)／

build対策

yarn devはできたけど、yarn buildができず、サーバーはエラー。

./contentlayer.config.ts:151:7 Type error: Type 'Plugin<[(RehypeMermaidOptions | undefined)?], Root>' is not assignable to type 'Pluggable<any[]>'. Type 'Plugin<[(RehypeMermaidOptions | undefined)?], Root>' is not assignable to type 'Plugin<any[], any, any>'. The 'this' types of each signature are incompatible. Type 'Processor<void, any, void, void> | Processor<void, any, any, any> | Processor<any, any, void, void> | Processor<void, void, void, void>' is not assignable to type 'Processor<undefined, undefined, undefined, undefined, undefined>'. Type 'Processor<void, any, void, void>' is missing the following properties from type 'Processor<undefined, undefined, undefined, undefined, undefined>': compiler, freezeIndex, frozen, namespace, and 3 more. 149 | [rehypePrismPlus, { defaultLanguage: 'js', ignoreMissing: true }], 150 | rehypePresetMinify, > 151 | rehypeMermaid, | ^ 152 | ], 153 | }, 154 | onSuccess: async (importData) => {

根本的な解決にはならないけど、型定義をanyにして回避することにした。

+ const rehypeMermaidAny = <any>rehypeMermaid

rehypePlugins: [
	// 他のプラグイン...
+	rehypeMermaidAny,
	],

ローカルでyarn buildはOK!!! (⊙ꇴ⊙)！！

サーバーではbuildできない

    ╔═════════════════════════════════════════════════════════╗
    ║ Looks like Playwright Test or Playwright was just installed or updated.
    ║ Please run the following command to download new browsers:
    ║                                                                                                                          ║
    ║     yarn playwright install                                                                                ║
    ║                                                                                                                          ║
    ║ <3 Playwright Team                                                                                        ║
    ╚═════════════════════════════════════════════════════════╝

またこのエラー。 buildは、scriptにplaywrightを入れることにした。

package.json

"build": "yarn playwright install && cross-env INIT_CWD=$PWD next build && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/postbuild.mjs",

yarn playwright install &&を追加しただけ！！