Provide a function with context for configuring MDX
See original GitHub issueI 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 contentlayer
s 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
}
}
}
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Using MDX
Context provides a way to pass data through the component tree without having to pass props down manually at every level. Set it...
Read more >MDX Function Reference (MDX) - SQL Server - Microsoft Learn
This section provides information about the MDX functions. You can use the following tables to find functions by their category of return value, ......
Read more >How to populate a React Context File with MDX data ... - GitHub
How to populate a React Context File with MDX data and asset files ... Then you can use useStaticQuery to query for tracks...
Read more >@mdx-js/react - unified
Get current components from the MDX Context. components. Additional components ( Components ) to use or a function that takes the current components...
Read more >Setting MDX Component Props in NextJS - Stack Overflow
So I am working on a layout system in my next app based on Adam Wathan's method and his tailwlind website. I have...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.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!