capsule/markdown/adding-external-link-markers-in-hugo-and-bear.md

title	published	updated
Adding External Link Markers in Hugo and Bear	2024-06-30T13:35:31.396110Z	2024-06-30T13:35:31.396110Z

I tend to drop a lot of links in my posts. Some point to other posts/pages within the same site, but many point to external sites. As a reader, I like to know where a link is going to take me, but as a writer, I'm not always great about indicating that context within the text.

I mentioned in my inaugural "This Week" post that I recently discovered how to use Hugo's link render-hook templates to automatically apply a little ↗ marker to external links posted on runtimeterror. All that took was creating layouts/_default/_markup/render-link.html with the following content to overwrite the default rendering:

{{- $u := urls.Parse .Destination -}}

  {{- with .Text | safeHTML }}{{ . }}{{ end -}}
  {{- if $u.IsAbs }}↗{{ end -}}

{{- /* chomp trailing newline */ -}}

That works well with Hugo since the marker gets inserted into the HTML source code at build time. But what about here on Bear?

So I went looking for a CSS-based solution that would work here. It only took about 30 seconds of searching to find a post from Jake Bauer with the relevant CSS bits.

All I needed was to add this block to my Bear theme CSS:

a[href^="http"]:where(:not([href*="blog.jbowdre.lol/"]))::after {
    content: "↗"
}

That was surprisingly easy, and today I learned you can use complex/compound selectors to perform pattern matching with CSS. Neat!

=> https://blog.jbowdre.lol/adding-external-link-markers-in-hugo-and-bear/ 📡 Originally posted on jbowdre's weblog