From aba96f95a23017b1b1f61e7ba6170bf6511e2435 Mon Sep 17 00:00:00 2001
From: Bad Manners <me@badmanners.xyz>
Date: Wed, 20 Mar 2024 15:01:42 -0300
Subject: [PATCH] Remove Docker config and fix inline scripts
---
.dockerignore | 2 -
Dockerfile | 10 ----
README.md | 10 ++++
src/components/DarkModeScript.astro | 35 ++++++++++++++
src/components/Navigation.astro | 2 +-
src/components/Scripts.astro | 56 -----------------------
src/layouts/AgeRestrictedBaseLayout.astro | 18 ++++++++
src/layouts/BaseLayout.astro | 4 +-
src/layouts/GalleryLayout.astro | 6 +--
src/layouts/GameLayout.astro | 6 +--
src/layouts/StoryLayout.astro | 6 +--
src/pages/age-verification.astro | 8 ++--
12 files changed, 79 insertions(+), 84 deletions(-)
delete mode 100644 .dockerignore
delete mode 100644 Dockerfile
create mode 100644 src/components/DarkModeScript.astro
delete mode 100644 src/components/Scripts.astro
create mode 100644 src/layouts/AgeRestrictedBaseLayout.astro
diff --git a/.dockerignore b/.dockerignore
deleted file mode 100644
index 1eae0cf..0000000
--- a/.dockerignore
+++ /dev/null
@@ -1,2 +0,0 @@
-dist/
-node_modules/
diff --git a/Dockerfile b/Dockerfile
deleted file mode 100644
index bf52e74..0000000
--- a/Dockerfile
+++ /dev/null
@@ -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
diff --git a/README.md b/README.md
index f67e5cc..eb2c60c 100644
--- a/README.md
+++ b/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
+```
diff --git a/src/components/DarkModeScript.astro b/src/components/DarkModeScript.astro
new file mode 100644
index 0000000..9328d16
--- /dev/null
+++ b/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>
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
index 4a9473f..fd458de 100644
--- a/src/components/Navigation.astro
+++ b/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>
diff --git a/src/components/Scripts.astro b/src/components/Scripts.astro
deleted file mode 100644
index 20c12dc..0000000
--- a/src/components/Scripts.astro
+++ /dev/null
@@ -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>
diff --git a/src/layouts/AgeRestrictedBaseLayout.astro b/src/layouts/AgeRestrictedBaseLayout.astro
new file mode 100644
index 0000000..947ac9e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index fa57ea3..3d7150a 100644
--- a/src/layouts/BaseLayout.astro
+++ b/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>
diff --git a/src/layouts/GalleryLayout.astro b/src/layouts/GalleryLayout.astro
index 4891b5f..008df10 100644
--- a/src/layouts/GalleryLayout.astro
+++ b/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>
diff --git a/src/layouts/GameLayout.astro b/src/layouts/GameLayout.astro
index 8e483f5..5c008c1 100644
--- a/src/layouts/GameLayout.astro
+++ b/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>
diff --git a/src/layouts/StoryLayout.astro b/src/layouts/StoryLayout.astro
index 283a69b..dc572b9 100644
--- a/src/layouts/StoryLayout.astro
+++ b/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>
diff --git a/src/pages/age-verification.astro b/src/pages/age-verification.astro
index b941bb2..5195348 100644
--- a/src/pages/age-verification.astro
+++ b/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>