Consolidate socials on index and add View Transitions API support
This commit is contained in:
parent
580cd2da26
commit
483f406037
23 changed files with 493 additions and 458 deletions
|
|
@ -1,82 +1,87 @@
|
|||
---
|
||||
import AgeRestrictedScriptInline from "./AgeRestrictedScriptInline.astro";
|
||||
import IconTriangleExclamation from "./icons/IconTriangleExclamation.astro";
|
||||
---
|
||||
|
||||
<template id="template-modal-age-restricted">
|
||||
<div
|
||||
id="modal-age-restricted"
|
||||
class="fixed inset-0 bg-stone-50 dark:bg-zinc-900"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-hidden="false"
|
||||
>
|
||||
<div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
|
||||
<div class="text-bm-500 dark:text-bm-400">
|
||||
<IconTriangleExclamation width="3rem" height="3rem" />
|
||||
</div>
|
||||
<div class="pb-3 pt-2 text-3xl font-light text-stone-700 sm:pb-4 sm:pt-2 dark:text-zinc-50">
|
||||
Age verification
|
||||
</div>
|
||||
<div
|
||||
class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl text-stone-700 dark:border-zinc-300 dark:text-zinc-50"
|
||||
<div
|
||||
style={{ display: "none" }}
|
||||
id="modal-age-restricted"
|
||||
class="fixed inset-0 bg-stone-50 dark:bg-zinc-900"
|
||||
role="dialog"
|
||||
aria-labelledby="title-age-restricted"
|
||||
>
|
||||
<div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
|
||||
<div class="text-bm-500 dark:text-bm-400">
|
||||
<IconTriangleExclamation width="3rem" height="3rem" />
|
||||
</div>
|
||||
<div
|
||||
id="title-age-restricted"
|
||||
class="pb-3 pt-2 text-3xl font-normal text-stone-700 sm:pb-4 sm:pt-2 dark:text-zinc-50"
|
||||
>
|
||||
Age verification
|
||||
</div>
|
||||
<div
|
||||
class="mx-6 mb-4 max-w-xl border-b border-stone-300 pb-4 text-xl font-medium text-stone-700 dark:border-zinc-300 dark:text-zinc-50"
|
||||
>
|
||||
You must be 18+ to access this page.
|
||||
</div>
|
||||
<p class="px-8 text-lg font-normal leading-snug text-stone-700 sm:max-w-2xl dark:text-zinc-50">
|
||||
By confirming that you are at least 18 years old, your selection will be saved to your browser to prevent this
|
||||
screen from appearing in the future.
|
||||
</p>
|
||||
<div
|
||||
class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 font-medium sm:max-w-2xl sm:flex-row"
|
||||
>
|
||||
<button
|
||||
data-modal-reject
|
||||
id="age-verification-reject"
|
||||
class="rounded bg-stone-400 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-zinc-300 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
|
||||
>
|
||||
You must be 18+ to access this page.
|
||||
</div>
|
||||
<p class="px-8 text-lg font-light leading-snug text-stone-700 sm:max-w-2xl dark:text-zinc-50">
|
||||
By confirming that you are at least 18 years old, your selection will be saved to your browser to prevent this
|
||||
screen from appearing in the future.
|
||||
</p>
|
||||
<div class="flex w-full max-w-md flex-col-reverse justify-evenly gap-y-5 px-6 pt-5 sm:max-w-2xl sm:flex-row">
|
||||
<button
|
||||
data-modal-reject
|
||||
id="age-verification-reject"
|
||||
class="rounded bg-stone-400 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-zinc-300 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
data-modal-accept
|
||||
id="age-verification-accept"
|
||||
class="rounded bg-bm-500 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-bm-400 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
|
||||
>
|
||||
I'm at least 18 years old
|
||||
</button>
|
||||
</div>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
data-modal-accept
|
||||
id="age-verification-accept"
|
||||
class="rounded bg-bm-500 py-3 text-lg text-stone-900 hover:bg-stone-500 hover:text-stone-50 focus:bg-stone-500 focus:text-stone-50 sm:px-9 dark:bg-bm-400 dark:text-zinc-900 dark:hover:bg-zinc-600 dark:hover:text-zinc-50 dark:focus:bg-zinc-600 dark:focus:text-zinc-50"
|
||||
>
|
||||
I'm at least 18 years old
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<AgeRestrictedScriptInline />
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
if (localStorage.getItem("ageVerified") !== "true") {
|
||||
const fragment = document
|
||||
.querySelector<HTMLElementTagNameMap["template"]>("template#template-modal-age-restricted")!
|
||||
.content.cloneNode(true) as DocumentFragment;
|
||||
const modal = fragment.firstElementChild as HTMLElementTagNameMap["div"];
|
||||
const controller = new AbortController();
|
||||
const { signal } = controller;
|
||||
modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!.addEventListener(
|
||||
"click",
|
||||
(e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
location.href = "about:blank";
|
||||
},
|
||||
{ signal },
|
||||
);
|
||||
import { ENABLE_VIEW_TRANSITIONS } from "astro:env/client";
|
||||
|
||||
const ageRestrictedModalSetup = () => {
|
||||
if (localStorage.ageVerified !== "true") {
|
||||
const modal = document.querySelector<HTMLElementTagNameMap["div"]>("div#modal-age-restricted")!;
|
||||
const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!;
|
||||
const onRejectButtonClick = (e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
location.href = "about:blank";
|
||||
};
|
||||
rejectButton.addEventListener("click", onRejectButtonClick);
|
||||
modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!.addEventListener(
|
||||
"click",
|
||||
(e: MouseEvent) => {
|
||||
e.preventDefault();
|
||||
controller.abort();
|
||||
localStorage.setItem("ageVerified", "true");
|
||||
rejectButton.removeEventListener("click", onRejectButtonClick);
|
||||
localStorage.ageVerified = "true";
|
||||
document.body.style.overflow = "auto";
|
||||
modal.remove();
|
||||
document.querySelectorAll("body > :not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
|
||||
modal.style.display = "none";
|
||||
},
|
||||
{ signal },
|
||||
{ once: true },
|
||||
);
|
||||
document.body.style.overflow = "hidden";
|
||||
document.body.appendChild(fragment);
|
||||
document.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")?.focus();
|
||||
rejectButton.focus();
|
||||
}
|
||||
})();
|
||||
};
|
||||
if (ENABLE_VIEW_TRANSITIONS) {
|
||||
document.addEventListener("astro:page-load", ageRestrictedModalSetup);
|
||||
} else {
|
||||
ageRestrictedModalSetup();
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue