badmanners/badmanners.xyz
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements to scripts and index page on text-only browser

Browse source
This commit is contained in:
Bad Manners 2024-08-29 15:38:12 -03:00
parent ad03c0a6d0
commit 48fe7f041e
8 changed files with 72 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "badmanners.xyz",
"version": "2.1.7",
"version": "2.1.8",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "badmanners.xyz",
"version": "2.1.7",
"version": "2.1.8",
"hasInstallScript": true,
"dependencies": {
"@astrojs/check": "^0.9.2",

2
package.json
View file

@ -1,7 +1,7 @@
{
"name": "badmanners.xyz",
"type": "module",
"version": "2.1.7",
"version": "2.1.8",
"scripts": {
"postinstall": "astro sync",
"dev": "astro dev",

38
src/components/AgeRestrictedModal.astro
View file

@ -30,10 +30,11 @@ import { IconTriangleExclamation } from "./icons";
screen from appearing in the future.
</p>
<div
style={{ display: "none" }}
id="age-verification-button-list"
class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 font-medium sm:max-w-2xl sm:flex-row"
>
<button
style={{ display: "none" }}
data-modal-reject
id="age-verification-reject"
class="rounded bg-stone-400 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-zinc-300 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
@ -41,7 +42,6 @@ import { IconTriangleExclamation } from "./icons";
Cancel
</button>
<button
style={{ display: "none" }}
data-modal-accept
id="age-verification-accept"
class="rounded bg-bm-500 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-bm-400 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
@ -55,46 +55,46 @@ import { IconTriangleExclamation } from "./icons";
<AgeRestrictedScriptInline />
<script>
type AgeVerified = "true" | undefined;
const ageRestrictedModalSetup = () => {
const modal = document.querySelector<HTMLElementTagNameMap["div"]>("div#modal-age-restricted");
// Not an age-restricted page
if (!modal) {
return;
}
if (modal !== document.querySelector("body > div#modal-age-restricted")) {
if (modal !== document.querySelector("body>div#modal-age-restricted")) {
throw new Error("#modal-age-restricted must be a direct child of the body element!");
}
let ageVerified: AgeVerified = localStorage.ageVerified;
if (ageVerified !== "true") {
const addAgeVerifiedQueryToLinks = () =>
document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
let newHref = new URL(el.href);
newHref.searchParams.set("ageVerified", "true");
el.href = newHref.toString();
});
if (localStorage.ageVerified === "true") {
addAgeVerifiedQueryToLinks();
} else {
const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!;
const onRejectButtonClick = (e: MouseEvent) => {
e.preventDefault();
location.href = "about:blank";
};
rejectButton.addEventListener("click", onRejectButtonClick);
rejectButton.style.removeProperty("display");
const acceptButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!;
acceptButton.addEventListener(
modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!.addEventListener(
"click",
(e: MouseEvent) => {
e.preventDefault();
rejectButton.removeEventListener("click", onRejectButtonClick);
ageVerified = "true";
localStorage.ageVerified = ageVerified;
localStorage.ageVerified = "true";
document.body.style.overflow = "auto";
document.querySelectorAll("body > :not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
let newHref = new URL(el.href);
newHref.searchParams.set("ageVerified", "true");
el.href = newHref.href;
});
document.querySelectorAll("body>:not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
modal.style.display = "none";
addAgeVerifiedQueryToLinks();
},
{ once: true },
);
acceptButton.style.removeProperty("display");
modal
.querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!
.style.removeProperty("display");
rejectButton.focus();
}
};

2
src/components/AgeRestrictedScriptInline.astro
View file

@ -1,4 +1,4 @@
---
---
<script is:inline>(a=>{let b="body > ",c="#modal-age-restricted",d="true",e="ageVerified",f="searchParams",g=localStorage,h=new URL(a.location),i=x=>a.querySelectorAll(x),j=i(b+c)[0];h[f].get(e)==d&&(g[e]=d,h[f].delete(e),history.replaceState({},"",h));j&&(g[e]==d?i("a[href][data-age-restricted]").forEach(x=>{let y=new URL(x.href);y[f].set(e,d);x.href=y}):((a.body.style.overflow="hidden"),i(b+":not("+c+")").forEach(x=>x.setAttribute("inert",d)),(j.style.display="block")))})(document)</script>
<script is:inline>(a=>{let b="body>",c="#modal-age-restricted",d="true",e="ageVerified",f="searchParams",g=localStorage,h=new URL(location),i=x=>a.querySelectorAll(x),j=i(b+c)[0];h[f].get(e)==d&&(g[e]=d,h[f].delete(e),history.replaceState({},"",h));j&&(g[e]!=d&&((a.body.style.overflow="hidden"),i(b+":not("+c+")").forEach(x=>x.setAttribute("inert",d)),(j.style.display="block")))})(document)</script>

2
src/components/DarkModeScript.astro
View file

@ -10,7 +10,7 @@ import DarkModeScriptInline from "./DarkModeScriptInline.astro";
const colorSchemeSetup = () => {
let colorScheme: ColorScheme = localStorage.colorScheme;
if (!colorScheme || colorScheme === "auto") {
colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
colorScheme = matchMedia("(prefers-color-scheme:dark)").matches ? "dark" : "light";
}
const toggleColorScheme = (e: MouseEvent) => {
e.preventDefault();

2
src/components/DarkModeScriptInline.astro
View file

@ -1,4 +1,4 @@
---
---
<script is:inline>(a=>{var b="dark",c="auto",d="colorScheme",e=a.body.classList,f=localStorage,g=f[d];g==c?(f[d]=c,matchMedia("(prefers-color-scheme: dark)").matches&&e.add(b)):g==b&&e.add(b)})(document)</script>
<script is:inline>(a=>{var b="dark",c="colorScheme",d=localStorage,e=d[c];(e=="auto"||!e?matchMedia("(prefers-color-scheme:dark)").matches:e==b)&&a.body.classList.add(b)})(document)</script>

2
src/pages/[...config].ts
View file

@ -12,10 +12,12 @@ RedirectMatch 301 ^/@/carrd\b https://badmanners.carrd.co
RedirectMatch 301 ^/@/code[_-]?berg\b https://codeberg.org/BadManners
RedirectMatch 301 ^/@/co[_-]?host\b https://cohost.org/BadManners
RedirectMatch 301 ^/@/discord\b /#discord
RedirectMatch 301 ^/@/e-?mail(address)?\b /#e-mail
RedirectMatch 301 ^/@/(fur[_-]?affinity|fa)\b https://www.furaffinity.net/user/badmanners
RedirectMatch 301 ^/@/(gallery|stor(y|ies)|games?)\b https://gallery.badmanners.xyz
RedirectMatch 301 ^/@/(git[_-]?hub|gh)\b https://github.com/BadMannersXYZ
RedirectMatch 301 ^/@/git[_-]?lab\b https://gitlab.com/Bad_Manners
RedirectMatch 301 ^/@/(google|g-?mail(address)?)\b /#gmail
RedirectMatch 301 ^/@/gum[_-]?road\b https://badmanners.gumroad.com
RedirectMatch 301 ^/@/(ink[_-]?bunny|ib)\b https://inkbunny.net/BadManners
RedirectMatch 301 ^/@/itaku\b https://itaku.ee/profile/badmanners

91
src/pages/index.astro
View file

@ -52,7 +52,7 @@ import {
</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 <span class="p-name font-medium">Bad Manners</span>!
Hi, I'm <b class="p-name font-medium">Bad Manners</b>!
</h1>
<section>
<img
@ -62,17 +62,13 @@ import {
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 gap-y-5 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32"
aria-label="Links"
>
<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 transition-colors motion-reduce:transition-none"
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}
@ -83,6 +79,7 @@ import {
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">https://badmanners.xyz</p>
</a>
</li>
) : null
@ -90,7 +87,7 @@ import {
<li>
<a
id="gallery"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -101,15 +98,16 @@ import {
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">Gallery on https://gallery.badmanners.xyz</p>
</a>
</li>
<li>
<a
id="pronouns"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
aria-label="Pronouns (he/they)"
>
<IconCommentDots
height="1.75rem"
@ -117,14 +115,14 @@ import {
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">@BadManners on pronouns.cc</p>
<p class="p-pronoun sr-only">he/him/his/his/himself</p>
<p class="p-pronoun sr-only">they/them/their/theirs/themself</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 transition-colors motion-reduce:transition-none"
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"
@ -136,13 +134,13 @@ import {
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">E-mail address</p>
<p class="sr-only">me@badmanners.xyz</p>
</a>
</li>
<li>
<a
id="bluesky"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -158,7 +156,7 @@ import {
<li>
<a
id="codeberg"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -174,7 +172,7 @@ import {
<li>
<a
id="cohost"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -190,7 +188,7 @@ import {
<li>
<button
id="discord"
class="text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -207,7 +205,7 @@ import {
<li>
<a
id="eka-s-portal"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -223,7 +221,7 @@ import {
<li>
<a
id="fur-affinity"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -239,7 +237,7 @@ import {
<li>
<a
id="github"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -255,7 +253,7 @@ import {
<li>
<a
id="gitlab"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -271,7 +269,7 @@ import {
<li>
<a
id="gmail"
class="u-email text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -283,13 +281,13 @@ import {
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">Google/Gmail address</p>
<p class="sr-only">badmanners.vore@gmail.com</p>
</a>
</li>
<li>
<a
id="inkbunny"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -305,7 +303,7 @@ import {
<li>
<a
id="itaku"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -321,7 +319,7 @@ import {
<li>
<a
id="itch"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -337,7 +335,7 @@ import {
<li>
<a
id="keybase"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -353,7 +351,7 @@ import {
<li>
<a
id="keyoxide"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -363,13 +361,13 @@ import {
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>
<p class="sr-only"><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 transition-colors motion-reduce:transition-none"
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"
@ -385,7 +383,7 @@ import {
<li>
<a
id="mastodon"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -401,7 +399,7 @@ import {
<li>
<a
id="neocities"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -417,7 +415,7 @@ import {
<li>
<a
id="picarto"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -433,7 +431,7 @@ import {
<li>
<a
id="reddit"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -449,7 +447,7 @@ import {
<li>
<a
id="signal"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -465,7 +463,7 @@ import {
<li>
<a
id="sofurry"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -481,7 +479,7 @@ import {
<li>
<a
id="ssh"
class="u-key text-link group block w-full transition-colors motion-reduce:transition-none"
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="ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIJ3QAZd3E95gxef2kiXppWa/xhcwBtnKMZJaW6s4d7Tm Bad Manners <me@badmanners.xyz>"
@ -492,12 +490,13 @@ import {
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>
<a
id="steam"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -513,7 +512,7 @@ import {
<li>
<a
id="subscribestar"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -529,7 +528,7 @@ import {
<li>
<a
id="telegram"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -545,7 +544,7 @@ import {
<li>
<a
id="tumblr"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -561,7 +560,7 @@ import {
<li>
<a
id="twitch"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -577,7 +576,7 @@ import {
<li>
<a
id="weasyl"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -593,7 +592,7 @@ import {
<li>
<a
id="x"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"
@ -609,7 +608,7 @@ import {
<li>
<a
id="youtube"
class="u-url text-link group block w-full transition-colors motion-reduce:transition-none"
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"