Add icon to external links

[FireIsGood]

Sanity check:

• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Adds external link icons to external links, both in the navigation bar and all text.

Before

After

Additional Information

The icon was obtained from Lucide, specifically being the external-link icon.

The current implementation of this is limited/hacky both by CSS and the Zola engine.

The CSS color of an embedded SVG via the background-image property cannot use the current-color value to match the link color.

The zola engine's current use of get_url when linking to internal pages as part of anchor tags makes it impossible to easily differentiate an external versus an internal page link.

There were multiple ways to solve this when I was implementing the icons:

• Select for all links EXCEPT the http://localhost, http://127.0.0.1, https://www.getzola.org, # and other safe prefixes
• Enable noreferrer on external links in the markdown, then add it manually to all the HTML links
• Change every link to use relative links like / and /documentation and then style all links prefixed with http

As you can see in the commits, I ended up doing the second option as I wasn't sure whether the get_url semantics were used over relative links on purpose and I didn't want to hard-code the CSS specific to the current domain. If the use of get_url over relative links was not intended this way semantically, please leave a comment noting this so I can go and change all occurrences to relative links. This would allow the noreferrer setting to be disabled to reduce config and maintain current external link semantics.

Some of this was mentioned in a Discourse issue from a while ago. I think the suggestions of adding an external link class is one good path to allowing this more easily.

One other solution I personally think would be best is if the get_url pattern when linking internally was replaced. From what I see about it, get_url is supposed to be for making a permalink, not a relative link around the website. In the current zola website (and I assume some other webesites), this seems to be used for the navigation when a regular / relative link would do just fine.

In a perfect world, I would want get_url to link internal pages with a / relative link with a separate function, maybe get_permalink to allow the current functionality. Of course, this would be a breaking change and zola would likely have to do some alternative solutions to avoid breaking users' current code.

[FireIsGood]

As an example of the relative get_url change, I have made a branch to show the code changes: master...FireIsGood:zola:relative-path-geturl
And an example of styling based on the relative paths: master...FireIsGood:zola:add-external-icon-rel-geturl

This is more theoretical than a real proposal, though, as I don't know the full extent of how this would affect older projects.

[Keats]

None of the links generated by Zola are relative (afaik), I don't really like using them at all.