All I wanted was pretty links

Before we get started, give this bad boy a hover.

It all started 8 months ago...

I was re-designing my website and found this page with a bunch of amazing CSS hover effects for links.

# The Problem

I started looking into them and they all have one thing in common. They all require multiple elements to animate. This is unfortunate because I use which renders documents. So I author my pages like:

## Title

Some paragraph of text.

Another paragraph of text but this one has [a link](https://jonkuperman.com)

I really wanted pretty links but I did not want to wrap every link I write in a span by hand.

So I did what I normally do, I tweeted out a question to the universe and hoped for a response!

As luck would have it, the CEO of Gatsby saw my Tweet and replied:

# Enter MDX

If you're not familiar, is a format that is similar to Markdown but it allows you to add JSX to your documents! This means that I would be able to make a React component like Anchor and then update my Markdown like so:

## Title

Some paragraph of text.

Another paragraph of text but this one has <Anchor title="a link" url="https://jonkuperman.com" />

# Farewell, Remark

Unfortunately for me, I wasn't starting with a fresh Gatsby project. I've had this blog for a while and I'm using a lot of plugins that require Remark. The very format I'm trying to move away from!

Fortunately, the Gatsby docs are pretty great. This page on got me most of the way there! The allows you to still run most of your Remark plugins. There were a few that didn't work (like my automatic Tweet embeds!) but most of them had MDX alternatives like .

# No small change

In the end, I ended up getting rid of a lot of Remark plugins. Partly this is due to the flexibility of MDX, but partly I was just using way too many plugins. Anyway the PR turned into a bit of a monster.

# Making the anchor

I'll probably play with this more but as soon as I finished the upgrade I made a new file utils/mdx.js and created an Anchor component.

import React from "react"

export function Anchor({ url, title }) {
  return (
    <span className="cl-effect-5" id="cl-effect-5">
      <a href={url}>
        <span data-hover={title}>{title}</span>
      </a>
    </span>
  )
}

Then, in layout.js I passed the component in as a shortcode.

import { Anchor } from "../utils/mdx"

const shortcodes = { Anchor }

;<MDXEmbedProvider>
  <MDXProvider components={shortcodes}>{children}</MDXProvider>
</MDXEmbedProvider>

Finally, in my blog posts like pretty-links.md I can just do

## Title

Some paragraph of text.

Another paragraph of text but this one has <Anchor title="a link" url="https://jonkuperman.com" />

And now I have awesome links. The end.