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

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">