Separate .md files for markdown about styled-components-website

[mxstbr]

They're still .js files as far as I can tell 🤔

[SaraVieira]

I think this: https://www.npmjs.com/package/markdown-loader

Could be okay , it transforms stuff into html and then we can just import it on the page

[mxstbr]

We can't just transform it to HTML though since we have React components in our markdown, that's why we use react-markings.

I think what we'd rather do is use wrapper-webpack-plugin to wrap each .md file with this boilerplate:

import md from 'components/md'

export default () => md`
  ${MARKDOWN_CONTENT}
`

What I'm unsure about after that is how we get webpack to treat these files as JavaScript, what they are at that point. 🤔

[SaraVieira]

But doing that would still have the problem with the escaping :(

[kitten]

@kentcdodds has posted me a link to their loader on Twitter, which does what you're talking about. https://twitter.com/kentcdodds/status/902262231374716928

The problem with going down this route is that we also lose interpolations. Those are important to have some flexibility to what we can render: https://github.com/styled-components/styled-components-website/blob/master/sections/basics/motivation.js

We could also just try to find a different set of characters for code blocks? Albeit that being a bit clunky as well, I know 😆

[kentcdodds]

Also linked in that tweet thread: Custom markdown syntax for interpolations and the implementation.

I've considered making this a pluggable standalone project to clean up the implementation a bit. It's actually pretty great 😄

I think the core piece you want with next.js is a solution that works at the babel level rather than the webpack level. It'll make everything much snappier, especially with SSR and static extract. So you may also consider a simpler approach using something like babel-plugin-preval. Which would require a little more boilerplate, but would be pretty simple.

Good luck friends! Feel free to ping me if you need me for anything (I'm going to unsubscribe). I'm happy to help! 😄

[SaraVieira]

Guys! Isn't this already done?

[SaraVieira]

Mhmm, I'll check it out and paste a list here for easy changing

[mxstbr]

I just found reactdown by @andreypopp which looks perfect for our purpose? https://www.npmjs.com/package/reactdown (he wrote that four years ago...) It's basically what we're using right now BUT let's your write your stuff as external .md files.

Also found https://github.com/mapbox/jsxtreme-markdown, which is similar but looks a bit more like a templating language, and https://github.com/cerebral/marksy#custom-components which seems similar to reactdown?

[imbhargav5]

This has been fixed by @mxstbr . We now use .md|.mdxfiles.