import { defineConfig } from "vite"; import blog from "@bspeice/vite-plugin-blog"; import mdx from "@mdx-js/rollup"; import react from "@vitejs/plugin-react-swc"; import rehypeHighlight from "rehype-highlight"; import { Root, Element } from "hast"; import { Plugin } from "unified"; import { visit } from "unist-util-visit"; // Add the `hljs` class to `pre` so it picks up the highlight background color const highlightPre: Plugin<[], Root> = () => { return (tree) => { visit(tree, (node, _, parent) => { if ( !parent || (parent as Element).tagName !== "pre" || (node as Element).tagName !== "code" ) { return; } const parentElement = parent as Element; const parentProperties = parentElement.properties; if (!parentProperties) { return; } if (!Array.isArray(parentProperties["className"])) { parentProperties["className"] = ["hljs"]; } else { parentProperties["className"].unshift("hljs"); } }); }; }; export default defineConfig({ build: { rollupOptions: { external: ["react-icons"], }, }, plugins: [ blog({ "/": "/pages/index.tsx", "/about": "/pages/about.mdx", "/2019/02/the-whole-world": "/posts/2019/02/the-whole-world.mdx", }), mdx({ rehypePlugins: [rehypeHighlight, highlightPre] }), react(), ], });