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

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "badmanners.xyz", "name": "badmanners.xyz",
"type": "module", "type": "module",
"version": "2.1.13", "version": "2.1.14",
"scripts": { "scripts": {
"postinstall": "astro sync", "postinstall": "astro sync",
"dev": "astro dev", "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 { ViewTransitions } from "astro:transitions";
import "../styles/fonts.css";
import DarkModeScript from "@components/DarkModeScript.astro"; import DarkModeScript from "@components/DarkModeScript.astro";
import NavHeader from "@components/NavHeader.astro"; import NavHeader from "@components/NavHeader.astro";
import { IconSun, IconMoon } from "@components/icons"; import { IconSun, IconMoon } from "@components/icons";
import AgeRestrictedModal from "@components/AgeRestrictedModal.astro"; import AgeRestrictedModal from "@components/AgeRestrictedModal.astro";
import "../styles/base.css";
import "../styles/fonts.css";
type Props = { type Props = {
pageTitle?: string; pageTitle?: string;
@ -31,6 +32,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<meta property="og:url" content={Astro.url} /> <meta property="og:url" content={Astro.url} />
<meta content="/logo.webp" property="og:image" /> <meta content="/logo.webp" property="og:image" />
<slot name="head" /> <slot name="head" />
<ViewTransitions />
</head> </head>
<body> <body>
<div class="flex min-h-screen flex-col"> <div class="flex min-h-screen flex-col">
@ -46,11 +48,12 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<main <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" 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 /> <slot />
</main> </main>
<footer <footer
class="sm:text-md flex flex-col items-center pt-9 text-sm font-medium tracking-wide text-black dark:text-white" 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"> <div class="flex items-center">
<span id="copyright" <span id="copyright"
@ -80,7 +83,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
</footer> </footer>
</div> </div>
</div> </div>
<DarkModeScript /> <DarkModeScript transition:persist />
<AgeRestrictedModal /> <AgeRestrictedModal transition:persist />
</body> </body>
</html> </html>

2
src/pages/404.astro
View file

@ -4,7 +4,7 @@ import BaseLayout from "@layouts/BaseLayout.astro";
<BaseLayout pageTitle="Not found"> <BaseLayout pageTitle="Not found">
<meta slot="head" property="og:description" content="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> <h1 id="title-not-found" class="text-2xl sm:text-3xl">404 &ndash; Not found</h1>
<section> <section>
<p class="mb-2 mt-5 sm:mb-3 sm:mt-6 sm:px-5 md:px-6"> <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"> <BaseLayout pageTitle="About me">
<meta slot="head" property="og:description" content="About Bad Manners." /> <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> <h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
<section> <section>
<p class="mb-4 mt-5 text-justify indent-6 sm:mb-3 sm:mt-6 sm:px-5 sm:indent-12"> <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 from "tippy.js";
import "tippy.js/dist/tippy.css"; import "tippy.js/dist/tippy.css";
const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]"); const initTooltips = () => {
tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title)); const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]");
tippy(tooltipItems, { tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title));
content: (el) => (el as HTMLElement).dataset.tooltip!, tippy(tooltipItems, {
theme: "bm", content: (el) => (el as HTMLElement).dataset.tooltip!,
}); theme: "bm",
tooltipItems.forEach((el) => el.removeAttribute("title")); });
tooltipItems.forEach((el) => el.removeAttribute("title"));
};
document.addEventListener("astro:page-load", initTooltips);
initTooltips();
</script> </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" title="Gallery feed"
/> />
</Fragment> </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"> <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>! Hi, I'm <b class="p-name font-medium">Bad Manners</b>!
</h1> </h1>
@ -251,18 +251,18 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
</li> </li>
<li> <li>
<a <a
id="gmail" id="google"
class="u-email contact-link group" class="u-email contact-link group"
href="mailto:badmanners.vore@gmail.com" href="mailto:google@badmanners.xyz"
rel="me" rel="me"
aria-label="Gmail" aria-label="Google"
title="Gmail" title="Google"
data-tooltip data-tooltip
data-clipboard="badmanners.vore@gmail.com" data-clipboard="google@badmanners.xyz"
data-noun="Gmail address" data-noun="Google address"
> >
<IconGoogle height="1.75rem" width="1.75rem" class="contact-icon" /> <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> </a>
</li> </li>
<li> <li>
@ -620,5 +620,6 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
}); });
}; };
document.addEventListener("astro:page-load", initIndexIcons);
initIndexIcons(); initIndexIcons();
</script> </script>

21
src/pages/sam_brendan.astro
View file

@ -7,7 +7,7 @@ import { ImageSamAllStickers, ImageSamRefsheet } from "@assets/images";
<BaseLayout pageTitle="Sam Brendan"> <BaseLayout pageTitle="Sam Brendan">
<meta slot="head" property="og:description" content="Mimic x maned wolf hybrid." /> <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> <h1 id="title-sam-brendan" class="p-name text-2xl sm:text-3xl">Sam Brendan</h1>
<section> <section>
<p class="my-4 text-justify sm:my-6 sm:px-5"> <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 from "tippy.js";
import "tippy.js/dist/tippy.css"; import "tippy.js/dist/tippy.css";
const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]"); const initTooltips = () => {
tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title)); const tooltipItems = document.querySelectorAll<HTMLElement>("[title][data-tooltip]");
tippy(tooltipItems, { tooltipItems.forEach((el) => el.setAttribute("data-tooltip", el.title));
content: (el) => (el as HTMLElement).dataset.tooltip!, tippy(tooltipItems, {
theme: "bm", content: (el) => (el as HTMLElement).dataset.tooltip!,
}); theme: "bm",
tooltipItems.forEach((el) => el.removeAttribute("title")); });
tooltipItems.forEach((el) => el.removeAttribute("title"));
};
document.addEventListener("astro:page-load", initTooltips);
initTooltips();
</script> </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." /> <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" /> <link rel="alternate" type="application/rss+xml" href={new URL("/feed.xml", Astro.site)} title="RSS feed" />
</Fragment> </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> <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"> <section aria-label="Commission status">
<div class="my-2 flex items-center justify-end"> <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" title="Gallery feed"
/> />
</Fragment> </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> <h1 id="title-my-work" class="text-2xl sm:text-3xl">My work</h1>
<section> <section>
<p class="mb-4 mt-5 text-justify indent-6 sm:mb-3 sm:mt-6 sm:px-5 sm:indent-12"> <p class="mb-4 mt-5 text-justify indent-6 sm:mb-3 sm:mt-6 sm:px-5 sm:indent-12">