Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move team data to Markdown/MDX #163

Open
shawnbot opened this issue Aug 1, 2019 · 0 comments
Open

Move team data to Markdown/MDX #163

shawnbot opened this issue Aug 1, 2019 · 0 comments

Comments

@shawnbot
Copy link
Contributor

shawnbot commented Aug 1, 2019

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>
  )
}
@yaili yaili added this to Backlog in primer.style tracking via automation Feb 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests

2 participants