badmanners.xyz/src/pages/contact.astro

---
import BaseLayout from "../layouts/BaseLayout.astro";
import IconBluesky from "../components/icons/brands/IconBluesky.astro";
import IconDiscord from "../components/icons/brands/IconDiscord.astro";
import IconMastodon from "../components/icons/brands/IconMastodon.astro";
import IconSignal from "../components/icons/brands/IconSignal.astro";
import IconTelegram from "../components/icons/brands/IconTelegram.astro";
import IconArrowUpRightFromSquare from "../components/icons/IconArrowUpRightFromSquare.astro";
import IconClone from "../components/icons/IconClone.astro";
import IconEnvelope from "../components/icons/IconEnvelope.astro";
---

<BaseLayout pageTitle="Contact">
  <meta slot="head-description" property="og:description" content="Where to find me." />
  <article aria-labelledby="title-contact">
    <h1 id="title-contact" class="text-2xl sm:text-3xl">Contact</h1>
    <section>
      <p class="mb-4 mt-5 sm:mb-3 sm:mt-6 sm:px-5 md:px-6">
        Feel free to reach out to me through any of my socials below, or by
        <a href="/work" class="text-link underline transition-colors motion-reduce:transition-none"
          >messaging me on any of my galleries</a
        >, if you wanna talk about anything!
      </p>
      <ul class="h-card flex flex-col items-center">
        <li class="mb-2 w-max sm:mb-1">
          <button
            id="discord"
            class="text-link mx-1 transition-colors motion-reduce:transition-none"
            aria-label="Copy my Discord username to clipboard"
          >
            <IconDiscord width="1.75rem" height="1.75rem" class="mr-1 inline" />
            <span class="p-nickname underline">badmanners</span>
            <IconClone width="0.75rem" height="0.75rem" class="inline" />
          </button>
        </li>
        <li class="h-card mb-2 w-max sm:mb-1">
          <a
            class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
            href="https://t.me/bad_manners"
            target="_blank"
            aria-label="Add me on Telegram"
            rel="me"
          >
            <IconTelegram width="1.75rem" height="1.75rem" class="mr-1 inline" />
            <span class="p-nickname underline">@bad_manners</span>
            <IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
          </a>
        </li>
        <li class="h-card mb-2 w-max sm:mb-1">
          <a
            class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
            href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
            target="_blank"
            aria-label="Add me on Signal"
            rel="me"
          >
            <IconSignal width="1.75rem" height="1.75rem" class="mr-1 inline" />
            <span class="p-nickname underline">badmanners.10</span>
            <IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
          </a>
        </li>
        <li class="h-card mb-2 w-max sm:mb-1">
          <a
            class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
            href="https://meow.social/@BadManners"
            target="_blank"
            aria-label="Visit me on Mastodon"
            rel="me"
          >
            <IconMastodon width="1.75rem" height="1.75rem" class="mr-1 inline" />
            <span class="p-nickname underline">@BadManners@meow.social</span>
            <IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
          </a>
        </li>
        <li class="h-card mb-2 w-max sm:mb-1">
          <a
            class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
            href="https://bsky.app/profile/badmanners.xyz"
            target="_blank"
            aria-label="Visit me on Bluesky"
            rel="me"
          >
            <IconBluesky width="1.75rem" height="1.75rem" class="mr-1 inline" />
            <span class="p-nickname underline">@badmanners.xyz</span>
            <IconArrowUpRightFromSquare width="0.75rem" height="0.75rem" class="inline" />
          </a>
        </li>
        <li class="mb-2 w-max sm:mb-1">
          <button
            id="email"
            class="text-link mx-1 transition-colors motion-reduce:transition-none"
            aria-label="Copy my e-mail address to clipboard"
          >
            <IconEnvelope width="1.75rem" height="1.75rem" class="mr-1 inline" />
            <span class="underline" data-user="em" data-website="zyx.srennamdab" aria-label="Obfuscated e-mail address"
            ></span>
            <IconClone width="0.75rem" height="0.75rem" class="inline" />
          </button>
        </li>
      </ul>
    </section>
  </article>
</BaseLayout>

<style>
  #email span:before {
    content: attr(data-website) "\0040" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
  }
</style>

<script>
  import tippy from "tippy.js";
  import "tippy.js/dist/tippy.css";

  (function () {
    const discordButton = document.querySelector<HTMLElementTagNameMap["button"]>("button#discord")!;
    const discordTooltip = tippy(discordButton, {
      content: "Username copied to clipboard!",
      trigger: "manual",
      theme: "bm",
    });
    const emailButton = document.querySelector<HTMLElementTagNameMap["button"]>("button#email")!;
    const emailTooltip = tippy(emailButton, {
      content: "E-mail address copied to clipboard!",
      trigger: "manual",
      theme: "bm",
    });
    let tooltipTimeout: any = null;

    discordButton.addEventListener("click", (ev) => {
      ev.preventDefault();
      tooltipTimeout && clearTimeout(tooltipTimeout);
      discordTooltip.hide();
      emailTooltip.hide();
      const text = discordButton.querySelector("span")!.innerText;
      navigator.clipboard
        .writeText(text)
        .then(() => {
          discordTooltip.show();
          tooltipTimeout = setTimeout(() => {
            discordTooltip.hide();
          }, 2000);
        })
        .catch((e) => {
          console.error("Unable to copy text to clipboard", e);
        });
    });

    emailButton.addEventListener("click", (ev) => {
      ev.preventDefault();
      tooltipTimeout && clearTimeout(tooltipTimeout);
      discordTooltip.hide();
      emailTooltip.hide();
      const emailData = emailButton.querySelector("span")!;
      const text = `${emailData.dataset.user!.split("").reverse().join("")}@${emailData.dataset.website!.split("").reverse().join("")}`;
      navigator.clipboard
        .writeText(text)
        .then(() => {
          emailTooltip.show();
          tooltipTimeout = setTimeout(() => {
            emailTooltip.hide();
          }, 2000);
        })
        .catch((e) => {
          console.error("Unable to copy text to clipboard", e);
        });
    });
  })();
</script>