Adding a render-link hook

[danielfdickinson]

What do folks think of the addition of a markdown link rendering hook such as the one below?

It does three things:

1. Opens external links (http/https) in a new tab (target="_blank")
2. Prevents loss of SEO if external links have problems (rel="nofollow)
3. Ensure that opening an external link does not give the external link window.opener object which references the originating (your) site (rel="noopener")

<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="nofollow noopener"{{ end }}>{{ .Text | safeHTML }}</a>

[pixelfabs]

I can say something about this. It is somewhat limiting to only have nofollow. There's also sponsored and ugc. A switch would be nice, to have one rendering hook, but 3 types of links: nofollow, sponsered and ugc. dofollow is default, so no need for that one. Google Docs

[danielfdickinson]

There is no good way to do that on a per-link basis (there are hacky ways to overload the []() and/or {.attribute} to achieve that for English-only sites, but I don't think they will work in an internationalized context (like PaperMod) — see the Hugo forum) but with params it could be configured on site or page basis. Would that help (at least this would make the change something that could be turned on and off). Since the default has been no render hook, I am thinking that adding a target and nofollow, etc would be off by default and turned on in the config.

[danielfdickinson]

If you use shortcodes to create sponsored and/or ugc links, they will not be overridden by a render hook. Does that help?

[danielfdickinson]

And to clarify, render hooks only applies to standard Markdown links []() not html or shortcodes.

[danielfdickinson]

FYI, I have the following code working in a render-image.html render hook (or at least it seems to; I'll have to test more thoroughly), so I'm thinking this should be possible:

{{- if not (strings.HasPrefix .Destination "http") -}}
{{- $image := (.Page.Resources.ByType "image").GetMatch .Destination -}}
{{- if $image }}
    {{- with .Page -}}
        {{- $imageOptions := "" -}}
        {{- with .Params.convertimagesto -}}
            {{- $imageOptions = printf "%dx%d %s" $image.Width $image.Height . -}}
        {{- else -}}
            {{- with .Site.Params.convertimagesto -}}
                {{- $imageOptions = printf "%dx%d %s" $image.Width $image.Height . -}}
            {{- end -}}
        {{- end -}}
        {{- if ne $imageOptions "" -}}
            {{- $image = $image.Resize $imageOptions -}}
        {{- end -}}
    {{- end -}}
<img loading="lazy" src="{{ $image.RelPermalink | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- else if fileExists (path.Join "/static/" .Destination) }}
<img loading="lazy" src="{{ path.Join "/static/" .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- else }}
<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- end }}
{{- else }}
<img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
{{- end }}

[danielfdickinson]

I've simplified the above to:

{{ $destination := .Destination }}
{{- if not (strings.HasPrefix .Destination "http") -}}
    {{- $image := (.Page.Resources.ByType "image").GetMatch .Destination -}}
    {{- if $image }}
        {{- with .Page -}}
            {{- $imageOptions := "" -}}
            {{- with .Params.convertimagesto -}}
                {{- $imageOptions = printf "%dx%d %s" $image.Width $image.Height . -}}
            {{- else -}}
                {{- with .Site.Params.convertimagesto -}}
                    {{- $imageOptions = printf "%dx%d %s" $image.Width $image.Height . -}}
                {{- end -}}
            {{- end -}}
            {{- if ne $imageOptions "" -}}
                {{- $image = $image.Resize $imageOptions -}}
            {{- end -}}
        {{- end -}}
        {{- $destination = $image.RelPermalink -}}
    {{- end -}}
{{- end }}
<img loading="lazy" src="{{ $destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />

And verified when the image is a in a page bundle and

params:
    convertImagesTo: webp

That the markdown image is converted to a webp image, and for any other image one gets usual single image (e.g. from static directory, remote, etc).
I have not yet added checking for a non-page resource (e.g. from assets folder).

This is with Hugo 0.87.0 -- not sure how far back one can go terms of Hugo versions.