import mdx from "@mdx-js/rollup"
import react from "@vitejs/plugin-react"
import path from "node:path"
import rehypePrettyCode from "rehype-pretty-code"
import remarkDirective from "remark-directive"
import remarkGfm from "remark-gfm"
import { defineConfig } from "vite"
import { remarkComponentExample } from "./src/remark-component-example"

export default defineConfig({
  plugins: [
    mdx({
      remarkPlugins: [
        remarkGfm,
        remarkDirective,
        remarkComponentExample,
      ],
      rehypePlugins: [
        [
          rehypePrettyCode,
          {
            keepBackground: false,
            theme: {
              dark: "github-dark",
              light: "github-light",
            },
          },
        ],
      ],
    }),
    react(),
  ],
  resolve: {
    dedupe: ["react", "react-dom"],
    alias: {
      "@": path.resolve(__dirname, "../src"),
      "@site": path.resolve(__dirname, "src"),
    },
  },
})