Developing an Aside Component With MDX

I’ve recently moved my blog from Jekyll to Gatsby/MDX because I wanted to have the blog dev environment match my daily dev environment, and the possibility of creating React Components that can enhance my writing while also being able to create “Pages” using React for one off experiments is really exciting. I think making it easier to maintain the blog will encourage me to use it more often.

Now, I know I could just use an <aside> html element (and this React component does use an aside element to be as semantically correct as possible) and then style the element across the site, but I really want to spend more time with React on a daily basis and gain more experience with TailwindCSS, which I am finding to be a wonderful css framework.

Usage

Here’s an example of the <Aside /> I’m building, while the blog is in develop mode.

<Aside>

# Example

with paragraphs and such,

All those little son of a guns. Let's build an almighty mountain. Maybe there's a little something happening right here. If what you're doing doesn't make you happy - you're doing the wrong thing. If you don't like it - change it. It's your world. And I know you're saying, 'Oh Bob, you've done it this time.' And you may be right.
</Aside>

and then you continue to use markdown and the aside will align with this paragraph.

Sensors indicate human life forms 30 meters below the planet's surface. Stellar flares are increasing in magnitude and frequency. Set course for Rhomboid Dronegar 006, warp seven. There's no evidence of an advanced communication network. Total guidance system failure, with less than 24 hours' reserve power. Shield effectiveness has been reduced 12 percent. We have covered the area in a spherical pattern which a ship without warp drive could cross in the given time.

and then you continue to use markdown and the aside will align with this paragraph.

Sensors indicate human life forms 30 meters below the planet’s surface. Stellar flares are increasing in magnitude and frequency. Set course for Rhomboid Dronegar 006, warp seven. There’s no evidence of an advanced communication network. Total guidance system failure, with less than 24 hours’ reserve power. Shield effectiveness has been reduced 12 percent. We have covered the area in a spherical pattern which a ship without warp drive could cross in the given time.

So lets look at the component source

From the above code examples you can see that we just get to include an <Aside /> wherever we want to in our markdown blog post or page because we have imported the shortcodes for our MDX rendering. Yes, the Aside shortcode includes all the shortcodes we include in our main Post rendering and in our specific Aside shortcode that we are using in the Posts.

import React from 'react'
import PropTypes from 'prop-types'
import { MDXProvider } from '@mdx-js/react'

// Provide common components here
import shortcodes from './'

/*
 * The Aside is not fully rendered markdown since it will be passed in during
 * Post.jsx creation. for this reason it receives MDX renderable children which
 * we pass into the MDXProvider
 */
const Aside = ({ children }) => {
  return (
    <aside className="float-right w-2/5 m-2 p-2 text-xs bg-green-100">
      <MDXProvider components={shortcodes}>{children}</MDXProvider>
    </aside>
  )
}

Aside.propTypes = {
  children: PropTypes.element
}

export default Aside

To reiterate: in our Post.jsx component, we include the Aside component in the shorcodes, and we do the same in our individual Aside.jsx component.

In this way, we have a handy object full of shortcodes we can use in any Posts.

Check out the source on GitHub here.

I’ll be polishing this up as I continue learning tailwind, gatsby, react and mdx.