.profile/blog/BlogPostContent.tsx

import Image from 'next/image'
import Link from 'next/link'
import { cookies } from 'next/headers'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faLink } from '@fortawesome/free-solid-svg-icons'
import { MDXRemote } from 'next-mdx-remote/rsc'
import { nodeTypes } from '@mdx-js/mdx'
import rehypeRaw from 'rehype-raw'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
import { getHighlighter } from 'shiki'

import 'katex/dist/katex.min.css'

import { getTheme } from '@/theme/theme.server'
import { remarkSyntaxHighlightingPlugin } from '@/blog/remarkSyntaxHighlightingPlugin'
import { BlogPostComments } from '@/blog/BlogPostComments'

const Heading = (
  props: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLHeadingElement>,
    HTMLHeadingElement
  >
): JSX.Element => {
  const { children, id = '' } = props
  return (
    <h2 {...props} className='group'>
      <Link
        href={`#${id}`}
        className='invisible !text-black group-hover:visible dark:!text-white'
      >
        <FontAwesomeIcon className='mr-2 inline h-4 w-4' icon={faLink} />
      </Link>
      {children}
    </h2>
  )
}

export interface BlogPostContentProps {
  content: string
}

export const BlogPostContent = async (
  props: BlogPostContentProps
): Promise<JSX.Element> => {
  const { content } = props

  const cookiesStore = cookies()
  const theme = getTheme()

  const highlighter = await getHighlighter({
    theme: `${theme}-plus`
  })

  return (
    <div className='prose mb-10'>
      <div className='px-8'>
        <MDXRemote
          source={content}
          options={{
            mdxOptions: {
              remarkPlugins: [
                remarkGfm,
                [remarkSyntaxHighlightingPlugin, { highlighter }],
                remarkMath
              ],
              rehypePlugins: [
                rehypeSlug,
                [rehypeRaw, { passThrough: nodeTypes }],
                rehypeKatex
              ]
            }
          }}
          components={{
            h1: Heading,
            h2: Heading,
            h3: Heading,
            h4: Heading,
            h5: Heading,
            h6: Heading,
            img: (properties) => {
              const { src = '', alt = 'Blog Image' } = properties
              const source = src.replace('../../public/', '/')
              return (
                <span className='flex flex-col items-center justify-center'>
                  <Image
                    src={source}
                    alt={alt}
                    width={1000}
                    height={1000}
                    className='h-auto w-auto'
                  />
                </span>
              )
            },
            a: (props) => {
              const { href = '' } = props
              if (href.startsWith('#')) {
                return <a {...props} />
              }
              return <a target='_blank' rel='noopener noreferrer' {...props} />
            }
          }}
        />
        <BlogPostComments cookiesStore={cookiesStore.toString()} />
      </div>
    </div>
  )
}