---
import { readFile } from "node:fs/promises";
import BaseLayout from "../layouts/BaseLayout.astro";
import { IconEnvelope, IconBriefcase, IconKey, IconLink, IconCommentDots, IconSSH } from "../components/icons";
import {
  IconBluesky,
  IconCodeberg,
  IconCohost,
  IconDiscord,
  IconEkasPortal,
  IconFurAffinity,
  IconGitGud,
  IconGithub,
  IconGitlab,
  IconGoogle,
  IconInkbunny,
  IconItaku,
  IconItchIO,
  IconKeybase,
  IconKeyoxide,
  IconKofi,
  IconMastodon,
  IconNeocities,
  IconPicarto,
  IconReddit,
  IconSignal,
  IconSoFurry,
  IconSteam,
  IconSubscribeStar,
  IconTelegram,
  IconTumblr,
  IconTwitch,
  IconWeasyl,
  IconX,
  IconYouTube,
} from "../components/icons/brands";

const gpgKey = await readFile("./public/gpg.pub", { encoding: "utf-8" });
const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
---

<BaseLayout>
  <Fragment slot="head">
    <meta property="og:description" content="Safe vore enthusiast, mimic hybrid furry, and occasional writer." />
    <link
      rel="alternate"
      type="application/rss+xml"
      href={new URL("/feed.xml", Astro.site)}
      title="Commission status"
    />
    <link
      rel="alternate"
      type="application/rss+xml"
      href="https://gallery.badmanners.xyz/feed.xml"
      title="Gallery feed"
    />
  </Fragment>
  <article class="h-card" aria-label="Homepage of Bad Manners">
    <h1 id="title-home" class="pb-4 text-3xl tracking-tight sm:text-5xl">
      Hi, I'm <b class="p-name font-medium">Bad Manners</b>!
    </h1>
    <section>
      <img
        loading="eager"
        src="/logo.webp"
        alt="A pixelated metal briefcase over a background with a green gradient."
        class="u-logo mx-auto my-4 h-screen max-h-48 rounded-full transition-transform hover:scale-110 motion-reduce:transition-none motion-reduce:hover:scale-100 sm:max-h-72"
      />
      <p class="p-note mt-6 sm:px-5 md:px-6">I'm a safe vore enthusiast, a furry, and occasional writer.</p>
      <ul id="links" class="grid grid-cols-3 gap-x-4 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32" aria-label="Links">
        {
          Astro.site ? (
            <li>
              <a
                id="permalink"
                class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
                href={Astro.site}
                aria-label="Permalink"
                data-clipboard={Astro.site}
                data-noun="URL"
              >
                <IconLink
                  height="1.75rem"
                  width="1.75rem"
                  class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
                />
                <p class="sr-only select-none">https://badmanners.xyz</p>
              </a>
            </li>
          ) : null
        }
        <li>
          <a
            id="gallery"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://gallery.badmanners.xyz"
            rel="me"
            aria-label="Main gallery"
            data-age-restricted
          >
            <IconBriefcase
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="sr-only select-none">Gallery on https://gallery.badmanners.xyz</p>
          </a>
        </li>
        <li>
          <a
            id="pronouns"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://pronouns.cc/@BadManners"
            rel="me"
            aria-label="Pronouns (he/they)"
          >
            <IconCommentDots
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">@BadManners on pronouns.cc</p>
            <p class="p-pronoun hidden">he/him/his/his/himself</p>
            <p class="p-pronoun hidden">they/them/their/theirs/themself</p>
          </a>
        </li>
        <li>
          <a
            id="e-mail"
            class="u-email text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="mailto:me@badmanners.xyz"
            rel="me"
            aria-label="E-mail"
            data-clipboard="me@badmanners.xyz"
            data-noun="E-mail address"
          >
            <IconEnvelope
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="sr-only select-none">me@badmanners.xyz</p>
          </a>
        </li>
        <li>
          <a
            id="bluesky"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://bsky.app/profile/badmanners.xyz"
            rel="me"
            aria-label="Bluesky"
          >
            <IconBluesky
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">@badmanners.xyz on Bluesky</p>
          </a>
        </li>
        <li>
          <a
            id="codeberg"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://codeberg.org/BadManners"
            rel="me"
            aria-label="Codeberg"
          >
            <IconCodeberg
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadManners on Codeberg</p>
          </a>
        </li>
        <li>
          <a
            id="cohost"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://cohost.org/BadManners"
            rel="me"
            aria-label="Cohost"
          >
            <IconCohost
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadManners on Cohost</p>
          </a>
        </li>
        <li>
          <button
            id="discord"
            class="text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            aria-label="Discord"
            data-clipboard="badmanners"
            data-noun="Discord username"
            aria-disabled="true"
          >
            <IconDiscord
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">badmanners on Discord</p>
          </button>
        </li>
        <li>
          <a
            id="eka-s-portal"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://aryion.com/g4/user/BadManners"
            rel="me"
            aria-label="Eka's Portal"
          >
            <IconEkasPortal
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadManners on Eka's Portal</p>
          </a>
        </li>
        <li>
          <a
            id="fur-affinity"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://www.furaffinity.net/user/BadManners"
            rel="me"
            aria-label="Fur Affinity"
          >
            <IconFurAffinity
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadManners on Fur Affinity</p>
          </a>
        </li>
        <li>
          <a
            id="gitgud"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://gitgud.io/BadMannersXYZ"
            rel="me"
            aria-label="GitGud"
          >
            <IconGitGud
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadMannersXYZ on GitGud</p>
          </a>
        </li>
        <li>
          <a
            id="github"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://github.com/BadMannersXYZ"
            rel="me"
            aria-label="GitHub"
          >
            <IconGithub
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadMannersXYZ on GitHub</p>
          </a>
        </li>
        <li>
          <a
            id="gitlab"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://gitlab.com/Bad_Manners"
            rel="me"
            aria-label="GitLab"
          >
            <IconGitlab
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">Bad_Manners on GitLab</p>
          </a>
        </li>
        <li>
          <a
            id="gmail"
            class="u-email text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="mailto:badmanners.vore@gmail.com"
            rel="me"
            aria-label="Gmail"
            data-clipboard="badmanners.vore@gmail.com"
            data-noun="Gmail address"
          >
            <IconGoogle
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="sr-only select-none">badmanners.vore@gmail.com</p>
          </a>
        </li>
        <li>
          <a
            id="gpg"
            class="u-key text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="/gpg.pub"
            aria-label="GPG public key"
            data-clipboard={gpgKey}
            data-noun="GPG key"
          >
            <IconKey
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="sr-only select-none">GPG public key</p>
          </a>
        </li>
        <li>
          <a
            id="inkbunny"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://inkbunny.net/BadManners"
            rel="me"
            aria-label="Inkbunny"
          >
            <IconInkbunny
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadManners on Inkbunny</p>
          </a>
        </li>
        <li>
          <a
            id="itaku"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://itaku.ee/profile/badmanners"
            rel="me"
            aria-label="Itaku"
          >
            <IconItaku
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">badmanners on Itaku</p>
          </a>
        </li>
        <li>
          <a
            id="itch"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://bad-manners.itch.io"
            rel="me"
            aria-label="Itch.io"
          >
            <IconItchIO
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">Bad Manners on Itch.io</p>
          </a>
        </li>
        <li>
          <a
            id="keybase"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://keybase.io/badmanners"
            rel="me"
            aria-label="Keybase"
          >
            <IconKeybase
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">badmanners on Keybase</p>
          </a>
        </li>
        <li>
          <a
            id="keyoxide"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://keyoxide.org/aspe%3Akeyoxide.org%3AUWYBVFCBFXTVUF2U6FS6AYJHLU"
            rel="me"
            aria-label="Keyoxide"
          >
            <IconKeyoxide
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="sr-only select-none">
              <span class="p-uid">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</span> on Keyoxide
            </p>
          </a>
        </li>
        <li>
          <a
            id="ko-fi"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://ko-fi.com/badmanners"
            rel="me"
            aria-label="Ko-fi"
          >
            <IconKofi
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">badmanners on Ko-fi</p>
          </a>
        </li>
        <li>
          <a
            id="mastodon"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://meow.social/@BadManners"
            rel="me"
            aria-label="Mastodon"
          >
            <IconMastodon
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">@BadManners@meow.social on Mastodon</p>
          </a>
        </li>
        <li>
          <a
            id="neocities"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://badmanners.neocities.org"
            rel="me"
            aria-label="Neocities"
          >
            <IconNeocities
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">badmanners.neocities.org on Neocities</p>
          </a>
        </li>
        <li>
          <a
            id="picarto"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://www.picarto.tv/BadManners"
            rel="me"
            aria-label="Picarto"
          >
            <IconPicarto
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadManners on Picarto</p>
          </a>
        </li>
        <li>
          <a
            id="reddit"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://www.reddit.com/user/BadManners_"
            rel="me"
            aria-label="Reddit"
          >
            <IconReddit
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">/u/BadManners_ on Reddit</p>
          </a>
        </li>
        <li>
          <a
            id="signal"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
            rel="me"
            aria-label="Signal"
          >
            <IconSignal
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">badmanners.10 on Signal</p>
          </a>
        </li>
        <li>
          <a
            id="sofurry"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://bad-manners.sofurry.com"
            rel="me"
            aria-label="SoFurry"
          >
            <IconSoFurry
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">Bad Manners on SoFurry</p>
          </a>
        </li>
        <li>
          <a
            id="ssh"
            class="u-key text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="/ssh.pub"
            aria-label="SSH public key"
            data-clipboard={sshKey}
            data-noun="SSH key"
          >
            <IconSSH
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="sr-only select-none">SSH public key</p>
          </a>
        </li>
        <li>
          <a
            id="steam"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://steamcommunity.com/id/badmanners_"
            rel="me"
            aria-label="Steam"
          >
            <IconSteam
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">badmanners_ on Steam</p>
          </a>
        </li>
        <li>
          <a
            id="subscribestar"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://subscribestar.adult/bad-manners"
            rel="me"
            aria-label="SubscribeStar"
          >
            <IconSubscribeStar
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">Bad Manners on SubscribeStar</p>
          </a>
        </li>
        <li>
          <a
            id="telegram"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://t.me/bad_manners"
            rel="me"
            aria-label="Telegram"
          >
            <IconTelegram
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">@bad_manners on Telegram</p>
          </a>
        </li>
        <li>
          <a
            id="tumblr"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://www.tumblr.com/badmannersxyz"
            rel="me"
            aria-label="Tumblr"
          >
            <IconTumblr
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">badmannersxyz on Tumblr</p>
          </a>
        </li>
        <li>
          <a
            id="twitch"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://www.twitch.tv/bad__manners"
            rel="me"
            aria-label="Twitch"
          >
            <IconTwitch
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">bad__manners on Twitch</p>
          </a>
        </li>
        <li>
          <a
            id="weasyl"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://www.weasyl.com/~badmanners"
            rel="me"
            aria-label="Weasyl"
          >
            <IconWeasyl
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">BadManners on Weasyl</p>
          </a>
        </li>
        <li>
          <a
            id="x"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://x.com/BadManners__"
            rel="me"
            aria-label="X"
          >
            <IconX
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">@BadManners__ on X</p>
          </a>
        </li>
        <li>
          <a
            id="youtube"
            class="u-url text-link group block w-full py-2 transition-colors motion-reduce:transition-none"
            href="https://www.youtube.com/@BadMannersXYZ"
            rel="me"
            aria-label="YouTube"
          >
            <IconYouTube
              height="1.75rem"
              width="1.75rem"
              class="inline transition-transform group-hover:scale-150 group-focus:scale-150 motion-reduce:transition-none motion-reduce:group-hover:scale-100 motion-reduce:group-focus:scale-100"
            />
            <p class="p-nickname sr-only select-none">@BadMannersXYZ on YouTube</p>
          </a>
        </li>
      </ul>
    </section>
  </article>
</BaseLayout>

<script>
  import tippy, { hideAll } from "tippy.js";
  import "tippy.js/dist/tippy.css";

  type TimeoutTag = ReturnType<typeof setTimeout> | null;

  const initIndexIcons = () => {
    const indexLinks = document.querySelector<HTMLElementTagNameMap["ul"]>("ul#links");
    if (!indexLinks) {
      return;
    }

    // Validate links
    const customClipboardItems = indexLinks.querySelectorAll<HTMLElementTagNameMap["a" | "button"]>(
      "li > :is(a, button)[data-clipboard]",
    );
    if (!customClipboardItems.length) {
      console.warn("Missing custom clipboard elements in #links list.");
    }
    indexLinks.querySelectorAll("li > :not(a, button)").forEach((el) => {
      console.warn("Element with unknown type found in #links list:", el);
    });
    indexLinks.querySelectorAll("li > :is(a, button):not([aria-label])").forEach((el) => {
      console.warn("Element with missing aria-label found in #links list:", el);
    });

    // Instantiate hover tooltips
    tippy("ul#links li > :is(a, button)[aria-label]", {
      content: (el) => el.getAttribute("aria-label")!,
      theme: "bm",
    });

    // Add functionality to custom clipboard items
    let tooltipTimeoutTag: TimeoutTag = null;
    customClipboardItems.forEach((element) => {
      const label = element.dataset.noun ?? element.getAttribute("aria-label");
      const clipboard = element.dataset.clipboard;
      if (!clipboard) {
        console.warn(`Missing "data-clipboard" field for custom clipboard element, ignoring...`, element);
        return;
      }
      const ariaDisabled = element.getAttribute("aria-disabled");
      element.removeAttribute("aria-disabled");
      const elementTooltip = tippy(element, {
        content: label ? `${label} copied to clipboard!` : "Copied to clipboard!",
        trigger: "manual",
        theme: "bm",
      });
      const onClickElement = (ev: Event) => {
        ev.preventDefault();
        tooltipTimeoutTag && clearTimeout(tooltipTimeoutTag);
        hideAll();
        navigator.clipboard
          .writeText(clipboard)
          .then(() => elementTooltip.show())
          .catch((e) => {
            console.error("Unable to copy custom content to clipboard.", clipboard, e);
            // Clean up clipboard logic, and revert element to original state
            element.removeEventListener("click", onClickElement);
            elementTooltip.destroy();
            if (ariaDisabled !== null) {
              element.setAttribute("aria-disabled", ariaDisabled);
            } else {
              // Invoke default click
              element.click();
            }
          });
      };
      element.addEventListener("click", onClickElement);
    });
  };

  initIndexIcons();
</script>