Add link icon to external links

[jollydodo]

This can be removed if deemed not relevant, but it might be useful for people that run into the same 'issue'. On a website we have a bunch of links. Sometimes links that point to another page, but also links that point towards an external website. It is helpful for users (accessibility reasons) to know when a link will open a page on another website. This is oftentimes done with an external link icon.

This person created a nice render hook that checks if a link is external (by looking at an http or https string in the link) and then adds an external link icon. Attention was also paid to best practices such as the aria attributes. Unfortunately this example makes use of font awesome instead of tabler.io like we use in Doks. I therefore adjusted the code so that it uses the default external tabler icon and also looks good with the standard scss.

Example

Code render-link.html:

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}>{{ .Text | safeHTML }}{{ if strings.HasPrefix .Destination "http" }}<span style="white-space: nowrap;">&thinsp;<svg style="margin-bottom: 5px" focusable="false" class="icon icon-tabler icon-tabler-external-link" role="img" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><title>external link</title><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" /><path d="M11 13l9 -9" /><path d="M15 4h5v5" /></svg></span>{{ end }}</a>

[cnichte]

Thank you, that's exactly what I was looking for.