You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 Allenhandle: shawnbotgif: 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:
importRohanfrom'./jonrohan.md'importShawnfrom'./shawnbot.md'functionTeam(){return[<TeamMembercomponent={Shawn}/>,<TeamMembercomponent={Rohan}/>]}functionTeamMember({component: Component, ...rest}){const{name, handle, gif, color ='blue'}=Component.frontmatterreturn(<MDXProvidercomponents={{a: props=><Linkcolor={`${color}.0`}{...props}/>,h1: props=><Headingcolor={`${color}.2`}fontFamily="mono"{...props}/>,p: props=><Textcolor={`${color}.3`}{...props}/>}}><Component{...rest}/></MDXProvider>)}
The text was updated successfully, but these errors were encountered:
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:
Then, when rendering each team member, we can style the markdown elements like so:
The text was updated successfully, but these errors were encountered: