[FEAT] Adds a up-left arrow to all external links.

[simonsasse]

This is a way, how we can mark external links as external.
I had to make some custom changes for the case that we use the redirect_to keyword on applications (like LAMBDA).
This is not 100% bulletproof.

Alternatively we could use plugins. This would force us to change the pipeline to building locally and uploading the built website, because the plugins do not work with GitHub Pages.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/seqan/www-seqan-de/8nKkW5HrQp8VVVnvnnzVfR7rwNWh
✅ Preview: https://www-seqan-de-git-fork-simonsasse-outlinks-seqan.vercel.app

[eseiler]

I think it's ok as is, the marks are mostly meant for places where it's unexpected. I would put the symbol to the right side of the link. I somehow expected it to be on the right and, e.g., Wikipedia also marks external references with a symbol on the right side.

Anyhow, I would still like Marcel to look over this since I cannot say if this is the way to go with this issue :)

[marehr]

I personally would prefer if we explicitly use an external link "macro" instead of a global "something that starts with http"-approach. So discuss whether doing something implicit instead of explicit.

I would prefer an explicit {% include external_link url ="https://..." text="Some text" %} or <a class="external" href="..."></a> approach.

I'm not too sure if we even should provide this, do we need an external link marker?

[marehr]

a[href*="//"]:after {
  display: inline-block;
  content: "";
  background-image: url("data:image/svg+xml; utf8, <svg height=\"1024\" width=\"768\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M640 768H128V257.90599999999995L256 256V128H0v768h768V576H640V768zM384 128l128 128L320 448l128 128 192-192 128 128V128H384z\" fill=\"%23788187\"/></svg>");
  height: 1em;
  width: 0.75em;
  background-size: contain;
  margin: 0em 0.1em 0em 0.2em;
  vertical-align: middle;
}

(We would need to find a "licence" free icon for this, this is just more like a proof of concept)

would make it look like this: