Consolidate socials on index and add View Transitions API support
This commit is contained in:
parent
580cd2da26
commit
483f406037
23 changed files with 493 additions and 458 deletions
|
|
@ -1,12 +1,16 @@
|
|||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import IconEnvelope from "../components/icons/IconEnvelope.astro";
|
||||
import IconBluesky from "../components/icons/brands/IconBluesky.astro";
|
||||
import IconCodeberg from "../components/icons/brands/IconCodeberg.astro";
|
||||
import IconCohost from "../components/icons/brands/IconCohost.astro";
|
||||
import IconDiscord from "../components/icons/brands/IconDiscord.astro";
|
||||
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 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 IconMastodon from "../components/icons/brands/IconMastodon.astro";
|
||||
|
|
@ -20,8 +24,6 @@ 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 IconEllipsis from "../components/icons/IconEllipsis.astro";
|
||||
import IconItaku from "../components/icons/brands/IconItaku.astro";
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
|
|
@ -30,7 +32,7 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
|
|||
property="og:description"
|
||||
content="Safe vore enthusiast, mimic hybrid, and occasional writer."
|
||||
/>
|
||||
<article class="h-card" aria-labelledby="title-home">
|
||||
<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 <span class="p-name">Bad Manners</span>!
|
||||
</h1>
|
||||
|
|
@ -47,9 +49,25 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
|
|||
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"
|
||||
aria-label="Links"
|
||||
>
|
||||
<li>
|
||||
<li id="e-mail">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="mailto:me@badmanners.xyz"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
aria-label="me@badmanners.xyz"
|
||||
>
|
||||
<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="p-category sr-only">E-mail address</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="bluesky">
|
||||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://bsky.app/profile/badmanners.xyz"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -60,12 +78,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">@badmanners.xyz on Bluesky</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">@badmanners.xyz</span>
|
||||
on
|
||||
<span class="p-category">Bluesky</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="codeberg">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://codeberg.org/BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -76,12 +98,55 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">BadManners on Codeberg</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Codeberg</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="cohost">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://cohost.org/BadManners"
|
||||
target="_blank"
|
||||
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="sr-only">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Cohost</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="discord">
|
||||
<button
|
||||
class="text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
aria-label="Discord"
|
||||
data-username="badmanners"
|
||||
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="sr-only">
|
||||
<span class="p-nickname">badmanners</span>
|
||||
on
|
||||
<span class="p-category">Discord</span>
|
||||
</p>
|
||||
</button>
|
||||
</li>
|
||||
<li id="eka-s-portal">
|
||||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://aryion.com/g4/user/BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -92,12 +157,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">BadManners on Eka's Portal</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Eka's Portal</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="fur-affinity">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://www.furaffinity.net/user/BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -108,12 +177,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">BadManners on Fur Affinity</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Fur Affinity</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="github">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://github.com/BadMannersXYZ"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -124,12 +197,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">BadMannersXYZ on GitHub</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">BadMannersXYZ</span>
|
||||
on
|
||||
<span class="p-category">GitHub</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="gitlab">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://gitlab.com/Bad_Manners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -140,12 +217,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">Bad_Manners on GitLab</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">Bad_Manners</span>
|
||||
on
|
||||
<span class="p-category">GitLab</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="inkbunny">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://inkbunny.net/BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -156,12 +237,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">BadManners on Inkbunny</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Inkbunny</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="itaku">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://itaku.ee/profile/badmanners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -172,12 +257,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">badmanners on Itaku</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">badmanners</span>
|
||||
on
|
||||
<span class="p-category">Itaku</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="itch-io">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://bad-manners.itch.io"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -188,12 +277,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">Bad Manners on Itch.io</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">Bad Manners</span>
|
||||
on
|
||||
<span class="p-category">Itch.io</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="keybase">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://keybase.io/badmanners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -204,12 +297,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">badmanners on Keybase</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">badmanners</span>
|
||||
on
|
||||
<span class="p-category">Keybase</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="mastodon">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://meow.social/@BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -220,12 +317,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">@BadManners@meow.social on Mastodon</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">@BadManners@meow.social</span>
|
||||
on
|
||||
<span class="p-category">Mastodon</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="neocities">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://badmanners.neocities.org/"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -236,12 +337,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">badmanners.neocities.org on Neocities</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">badmanners.neocities.org</span>
|
||||
on
|
||||
<span class="p-category">Neocities</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="picarto">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://www.picarto.tv/BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -252,12 +357,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">BadManners on Picarto</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Picarto</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="signal">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -268,12 +377,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">badmanners.10 on Signal</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">badmanners.10</span>
|
||||
on
|
||||
<span class="p-category">Signal</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="sofurry">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://bad-manners.sofurry.com/"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -284,12 +397,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">Bad Manners on SoFurry</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">Bad Manners</span>
|
||||
on
|
||||
<span class="p-category">SoFurry</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="steam">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://steamcommunity.com/id/badmanners_/"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -300,12 +417,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">badmanners_ on Steam</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">badmanners_</span>
|
||||
on
|
||||
<span class="p-category">Steam</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="subscribestar">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://subscribestar.adult/bad-manners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -316,12 +437,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">Bad Manners on SubscribeStar</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">Bad Manners</span>
|
||||
on
|
||||
<span class="p-category">SubscribeStar</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="telegram">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://t.me/bad_manners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -332,12 +457,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">@bad_manners on Telegram</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">@bad_manners</span>
|
||||
on
|
||||
<span class="p-category">Telegram</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="twitch">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://www.twitch.tv/bad__manners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -348,12 +477,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">bad__manners on Twitch</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">bad__manners</span>
|
||||
on
|
||||
<span class="p-category">Twitch</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="weasyl">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://www.weasyl.com/~badmanners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -364,12 +497,16 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">BadManners on Weasyl</span>
|
||||
<p class="sr-only">
|
||||
<span class="p-nickname">BadManners</span>
|
||||
on
|
||||
<span class="p-category">Weasyl</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li id="x">
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://x.com/BadManners__"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
|
|
@ -380,20 +517,11 @@ import IconItaku from "../components/icons/brands/IconItaku.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"
|
||||
/>
|
||||
<span class="p-nickname sr-only">@BadManners__ on X</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
class="u-url text-link group p-2 transition-colors motion-reduce:transition-none"
|
||||
href="/contact"
|
||||
aria-label="More socials..."
|
||||
>
|
||||
<IconEllipsis
|
||||
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">
|
||||
<span class="p-nickname">@BadManners__</span>
|
||||
on
|
||||
<span class="p-category">X</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -402,13 +530,99 @@ import IconItaku from "../components/icons/brands/IconItaku.astro";
|
|||
</BaseLayout>
|
||||
|
||||
<script>
|
||||
import tippy from "tippy.js";
|
||||
import { ENABLE_VIEW_TRANSITIONS } from "astro:env/client";
|
||||
import tippy, { hideAll } from "tippy.js";
|
||||
import "tippy.js/dist/tippy.css";
|
||||
|
||||
(function () {
|
||||
tippy(document.querySelectorAll("#links a"), {
|
||||
type TimeoutTag = ReturnType<typeof setTimeout> | null;
|
||||
|
||||
const initIndexIcons = () => {
|
||||
const indexLinks = document.querySelector<HTMLElementTagNameMap["ul"]>("ul#links");
|
||||
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;
|
||||
}
|
||||
if (!usernameButtons.length) {
|
||||
console.error("Missing username buttons in #links list.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Instantiate hover tooltips
|
||||
tippy("#links li button, #links li a", {
|
||||
content: (el) => el.getAttribute("aria-label")!,
|
||||
theme: "bm",
|
||||
});
|
||||
})();
|
||||
|
||||
// Add clipboard copy logic + manual tooltips to e-mail anchor 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();
|
||||
});
|
||||
});
|
||||
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);
|
||||
return;
|
||||
}
|
||||
button.removeAttribute("aria-disabled");
|
||||
button.removeAttribute("disabled");
|
||||
const successContent = `${label} username copied to clipboard!`;
|
||||
const buttonTooltip = tippy(button, {
|
||||
content: successContent,
|
||||
trigger: "manual",
|
||||
theme: "bm",
|
||||
});
|
||||
button.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
tooltipTimeoutTag && clearTimeout(tooltipTimeoutTag);
|
||||
hideAll();
|
||||
navigator.clipboard
|
||||
.writeText(username)
|
||||
.then(() => {
|
||||
buttonTooltip.setContent(successContent);
|
||||
buttonTooltip.show();
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(`Unable to copy ${label} username to clipboard.`, e);
|
||||
buttonTooltip.setContent(`Unable to copy ${label} username!`);
|
||||
buttonTooltip.show();
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
if (ENABLE_VIEW_TRANSITIONS) {
|
||||
document.addEventListener("astro:page-load", initIndexIcons);
|
||||
} else {
|
||||
initIndexIcons();
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue