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

package-lock.json

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

package.json

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

src/components/AgeRestrictedModal.astro

@@ -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">
+    <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
-        style={{ display: "none" }}
         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;
+    const addAgeVerifiedQueryToLinks = () =>
-    if (ageVerified !== "true") {
+      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 = "true";
-          localStorage.ageVerified = ageVerified;
           document.body.style.overflow = "auto";
-          document.querySelectorAll("body > :not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
+          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;
-          });
           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();
     }
   };

src/components/AgeRestrictedScriptInline.astro

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

src/components/DarkModeScript.astro

@@ -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();

src/components/DarkModeScriptInline.astro

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

src/env.d.ts

@@ -4,4 +4,4 @@
 
 declare module "polywasm" {
   export const WebAssembly: typeof globalThis.WebAssembly;
-}
+}

src/pages/games.astro

@@ -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} />
               ))}

src/pages/index.astro

@@ -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} />
                 ))}

src/pages/search.astro

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

src/pages/stories/[page].astro

@@ -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} />
               ))}

src/pages/tags/[slug].astro

@@ -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} />
                   ))}