External Links Icon

Theme component
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 }
  );
});