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

Migrate some scripts to Alpine

Browse source
This commit is contained in:
Bad Manners 2024-09-25 12:36:10 -03:00
parent aa5759d6f5
commit 85c11bc02a
10 changed files with 408 additions and 428 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/layouts/BaseLayout.astro
View file

@ -1,7 +1,7 @@
---
import { ViewTransitions } from "astro:transitions";
import LoadingIndicator from "astro-loading-indicator/component";
import DarkModeScript from "@components/DarkModeScript.astro";
import DarkModeScriptInline from "@components/DarkModeScriptInline.astro";
import NavHeader from "@components/NavHeader.astro";
import { IconSun, IconMoon } from "@components/icons";
import AgeRestrictedModal from "@components/AgeRestrictedModal.astro";
@ -36,9 +36,24 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
<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>
<div class="flex min-h-screen flex-col">
<body
:class="ageVerified ? 'overflow-auto' : 'overflow-hidden'"
x-effect="darkMode ? $el.classList.add('dark') : $el.classList.remove('dark')"
x-data="{ darkMode: localStorage.colorScheme != 'light' && (localStorage.colorScheme == 'dark' || matchMedia('(prefers-color-scheme:dark)').matches), ageVerified: new URL(location).searchParams.get('ageVerified') == 'true' || localStorage.ageVerified == 'true' }"
>
<div class="flex min-h-screen flex-col" x-bind:inert="!ageVerified">
<div
id="bg"
class="fixed h-screen w-screen bg-radial from-bm-300 to-bm-500 dark:from-green-800 dark:to-green-950 print:hidden"
@ -59,25 +74,26 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
transition:persist
>
<div class="flex items-center">
<span id="copyright"
>&copy; <time datetime="2023">2023</time>&ndash;<time datetime={new Date().getFullYear().toString()}
>{new Date().getFullYear()}</time
<span id="copyright" class="mr-2"
>&copy; <time datetime="2023">2023</time>&ndash;<time
x-data="{ currentYear: new Date().getFullYear() }"
x-text="currentYear"
x-bind:datetime="currentYear"
datetime={new Date().getFullYear().toString()}>{new Date().getFullYear()}</time
> Bad Manners</span
>
<span class="print:hidden" aria-hidden="true">&nbsp;|&nbsp;</span>
<a
href="/licenses.toml"
rel="license"
class="transition-colors hover:text-white hover:underline focus:text-white focus:underline motion-reduce:transition-none dark:hover:text-bm-300 dark:focus:text-bm-300 print:hidden"
class="border-l border-l-black pl-2 transition-colors hover:text-white hover:underline focus:text-white focus:underline motion-reduce:transition-none dark:border-l-white dark:hover:text-bm-300 dark:focus:text-bm-300 print:hidden"
>
Licenses
</a>
</div>
<button
data-dark-mode
x-on:click="darkMode = !darkMode; localStorage.colorScheme = darkMode ? 'dark' : 'light'"
class="mt-2 p-2 transition-colors hover:text-green-700 focus:text-green-700 motion-reduce:transition-none dark:hover:text-bm-300 dark:focus:text-bm-300 print:hidden"
aria-labelledby="label-toggle-dark-mode"
hidden
>
<IconSun width="1.5rem" height="1.5rem" class="hidden dark:block" />
<IconMoon width="1.5rem" height="1.5rem" class="block dark:hidden" />
@ -86,7 +102,7 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
</footer>
</div>
</div>
<DarkModeScript transition:persist />
<DarkModeScriptInline transition:persist />
<AgeRestrictedModal transition:persist />
</body>
</html>