Skip to main contentKathleenMcMahon.devKathleenMcMahon.me

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

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

gatsby-plugin-embed is SWEET!

CodePen embeds!

Flickr embeds!

5305/5641024002_61bbfb08f2_3k.jpg

YouTube embeds!

Instagram embeds!

Hello... custom codeblocks!

Fancy custom codeblocks are so fancy, yo.

Editable fancy code

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

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

Back to top