Add more links and improve script checks
This commit is contained in:
parent
483f406037
commit
eccd4d8bfe
12 changed files with 264 additions and 205 deletions
|
|
@ -9,13 +9,16 @@ import IconEkasPortal from "../components/icons/brands/IconEkasPortal.astro";
|
|||
import IconFurAffinity from "../components/icons/brands/IconFurAffinity.astro";
|
||||
import IconGitHub from "../components/icons/brands/IconGitHub.astro";
|
||||
import IconGitLab from "../components/icons/brands/IconGitLab.astro";
|
||||
import IconGoogle from "../components/icons/brands/IconGoogle.astro";
|
||||
import IconInkbunny from "../components/icons/brands/IconInkbunny.astro";
|
||||
import IconItaku from "../components/icons/brands/IconItaku.astro";
|
||||
import IconItchIO from "../components/icons/brands/IconItchIO.astro";
|
||||
import IconKeybase from "../components/icons/brands/IconKeybase.astro";
|
||||
import IconKofi from "../components/icons/brands/IconKofi.astro";
|
||||
import IconMastodon from "../components/icons/brands/IconMastodon.astro";
|
||||
import IconNeocities from "../components/icons/brands/IconNeocities.astro";
|
||||
import IconPicarto from "../components/icons/brands/IconPicarto.astro";
|
||||
import IconReddit from "../components/icons/brands/IconReddit.astro";
|
||||
import IconSignal from "../components/icons/brands/IconSignal.astro";
|
||||
import IconSoFurry from "../components/icons/brands/IconSoFurry.astro";
|
||||
import IconSteam from "../components/icons/brands/IconSteam.astro";
|
||||
|
|
@ -24,6 +27,7 @@ import IconTelegram from "../components/icons/brands/IconTelegram.astro";
|
|||
import IconTwitch from "../components/icons/brands/IconTwitch.astro";
|
||||
import IconWeasyl from "../components/icons/brands/IconWeasyl.astro";
|
||||
import IconX from "../components/icons/brands/IconX.astro";
|
||||
import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
|
|
@ -44,6 +48,13 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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, and a furry who occasionally writes stuff.</p>
|
||||
{
|
||||
Astro.site ? (
|
||||
<a href={Astro.site} class="u-url sr-only" aria-label="Permalink">
|
||||
{Astro.site}
|
||||
</a>
|
||||
) : null
|
||||
}
|
||||
<ul
|
||||
id="links"
|
||||
class="grid grid-cols-3 gap-x-4 gap-y-5 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32"
|
||||
|
|
@ -62,7 +73,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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-category sr-only">E-mail address</p>
|
||||
<p class="sr-only">E-mail address</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="bluesky">
|
||||
|
|
@ -78,11 +89,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">@badmanners.xyz</span>
|
||||
on
|
||||
<span class="p-category">Bluesky</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">@badmanners.xyz on Bluesky</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="codeberg">
|
||||
|
|
@ -98,11 +105,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Codeberg</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">BadManners on Codeberg</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="cohost">
|
||||
|
|
@ -118,11 +121,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Cohost</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">BadManners on Cohost</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="discord">
|
||||
|
|
@ -137,11 +136,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">badmanners</span>
|
||||
on
|
||||
<span class="p-category">Discord</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">badmanners on Discord</p>
|
||||
</button>
|
||||
</li>
|
||||
<li id="eka-s-portal">
|
||||
|
|
@ -157,11 +152,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Eka's Portal</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">BadManners on Eka's Portal</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="fur-affinity">
|
||||
|
|
@ -177,11 +168,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Fur Affinity</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">BadManners on Fur Affinity</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="github">
|
||||
|
|
@ -197,11 +184,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">BadMannersXYZ</span>
|
||||
on
|
||||
<span class="p-category">GitHub</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">BadMannersXYZ on GitHub</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="gitlab">
|
||||
|
|
@ -217,11 +200,23 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">Bad_Manners</span>
|
||||
on
|
||||
<span class="p-category">GitLab</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">Bad_Manners on GitLab</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="gmail">
|
||||
<a
|
||||
class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="mailto:badmanners.vore@gmail.com"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
aria-label="badmanners.vore@gmail.com"
|
||||
>
|
||||
<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">Google/Gmail address</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="inkbunny">
|
||||
|
|
@ -237,11 +232,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Inkbunny</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">BadManners on Inkbunny</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="itaku">
|
||||
|
|
@ -257,11 +248,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">badmanners</span>
|
||||
on
|
||||
<span class="p-category">Itaku</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">badmanners on Itaku</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="itch-io">
|
||||
|
|
@ -277,11 +264,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">Bad Manners</span>
|
||||
on
|
||||
<span class="p-category">Itch.io</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">Bad Manners on Itch.io</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="keybase">
|
||||
|
|
@ -297,11 +280,23 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">badmanners</span>
|
||||
on
|
||||
<span class="p-category">Keybase</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">badmanners on Keybase</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="ko-fi">
|
||||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://ko-fi.com/badmanners"
|
||||
target="_blank"
|
||||
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">badmanners on Ko-fi</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="mastodon">
|
||||
|
|
@ -317,11 +312,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">@BadManners@meow.social</span>
|
||||
on
|
||||
<span class="p-category">Mastodon</span>
|
||||
</p>
|
||||
<p class="sr-only">@BadManners p-nickname@meow.social on Mastodon</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="neocities">
|
||||
|
|
@ -337,11 +328,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">badmanners.neocities.org</span>
|
||||
on
|
||||
<span class="p-category">Neocities</span>
|
||||
</p>
|
||||
<p class="sr-only">badmanners p-nickname.neocities.org on Neocities</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="picarto">
|
||||
|
|
@ -357,11 +344,23 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Picarto</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">BadManners on Picarto</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="reddit">
|
||||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://www.reddit.com/user/BadManners_/"
|
||||
target="_blank"
|
||||
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">/u/BadManners_ on Reddit</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="signal">
|
||||
|
|
@ -377,11 +376,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">badmanners.10</span>
|
||||
on
|
||||
<span class="p-category">Signal</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">badmanners.10 on Signal</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="sofurry">
|
||||
|
|
@ -397,11 +392,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">Bad Manners</span>
|
||||
on
|
||||
<span class="p-category">SoFurry</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">Bad Manners on SoFurry</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="steam">
|
||||
|
|
@ -417,11 +408,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">badmanners_</span>
|
||||
on
|
||||
<span class="p-category">Steam</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">badmanners_ on Steam</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="subscribestar">
|
||||
|
|
@ -437,11 +424,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">Bad Manners</span>
|
||||
on
|
||||
<span class="p-category">SubscribeStar</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">Bad Manners on SubscribeStar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="telegram">
|
||||
|
|
@ -457,11 +440,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">@bad_manners</span>
|
||||
on
|
||||
<span class="p-category">Telegram</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">@bad_manners on Telegram</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="twitch">
|
||||
|
|
@ -477,11 +456,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">bad__manners</span>
|
||||
on
|
||||
<span class="p-category">Twitch</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">bad__manners on Twitch</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="weasyl">
|
||||
|
|
@ -497,11 +472,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Weasyl</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">BadManners on Weasyl</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="x">
|
||||
|
|
@ -517,11 +488,23 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
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">
|
||||
<span class="p-nickname">@BadManners__</span>
|
||||
on
|
||||
<span class="p-category">X</span>
|
||||
</p>
|
||||
<p class="p-nickname sr-only">@BadManners__ on X</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="youtube">
|
||||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://www.youtube.com/@BadMannersXYZ"
|
||||
target="_blank"
|
||||
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">@BadMannersXYZ on YouTube</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -541,54 +524,61 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
if (!indexLinks) {
|
||||
return;
|
||||
}
|
||||
const emailAnchor = indexLinks.querySelector<HTMLElementTagNameMap["a"]>("#links li#e-mail a");
|
||||
const usernameButtons = indexLinks.querySelectorAll<HTMLElementTagNameMap["button"]>(
|
||||
"#links li button[data-username]",
|
||||
);
|
||||
if (!emailAnchor) {
|
||||
console.error("Missing e-mail anchor in #links list.");
|
||||
return;
|
||||
|
||||
// Validate links
|
||||
const emailAnchors = indexLinks.querySelectorAll<HTMLElementTagNameMap["a"]>(`li > a[href^="mailto:"]`);
|
||||
const usernameButtons = indexLinks.querySelectorAll<HTMLElementTagNameMap["button"]>("li > button[data-username]");
|
||||
if (!emailAnchors.length) {
|
||||
console.warn("Missing e-mail anchors in #links list.");
|
||||
}
|
||||
if (!usernameButtons.length) {
|
||||
console.error("Missing username buttons in #links list.");
|
||||
return;
|
||||
console.warn("Missing username buttons 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("#links li button, #links li a", {
|
||||
tippy("ul#links li > :is(a, button)[aria-label]", {
|
||||
content: (el) => el.getAttribute("aria-label")!,
|
||||
theme: "bm",
|
||||
});
|
||||
|
||||
// Add clipboard copy logic + manual tooltips to e-mail anchor and username buttons
|
||||
// Add clipboard functionality to e-mail anchors and username buttons
|
||||
let tooltipTimeoutTag: TimeoutTag = null;
|
||||
const emailTooltip = tippy(emailAnchor, {
|
||||
content: "E-mail address copied to clipboard!",
|
||||
trigger: "manual",
|
||||
theme: "bm",
|
||||
});
|
||||
emailAnchor.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
tooltipTimeoutTag && clearTimeout(tooltipTimeoutTag);
|
||||
hideAll();
|
||||
navigator.clipboard
|
||||
.writeText(emailAnchor.getAttribute("aria-label")!)
|
||||
.then(() => {
|
||||
emailTooltip.setContent("E-mail address copied to clipboard!");
|
||||
emailTooltip.show();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error("Unable to copy e-mail address to clipboard.", e);
|
||||
emailTooltip.setContent("Unable to copy e-mail address!");
|
||||
emailTooltip.show();
|
||||
});
|
||||
emailAnchors.forEach((anchor) => {
|
||||
if (!anchor.href.startsWith("mailto:")) {
|
||||
console.warn("Missing mailto: href for e-mail anchor, ignoring...", anchor);
|
||||
return;
|
||||
}
|
||||
const emailAddress = anchor.href.slice("mailto:".length);
|
||||
const anchorTooltip = tippy(anchor, {
|
||||
content: "E-mail address copied to clipboard!",
|
||||
trigger: "manual",
|
||||
theme: "bm",
|
||||
});
|
||||
anchor.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
tooltipTimeoutTag && clearTimeout(tooltipTimeoutTag);
|
||||
hideAll();
|
||||
navigator.clipboard
|
||||
.writeText(emailAddress)
|
||||
.then(() => {
|
||||
anchorTooltip.setContent("E-mail address copied to clipboard!");
|
||||
anchorTooltip.show();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error("Unable to copy e-mail address to clipboard.", e);
|
||||
anchorTooltip.setContent("Unable to copy e-mail address!");
|
||||
anchorTooltip.show();
|
||||
});
|
||||
});
|
||||
});
|
||||
usernameButtons.forEach((button) => {
|
||||
const label = button.getAttribute("aria-label");
|
||||
if (!label) {
|
||||
console.warn("Missing aria-label for button, ignoring...", button);
|
||||
return;
|
||||
}
|
||||
const username = button.dataset.username;
|
||||
if (!username) {
|
||||
console.warn("Missing data-username for button, ignoring...", button);
|
||||
|
|
@ -596,7 +586,7 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
}
|
||||
button.removeAttribute("aria-disabled");
|
||||
button.removeAttribute("disabled");
|
||||
const successContent = `${label} username copied to clipboard!`;
|
||||
const successContent = label ? `${label} username copied to clipboard!` : "Username copied to clipboard!";
|
||||
const buttonTooltip = tippy(button, {
|
||||
content: successContent,
|
||||
trigger: "manual",
|
||||
|
|
@ -613,8 +603,11 @@ import IconX from "../components/icons/brands/IconX.astro";
|
|||
buttonTooltip.show();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(`Unable to copy ${label} username to clipboard.`, e);
|
||||
buttonTooltip.setContent(`Unable to copy ${label} username!`);
|
||||
console.error(
|
||||
label ? `Unable to copy ${label} username to clipboard.` : "Unable to copy username to clipboard.",
|
||||
e,
|
||||
);
|
||||
buttonTooltip.setContent(label ? `Unable to copy ${label} username!` : "Unable to copy username!");
|
||||
buttonTooltip.show();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue