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

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>