I wrote this little neat bit of CSS to handle adding the Font Awesome “Arrow Up Right From Square” Icon  to all outbound links.

a {
	color: lightred;
	text-decoration: none;

	&[href^="http"]:after {
		font: var(--fa-font-thin);
		font-size: $xsmall;
		vertical-align: middle;
		content: "\0020\f08e";
	}
}

It worked well enough. It grabs any link that has a href that starts with http. In itself, that’s honestly kind of indiscriminate and perhaps a bit too general. I applied it to root level a tags in my stylesheet and it worked like a charm. The only problem was when internal links were specified absolutely instead of relatively.

Then it also added to my social links.

I could have increased the specificity of the tag, or perhaps narrowed the scope by writing it as something like:

section.main-content a, aside.sidebar a {
	...
}

But that was a lot of work.

I was already using Hugo’s Markdown Render Hooks  to modify hugo’s default, outbound link behavior.

You see, I wanted outbound links to add target="_blank" automatically but I didn’t want to create a shortcode or have to do anything other than use the started markdown link format.

I wanted the computer to do all the work. I just want to write.

So I popped open that file because I thought, Well, while I’m in here doing the one thing I may as well do the other.

So now I have a file layouts -> _default -> _markup called render-link.html that looks like this:

<a 
	href="{{ .Destination | safeURL }}" 
	{{ with .Title }}title="{{ . }}" {{ end }}
	{{ if strings.HasPrefix .Destination "http" }}
		target="_blank" rel="noopener"
	{{ end }}
>
	{{ .Text | safeHTML }}
</a>
{{ if strings.HasPrefix .Destination "http" }}
	&nbsp;<i class="fa-thin fa-arrow-up-right-from-square fa-fw fa-xs"></i>
{{ end }}

So I’m intercepting Goldmark’s rendering engine and replacing their link rendering with my own that checks if the link is outbound (via a http prefix, as all internal links are relativized). If it is an outbound link, I add target="_blank" to the internal link, and I add &nbsp;<i class="fa-thin fa-arrow-up-right-from-square fa-fw fa-xs"></i> outside of the link to render the little outbound indicator.

I’m not sure how other people handle this, but this is the easiest and most elegant solution I’ve found.

Let me know.

No comments yet!

GitHub-flavored Markdown & a sane subset of HTML is supported.