Decorating all external links

Dev
1

Hello,
I’d like to mark external links (links except from own domain) with an arrow through css… Do I need to modify all es6 functions that parse links or is there simple way?

if (DiscourseURL.isInternal(href))

Also I’m not sure if this is definitive list of sources where links are parsed and styled

_showLinkCounts()  in /app/assets/javascripts/discourse/widgets/post-cooked.js.es6
linkHtml(link) in app/assets/javascripts/discourse/widgets/post-links.js.es6 
html(attrs, state) in /app/assets/javascripts/discourse/widgets/topic-map.js.es6

Thanks in advance!

2

You can get close using only CSS eg.

div.cooked a[rel="nofollow"]::after { 
  content: "\2794";
}

One potential issue, if you have nofollow removed for your TL3 members.

6 Likes
3

Cool tip! Thanks, I’ll give it a try…

4

If you don’t like that arrow you could try others (replace the “U+” with a backslash).

“\2794” looks like this

5 Likes
5

You can also use all Font Awesome icons with:

div.cooked a[rel="nofollow"]::after {
    content: "\f0c1";
    font: normal normal normal 14px/1 FontAwesome;
}
4 Likes