I currently have an mdx-bundler wrapper function something like this:
return await bundleMDXFile(filePath, {
cwd: path.dirname(filePath),
esbuildOptions: options => {
options.platform = 'node'
// Set the `outdir` to a public location for this bundle.
options.outdir = `${process.cwd()}/public/img/${getSlug(filePath)}`
options.loader = {
...options.loader,
// Tell esbuild to use the `file` loader for pngs
'.png': 'file',
'.jpg': 'file'
}
// Set the public path to /img/about
options.publicPath = `/img/${getSlug(filePath)}`
// Set write to true so that esbuild will output the files.
options.write = true
return options
},
xdmOptions: options => {
options.remarkPlugins = [
...(options.remarkPlugins ?? []),
...remarkPlugins
]
options.rehypePlugins = [
...(options.rehypePlugins ?? []),
...rehypePlugins
]
return options
}
})
You'll see that I'm able to use details from the context to configure esbuild for mdx-bundler. I use the filePath I've passed in to set an assets bundle path. I can also set the cwd to the folder of the file being bundled, allowing for easy linking of assets in the same folder as the MDX file (bundleMDXFile does it automatically). These options enable some nice functionality.
In contentlayers config I could imagine something like this:
mdx: context => {
return {
cwd: path.dirname(context.filePath),
remarkPlugins: [
remarkGfm
],
rehypePlugins: [
[rehypePrism, { ignoreMissing: true }]
],
esbuildOptions: options => {
options.platform = 'node'
// Set the `outdir` to a public location for this bundle.
options.outdir = `${process.cwd()}/public/img/${getSlug(context.filepath)}`
options.loader = {
...options.loader,
// Tell esbuild to use the `file` loader for pngs
'.png': 'file',
'.jpg': 'file'
}
// Set the public path to /img/about
options.publicPath = `/img/${getSlug(context.filepath)}`
// Set write to true so that esbuild will output the files.
options.write = true
return options
}
}
}
I currently have an
mdx-bundlerwrapper function something like this:You'll see that I'm able to use details from the context to configure
esbuildformdx-bundler. I use thefilePathI've passed in to set an assets bundle path. I can also set thecwdto the folder of the file being bundled, allowing for easy linking of assets in the same folder as the MDX file (bundleMDXFiledoes it automatically). These options enable some nice functionality.In
contentlayers config I could imagine something like this: