Digital Gardening with MDX Magic

Published: August 24, 2020 | 2 min read

I’m not sure about any of y’all, but I have more that one personal site that I’ve created over the years, using the technology of the time. Every once in a while, I’d look back at that site and think “wow, you should really update that code, Kathleen.”

Why Digital Gardening

When I first heard the term digital gardening, it really struck a chord with me because it was the perfect blend of what works for me. I could create a site that’s more of a catch-all for my interests, publish what I want, without thinking of the “state of done”, and keep moving. If I want to make a code reference for future me to remember something I learned at the time? If I want to go back and edit? Cool. If not, no big deal.

React component support

  <Button>Click me</Button>
  {/*<GrommetSystem.Button primary label="label" />*/}

gatsby-plugin-embed is SWEET!

CodePen embeds!

Flickr embeds!


YouTube embeds!

Instagram embeds!

Hello... custom codeblocks!

Fancy custom codeblocks are so fancy, yo.

Editable fancy code

  <Button size="large">Click me</Button>
  {/* <GrommetSystem.Button primary label="label" />
    border={{ color: "brand", size: "large" }}
    <GrommetSystem.Button primary label="label" />
    <GrommetSystem.CheckBoxGroup options={["Maui", "Kauai", "Oahu"]} />
  <GrommetSystem.Card height="small" width="small" background="light-1">
    <GrommetSystem.CardHeader pad="medium">Header</GrommetSystem.CardHeader>
    <GrommetSystem.CardBody pad="medium">Body</GrommetSystem.CardBody>
      pad={{ horizontal: "small" }}
      <GrommetSystem.Button icon={<Favorite color="red" />} hoverIndicator />
        icon={<ShareOption color="plain" />}
  </GrommetSystem.Card> */}

If you haven't yet, head on over and check out the excellent MDXConf lineup.

Back to top