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

ViewTransitions again for SPA look

Browse source
This commit is contained in:
Bad Manners 2024-09-20 21:00:48 -03:00
parent aa14b2856a
commit 108e134343
10 changed files with 53 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

10
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "badmanners.xyz",
"version": "2.1.13",
"version": "2.1.14",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "badmanners.xyz",
"version": "2.1.13",
"version": "2.1.14",
"hasInstallScript": true,
"dependencies": {
"@astrojs/check": "^0.9.3",
@ -7380,9 +7380,9 @@
}
},
"node_modules/vite": {
"version": "5.4.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.5.tgz",
"integrity": "sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==",
"version": "5.4.7",
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz",
"integrity": "sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==",
"license": "MIT",
"dependencies": {
"esbuild": "^0.21.3",

2
package.json
View file

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

2
src/components/DarkModeScriptInline.astro
View file

@ -1,4 +1,4 @@
---
---
<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>
<script is:inline>let g=document,f=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)};g.addEventListener('astro:before-swap',e=>f(e.newDocument));f(g)</script>

13
src/layouts/BaseLayout.astro
View file

@ -1,10 +1,11 @@
---
import "../styles/base.css";
import "../styles/fonts.css";
import { ViewTransitions } from "astro:transitions";
import DarkModeScript from "@components/DarkModeScript.astro";
import NavHeader from "@components/NavHeader.astro";
import { IconSun, IconMoon } from "@components/icons";
import AgeRestrictedModal from "@components/AgeRestrictedModal.astro";
import "../styles/base.css";
import "../styles/fonts.css";
type Props = {
pageTitle?: string;
@ -31,6 +32,7 @@ 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 />
</head>
<body>
<div class="flex min-h-screen flex-col">
@ -46,11 +48,12 @@ 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 />
<NavHeader transition:animate="none" />
<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"
@ -80,7 +83,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
</footer>
</div>
</div>
<DarkModeScript />
<AgeRestrictedModal />
<DarkModeScript transition:persist />
<AgeRestrictedModal transition:persist />
</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">
<article aria-labelledby="title-not-found" transition:name="content">
<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">

21
src/pages/about.astro
View file

@ -7,7 +7,7 @@ import { ImageSamStickerJuicebox } from "@assets/images";
<BaseLayout pageTitle="About me">
<meta slot="head" property="og:description" content="About Bad Manners." />
<article class="h-card" aria-labelledby="title-about-me">
<article class="h-card" aria-labelledby="title-about-me" transition:name="content">
<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">
@ -69,11 +69,16 @@ import { ImageSamStickerJuicebox } from "@assets/images";
import tippy from "tippy.js";
import "tippy.js/dist/tippy.css";
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"));
const initTooltips = () => {
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"));
};
document.addEventListener("astro:page-load", initTooltips);
initTooltips();
</script>

17
src/pages/index.astro
View file

@ -51,7 +51,7 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
title="Gallery feed"
/>
</Fragment>
<article id="homepage" class="h-card" aria-label="Homepage of Bad Manners">
<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>
@ -251,18 +251,18 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
</li>
<li>
<a
id="gmail"
id="google"
class="u-email contact-link group"
href="mailto:badmanners.vore@gmail.com"
href="mailto:google@badmanners.xyz"
rel="me"
aria-label="Gmail"
title="Gmail"
aria-label="Google"
title="Google"
data-tooltip
data-clipboard="badmanners.vore@gmail.com"
data-noun="Gmail address"
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">badmanners.vore@gmail.com</p>
<p class="sr-only select-none">google@badmanners.xyz</p>
</a>
</li>
<li>
@ -620,5 +620,6 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
});
};
document.addEventListener("astro:page-load", initIndexIcons);
initIndexIcons();
</script>

21
src/pages/sam_brendan.astro
View file

@ -7,7 +7,7 @@ import { ImageSamAllStickers, ImageSamRefsheet } from "@assets/images";
<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">
<article class="h-card" aria-labelledby="title-sam-brendan" transition:name="content">
<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">
@ -199,11 +199,16 @@ import { ImageSamAllStickers, ImageSamRefsheet } from "@assets/images";
import tippy from "tippy.js";
import "tippy.js/dist/tippy.css";
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"));
const initTooltips = () => {
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"));
};
document.addEventListener("astro:page-load", initTooltips);
initTooltips();
</script>

2
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">
<article aria-labelledby="title-tos" transition:name="content">
<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">

2
src/pages/work.astro
View file

@ -30,7 +30,7 @@ import { SUBSCRIBESTAR_ENABLED } from "@data/subscribestar";
title="Gallery feed"
/>
</Fragment>
<article aria-labelledby="title-my-work" class="sm:px-5 md:px-6">
<article aria-labelledby="title-my-work" class="sm:px-5 md:px-6" transition:name="content">
<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">