---
const twitterArchive = "https://buymymojo.net/twitter/";
const discord = "https://discord.com/users/383507911160233985";
const github = "https://github.com/BuyMyMojo";
const steam = "https://steamcommunity.com/profiles/76561198227003516";
const bsky = "https://bsky.app/profile/did:plc:bzrn33tcfgjxnsanvg6py3xn";
const bskyArchive = "https://buymymojo.net/bsky/";

import { Icon } from "astro-icon/components";
---

<h1>Places to find and/or contact me:</h1>
<ul class="list-disc p-4">
    <li>
        <a href={bsky} class="p-1" target="_blank"
            ><Icon name="meteor-icons:bluesky" class={"svg-inline"} /> Bluesky</a
        > - <button id="bskypid"
            >@aria.coffee (Click to copy DID)</button
        >
    </li>
    <li>
        <a href={discord} target="_blank"
            ><Icon name="meteor-icons:discord" class={"svg-inline"}/> Discord</a
        > - @buymymojo
    </li>
    <li>
      <a href={github} target="_blank"
          ><Icon name="meteor-icons:github" class={"svg-inline"}/> GitHub</a
      > - @BuyMyMojo
  </li>
  <li>
    <a href={steam} target="_blank"
        ><Icon name="tabler:brand-steam" class={"svg-inline"}/> Steam</a
    > - @BuyMyMojo
</li>
</ul>
<br />
<h2>Archives:</h2>
<ul class="list-disc p-4">
    <li>
        <a href={bskyArchive} class="p-1" target="_blank"
            ><i class="fa-brands fa-bluesky"></i> Bluesky(Archive)</a
        >
    </li>
    <li>
        <a href={twitterArchive} class="p-1" target="_blank"
            ><i class="fa-brands fa-twitter"></i> Twitter(Archive)</a
        >
    </li>
</ul>

<script>
    const bskypid = document.querySelector("#bskypid");

    if (bskypid != null) {
        bskypid.addEventListener("click", () => {
            navigator.clipboard.writeText("did:plc:bzrn33tcfgjxnsanvg6py3xn");
        });
    }
</script>
