getzola / zola

A fast static site generator in a single binary with everything built-in. https://www.getzola.org
https://www.getzola.org
MIT License
12.96k stars 919 forks source link

Add icon to external links #2522

Open FireIsGood opened 2 weeks ago

FireIsGood commented 2 weeks ago

Sanity check:

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

Before

image

After

image

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:

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 commented 2 weeks ago

As an example of the relative get_url change, I have made a branch to show the code changes: https://github.com/getzola/zola/compare/master...FireIsGood:zola:relative-path-geturl And an example of styling based on the relative paths: https://github.com/getzola/zola/compare/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 commented 2 weeks ago

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