742 lines
30 KiB
Text
742 lines
30 KiB
Text
---
|
|
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>
|