Add Keyoxide and improve index links handling

This commit is contained in:
Bad Manners 2024-08-25 18:06:15 -03:00
parent 4683b584c2
commit 5559cea720
6 changed files with 115 additions and 44 deletions

View file

@ -15,6 +15,7 @@ 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 IconKeyoxide from "../components/icons/brands/IconKeyoxide.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";
@ -49,10 +50,12 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
alt="Logo for Bad Manners"
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 programmer, and occasionally a writer.</p>
<p class="p-note mt-6 sm:px-5 md:px-6">
I'm a safe vore enthusiast, a furry programmer, and occasionally a writer.
</p>
{
Astro.site ? (
<a href={Astro.site} class="u-url sr-only" aria-label="Permalink">
<a id="website" href={Astro.site} class="u-url sr-only" aria-label="Permalink">
{Astro.site}
</a>
) : null
@ -62,8 +65,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.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 id="e-mail">
<li>
<a
id="e-mail"
class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
href="mailto:me@badmanners.xyz"
rel="me"
@ -79,8 +83,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="sr-only">E-mail address</p>
</a>
</li>
<li id="gallery">
<li>
<a
id="gallery"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz"
rel="me"
@ -94,8 +99,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
/>
</a>
</li>
<li id="bluesky">
<li>
<a
id="bluesky"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://bsky.app/profile/badmanners.xyz"
rel="me"
@ -109,8 +115,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">@badmanners.xyz on Bluesky</p>
</a>
</li>
<li id="codeberg">
<li>
<a
id="codeberg"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://codeberg.org/BadManners"
rel="me"
@ -124,8 +131,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">BadManners on Codeberg</p>
</a>
</li>
<li id="cohost">
<li>
<a
id="cohost"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://cohost.org/BadManners"
rel="me"
@ -139,8 +147,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">BadManners on Cohost</p>
</a>
</li>
<li id="discord">
<li>
<button
id="discord"
class="text-link group block w-full transition-colors motion-reduce:transition-none"
aria-label="Discord"
data-clipboard="badmanners"
@ -155,8 +164,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">badmanners on Discord</p>
</button>
</li>
<li id="eka-s-portal">
<li>
<a
id="eka-s-portal"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://aryion.com/g4/user/BadManners"
rel="me"
@ -170,8 +180,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">BadManners on Eka's Portal</p>
</a>
</li>
<li id="fur-affinity">
<li>
<a
id="fur-affinity"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://www.furaffinity.net/user/BadManners"
rel="me"
@ -185,8 +196,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">BadManners on Fur Affinity</p>
</a>
</li>
<li id="github">
<li>
<a
id="github"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://github.com/BadMannersXYZ"
rel="me"
@ -200,8 +212,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">BadMannersXYZ on GitHub</p>
</a>
</li>
<li id="gitlab">
<li>
<a
id="gitlab"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://gitlab.com/Bad_Manners"
rel="me"
@ -215,8 +228,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">Bad_Manners on GitLab</p>
</a>
</li>
<li id="gmail">
<li>
<a
id="gmail"
class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
href="mailto:badmanners.vore@gmail.com"
rel="me"
@ -232,8 +246,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="sr-only">Google/Gmail address</p>
</a>
</li>
<li id="inkbunny">
<li>
<a
id="inkbunny"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://inkbunny.net/BadManners"
rel="me"
@ -247,8 +262,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">BadManners on Inkbunny</p>
</a>
</li>
<li id="itaku">
<li>
<a
id="itaku"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://itaku.ee/profile/badmanners"
rel="me"
@ -262,8 +278,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">badmanners on Itaku</p>
</a>
</li>
<li id="itch-io">
<li>
<a
id="itch"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://bad-manners.itch.io"
rel="me"
@ -277,8 +294,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">Bad Manners on Itch.io</p>
</a>
</li>
<li id="keybase">
<li>
<a
id="keybase"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://keybase.io/badmanners"
rel="me"
@ -292,8 +310,25 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">badmanners on Keybase</p>
</a>
</li>
<li id="ko-fi">
<li>
<a
id="keyoxide"
class="u-url text-link group block w-full 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="u-uid hidden">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</p>
</a>
</li>
<li>
<a
id="ko-fi"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://ko-fi.com/badmanners"
rel="me"
@ -307,8 +342,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">badmanners on Ko-fi</p>
</a>
</li>
<li id="mastodon">
<li>
<a
id="mastodon"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://meow.social/@BadManners"
rel="me"
@ -322,8 +358,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">@BadManners@meow.social on Mastodon</p>
</a>
</li>
<li id="neocities">
<li>
<a
id="neocities"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://badmanners.neocities.org"
rel="me"
@ -337,8 +374,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">badmanners.neocities.org on Neocities</p>
</a>
</li>
<li id="picarto">
<li>
<a
id="picarto"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://www.picarto.tv/BadManners"
rel="me"
@ -352,8 +390,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">BadManners on Picarto</p>
</a>
</li>
<li id="reddit">
<li>
<a
id="reddit"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://www.reddit.com/user/BadManners_"
rel="me"
@ -367,8 +406,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">/u/BadManners_ on Reddit</p>
</a>
</li>
<li id="signal">
<li>
<a
id="signal"
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"
rel="me"
@ -382,8 +422,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">badmanners.10 on Signal</p>
</a>
</li>
<li id="sofurry">
<li>
<a
id="sofurry"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://bad-manners.sofurry.com"
rel="me"
@ -397,8 +438,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">Bad Manners on SoFurry</p>
</a>
</li>
<li id="ssh">
<li>
<a
id="ssh"
class="u-key text-link group block w-full transition-colors motion-reduce:transition-none"
href="/ssh.pub"
aria-label="SSH public key"
@ -412,8 +454,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
/>
</a>
</li>
<li id="steam">
<li>
<a
id="steam"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://steamcommunity.com/id/badmanners_"
rel="me"
@ -427,8 +470,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">badmanners_ on Steam</p>
</a>
</li>
<li id="subscribestar">
<li>
<a
id="subscribestar"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://subscribestar.adult/bad-manners"
rel="me"
@ -442,8 +486,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">Bad Manners on SubscribeStar</p>
</a>
</li>
<li id="telegram">
<li>
<a
id="telegram"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://t.me/bad_manners"
rel="me"
@ -457,8 +502,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">@bad_manners on Telegram</p>
</a>
</li>
<li id="twitch">
<li>
<a
id="twitch"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://www.twitch.tv/bad__manners"
rel="me"
@ -472,8 +518,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">bad__manners on Twitch</p>
</a>
</li>
<li id="weasyl">
<li>
<a
id="weasyl"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://www.weasyl.com/~badmanners"
rel="me"
@ -487,8 +534,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">BadManners on Weasyl</p>
</a>
</li>
<li id="x">
<li>
<a
id="x"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://x.com/BadManners__"
rel="me"
@ -502,8 +550,9 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
<p class="p-nickname sr-only">@BadManners__ on X</p>
</a>
</li>
<li id="youtube">
<li>
<a
id="youtube"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
href="https://www.youtube.com/@BadMannersXYZ"
rel="me"
@ -564,25 +613,34 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
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",
});
element.addEventListener("click", (ev) => {
const onClickElement = (ev: Event) => {
ev.preventDefault();
tooltipTimeoutTag && clearTimeout(tooltipTimeoutTag);
hideAll();
navigator.clipboard
.writeText(clipboard)
.then(() => {
elementTooltip.show();
})
.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);
});
};
if (ENABLE_VIEW_TRANSITIONS) {