import type { NextConfig } from 'next'
import createMDX from '@next/mdx'
import remarkSmartypants from 'remark-smartypants'
import remarkMath from 'remark-math'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeExternalLinks from 'rehype-external-links'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrettyCode from 'rehype-pretty-code'
import { transformerCopyButton } from '@rehype-pretty/transformers'
import rehypeKatex from 'rehype-katex'

const nextConfig: NextConfig = {
  output: 'export',
  trailingSlash: true,
  images: { unoptimized: true },
}

const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkSmartypants, remarkMath, remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      [rehypeExternalLinks, { target: '_blank', rel: ['nofollow', 'noopener', 'noreferrer'] }],
      rehypeAutolinkHeadings,
      [rehypePrettyCode, {
        theme: { light: 'github-light', dark: 'github-dark-dimmed' },
        keepBackground: false,
        lineNumbers: true,
        filterMetaString: (metaString: string | undefined) => (metaString || '') + ' showLineNumbers',
        grid: true,
        transformers: [
          transformerCopyButton({ visibility: 'hover', feedbackDuration: 2500 }),
        ],
      }],
      rehypeKatex,
    ],
  },
})

export default withMDX(nextConfig)