badmanners.xyz/src/pages/index.astro

664 lines
21 KiB
Text

---
import { readFile } from "node:fs/promises";
import BaseLayout from "@layouts/BaseLayout.astro";
import {
IconEnvelope,
IconBriefcase,
IconKey,
IconLink,
IconCommentDots,
IconSSH,
IconSquareRSS,
} from "@components/icons";
import {
IconBluesky,
IconCodeberg,
IconDiscord,
IconEkasPortal,
IconFurAffinity,
IconGitGud,
IconGithub,
IconGitlab,
IconGoogle,
IconInkbunny,
IconItaku,
IconItchIO,
IconKeybase,
IconKeyoxide,
IconKofi,
IconMastodon,
IconNeocities,
IconPicarto,
IconSignal,
IconSoFurry,
IconSteam,
IconSubscribeStar,
IconTelegram,
IconTwitch,
IconWeasyl,
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 id="homepage" class="h-card" aria-label="Homepage of Bad Manners" transition:name="content">
<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 id="homepage-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, a programmer, 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 lg:grid-cols-5"
aria-label="Links"
>
{
Astro.site ? (
<li>
<a
id="permalink"
class="u-url contact-link group"
href={Astro.site}
aria-label="Permalink"
title="Permalink"
data-tooltip
data-clipboard={Astro.site}
data-noun="URL"
>
<IconLink height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="sr-only select-none">https://badmanners.xyz</p>
</a>
</li>
) : null
}
<li>
<a
id="gallery"
class="u-url contact-link group"
href="https://gallery.badmanners.xyz"
rel="me"
aria-label="Main gallery"
title="Main gallery"
data-tooltip
data-age-restricted
>
<IconBriefcase height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="sr-only select-none">Gallery on https://gallery.badmanners.xyz</p>
</a>
</li>
<li>
<a
id="gallery-feed"
class="u-url contact-link group"
type="application/rss+xml"
href="https://gallery.badmanners.xyz/feed.xml"
rel="alternate"
aria-label="Gallery feed"
title="Gallery feed"
data-tooltip
>
<IconSquareRSS height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="sr-only select-none">Gallery feed</p>
</a>
</li>
<li>
<a
id="pronouns"
class="u-url contact-link group"
href="https://pronouns.cc/@BadManners"
rel="me"
aria-label="Pronouns (he/they)"
title="Pronouns (he/they)"
data-tooltip
>
<IconCommentDots height="1.75rem" width="1.75rem" class="contact-icon" />
<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 contact-link group"
href="mailto:me@badmanners.xyz"
rel="me"
aria-label="E-mail"
title="E-mail"
data-tooltip
data-clipboard="me@badmanners.xyz"
data-noun="E-mail address"
>
<IconEnvelope height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="sr-only select-none">me@badmanners.xyz</p>
</a>
</li>
<li>
<a
id="bluesky"
class="u-url contact-link group"
href="https://bsky.app/profile/badmanners.xyz"
rel="me"
aria-label="Bluesky"
title="Bluesky"
data-tooltip
>
<IconBluesky height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">@badmanners.xyz on Bluesky</p>
</a>
</li>
<li>
<a
id="codeberg"
class="u-url contact-link group"
href="https://codeberg.org/BadManners"
rel="me"
aria-label="Codeberg"
title="Codeberg"
data-tooltip
>
<IconCodeberg height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">BadManners on Codeberg</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"
title="Discord"
data-tooltip
data-clipboard="badmanners"
data-noun="Discord username"
disabled
>
<IconDiscord height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">badmanners on Discord</p>
</button>
</li>
<li>
<a
id="eka-s-portal"
class="u-url contact-link group"
href="https://aryion.com/g4/user/BadManners"
rel="me"
aria-label="Eka's Portal"
title="Eka's Portal"
data-tooltip
>
<IconEkasPortal height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">BadManners on Eka's Portal</p>
</a>
</li>
<li>
<a
id="fur-affinity"
class="u-url contact-link group"
href="https://www.furaffinity.net/user/BadManners"
rel="me"
aria-label="Fur Affinity"
title="Fur Affinity"
data-tooltip
>
<IconFurAffinity height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">BadManners on Fur Affinity</p>
</a>
</li>
<li>
<a
id="gitgud"
class="u-url contact-link group"
href="https://gitgud.io/BadMannersXYZ"
rel="me"
aria-label="GitGud"
title="GitGud"
data-tooltip
>
<IconGitGud height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">BadMannersXYZ on GitGud</p>
</a>
</li>
<li>
<a
id="github"
class="u-url contact-link group"
href="https://github.com/BadMannersXYZ"
rel="me"
aria-label="GitHub"
title="GitHub"
data-tooltip
>
<IconGithub height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">BadMannersXYZ on GitHub</p>
</a>
</li>
<li>
<a
id="gitlab"
class="u-url contact-link group"
href="https://gitlab.com/Bad_Manners"
rel="me"
aria-label="GitLab"
title="GitLab"
data-tooltip
>
<IconGitlab height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">Bad_Manners on GitLab</p>
</a>
</li>
<li>
<a
id="google"
class="u-email contact-link group"
href="mailto:google@badmanners.xyz"
rel="me"
aria-label="Google"
title="Google"
data-tooltip
data-clipboard="google@badmanners.xyz"
data-noun="Google address"
>
<IconGoogle height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="sr-only select-none">google@badmanners.xyz</p>
</a>
</li>
<li>
<a
id="gpg"
class="u-key contact-link group"
href="/gpg.pub"
type="text/plain"
aria-label="GPG public key"
title="GPG public key"
data-tooltip
data-clipboard={gpgKey}
data-noun="GPG key"
>
<IconKey height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="sr-only select-none">GPG public key</p>
</a>
</li>
<li>
<a
id="inkbunny"
class="u-url contact-link group"
href="https://inkbunny.net/BadManners"
rel="me"
aria-label="Inkbunny"
title="Inkbunny"
data-tooltip
>
<IconInkbunny height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">BadManners on Inkbunny</p>
</a>
</li>
<li>
<a
id="itaku"
class="u-url contact-link group"
href="https://itaku.ee/profile/badmanners"
rel="me"
aria-label="Itaku"
title="Itaku"
data-tooltip
>
<IconItaku height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">badmanners on Itaku</p>
</a>
</li>
<li>
<a
id="itch"
class="u-url contact-link group"
href="https://bad-manners.itch.io"
rel="me"
aria-label="Itch.io"
title="Itch.io"
data-tooltip
>
<IconItchIO height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">Bad Manners on Itch.io</p>
</a>
</li>
<li>
<a
id="keybase"
class="u-url contact-link group"
href="https://keybase.io/badmanners"
rel="me"
aria-label="Keybase"
title="Keybase"
data-tooltip
>
<IconKeybase height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">badmanners on Keybase</p>
</a>
</li>
<li>
<a
id="keyoxide"
class="u-url contact-link group"
href="https://keyoxide.org/aspe%3Akeyoxide.org%3AUWYBVFCBFXTVUF2U6FS6AYJHLU"
rel="me"
aria-label="Keyoxide"
title="Keyoxide"
data-tooltip
>
<IconKeyoxide height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-uid sr-only select-none">aspe:keyoxide.org:UWYBVFCBFXTVUF2U6FS6AYJHLU</p>
</a>
</li>
<li>
<a
id="ko-fi"
class="u-url contact-link group"
href="https://ko-fi.com/badmanners"
rel="me"
aria-label="Ko-fi"
title="Ko-fi"
data-tooltip
>
<IconKofi height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">badmanners on Ko-fi</p>
</a>
</li>
<li>
<a
id="mastodon"
class="u-url contact-link group"
href="https://meow.social/@BadManners"
rel="me"
aria-label="Mastodon"
title="Mastodon"
data-tooltip
>
<IconMastodon height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">@BadManners@meow.social on Mastodon</p>
</a>
</li>
<li>
<a
id="neocities"
class="u-url contact-link group"
href="https://badmanners.neocities.org"
rel="me"
aria-label="Neocities"
title="Neocities"
data-tooltip
>
<IconNeocities height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">badmanners.neocities.org on Neocities</p>
</a>
</li>
<li>
<a
id="picarto"
class="u-url contact-link group"
href="https://www.picarto.tv/BadManners"
rel="me"
aria-label="Picarto"
title="Picarto"
data-tooltip
>
<IconPicarto height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">BadManners on Picarto</p>
</a>
</li>
<li>
<a
id="signal"
class="u-url contact-link group"
href="https://signal.me/#eu/ytt_rk0fFmAB2JAW-x2PbUiJyc_H3kYmfL_Pq4QNh5QIDsiFtjdFHaqFRs1D36tB"
rel="me"
aria-label="Signal"
title="Signal"
data-tooltip
>
<IconSignal height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">badmanners.10 on Signal</p>
</a>
</li>
<li>
<a
id="sofurry"
class="u-url contact-link group"
href="https://bad-manners.sofurry.com"
rel="me"
aria-label="SoFurry"
title="SoFurry"
data-tooltip
>
<IconSoFurry height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">Bad Manners on SoFurry</p>
</a>
</li>
<li>
<a
id="ssh"
class="u-key contact-link group"
href="/ssh.pub"
type="text/plain"
aria-label="SSH public key"
title="SSH public key"
data-tooltip
data-clipboard={sshKey}
data-noun="SSH key"
>
<IconSSH height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="sr-only select-none">SSH public key</p>
</a>
</li>
<li>
<a
id="steam"
class="u-url contact-link group"
href="https://steamcommunity.com/id/badmanners_"
rel="me"
aria-label="Steam"
title="Steam"
data-tooltip
>
<IconSteam height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">badmanners_ on Steam</p>
</a>
</li>
<li>
<a
id="subscribestar"
class="u-url contact-link group"
href="https://subscribestar.adult/bad-manners"
rel="me"
aria-label="SubscribeStar"
title="SubscribeStar"
data-tooltip
>
<IconSubscribeStar height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">Bad Manners on SubscribeStar</p>
</a>
</li>
<li>
<a
id="telegram"
class="u-url contact-link group"
href="https://t.me/bad_manners"
rel="me"
aria-label="Telegram"
title="Telegram"
data-tooltip
>
<IconTelegram height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">@bad_manners on Telegram</p>
</a>
</li>
<li>
<a
id="twitch"
class="u-url contact-link group"
href="https://www.twitch.tv/bad__manners"
rel="me"
aria-label="Twitch"
title="Twitch"
data-tooltip
>
<IconTwitch height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">bad__manners on Twitch</p>
</a>
</li>
<li>
<a
id="weasyl"
class="u-url contact-link group"
href="https://www.weasyl.com/~badmanners"
rel="me"
aria-label="Weasyl"
title="Weasyl"
data-tooltip
>
<IconWeasyl height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">BadManners on Weasyl</p>
</a>
</li>
<li>
<a
id="youtube"
class="u-url contact-link group"
href="https://www.youtube.com/@BadMannersXYZ"
rel="me"
aria-label="YouTube"
title="YouTube"
data-tooltip
>
<IconYouTube height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="p-nickname sr-only select-none">@BadMannersXYZ on YouTube</p>
</a>
</li>
</ul>
</section>
</article>
</BaseLayout>
<style>
ul#links > li {
min-width: 6rem;
flex: 1 1 0%;
}
</style>
<script>
import tippy, { hideAll } from "tippy.js";
import "tippy.js/dist/tippy.css";
const initIndexIcons = () => {
const indexLinks = document.querySelector<HTMLElementTagNameMap["ul"]>("ul#links");
if (!indexLinks) {
return;
}
// Validate links
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
const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]");
tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title));
tippy(tooltipItems, {
content: (el) => (el as HTMLElement).dataset.tooltip!,
theme: "bm",
});
tooltipItems.forEach((el) => el.removeAttribute("title"));
// Add functionality to custom clipboard items
if ("clipboard" in navigator) {
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.");
}
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;
}
element.removeAttribute("disabled");
const elementTooltip = tippy(element, {
content: label ? `${label} copied to clipboard!` : "Copied to clipboard!",
trigger: "manual",
theme: "bm",
});
const onClickElement = async (ev: Event) => {
ev.preventDefault();
hideAll();
requestAnimationFrame(() => {
navigator.clipboard
.writeText(clipboard)
.then(() => elementTooltip.show())
.catch((e) => {
console.error("Unable to copy custom content to clipboard.", clipboard, e);
});
});
};
element.addEventListener("click", onClickElement);
});
} else {
const customClipboardButtons = indexLinks.querySelectorAll<HTMLElementTagNameMap["button"]>(
"li > button[data-clipboard][disabled]",
);
customClipboardButtons.forEach((element) => {
element.removeAttribute("disabled");
const clipboard = element.dataset.clipboard;
if (!clipboard) {
console.warn(`Missing "data-clipboard" field for custom clipboard element, ignoring...`, element);
return;
}
element.removeAttribute("disabled");
const elementTooltip = tippy(element, {
content: clipboard,
trigger: "manual",
theme: "bm",
});
const onClickElement = async (ev: Event) => {
ev.preventDefault();
hideAll();
elementTooltip.show();
};
element.addEventListener("click", onClickElement);
});
}
};
document.addEventListener("astro:page-load", initIndexIcons);
initIndexIcons();
</script>