Add SSH key and make clipboard items consistent
This commit is contained in:
parent
e2527064db
commit
67e17ae27f
10 changed files with 127 additions and 162 deletions
|
|
@ -28,6 +28,7 @@ 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";
|
||||
import IconSSH from "../components/icons/brands/IconSSH.astro";
|
||||
---
|
||||
|
||||
<BaseLayout>
|
||||
|
|
@ -64,9 +65,10 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
data-clipboard="me@badmanners.xyz"
|
||||
data-noun="E-mail address"
|
||||
>
|
||||
<IconEnvelope
|
||||
height="1.75rem"
|
||||
|
|
@ -80,7 +82,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<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"
|
||||
aria-label="Bluesky"
|
||||
>
|
||||
|
|
@ -96,7 +97,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://codeberg.org/BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
aria-label="Codeberg"
|
||||
>
|
||||
|
|
@ -112,7 +112,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
>
|
||||
|
|
@ -128,7 +127,8 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<button
|
||||
class="text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
aria-label="Discord"
|
||||
data-username="badmanners"
|
||||
data-clipboard="badmanners"
|
||||
data-noun="Discord username"
|
||||
aria-disabled="true"
|
||||
>
|
||||
<IconDiscord
|
||||
|
|
@ -143,7 +143,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<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"
|
||||
aria-label="Eka's Portal"
|
||||
>
|
||||
|
|
@ -159,7 +158,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="Fur Affinity"
|
||||
>
|
||||
|
|
@ -175,7 +173,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://github.com/BadMannersXYZ"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
aria-label="GitHub"
|
||||
>
|
||||
|
|
@ -191,7 +188,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="GitLab"
|
||||
>
|
||||
|
|
@ -207,9 +203,10 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<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"
|
||||
data-clipboard="badmanners.vore@gmail.com"
|
||||
data-noun="Gmail address"
|
||||
>
|
||||
<IconGoogle
|
||||
height="1.75rem"
|
||||
|
|
@ -223,7 +220,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://inkbunny.net/BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
aria-label="Inkbunny"
|
||||
>
|
||||
|
|
@ -239,7 +235,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="Itaku"
|
||||
>
|
||||
|
|
@ -255,7 +250,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="Itch.io"
|
||||
>
|
||||
|
|
@ -271,7 +265,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://keybase.io/badmanners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
aria-label="Keybase"
|
||||
>
|
||||
|
|
@ -287,7 +280,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<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"
|
||||
>
|
||||
|
|
@ -303,7 +295,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://meow.social/@BadManners"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
aria-label="Mastodon"
|
||||
>
|
||||
|
|
@ -312,14 +303,13 @@ import IconYouTube from "../components/icons/brands/IconYouTube.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">@BadManners p-nickname@meow.social on Mastodon</p>
|
||||
<p class="p-nickname sr-only">@BadManners@meow.social on Mastodon</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="neocities">
|
||||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://badmanners.neocities.org/"
|
||||
target="_blank"
|
||||
href="https://badmanners.neocities.org"
|
||||
rel="me"
|
||||
aria-label="Neocities"
|
||||
>
|
||||
|
|
@ -328,14 +318,13 @@ import IconYouTube from "../components/icons/brands/IconYouTube.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">badmanners p-nickname.neocities.org on Neocities</p>
|
||||
<p class="p-nickname sr-only">badmanners.neocities.org on Neocities</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="picarto">
|
||||
<a
|
||||
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"
|
||||
aria-label="Picarto"
|
||||
>
|
||||
|
|
@ -350,8 +339,7 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<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"
|
||||
href="https://www.reddit.com/user/BadManners_"
|
||||
rel="me"
|
||||
aria-label="Reddit"
|
||||
>
|
||||
|
|
@ -367,7 +355,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="Signal"
|
||||
>
|
||||
|
|
@ -382,8 +369,7 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<li id="sofurry">
|
||||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://bad-manners.sofurry.com/"
|
||||
target="_blank"
|
||||
href="https://bad-manners.sofurry.com"
|
||||
rel="me"
|
||||
aria-label="SoFurry"
|
||||
>
|
||||
|
|
@ -395,11 +381,26 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<p class="p-nickname sr-only">Bad Manners on SoFurry</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="ssh">
|
||||
<a
|
||||
class="u-key text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="/ssh.pub"
|
||||
aria-label="SSH public key"
|
||||
data-clipboard="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIJ3QAZd3E95gxef2kiXppWa/xhcwBtnKMZJaW6s4d7Tm Bad Manners <me@badmanners.xyz>"
|
||||
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">SSH public key</p>
|
||||
</a>
|
||||
</li>
|
||||
<li id="steam">
|
||||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://steamcommunity.com/id/badmanners_/"
|
||||
target="_blank"
|
||||
href="https://steamcommunity.com/id/badmanners_"
|
||||
rel="me"
|
||||
aria-label="Steam"
|
||||
>
|
||||
|
|
@ -415,7 +416,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="SubscribeStar"
|
||||
>
|
||||
|
|
@ -431,7 +431,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="Telegram"
|
||||
>
|
||||
|
|
@ -447,7 +446,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="Twitch"
|
||||
>
|
||||
|
|
@ -463,7 +461,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
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"
|
||||
aria-label="Weasyl"
|
||||
>
|
||||
|
|
@ -479,7 +476,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<a
|
||||
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
|
||||
href="https://x.com/BadManners__"
|
||||
target="_blank"
|
||||
rel="me"
|
||||
aria-label="X"
|
||||
>
|
||||
|
|
@ -495,7 +491,6 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
<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"
|
||||
>
|
||||
|
|
@ -526,13 +521,11 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
}
|
||||
|
||||
// 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.warn("Missing username buttons in #links list.");
|
||||
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);
|
||||
|
|
@ -547,68 +540,32 @@ import IconYouTube from "../components/icons/brands/IconYouTube.astro";
|
|||
theme: "bm",
|
||||
});
|
||||
|
||||
// Add clipboard functionality to e-mail anchors and username buttons
|
||||
// Add functionality to custom clipboard items
|
||||
let tooltipTimeoutTag: TimeoutTag = null;
|
||||
emailAnchors.forEach((anchor) => {
|
||||
if (!anchor.href.startsWith("mailto:")) {
|
||||
console.warn("Missing mailto: href for e-mail anchor, ignoring...", anchor);
|
||||
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 emailAddress = anchor.href.slice("mailto:".length);
|
||||
const anchorTooltip = tippy(anchor, {
|
||||
content: "E-mail address copied to clipboard!",
|
||||
element.removeAttribute("aria-disabled");
|
||||
const elementTooltip = tippy(element, {
|
||||
content: label ? `${label} copied to clipboard!` : "Copied to clipboard!",
|
||||
trigger: "manual",
|
||||
theme: "bm",
|
||||
});
|
||||
anchor.addEventListener("click", (ev) => {
|
||||
element.addEventListener("click", (ev) => {
|
||||
ev.preventDefault();
|
||||
tooltipTimeoutTag && clearTimeout(tooltipTimeoutTag);
|
||||
hideAll();
|
||||
navigator.clipboard
|
||||
.writeText(emailAddress)
|
||||
.writeText(clipboard)
|
||||
.then(() => {
|
||||
anchorTooltip.setContent("E-mail address copied to clipboard!");
|
||||
anchorTooltip.show();
|
||||
elementTooltip.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");
|
||||
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 ? `${label} username copied to clipboard!` : "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(
|
||||
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();
|
||||
console.error("Unable to copy custom content to clipboard.", clipboard, e);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue