Open
Description
The team data living in JS object literals is kinda funky, and I'm fairly certain that the way we're doing things right now means that the ReactMarkdown code is included in our client-side JS bundle because it's ~800K. 😱
We could improve this situation a lot by doing more SSR, and/or with MDX! So rather than having one question that lives in some component and the answer for it living in an object literal, the Markdown for each team member could just look like:
---
name: Shawn Allen
handle: shawnbot
gif: some/funny/thing.gif
---
# What is your favorite color?
Blue. No yel-- Auuuuuuuugh!
Then, when rendering each team member, we can style the markdown elements like so:
import Rohan from './jonrohan.md'
import Shawn from './shawnbot.md'
function Team() {
return [
<TeamMember component={Shawn} />,
<TeamMember component={Rohan} />
]
}
function TeamMember({component: Component, ...rest}) {
const {name, handle, gif, color = 'blue'} = Component.frontmatter
return (
<MDXProvider components={{
a: props => <Link color={`${color}.0`} {...props} />,
h1: props => <Heading color={`${color}.2`} fontFamily="mono" {...props} />,
p: props => <Text color={`${color}.3`} {...props} />
}}>
<Component {...rest} />
</MDXProvider>
)
}
Activity