Implement first pass of MDXs #507
Conversation
This implements the basic idea of MDXs. Though we still need to figure out how to best handle the layout mechanism. cc/ @ChristopherBiscardi, @jxnblk, @timneutkens --- Related #454
|
This pull request is automatically deployed with Now. |
| `const MDXSLayout = ${ | ||
| layout | ||
| ? layout.value | ||
| .replace(/^export\s+default\s+/, '') |
There was a problem hiding this comment.
We should prolly make this a shared util.
| ) | ||
|
|
||
| const defaultExport = ` | ||
| const MDXSWrapper = props => [ |
There was a problem hiding this comment.
I guess we could actually make this the MDXLayout?
| ```sh | ||
| npm install --save remark-mdxs | ||
| ``` | ||
|
|
There was a problem hiding this comment.
From a usage standpoint, is the thinking that you would use something like a separate webpack loader rule that only parses .mdxs files while handling .mdx files like any other?
There was a problem hiding this comment.
That seems like it will turn out to be kind of unfortunate. It means we can't delineate between MDX content and MDXS content when fetching from remote sources that use text/markdown content types (mdx still doesn't have it's own entry in the mime-db and even if it did, we're going to want compat with markdown types from headless CMSs anyway).
Since every MDXs document is technically a valid MDX document, I'd much rather see a const export used to specify intent to be MDXs content.
There was a problem hiding this comment.
Hmm, that's a good point 🤔. I'd mostly been thinking about local fs. How do you think intent for MDXs should be expressed?
Something like?:
export const MDXS = trueThere was a problem hiding this comment.
yeah this is the approach I landed on as well. I think that the "first MDX file" in an MDXs document can be used as the "global exports" (compared to exports defined in subsequent "files"), so you'd end up with something like this where the first MDX doesn't have any content, but is just imports/exports.
// global export
export const MDXS = true
---
// file-local export
export const slideLayout = SomeComponent
# some slide
---
# another slide
| const remove = require('unist-util-remove') | ||
| const {toJSX} = require('@mdx-js/mdx/mdx-hast-to-jsx') | ||
|
|
||
| module.exports = function({delimiter = 'hr'}) { |
There was a problem hiding this comment.
Just curious, I'm using thematicBreak in @mdx-deck/mdx-plugin but with the way the delimiter is used below will either hr or thematicBreak work?
There was a problem hiding this comment.
As is it won't work because we're operating on MDXHAST (since it's acting as a custom compiler for MDX). But it might make sense to make MDXS more standalone and not use mdx core and remark-mdx directly instead. That would allow us to operate on the MDXAST.
There was a problem hiding this comment.
Regarding these architectural things, if remark-mdxs (or a different implementation of MDXs) were to be implemented today, do either of you (or @ChristianMurphy or @wooorm) have any recommendations for trying to make a new MDXs PR for MDX v2? Eg. either how / where the PR should be submitted, whether MDXs should be "more standalone" like described above, etc?
@EricCote or @ProchaLu (or both) may take a shot at implementing something like this in the next weeks, see the link below. The first idea was to take the implementation in this PR and upgrade it to use MDX v2 APIs.
|
I'm not too familiar with the PR, but are you proposing to use ? Does a user have to swap any markdown usage there directly for markup to use this feature? |
ChristianMurphy
added
🗄 area/interface
|
Going to close this for now, will likely reopen after MDX v2 ships. |
wooorm
added
🤷 no/invalid
|
@johno @ChristopherBiscardi @ChristianMurphy is there any work being done on slide decks / presentation decks now that v2 has shipped? I only saw the comments and discussion from @benjaminpreiss in #454 and #2134 Would be amazing to have first-class support for slide decks from MDX! For now, |
This implements the basic idea of MDXs. Though
we still need to figure out how to best handle
the layout mechanism.
cc/ @ChristopherBiscardi, @jxnblk, @timneutkens
Related #454