ExternalLink.astro

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

import { faUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";

const {
  url,
  newTab = true,
  class: className,
  refer = false,
  noIcon,
} = 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;
  /** Don't display external link icon. */
  noIcon?: true;
  /** Allows you to pass in a class to be applied to the link. */
  class?: string;
}

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

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

<Tooltip content={hostname}>
  <span class="external-link" class:list={classes}>
    <a
      href={url}
      target={newTab ? "_blank" : null}
      rel={relationships.join(" ")}
      set:html={child}
    />{
      noIcon !== true && (
        <Icon icon={faUpRightFromSquare} classes={["external-indicator"]} />
      )
    }
  </span>
</Tooltip>

<style lang="scss">
  .external-link {
    display: inline;
    color: var(--link-color);

    a {
      font-weight: 500;
    }
  }

  :global(.external-link .icon.external-indicator) {
    display: inline;
    margin-right: -0.2em;
    vertical-align: text-top;
    font-size: 0.5em;
  }
</style>