All I wanted was pretty links

All I wanted was pretty links

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

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. Check it out!

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 Gatsby which renders Markdown 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, MDX 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 Migrating Remark to MDX got me most of the way there! The MDX plugin for Gatsby 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 mdx-embed.

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.

Pretty links PR

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. JUST LIKE I ALWAYS WANTED The end.


Written by Jon Kuperman living in Florida taking some time between jobs. You should follow him on Twitter

Webmentions

00
    Loading Webmentions...

Related Posts

Subscribe to my email list!

Let me be real with you. Sometimes when I'm bored I log in to Buttondown and look at the audience number. If it's bigger than it was the week before, well that makes me feel really happy!

I promise I'll never spam you and I will, at most, send you a monthly update with what's happening on this site.

© 2021, Jon Kuperman