Use history.replaceState ageVerified query and remove ENABLE_VIEW_TRANSITIONS

README.md

@@ -29,10 +29,9 @@ npm run prettier  # Prettier formatting
 
 The following optional environment variable can be set within a `.env` file:
 
-| Name                      | Type    | Description                                                                                      |
+| Name            | Type    | Description                                                                                      |
-| ------------------------- | ------- | ------------------------------------------------------------------------------------------------ |
+| --------------- | ------- | ------------------------------------------------------------------------------------------------ |
-| `APACHE_CONFIG`           | boolean | If set to true, generates an `.htaccess` Apache config file at the root of the output directory. |
+| `APACHE_CONFIG` | boolean | If set to true, generates an `.htaccess` Apache config file at the root of the output directory. |
-| `ENABLE_VIEW_TRANSITIONS` | boolean | If set to true, enables Astro's View Transitions API (i.e. Single-Page App mode).                |
 
 ### Build and deploy to remote
 

astro.config.mjs

@@ -21,7 +21,6 @@ export default defineConfig({
     env: {
       schema: {
         APACHE_CONFIG: envField.boolean({ context: "server", access: "public", default: false }),
-        ENABLE_VIEW_TRANSITIONS: envField.boolean({ context: "client", access: "public", default: false }),
       },
     },
   },

package-lock.json

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

package.json

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

public/licenses.toml

@@ -3,14 +3,17 @@
 [copyright]
 title = "badmanners.xyz"
 description = "Bad Manners's personal website."
-date = "2023–2024"
+date = "2023-2024"
 author = "Bad Manners <me@badmanners.xyz>"
 source = "https://git.badmanners.xyz/badmanners/badmanners.xyz"
 license = { name = "MIT", url = "https://opensource.org/license/mit" }
 notes = "All rights reserved."
 
-[copyright.additional]
+[[copyright.additional]]
-notes = "The briefcase logo and Sam Brendan are copyrighted and tradermarked by me."
+notes = "The briefcase logo is copyrighted and trademarked by me. All rights reserved."
+
+[[copyright.additional]]
+notes = "The character/fursona Sam Brendan is copyrighted and trademarked by me. All rights reserved."
 
 [[attributions]]
 description = "Reference sheet of Sam Brendan, a mimic x maned wolf hybrid."
@@ -76,7 +79,11 @@ icons = [
   "SoFurry",
   "SubscribeStar",
 ]
-notes = "All third-party copyrights and trademarks belong to their respective owners."
+license = { name = "CC0 1.0 Universal", url = "https://creativecommons.org/publicdomain/zero/1.0/" }
+notes = """
+Original icons edited for non-commercial use.
+All third-party copyrights and trademarks belong to their respective owners, \
+and I'm not affiliated with any of them."""
 
 [[attributions]]
 title = "Font Awesome"

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: .htaccess

src/components/AgeRestrictedModal.astro

@@ -55,7 +55,6 @@ import { IconTriangleExclamation } from "./icons";
 <AgeRestrictedScriptInline />
 
 <script>
-  import { ENABLE_VIEW_TRANSITIONS } from "astro:env/client";
   type AgeVerified = "true" | undefined;
 
   const ageRestrictedModalSetup = () => {
@@ -99,9 +98,6 @@ import { IconTriangleExclamation } from "./icons";
       rejectButton.focus();
     }
   };
-  if (ENABLE_VIEW_TRANSITIONS) {
+
-    document.addEventListener("astro:page-load", ageRestrictedModalSetup);
+  ageRestrictedModalSetup();
-  } else {
-    ageRestrictedModalSetup();
-  }
 </script>

src/components/AgeRestrictedScriptInline.astro

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

src/components/DarkModeScript.astro

@@ -5,7 +5,6 @@ import DarkModeScriptInline from "./DarkModeScriptInline.astro";
 <DarkModeScriptInline />
 
 <script>
-  import { ENABLE_VIEW_TRANSITIONS } from "astro:env/client";
   type ColorScheme = "auto" | "dark" | "light" | undefined;
 
   const colorSchemeSetup = () => {
@@ -31,9 +30,6 @@ import DarkModeScriptInline from "./DarkModeScriptInline.astro";
       button.setAttribute("aria-hidden", "false");
     });
   };
-  if (ENABLE_VIEW_TRANSITIONS) {
+
-    document.addEventListener("astro:page-load", colorSchemeSetup);
+  colorSchemeSetup();
-  } else {
-    colorSchemeSetup();
-  }
 </script>

src/components/DarkModeScriptInline.astro

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

src/layouts/BaseLayout.astro

@@ -1,6 +1,4 @@
 ---
-import { ViewTransitions } from "astro:transitions";
-import { ENABLE_VIEW_TRANSITIONS } from "astro:env/client";
 import "../styles/base.css";
 import "../styles/fonts.css";
 import DarkModeScript from "../components/DarkModeScript.astro";
@@ -29,23 +27,10 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
-    <link
-      rel="alternate"
-      type="application/rss+xml"
-      href={new URL("/feed.xml", Astro.site)}
-      title="Commission status"
-    />
-    <link
-      rel="alternate"
-      type="application/rss+xml"
-      href="https://gallery.badmanners.xyz/feed.xml"
-      title="Gallery feed"
-    />
     <meta property="og:title" content={title} />
-    <slot name="head-description" />
     <meta property="og:url" content={Astro.url} />
     <meta content="/logo.webp" property="og:image" />
-    {ENABLE_VIEW_TRANSITIONS ? <ViewTransitions /> : null}
+    <slot name="head" />
   </head>
   <body>
     <div class="flex min-h-screen flex-col">

src/pages/404.astro

@@ -3,7 +3,7 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout pageTitle="Not found">
-  <meta slot="head-description" property="og:description" content="Not found." />
+  <meta slot="head" property="og:description" content="Not found." />
   <article aria-labelledby="title-not-found">
     <h1 id="title-not-found" class="text-2xl sm:text-3xl">404 &ndash; Not found</h1>
     <section>

src/pages/about.astro

@@ -6,7 +6,7 @@ import { ImageSamStickerJuicebox } from "../assets/images";
 ---
 
 <BaseLayout pageTitle="About me">
-  <meta slot="head-description" property="og:description" content="About Bad Manners." />
+  <meta slot="head" property="og:description" content="About Bad Manners." />
   <article class="h-card" aria-labelledby="title-about-me">
     <h1 id="title-about-me" class="text-2xl sm:text-3xl">About me</h1>
     <section>
@@ -64,7 +64,6 @@ import { ImageSamStickerJuicebox } from "../assets/images";
 </BaseLayout>
 
 <script>
-  import { ENABLE_VIEW_TRANSITIONS } from "astro:env/client";
   import tippy from "tippy.js";
   import "tippy.js/dist/tippy.css";
 
@@ -73,9 +72,6 @@ import { ImageSamStickerJuicebox } from "../assets/images";
       theme: "bm",
     });
   };
-  if (ENABLE_VIEW_TRANSITIONS) {
+
-    document.addEventListener("astro:page-load", initTooltips);
+  initTooltips();
-  } else {
-    initTooltips();
-  }
 </script>

src/pages/api/healthcheck.ts

@@ -0,0 +1,14 @@
+import type { APIRoute } from "astro";
+
+export type HealthcheckResponse = {
+  isAlive: true;
+};
+
+export const GET: APIRoute = () => {
+  if (import.meta.env.PROD) {
+    return new Response(null, { status: 404 });
+  }
+  return new Response(JSON.stringify({ isAlive: !false } satisfies HealthcheckResponse), {
+    headers: { "Content-Type": "application/json; charset=utf-8" },
+  });
+};

src/pages/feed.xml.ts

