Skip to content

Move team data to Markdown/MDX #163

Open
@shawnbot

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions