ExternalLink.astro

---
import Tooltip from "./Tooltip.astro";

const {
  url,
  newTab = true,
  class: className,
  refer = false,
  icon = true,
} = Astro.props;

const hostname = new URL(url).hostname;

let child = await Astro.slots.render("default");
child = child.trim();

export interface Props {
  /** The url to link to */
  url: string;
  /** Whether the linked page should be opened in another tab. Defaults to `true`. */
  newTab?: boolean;
  /** Whether to [refer](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) when navigating away. Defaults to `false`. */
  refer?: boolean;
  /** Whether or not to display the "external" icon next to the link. Defaults to `false`. */
  icon?: boolean;
  /** Allows you to pass in a class to be applied to the link. */
  class?: string;
}

const classes = [className, "external"];
if (icon === false) {
  classes.push("no-icon");
}

const relationships = ["noopener", "nofollow"];
if (!refer) {
  relationships.push("noreferrer");
}
---

<Tooltip content={hostname}>
  <a
    href={url}
    target={newTab ? "_blank" : null}
    rel={relationships.join(" ")}
    class={classes.join(" ")}
    set:html={child}
  />
</Tooltip>

<style lang="scss">
  a.external {
    color: var(--link-color);
    font-weight: 500;
    white-space: normal;
  }
  a.external:not(.no-icon)::after {
    content: "\f08e";
    vertical-align: text-top;
    font-family: "Font Awesome 6 Free";
    font-size: 0.5em;
    display: inline-block;
    padding-left: 0.2em;
  }
</style>