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

Goodbye View Transitions

Browse source
This commit is contained in:
Bad Manners 2024-10-28 21:26:40 -03:00
parent 6c834dd58a
commit 651054e65f
11 changed files with 654 additions and 704 deletions
Download patch file Download diff file Expand all files Collapse all files

1205
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -1,7 +1,7 @@
{
"name": "badmanners.xyz",
"type": "module",
"version": "2.1.17",
"version": "2.2.0",
"scripts": {
"postinstall": "astro sync",
"dev": "astro dev",
@ -23,7 +23,6 @@
"alpinejs": "^3.14.1",
"astro": "^4.15.5",
"astro-htaccess": "^0.2.0",
"astro-loading-indicator": "^0.6.0",
"date-fns": "^3.6.0",
"tailwindcss": "^3.4.11",
"tippy.js": "^6.3.7",

2
src/components/DarkModeScriptInline.astro
View file

@ -1,4 +1,4 @@
---
---
<script is:inline>let g=document,f=a=>{var b="dark",c=localStorage,d=c.colorScheme;(d!="light"&&(d==b||matchMedia("(prefers-color-scheme:dark)").matches))&&a.body.classList.add(b)};g.addEventListener('astro:before-swap',e=>f(e.newDocument));f(g)</script>
<script is:inline>(a=>{var b="dark",c=localStorage,d=c.colorScheme;(d!="light"&&(d==b||matchMedia("(prefers-color-scheme:dark)").matches))&&a.body.classList.add(b)})(document)</script>

1
src/components/EnhancedTooltips.astro
View file

@ -16,6 +16,5 @@
tooltipItems.forEach((el) => el.removeAttribute("title"));
};
document.addEventListener("astro:page-load", initTooltips);
initTooltips();
</script>

22
src/layouts/BaseLayout.astro
View file

@ -1,6 +1,4 @@
---
import { ViewTransitions } from "astro:transitions";
import LoadingIndicator from "astro-loading-indicator/component";
import DarkModeScriptInline from "@components/DarkModeScriptInline.astro";
import NavHeader from "@components/NavHeader.astro";
import { IconSun, IconMoon } from "@components/icons";
@ -34,19 +32,6 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<meta property="og:url" content={Astro.url} />
<meta content="/logo.webp" property="og:image" />
<slot name="head" />
<ViewTransitions />
<LoadingIndicator color="#3b82f6" height="0.25rem" threshold={false} />
<script>
import Alpine from "alpinejs";
document.addEventListener("astro:after-preparation", () => {
Alpine.stopObservingMutations();
});
document.addEventListener("astro:page-load", () => {
document.dispatchEvent(new Event("alpine:init"));
Alpine.initTree(document.documentElement);
Alpine.startObservingMutations();
});
</script>
</head>
<body
:class="ageVerified ? 'overflow-auto' : 'overflow-hidden'"
@ -66,12 +51,11 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<main
class="w-full max-w-5xl flex-shrink-0 flex-grow-0 justify-center rounded-xl bg-stone-50 px-4 pb-6 pt-4 text-center text-base font-normal tracking-tight text-stone-700 sm:px-8 sm:pb-8 sm:pt-6 sm:text-lg dark:bg-zinc-800 dark:text-zinc-50 print:bg-transparent print:p-0"
>
<NavHeader transition:animate="none" />
<NavHeader />
<slot />
</main>
<footer
class="sm:text-md flex flex-col items-center pt-9 text-sm font-medium tracking-wide text-black dark:text-white"
transition:persist
>
<div class="flex items-center">
<span id="copyright" class="mr-2"
@ -102,7 +86,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
</footer>
</div>
</div>
<DarkModeScriptInline transition:persist />
<AgeRestrictedModal transition:persist />
<DarkModeScriptInline />
<AgeRestrictedModal />
</body>
</html>

2
src/pages/404.astro
View file

@ -4,7 +4,7 @@ import BaseLayout from "@layouts/BaseLayout.astro";
<BaseLayout pageTitle="Not found">
<meta slot="head" property="og:description" content="Not found." />
<article aria-labelledby="title-not-found" transition:name="content">
<article aria-labelledby="title-not-found">
<h1 id="title-not-found" class="text-2xl sm:text-3xl">404 &ndash; Not found</h1>
<section>
<p class="mb-2 mt-5 sm:mb-3 sm:mt-6 sm:px-5 md:px-6">

2
src/pages/about.astro
View file

@ -8,7 +8,7 @@ import EnhancedTooltips from "@components/EnhancedTooltips.astro";
<BaseLayout pageTitle="About me">
<meta slot="head" property="og:description" content="About Bad Manners." />
<article class="h-card" aria-labelledby="title-about-me" transition:name="content">
<article class="h-card" aria-labelledby="title-about-me">
<h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
<section>
<p class="mb-4 mt-5 text-justify indent-6 sm:mb-3 sm:mt-6 sm:px-5 sm:indent-12">

85
src/pages/index.astro
View file

@ -1,15 +1,7 @@
---
import { readFile } from "node:fs/promises";
import BaseLayout from "@layouts/BaseLayout.astro";
import {
IconEnvelope,
IconBriefcase,
IconKey,
IconLink,
IconCommentDots,
IconSSH,
IconSquareRSS,
} from "@components/icons";
import { IconEnvelope, IconBriefcase, IconKey, IconLink, IconCommentDots, IconSSH } from "@components/icons";
import {
IconBluesky,
IconCodeberg,
@ -62,7 +54,7 @@ const [gpgKey, sshKey] = await Promise.all([
title="Gallery feed"
/>
</Fragment>
<article id="homepage" class="h-card" aria-label="Homepage of Bad Manners" transition:name="content">
<article id="homepage" 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>
@ -81,25 +73,21 @@ const [gpgKey, sshKey] = await Promise.all([
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
x-data={`{ clipboard: ${JSON.stringify(Astro.site.toString())}, tooltip: 'URL copied to clipboard!' }`}
@click.prevent="navigator.clipboard.writeText(clipboard).catch(()=>{}); $dispatch('tippyTooltip', { target: $el, content: tooltip })"
>
<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="permalink"
class="u-url contact-link group"
href={Astro.site!!}
aria-label="Permalink"
title="Permalink"
data-tooltip
x-data={JSON.stringify({ clipboard: Astro.site!!.toString(), tooltip: "URL copied to clipboard!" })}
@click.prevent="navigator.clipboard.writeText(clipboard).catch(()=>{}); $dispatch('tippyTooltip', { target: $el, content: tooltip })"
>
<IconLink height="1.75rem" width="1.75rem" class="contact-icon" />
<p class="sr-only select-none">https://badmanners.xyz</p>
</a>
</li>
<li>
<a
id="gallery"
@ -109,27 +97,13 @@ const [gpgKey, sshKey] = await Promise.all([
aria-label="Main gallery"
title="Main gallery"
data-tooltip
data-age-restricted
x-data={JSON.stringify({ href: "https://gallery.badmanners.xyz", suffix: "?ageVerified=true" })}
x-bind:href="ageVerified ? href + suffix : href"
>
<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"
@ -155,7 +129,7 @@ const [gpgKey, sshKey] = await Promise.all([
aria-label="E-mail"
title="E-mail"
data-tooltip
x-data="{ clipboard: 'me@badmanners.xyz', tooltip: 'E-mail address copied to clipboard!' }"
x-data={JSON.stringify({ clipboard: "me@badmanners.xyz", tooltip: "E-mail address copied to clipboard!" })}
@click.prevent="navigator.clipboard.writeText(clipboard).catch(()=>{}); $dispatch('tippyTooltip', { target: $el, content: tooltip })"
>
<IconEnvelope height="1.75rem" width="1.75rem" class="contact-icon" />
@ -197,7 +171,7 @@ const [gpgKey, sshKey] = await Promise.all([
aria-label="Discord"
title="Discord"
data-tooltip
x-data="{ clipboard: 'badmanners', tooltip: 'Discord username copied to clipboard!' }"
x-data={JSON.stringify({ clipboard: "badmanners", tooltip: "Discord username copied to clipboard!" })}
@click.prevent="navigator.clipboard.writeText(clipboard).catch(()=>{}); $dispatch('tippyTooltip', { target: $el, content: tooltip })"
>
<IconDiscord height="1.75rem" width="1.75rem" class="contact-icon" />
@ -283,7 +257,10 @@ const [gpgKey, sshKey] = await Promise.all([
aria-label="Google"
title="Google"
data-tooltip
x-data="{ clipboard: 'google@badmanners.xyz', tooltip: 'Google address copied to clipboard!' }"
x-data={JSON.stringify({
clipboard: "google@badmanners.xyz",
tooltip: "Google address copied to clipboard!",
})}
@click.prevent="navigator.clipboard.writeText(clipboard).catch(()=>{}); $dispatch('tippyTooltip', { target: $el, content: tooltip })"
>
<IconGoogle height="1.75rem" width="1.75rem" class="contact-icon" />
@ -299,7 +276,7 @@ const [gpgKey, sshKey] = await Promise.all([
aria-label="GPG public key"
title="GPG public key"
data-tooltip
x-data={`{ clipboard: ${JSON.stringify(gpgKey)}, tooltip: 'GPG key copied to clipboard!' }`}
x-data={JSON.stringify({ clipboard: gpgKey, tooltip: "GPG key copied to clipboard!" })}
@click.prevent="navigator.clipboard.writeText(clipboard).catch(()=>{}); $dispatch('tippyTooltip', { target: $el, content: tooltip })"
>
<IconKey height="1.75rem" width="1.75rem" class="contact-icon" />
@ -469,7 +446,7 @@ const [gpgKey, sshKey] = await Promise.all([
aria-label="SSH public key"
title="SSH public key"
data-tooltip
x-data={`{ clipboard: ${JSON.stringify(sshKey)}, tooltip: 'SSH key address copied to clipboard!' }`}
x-data={JSON.stringify({ clipboard: sshKey, tooltip: "SSH key address copied to clipboard!" })}
@click.prevent="navigator.clipboard.writeText(clipboard).catch(()=>{}); $dispatch('tippyTooltip', { target: $el, content: tooltip })"
>
<IconSSH height="1.75rem" width="1.75rem" class="contact-icon" />
@ -565,13 +542,6 @@ const [gpgKey, sshKey] = await Promise.all([
</article>
</BaseLayout>
<style>
ul#links > li {
min-width: 6rem;
flex: 1 1 0%;
}
</style>
<EnhancedTooltips />
<script>
@ -605,6 +575,5 @@ const [gpgKey, sshKey] = await Promise.all([
});
};
document.addEventListener("astro:page-load", handleTooltipEvent);
handleTooltipEvent();
</script>

8
src/pages/sam_brendan.astro
View file

@ -8,7 +8,7 @@ import EnhancedTooltips from "@components/EnhancedTooltips.astro";
<BaseLayout pageTitle="Sam Brendan">
<meta slot="head" property="og:description" content="Mimic x maned wolf hybrid." />
<article class="h-card" aria-labelledby="title-sam-brendan" transition:name="content">
<article class="h-card" aria-labelledby="title-sam-brendan">
<h1 id="title-sam-brendan" class="p-name text-2xl sm:text-3xl">Sam Brendan</h1>
<section>
<p class="my-4 text-justify sm:my-6 sm:px-5">
@ -25,7 +25,6 @@ import EnhancedTooltips from "@components/EnhancedTooltips.astro";
<a
class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
href="https://booru.badmanners.xyz/index.php?q=post/view/1"
data-age-restricted
target="_blank"
>
<Image
@ -79,7 +78,6 @@ import EnhancedTooltips from "@components/EnhancedTooltips.astro";
<a
class="group mx-auto mb-1 block w-max max-w-full pb-0 sm:mb-3"
href="https://booru.badmanners.xyz/index.php?q=post/view/2"
data-age-restricted
target="_blank"
>
<Image
@ -140,10 +138,10 @@ import EnhancedTooltips from "@components/EnhancedTooltips.astro";
Mimicking voices or simple sounds, and speak without moving his mouth.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
Materializing adhesive facial accessories out of thin air into his paws.
Materializing facial accessories (such as stickers or googly eyes) out of thin air.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">
Controlling the movable parts of his mimic half (hinges, latches, handle), like any other limb. Even when
Controlling the movable parts of his mimic half (hinges, latches, handle) like any other limb. Even when
unconscious, he's able to keep his case tightly shut.
</li>
<li class="mx-7 mb-1 list-disc indent-0 sm:mx-10">

8
src/pages/terms_of_service.astro
View file

@ -10,7 +10,7 @@ import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "@data/tos";
<meta property="og:description" content="My Terms of Service for story commissions." />
<link rel="alternate" type="application/rss+xml" href={new URL("/feed.xml", Astro.site)} title="RSS feed" />
</Fragment>
<article aria-labelledby="title-tos" transition:name="content">
<article aria-labelledby="title-tos">
<h1 id="title-tos" class="mb-4 text-2xl sm:mb-5 sm:text-3xl">Terms of Service for story commissions</h1>
<section aria-label="Commission status">
<div class="my-2 flex items-center justify-end">
@ -80,7 +80,7 @@ import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "@data/tos";
words <em>may</em> be requested. In such a case, the final payment will have that amount discounted.
</p>
</section>
<section id="subjects" aria-labelledby="title-commission-subjects">
<section id="commission-subjects" aria-labelledby="title-commission-subjects">
<h2 id="title-commission-subjects" class="my-4 text-lg sm:my-6 sm:text-2xl">Commission subjects</h2>
<ul class="mb-8 text-justify text-base sm:px-3 sm:text-lg md:px-6">
<li class="mx-6 mb-1 list-disc sm:mx-8">
@ -99,7 +99,7 @@ import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "@data/tos";
</li>
</ul>
</section>
<section aria-labelledby="title-additional-information">
<section id="additional-information" aria-labelledby="title-additional-information">
<h2 id="title-additional-information" class="my-4 text-lg sm:my-6 sm:text-2xl">Additional information</h2>
<ul class="mb-6 text-justify text-base sm:px-3 sm:text-lg md:px-6">
<li class="mx-6 mb-1 list-disc sm:mx-8">
@ -133,7 +133,7 @@ import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "@data/tos";
If you have any doubts, or are considering getting a commission from me,
<a href="/" class="text-link underline transition-colors motion-reduce:transition-none"
>please reach out through my socials</a
>! Preferably through Discord or Telegram, where I'm more active.
>! Preferably through Discord, where I'm more active.
</li>
</ul>
</section>

20
src/pages/work.astro
View file

@ -30,20 +30,23 @@ import { SUBSCRIBESTAR_ENABLED } from "@data/subscribestar";
title="Gallery feed"
/>
</Fragment>
<article aria-labelledby="title-my-work" class="sm:px-5 md:px-6" transition:name="content">
<article aria-labelledby="title-my-work" class="sm:px-5 md:px-6">
<h1 id="title-my-work" class="text-2xl sm:text-3xl">My work</h1>
<section>
<p class="mb-4 mt-5 text-justify indent-6 sm:mb-3 sm:mt-6 sm:px-5 sm:indent-12">
I've been a lurker in the furry vore community for a long time before I decided to start writing
<a
class="text-link transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/stories/1"
data-age-restricted><span class="underline">safe vore stories</span></a
href="https://gallery.badmanners.xyz/stories"
x-data={JSON.stringify({ href: "https://gallery.badmanners.xyz/stories", suffix: "?ageVerified=true" })}
x-bind:href="ageVerified ? href + suffix : href"><span class="underline">safe vore stories</span></a
>. Since there's a lot in furry endosoma that I enjoy, my stories tend to
<a
class="text-link transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/tags"
data-age-restricted><span class="underline">have all sorts of themes and scenarios</span></a
x-data={JSON.stringify({ href: "https://gallery.badmanners.xyz/tags", suffix: "?ageVerified=true" })}
x-bind:href="ageVerified ? href + suffix : href"
><span class="underline">have all sorts of themes and scenarios</span></a
>, including exotic ones. My content is all tagged with the appropriate content warnings, so if you enjoy safe
vore, chances are that you'll find something in my gallery that is right up your alley.
</p>
@ -52,7 +55,11 @@ import { SUBSCRIBESTAR_ENABLED } from "@data/subscribestar";
<a
class="text-link transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz/games/crossing-over"
data-age-restricted><span class="underline">"Crossing Over"</span></a
x-data={JSON.stringify({
href: "https://gallery.badmanners.xyz/games/crossing-over/",
suffix: "?ageVerified=true",
})}
x-bind:href="ageVerified ? href + suffix : href"><span class="underline">"Crossing Over"</span></a
>, as part of Strawberry Jam 8 (a game jam hosted by eevee on Feb. 2024). It's been my biggest project so far,
and I'm very proud of it! Check it out if you have an hour to spare and the subject matters interest you.
</p>
@ -73,7 +80,8 @@ import { SUBSCRIBESTAR_ENABLED } from "@data/subscribestar";
<a
class="u-url text-link mx-1 transition-colors motion-reduce:transition-none"
href="https://gallery.badmanners.xyz"
data-age-restricted
x-data={JSON.stringify({ href: "https://gallery.badmanners.xyz", suffix: "?ageVerified=true" })}
x-bind:href="ageVerified ? href + suffix : href"
>
<IconBriefcase height="1.75rem" width="1.75rem" class="mr-1 inline" />
<span class="underline">gallery.badmanners.xyz</span>