Provide a function with context for configuring MDX

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
      }
    }
}

[mshick]

Resolved via #270. While the implementation is not as flexible as this issue requested, it does satisfy my primary objective of getting a relative cwd, and is generally easier to use.

[mshick]

Pretty much #11 — I’d like to be able keep my image assets next to my MDX files. Don’t have any other great ideas right now!