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

Improvements to scripts and search, and improve pages on text-only browsers

Browse source
This commit is contained in:
Bad Manners 2024-08-29 15:39:38 -03:00
parent 5521291e5b
commit 6ff0de4a50
12 changed files with 34 additions and 28 deletions

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "gallery.badmanners.xyz",
"version": "1.7.9",
"version": "1.7.10",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "gallery.badmanners.xyz",
"version": "1.7.9",
"version": "1.7.10",
"hasInstallScript": true,
"dependencies": {
"@astrojs/check": "^0.9.2",

2
package.json
View file

@ -1,7 +1,7 @@
{
"name": "gallery.badmanners.xyz",
"type": "module",
"version": "1.7.9",
"version": "1.7.10",
"scripts": {
"postinstall": "astro sync",
"dev": "astro dev",

39
src/components/AgeRestrictedModal.astro
View file

@ -29,9 +29,12 @@ import { IconTriangleExclamation } from "./icons";
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
<div
style={{ display: "none" }}
id="age-verification-button-list"
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-stone-300 dark:text-stone-900 dark:hover:bg-stone-600 dark:hover:text-stone-50 dark:focus:bg-stone-600 dark:focus:text-stone-50"
@ -39,7 +42,6 @@ import { IconTriangleExclamation } from "./icons";
Cancel
</button>
<button
style={{ display: "none" }}
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-stone-900 dark:hover:bg-stone-600 dark:hover:text-stone-50 dark:focus:bg-stone-600 dark:focus:text-stone-50"
@ -53,46 +55,47 @@ import { IconTriangleExclamation } from "./icons";
<AgeRestrictedScriptInline />
<script>
type AgeVerified = "true" | undefined;
const ageRestrictedModalSetup = () => {
const modal = document.querySelector<HTMLElementTagNameMap["div"]>("div#modal-age-restricted");
// Not an age-restricted page
if (!modal) {
return;
}
if (modal !== document.querySelector("body > div#modal-age-restricted")) {
if (modal !== document.querySelector("body>div#modal-age-restricted")) {
throw new Error("#modal-age-restricted must be a direct child of the body element!");
}
let ageVerified: AgeVerified = localStorage.ageVerified;
if (ageVerified !== "true") {
const addAgeVerifiedQueryToLinks = () =>
document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
let newHref = new URL(el.href);
newHref.searchParams.set("ageVerified", "true");
el.href = newHref.toString();
});
if (localStorage.ageVerified === "true") {
addAgeVerifiedQueryToLinks();
} else {
const rejectButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-reject]")!;
const onRejectButtonClick = (e: MouseEvent) => {
e.preventDefault();
location.href = "about:blank";
};
rejectButton.addEventListener("click", onRejectButtonClick);
rejectButton.style.removeProperty("display");
const acceptButton = modal.querySelector<HTMLElementTagNameMap["button"]>("button[data-modal-accept]")!;
acceptButton.addEventListener(
"click",
(e: MouseEvent) => {
e.preventDefault();
rejectButton.removeEventListener("click", onRejectButtonClick);
ageVerified = "true";
localStorage.ageVerified = ageVerified;
localStorage.ageVerified = "true";
document.body.style.overflow = "auto";
document.querySelectorAll("body > :not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
document.body.querySelectorAll<HTMLElementTagNameMap["a"]>("a[href][data-age-restricted]").forEach((el) => {
let newHref = new URL(el.href);
newHref.searchParams.set("ageVerified", "true");
el.href = newHref.href;
});
document.querySelectorAll("body>:not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
modal.style.display = "none";
addAgeVerifiedQueryToLinks();
},
{ once: true },
);
acceptButton.style.removeProperty("display");
modal
.querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!
.style.removeProperty("display");
rejectButton.focus();
}
};

2
src/components/AgeRestrictedScriptInline.astro
View file

@ -1,4 +1,4 @@
---
---
<script is:inline>(a=>{let b="body > ",c="#modal-age-restricted",d="true",e="ageVerified",f="searchParams",g=localStorage,h=new URL(a.location),i=x=>a.querySelectorAll(x),j=i(b+c)[0];h[f].get(e)==d&&(g[e]=d,h[f].delete(e),history.replaceState({},"",h));j&&(g[e]==d?i("a[href][data-age-restricted]").forEach(x=>{let y=new URL(x.href);y[f].set(e,d);x.href=y}):((a.body.style.overflow="hidden"),i(b+":not("+c+")").forEach(x=>x.setAttribute("inert",d)),(j.style.display="block")))})(document)</script>
<script is:inline>(a=>{let b="body>",c="#modal-age-restricted",d="true",e="ageVerified",f="searchParams",g=localStorage,h=new URL(location),i=x=>a.querySelectorAll(x),j=i(b+c)[0];h[f].get(e)==d&&(g[e]=d,h[f].delete(e),history.replaceState({},"",h));j&&(g[e]!=d&&((a.body.style.overflow="hidden"),i(b+":not("+c+")").forEach(x=>x.setAttribute("inert",d)),(j.style.display="block")))})(document)</script>

2
src/components/DarkModeScript.astro
View file

@ -10,7 +10,7 @@ import DarkModeScriptInline from "./DarkModeScriptInline.astro";
const colorSchemeSetup = () => {
let colorScheme: ColorScheme = localStorage.colorScheme;
if (!colorScheme || colorScheme === "auto") {
colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
colorScheme = matchMedia("(prefers-color-scheme:dark)").matches ? "dark" : "light";
}
const toggleColorScheme = (e: MouseEvent) => {
e.preventDefault();

2
src/components/DarkModeScriptInline.astro
View file

@ -1,4 +1,4 @@
---
---
<script is:inline>(a=>{var b="dark",c="auto",d="colorScheme",e=a.body.classList,f=localStorage,g=f[d];g==c?(f[d]=c,matchMedia("(prefers-color-scheme: dark)").matches&&e.add(b)):g==b&&e.add(b)})(document)</script>
<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>

1
src/pages/games.astro
View file

@ -63,6 +63,7 @@ const games = await Promise.all(
{t(game.data.lang, "game/warnings", game.data.platforms, game.data.contentWarning)}
</p>
<div aria-label="Authors">
<span>{game.authors.length == 1 ? "Author:" : "Authors:"}</span>
{game.authors.map((author) => (
<UserComponent rel="author" class="p-author" user={author} lang={game.data.lang} />
))}

1
src/pages/index.astro
View file

@ -138,6 +138,7 @@ const latestItems: LatestItemsEntry[] = await Promise.all(
{entry.altText}
</p>
<div aria-label="Authors">
<span>{entry.authors.length == 1 ? "Author:" : "Authors:"}</span>
{entry.authors.map((author) => (
<UserComponent rel="author" class="p-author" user={author} lang={entry.lang} />
))}

4
src/pages/search.astro
View file

@ -5,9 +5,7 @@ import GalleryLayout from "../layouts/GalleryLayout.astro";
<script>
import { WebAssembly } from "polywasm";
if (!("WebAssembly" in globalThis)) {
globalThis.WebAssembly = WebAssembly;
}
globalThis.WebAssembly = globalThis.WebAssembly || WebAssembly;
</script>
<GalleryLayout pageTitle="Search">

1
src/pages/stories/[page].astro
View file

@ -121,6 +121,7 @@ const totalPages = Math.ceil(page.total / page.size);
{t(story.data.lang, "story/warnings", story.data.wordCount, story.data.contentWarning)}
</p>
<div aria-label="Authors">
<span>{story.authors.length == 1 ? "Author:" : "Authors:"}</span>
{story.authors.map((author) => (
<UserComponent rel="author" class="p-author" user={author} lang={story.data.lang} />
))}

2
src/pages/tags/[slug].astro
View file

@ -185,6 +185,7 @@ const totalWorksWithTag = t(
{t(story.data.lang, "story/warnings", story.data.wordCount, story.data.contentWarning)}
</p>
<div aria-label="Authors">
<span>{story.authors.length == 1 ? "Author:" : "Authors:"}</span>
{story.authors.map((author) => (
<UserComponent rel="author" class="p-author" user={author} lang={story.data.lang} />
))}
@ -242,6 +243,7 @@ const totalWorksWithTag = t(
{t(game.data.lang, "game/warnings", game.data.platforms, game.data.contentWarning)}
</p>
<div aria-label="Authors">
<span>{game.authors.length == 1 ? "Author:" : "Authors:"}</span>
{game.authors.map((author) => (
<UserComponent rel="author" class="p-author" user={author} lang={game.data.lang} />
))}