External Links

My link criteria

• external links open in a new tab
• internal links open in the current tab
• all inline links have a branded underline color

Open External Links in new tab

I wanted to do this correctly! I did a bit of research and found that links that open a new tab to a site that is not yours should have a few keywords for the rel attribute I did not experience this back in my working days.

• noreferrer
• noopener
• nofollow

The React component

Before working on the web site, I had worked out some of the styling with Tailwind in a mock-up. I had a component mostly done. Foreshadowing! Even today, as I write this, I think it is confusing the way I have had it.

Copy
1import * as React from 'react'
2
3const ExternalLink = ({ href, children }) => (
4  <a
5    href={href}
6    className='inline-link border-fadeaway border-primary border-b-2'
7    target='_blank'
8    rel='noreferrer noopener nofollow'
9  >
10    {children}
11  </a>
12)
13
14export default ExternalLink

What's confusing about that I ask? I'm glad I asked! I've got a few classes in there don't I? Some are certainly Tailwind but some are certainly not! If I'm not using Tailwind for the whole thing, why can't I just use a single class, like inline-link or at least two classes, inline-link and border-fadeaway?

The css

Before jumping ahead to refactoring this thing, what's the CSS that is creating these lovely links?

Copy
1.border-fadeaway {
2  border-image-source: linear-gradient(
3    to right,
4    var(--primary) 0%,
5    var(--link) 76%,
6    transparent 100%
7  );
8  border-image-slice: 0 0 100 0;
9}
10
11.inline-link {
12  color: inherit;
13  font-weight: 700;
14  text-decoration: none;
15}

It sure looks like I could combine these, add border-primary and border-b-2 from Tailwind and my React component would look a heck of a lot cleaner. After thinking about this for a bit, I decided I wanted to keep the two classes separate. With the two classes separate, I can apply the border style to something that is not a link. I was still able to add the Tailwind stuff to border-fadeaway though!

Copy
1.border-fadeaway {
2  border-image-source: linear-gradient(
3    to right,
4    var(--primary) 0%,
5    var(--link) 76%,
6    transparent 100%
7  );
8  border-image-slice: 0 0 100 0;
9  border-color: var(--primary); /* Tailwind: border-primary */
10  border-bottom-width: 2px; /* Tailwind: border-b-2 */
11}

The revised React component

With border-fadeaway handling all the border styles and not worrying about Tailwind here, the React component looks cleaner. A nice task would be to make it a styled-component!

Copy
1import * as React from 'react'
2
3export const ExternalLink = ({ href, children }) => (
4  <a
5    href={href}
6    className='inline-link border-fadeaway'
7    target='_blank'
8    rel='noreferrer noopener nofollow'
9  >
10    {children}
11  </a>
12)

Border fadeaway on the header!

I liked this fadeaway border so much I added it to the Header component!

Attributions

Photo by Kenny Luo (@kennyluoping) on Unsplash

Actual border styling heavily influenced by Monica Powell. I tried my best to be influenced by her and not just out-and-out steal it.