Markdownのレンダリング周りをリファクタリングする

[trpfrog]

• DevBlogMarkdown の hooks を整理
• カスタムコンポーネントの定義方法の変更
• @/app/blog/_renderer を整理して @/app/blog/_components と @/markdown に分割
• @/app/blog/_components/article-parts を整理して @/markdown/code-block-components に移動
• ArticleRenderer, RenderInlineMarkdown を削除して新しい RenderMarkdown に統一

カスタムコンポーネントの定義方法の変更

こんな感じで定義できるようにした。Render Component を使うと再帰的なレンダリングも循環インポートにならず簡単に書けて良い

export const myComponentCCBC: CustomCodeBlockComponent = {
  Component: async ({ markdown, context, Render }) => {
    const [md, mdInline] = markdown.split('\n\n')
    return (
      <div>
        {context.blog && <p>現在のページ番号: {context.blog.pagePos1Indexed}</p>}
        <div>
          <Render markdown={md} />
        </div>
        <div>
          <Render markdown={mdInline} mode="inline" />
        </div>
      </div>
    )
  },
  DevComponent: undefined, // 開発時に表示するコンポーネント、基本は使わない
}

RenderMarkdown

今までは Markdown の render は ArticleRenderer を使っていたが、ArticleRenderer は props として BlogPost を受け取る必要があった。そのため、ブログ以外で Markdown のレンダリングをするのは難しかった。

ブログ以外での Markdown のレンダリングには避難ハッチとして @/blog/_renderer/getMarkdownOptions から getMarkdownOptions をインポートし、<RemoteMDX source={markdown} {...getMarkdownOptions()} /> していたがかなり最悪である。

また、インラインの Markdown のレンダリングには別のコンポーネント RenderInlineMarkdown を使う必要があった。

ここで新しく RenderMarkdown を導入し、次のように書けるようにした。

import { RenderMarkdown } from '@/markdown/RenderMarkdown'
import type { BlogPost } from '@trpfrog.net/posts'

const markdown: string = "..."
const blogPost: BlogPost = { ... }

const rendered = (
  <RenderMarkdown 
    markdown={markdown}
    mode="block"
  />
)

const inlineRendered = (
  <RenderMarkdown 
    markdown={markdown}
    mode="inline"
  />
)

const renderedBlog = (
  <RenderMarkdown 
    markdown={markdown}
    mode="block"
    context={{ blog: blogPost }}
  />
)

Todo

• コードブロックから呼び出すコンポーネントの整理
• Markdown renderer の整理
• Markdown renderer からしか呼び出していないコンポーネントを @/components or @/markdown に移動
• @/app/blog/_components, @/app/blog/[slug]/_components をまとめる
• BlogPost を再設計
• @/app/blog/_styles.module.css が複数箇所から参照されてて厳しいので分ける

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
admin.trpfrog.net	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 3, 2025 5:35am
trpfrog-net	❌ Failed (Inspect)			Jan 3, 2025 5:35am