External Links Icon

Customization Theme component

AI-generated summary

denvergeeks introduced a theme component that adds an external link icon to links in topics and posts, using the default SVG icon compatible with light and dark themes. Early feedback from chapoi highlighted visibility issues in dark mode, which denvergeeks addressed by updating the example image to a transparent webp with a gray fill. Moin suggested using the Discourse icon component but noted difficulties with color customization.

Subsequently, patrickemin and Thomas_Köster reported that the icon incorrectly appeared on internal links, specifically those using absolute URLs matching the site domain. Lilly submitted a pull request to fix this by excluding internal relative and absolute links, as well as title links, which denvergeeks merged. Canapin shared a pure CSS alternative using SCSS, though Orioni noted the icon disappeared on hover in some cases. Don provided a JavaScript snippet to dynamically exclude the current hostname from external link detection. denvergeeks confirmed that these issues have been resolved in the latest update.

1
:information_source: Summary Adds an Icon to External Links in Topics and Posts
:hammer_and_wrench: Repository GitHub - denvergeeks/discourse-external-links-icon · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Uses the default SVG (the same icon as Featured Links in core) like this link external-link-alt-solid-trans-919191-14x18

Plays nicely with both light and dark themes, i.e…

light-sample

dark-sample

This simply adds the icon. For a full featured solution try External Link Shield – Exit Confirmation & Trust Gating

TO DO: Settings for…

  • Position
  • Color
  • Icon
  • ??
4 Likes
2

Im seeing this in dark mode:

image
image1179×441 34.2 KB

That is probably not the intended look?

3

The component works fine with different palettes

Screenshot_20251227_111928_Firefox
Screenshot_20251227_111928_Firefox1997×594 134 KB

But a screenshot won’t adjust its color to the color palette. What would you suggest to present the feature in a forum where the component isn’t installed? A larger screenshot that includes the link?
I was about to suggest using the Discourse icon component, but I am unable to change the color of the icon:

example.com

[example.com]() [wrap=icon id=up-right-from-square][/wrap]

4

Yes, I think so? That would be a better representation of what to expect.

5

I changed the image in the description/example it to a transparent .webp with a gray fill.

1 Like
6

Awesome, looks way better!

1 Like
7

Hi, does not work for me, the icon appears on all links, even internal.

Another thing, for titles having a direct external link like YouTube video, the icon appears twice:

image
image548×148 12.5 KB

4 Likes
8

Same here. The icon also appears on internal links.

If I understood the code correctly, it looks for “http*” in the URL to determine external links. Unfortunately the link tool in the editor automatically uses fully qualified (absolute) URLs starting with “https:///..”.

I assume that this causes the external icons on “internal” links.

Could the code be expanded to check for “https:///..” classifying these as internal?

1 Like
9

I made a PR to fix these issues.

https://github.com/denvergeeks/discourse-external-links-icon/pull/1/changes

this will hide the link icon for internal links, relative or absolute, as well as hide them in title links.

5 Likes
10

Thank you @Lilly, I’ve merged this.

3 Likes
11

I did a similar thing with pure CSS a long time ago when Discourse used font awesome in font-family.

It’s not possible anymore, but a similar effect can be achieved with this:

.cooked {
  a[href^="http"]:not([href*="www.yourdomain.com"]) {
    display: inline-flex;
    align-items: center;

    &::after {
      content: "";
      width: 0.8em;
      height: 0.8em;
      margin-left: 0.2em;
      margin-bottom: 0.4em;
      background-color: currentColor; 
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");
      mask-size: contain;
    }
  }
}

image
image438×136 6.52 KB

SVG’s hardcoded, though.

12

Hi, me again, sorry :grinning_face_with_smiling_eyes:

The external icons appear on the Custom Header Links (icons) TC, they shoul’nt. Thanks.

image

13

Hello :waving_hand:

Here is an example of how I use this in my theme component.

In my case, I use settings for this because the component changes icons dynamically via CSS, allowing me to target those settings directly. (Adding class to links doesn’t always work very well in some cases.)

However, for your component, you can simply exclude the current hostname dynamically something like this, I think:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.decorateCookedElement(
    (element) => {
      const currentHost = window.location.hostname;

      const selector = `a[href*='//']:not([href^='/']):not([href*='${currentHost}'])`;
      
      const links = element.querySelectorAll(selector);

      links.forEach((link) => {
        console.log("External link:", link.href);
      });
    },
    { id: "external-link", onlyStream: true }
  );
});
1 Like
14

I appreciate the feedback. This should be fixed now!

2 Likes
15

For some reason, when hovering over the links, the external icons disappear. I tested this with the inspector, and the ::after disappears.

16

It’s probably overriden by another piece of CSS code. On my test instance, the external icon doesn’t disappear on hover.

1 Like