@@ -8,14 +8,14 @@ export const GET: APIRoute = ({ site }) => {
     title: "Bad Manners",
     description: "Bad Manners status updates",
     site: site!,
-    items: TOS_FEED.map(({ status, updatedAt }, i) => ({
+    items: TOS_FEED.map(({ status, updatedAt }) => ({
       title: {
         CLOSED: "Story commissions are closed.",
         OPEN: "Story commissions are open!",
         SEMI_OPEN: "Story commissions are semi-open, and I may accept them less frequently.",
         PRIVATE: "Story commissions are private; they are only open to select commissioners.",
       }[status],
-      link: i === 0 ? "https://badmanners.xyz/terms_of_service" : undefined,
+      link: "https://badmanners.xyz/terms_of_service",
       pubDate: subMinutes(dateSet(updatedAt, { hours: 12, minutes: 0, seconds: 0 }), updatedAt.getTimezoneOffset()),
     })),
   });

src/pages/index.astro

@@ -35,11 +35,21 @@ import {
 ---
 
 <BaseLayout>
-  <meta
+  <Fragment slot="head">
-    slot="head-description"
+    <meta property="og:description" content="Safe vore enthusiast, mimic hybrid furry, and occasional writer." />
-    property="og:description"
+    <link
-    content="Safe vore enthusiast, mimic hybrid furry, and occasional writer."
+      rel="alternate"
-  />
+      type="application/rss+xml"
+      href={new URL("/feed.xml", Astro.site)}
+      title="Commission status"
+    />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      href="https://gallery.badmanners.xyz/feed.xml"
+      title="Gallery feed"
+    />
+  </Fragment>
   <article class="h-card" aria-label="Homepage of Bad Manners">
     <h1 id="title-home" class="pb-4 text-3xl tracking-tight sm:text-5xl">
       Hi, I'm <span class="p-name font-medium">Bad Manners</span>!
@@ -618,7 +628,6 @@ import {
 </BaseLayout>
 
 <script>
-  import { ENABLE_VIEW_TRANSITIONS } from "astro:env/client";
   import tippy, { hideAll } from "tippy.js";
   import "tippy.js/dist/tippy.css";
 
@@ -689,9 +698,6 @@ import {
       element.addEventListener("click", onClickElement);
     });
   };
-  if (ENABLE_VIEW_TRANSITIONS) {
+
-    document.addEventListener("astro:page-load", initIndexIcons);
+  initIndexIcons();
-  } else {
-    initIndexIcons();
-  }
 </script>

src/pages/sam_brendan.astro

@@ -6,7 +6,7 @@ import { ImageSamAllStickers, ImageSamRefsheet } from "../assets/images";
 ---
 
 <BaseLayout pageTitle="Sam Brendan">
-  <meta slot="head-description" property="og:description" content="Mimic x maned wolf hybrid." />
+  <meta slot="head" property="og:description" content="Mimic x maned wolf hybrid." />
   <article class="h-card" aria-labelledby="title-sam-brendan">
     <h1 id="title-sam-brendan" class="p-name text-2xl sm:text-3xl">Sam Brendan</h1>
     <section>

src/pages/terms_of_service.astro

@@ -6,7 +6,10 @@ import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "../data/tos";
 ---
 
 <BaseLayout pageTitle="Terms of Service">
-  <meta slot="head-description" property="og:description" content="My Terms of Service for story commissions." />
+  <Fragment slot="head">
+    <meta property="og:description" content="My Terms of Service for story commissions." />
+    <link rel="alternate" type="application/rss+xml" href={new URL("/feed.xml", Astro.site)} title="RSS feed" />
+  </Fragment>
   <article aria-labelledby="title-tos">
     <h1 id="title-tos" class="mb-4 text-2xl sm:mb-5 sm:text-3xl">Terms of Service for story commissions</h1>
     <section aria-label="Commission status">
@@ -28,23 +31,23 @@ import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "../data/tos";
         </a>
       </div>
       {
-        TOS_COMMISSION_STATUS == "CLOSED" ? (
+        TOS_COMMISSION_STATUS === "CLOSED" ? (
           <p id="status" class="mb-4 text-2xl font-medium uppercase sm:mb-8 sm:px-5 md:px-6">
             Commissions are
             <span class="text-red-600 dark:text-red-500">closed</span>.
           </p>
-        ) : TOS_COMMISSION_STATUS == "OPEN" ? (
+        ) : TOS_COMMISSION_STATUS === "OPEN" ? (
           <p id="status" class="mb-4 text-2xl font-medium uppercase sm:mb-8 sm:px-5 md:px-6">
             Commissions are <span class="text-bm-500 dark:text-bm-400">open</span>.
           </p>
-        ) : TOS_COMMISSION_STATUS == "SEMI_OPEN" ? (
+        ) : TOS_COMMISSION_STATUS === "SEMI_OPEN" ? (
           <p id="status" class="mb-4 text-2xl font-medium sm:mb-8 sm:px-5 md:px-6">
             <span class="uppercase">
               Commissions are <span class="text-orange-600 dark:text-orange-500">semi-open</span>
             </span>
             . I'll be more picky about which commissions to take.
           </p>
-        ) : TOS_COMMISSION_STATUS == "PRIVATE" ? (
+        ) : TOS_COMMISSION_STATUS === "PRIVATE" ? (
           <p id="status" class="mb-4 text-2xl font-medium sm:mb-8 sm:px-5 md:px-6">
             <span class="uppercase">
               Commissions are <span class="text-red-600 dark:text-red-500">private</span>

src/pages/work.astro

@@ -15,7 +15,21 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
 ---
 
 <BaseLayout pageTitle="My work">
-  <meta slot="head-description" property="og:description" content="The things I've made." />
+  <Fragment slot="head">
+    <meta property="og:description" content="The things I've made." />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      href={new URL("/feed.xml", Astro.site)}
+      title="Commission status"
+    />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      href="https://gallery.badmanners.xyz/feed.xml"
+      title="Gallery feed"
+    />
+  </Fragment>
   <article aria-labelledby="title-my-work" class="sm:px-5 md:px-6">
     <h1 id="title-my-work" class="text-2xl sm:text-3xl">My work</h1>
     <section>
@@ -122,7 +136,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
     <section id="commissions" aria-labelledby="title-story-commissions">
       <h2 id="title-story-commissions" class="my-4 text-lg sm:my-6 sm:text-2xl">Story commissions</h2>
       {
-        TOS_COMMISSION_STATUS == "CLOSED" ? (
+        TOS_COMMISSION_STATUS === "CLOSED" ? (
           <p class="mb-6 mt-2 sm:mt-3 sm:px-5">
             My story commissions are currently closed, but regardless, feel free to{" "}
             <a href="/terms_of_service" class="text-link transition-colors motion-reduce:transition-none">
@@ -130,7 +144,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
             </a>{" "}
             if interested.
           </p>
-        ) : TOS_COMMISSION_STATUS == "OPEN" ? (
+        ) : TOS_COMMISSION_STATUS === "OPEN" ? (
           <p class="mb-6 mt-2 sm:mt-3 sm:px-5">
             My story commissions are currently open! Feel free to{" "}
             <a class="text-link transition-colors motion-reduce:transition-none" href="/terms_of_service">
@@ -138,7 +152,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
             </a>{" "}
             if interested.
           </p>
-        ) : TOS_COMMISSION_STATUS == "SEMI_OPEN" ? (
+        ) : TOS_COMMISSION_STATUS === "SEMI_OPEN" ? (
           <p class="mb-6 mt-2 sm:mt-3 sm:px-5">
             My story commissions are currently semi-open, meaning that I may take some commissions, but might reject or
             postpone them more easily. Feel free to{" "}
@@ -147,7 +161,7 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
             </a>{" "}
             if interested.
           </p>
-        ) : TOS_COMMISSION_STATUS == "PRIVATE" ? (
+        ) : TOS_COMMISSION_STATUS === "PRIVATE" ? (
           <p class="mb-6 mt-2 sm:mt-3 sm:px-5">
             My story commissions are currently private, meaning that I'm not offering slots publicly, but I may still
             work on commissions for specific clients. Regardless of whether this applies to you or not, feel free to{" "}