Remove Docker config and fix inline scripts

.dockerignore

@@ -1,2 +0,0 @@
-dist/
-node_modules/

Dockerfile

@@ -1,10 +0,0 @@
-FROM node:lts AS build
-WORKDIR /app
-COPY package.json package-lock.json ./
-RUN npm install
-COPY . .
-RUN npm run build
-
-FROM httpd:2.4 AS runtime
-COPY --from=build /app/dist /usr/local/apache2/htdocs/
-EXPOSE 80

README.md

@@ -1 +1,11 @@
 # gallery.badmanners.xyz
+
+## Deployment
+
+### Remote
+
+```bash
+npm install
+npm run build
+scp -r dist/ my-ssh-server:./gallery.badmanners.xyz
+```

src/components/DarkModeScript.astro

@@ -0,0 +1,35 @@
+---
+
+---
+
+<script is:inline>
+  /* Color scheme toggle */
+  (() => {
+    var colorScheme = localStorage.getItem("colorScheme");
+    if (colorScheme == null || colorScheme === "auto") {
+      localStorage.setItem("colorScheme", "auto");
+      colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    }
+
+    const bodyClassList = document.querySelector("body").classList;
+    if (colorScheme === "dark") {
+      bodyClassList.add("dark");
+    }
+
+    function toggleColorScheme() {
+      if (colorScheme === "dark") {
+        colorScheme = "light";
+        bodyClassList.remove("dark");
+      } else {
+        colorScheme = "dark";
+        bodyClassList.add("dark");
+      }
+      localStorage.setItem("colorScheme", colorScheme);
+    }
+
+    const buttonDarkMode = document.querySelector("#button-dark-mode");
+    if (buttonDarkMode) {
+      buttonDarkMode.addEventListener("click", toggleColorScheme);
+    }
+  })();
+</script>

src/components/Navigation.astro

@@ -13,7 +13,7 @@
     <li>
       <a
         class="hover:text-green-800 hover:underline focus:text-green-800 focus:underline dark:hover:text-bm-300 dark:focus:text-bm-300"
-        href="/stories">Stories</a
+        href="/stories/1">Stories</a
       >
     </li>
     <li>

src/components/Scripts.astro

@@ -1,56 +0,0 @@
----
-
----
-
-<script is:inline>
-  /* Color scheme toggle */
-  (() => {
-    var colorScheme = localStorage.getItem("colorScheme");
-    if (colorScheme == null) {
-      localStorage.setItem("colorScheme", "auto");
-    } else if (colorScheme == "auto") {
-      colorScheme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }
-
-    const bodyClassList = document.querySelector("body").classList;
-    if (colorScheme === "dark") {
-      bodyClassList.add("dark");
-    }
-
-    function toggleColorScheme() {
-      if (colorScheme === "dark") {
-        colorScheme = "light";
-        bodyClassList.remove("dark");
-      } else {
-        colorScheme = "dark";
-        bodyClassList.add("dark");
-      }
-      localStorage.setItem("colorScheme", colorScheme);
-    }
-
-    const buttonDarkMode = document.querySelector("#button-dark-mode");
-    if (buttonDarkMode) {
-      buttonDarkMode.addEventListener("click", toggleColorScheme);
-    }
-  })();
-
-  /* Age verification */
-  (() => {
-    if (window.location.pathname === "/age-verification") {
-      document.querySelector("#age-verification-reject").addEventListener("click", () => {
-        window.location.href = "about:blank";
-      });
-      document.querySelector("#age-verification-accept").addEventListener("click", () => {
-        localStorage.setItem("ageVerified", "true");
-        const params = new URLSearchParams(window.location.search);
-        window.location.href = decodeURIComponent(params.get("redirect") || "/");
-      });
-    } else {
-      const ageVerified = localStorage.getItem("ageVerified");
-      if (ageVerified !== "true") {
-        localStorage.setItem("ageVerified", "false");
-        window.location.href = `/age-verification?redirect=${encodeURIComponent(window.location.href)}`;
-      }
-    }
-  })();
-</script>

src/layouts/AgeRestrictedBaseLayout.astro

@@ -0,0 +1,18 @@
+---
+import BaseLayout from "./BaseLayout.astro";
+const { pageTitle } = Astro.props;
+---
+
+<BaseLayout pageTitle={pageTitle}>
+  <slot />
+  <script is:inline>
+    /* Age verification */
+    (() => {
+      const ageVerified = localStorage.getItem("ageVerified");
+      if (ageVerified !== "true") {
+        localStorage.setItem("ageVerified", "false");
+        window.location.href = "/age-verification?redirect=" + encodeURIComponent(window.location.href);
+      }
+    })();
+  </script>
+</BaseLayout>

src/layouts/BaseLayout.astro

@@ -2,7 +2,7 @@
 import "@fontsource-variable/noto-sans";
 import "@fontsource-variable/noto-serif";
 import "../styles/base.css";
-import Scripts from "../components/Scripts.astro";
+import DarkModeScript from "../components/DarkModeScript.astro";
 const { pageTitle } = Astro.props;
 ---
 
@@ -23,6 +23,6 @@ const { pageTitle } = Astro.props;
   </head>
   <body>
     <slot />
-    <Scripts />
+    <DarkModeScript />
   </body>
 </html>

src/layouts/GalleryLayout.astro

@@ -1,13 +1,13 @@
 ---
 import { Image } from "astro:assets";
-import BaseLayout from "./BaseLayout.astro";
+import AgeRestrictedBaseLayout from "./AgeRestrictedBaseLayout.astro";
 import Navigation from "../components/Navigation.astro";
 import logoBM from "../assets/images/logo_bm.png";
 
 const { pageTitle } = Astro.props;
 ---
 
-<BaseLayout pageTitle={pageTitle}>
+<AgeRestrictedBaseLayout pageTitle={pageTitle}>
   <div
     class="flex min-h-screen flex-col bg-stone-200 text-stone-800 md:flex-row dark:bg-stone-800 dark:text-stone-200 print:bg-none"
   >
@@ -59,4 +59,4 @@ const { pageTitle } = Astro.props;
       <slot />
     </main>
   </div>
-</BaseLayout>
+</AgeRestrictedBaseLayout>

src/layouts/GameLayout.astro

@@ -5,7 +5,7 @@ import { Markdown } from "@astropub/md";
 import { format as formatDate } from "date-fns";
 import { enUS as enUSLocale } from "date-fns/locale/en-US";
 import { slug } from "github-slugger";
-import BaseLayout from "./BaseLayout.astro";
+import AgeRestrictedBaseLayout from "./AgeRestrictedBaseLayout.astro";
 import Authors from "../components/Authors.astro";
 import CopyrightedCharacters from "../components/CopyrightedCharacters.astro";
 import Prose from "../components/Prose.astro";
@@ -17,7 +17,7 @@ const { props } = Astro;
 // const relatedGames = (await Promise.all((props.relatedGames || []).map(game => getEntry(game)))).filter(game => !game.data.isDraft)
 ---
 
-<BaseLayout pageTitle={props.title}>
+<AgeRestrictedBaseLayout pageTitle={props.title}>
   <div
     id="top"
     class="min-w-screen relative min-h-screen bg-radial from-bm-300 to-bm-600 px-1 pb-16 pt-20 dark:from-green-700 dark:to-green-950 print:bg-none"
@@ -163,4 +163,4 @@ const { props } = Astro;
       <a class="hover:underline focus:underline" href="/licenses.txt" target="_blank">Licenses</a>
     </div>
   </div>
-</BaseLayout>
+</AgeRestrictedBaseLayout>

src/layouts/StoryLayout.astro

@@ -5,7 +5,7 @@ import { Markdown } from "@astropub/md";
 import { format as formatDate } from "date-fns";
 import { enUS as enUSLocale } from "date-fns/locale/en-US";
 import { slug } from "github-slugger";
-import BaseLayout from "./BaseLayout.astro";
+import AgeRestrictedBaseLayout from "./AgeRestrictedBaseLayout.astro";
 import Authors from "../components/Authors.astro";
 import UserComponent from "../components/UserComponent.astro";
 import CopyrightedCharacters from "../components/CopyrightedCharacters.astro";
@@ -30,7 +30,7 @@ const relatedStories = (await Promise.all((props.relatedStories || []).map((stor
 // );
 ---
 
-<BaseLayout pageTitle={props.title}>
+<AgeRestrictedBaseLayout pageTitle={props.title}>
   <div
     id="top"
     class="min-w-screen relative min-h-screen bg-radial from-bm-300 to-bm-600 px-1 pb-16 pt-20 dark:from-green-700 dark:to-green-950 print:bg-none"
@@ -284,4 +284,4 @@ const relatedStories = (await Promise.all((props.relatedStories || []).map((stor
       <a class="hover:underline focus:underline" href="/licenses.txt" target="_blank">Licenses</a>
     </div>
   </div>
-</BaseLayout>
+</AgeRestrictedBaseLayout>

src/pages/age-verification.astro

@@ -42,14 +42,14 @@ import BaseLayout from "../layouts/BaseLayout.astro";
       </div>
     </div>
   </div>
-  <script>
-    document.querySelector("#age-verification-reject")!.addEventListener("click", () => {
+  <script is:inline>
+    document.querySelector("#age-verification-reject").addEventListener("click", () => {
       window.location.href = "about:blank";
     });
-    document.querySelector("#age-verification-accept")!.addEventListener("click", () => {
+    document.querySelector("#age-verification-accept").addEventListener("click", () => {
       localStorage.setItem("ageVerified", "true");
       const params = new URLSearchParams(window.location.search);
-      window.location.href = params.get("redirect") || "/";
+      window.location.href = decodeURIComponent(params.get("redirect") || "/");
     });
   </script>
 </BaseLayout>