Use path aliasing

package.json

@@ -1,7 +1,7 @@
 {
   "name": "badmanners.xyz",
   "type": "module",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "scripts": {
     "postinstall": "astro sync",
     "dev": "astro dev",
@@ -15,16 +15,16 @@
     "deploy-lftp": "dotenv tsx scripts/deploy-lftp.ts --"
   },
   "dependencies": {
-    "@astrojs/check": "^0.9.2",
+    "@astrojs/check": "^0.9.3",
     "@astrojs/rss": "^4.0.7",
     "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.13.3",
+    "astro": "^4.15.5",
     "astro-htaccess": "^0.2.0",
     "date-fns": "^3.6.0",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^3.4.11",
     "tippy.js": "^6.3.7",
     "toml": "^3.0.0",
-    "typescript": "^5.5.4"
+    "typescript": "^5.6.2"
   },
   "devDependencies": {
     "commander": "^12.1.0",
@@ -33,6 +33,6 @@
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "prettier-plugin-toml": "^2.0.1",
-    "tsx": "^4.17.0"
+    "tsx": "^4.19.1"
   }
 }

src/components/AgeRestrictedModal.astro

@@ -4,11 +4,11 @@ import { IconTriangleExclamation } from "./icons";
 ---
 
 <div
-  style={{ display: "none" }}
   id="modal-age-restricted"
   class="fixed inset-0 bg-stone-50 dark:bg-zinc-900"
   role="dialog"
   aria-labelledby="title-age-restricted"
+  hidden
 >
   <div class="mx-auto flex min-h-screen max-w-3xl flex-col items-center justify-center text-center tracking-tight">
     <div class="text-bm-500 dark:text-bm-400">
@@ -30,9 +30,9 @@ import { IconTriangleExclamation } from "./icons";
       screen from appearing in the future.
     </p>
     <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 font-medium sm:max-w-2xl sm:flex-row"
+      hidden
     >
       <button
         data-modal-reject
@@ -87,14 +87,12 @@ import { IconTriangleExclamation } from "./icons";
           localStorage.ageVerified = "true";
           document.body.style.overflow = "auto";
           document.querySelectorAll("body>:not(#modal-age-restricted)").forEach((el) => el.removeAttribute("inert"));
-          modal.style.display = "none";
+          modal.hidden = true;
           addAgeVerifiedQueryToLinks();
         },
         { once: true },
       );
-      modal
-        .querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!
-        .style.removeProperty("display");
+      modal.querySelector<HTMLElementTagNameMap["div"]>("div#age-verification-button-list")!.hidden = false;
       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(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>
+<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.hidden=!1))})(document)</script>

src/components/DarkModeScript.astro

@@ -25,9 +25,7 @@ import DarkModeScriptInline from "./DarkModeScriptInline.astro";
     };
     document.querySelectorAll<HTMLElementTagNameMap["button"]>("button[data-dark-mode]").forEach((button) => {
       button.addEventListener("click", toggleColorScheme);
-      button.classList.remove("hidden");
-      button.style.removeProperty("display");
-      button.setAttribute("aria-hidden", "false");
+      button.hidden = false;
     });
   };
 

src/layouts/BaseLayout.astro

@@ -1,10 +1,10 @@
 ---
 import "../styles/base.css";
 import "../styles/fonts.css";
-import DarkModeScript from "../components/DarkModeScript.astro";
-import NavHeader from "../components/NavHeader.astro";
-import { IconSun, IconMoon } from "../components/icons";
-import AgeRestrictedModal from "../components/AgeRestrictedModal.astro";
+import DarkModeScript from "@components/DarkModeScript.astro";
+import NavHeader from "@components/NavHeader.astro";
+import { IconSun, IconMoon } from "@components/icons";
+import AgeRestrictedModal from "@components/AgeRestrictedModal.astro";
 
 type Props = {
   pageTitle?: string;
@@ -67,9 +67,9 @@ const title = pageTitle ? `${pageTitle} | Bad Manners` : "Bad Manners";
           </div>
           <button
             data-dark-mode
-            style={{ display: "none" }}
             class="mt-2 p-2 transition-colors hover:text-green-700 focus:text-green-700 motion-reduce:transition-none dark:hover:text-bm-300 dark:focus:text-bm-300 print:hidden"
             aria-labelledby="label-toggle-dark-mode"
+            hidden
           >
             <IconSun width="1.5rem" height="1.5rem" class="hidden dark:block" />
             <IconMoon width="1.5rem" height="1.5rem" class="block dark:hidden" />

src/pages/404.astro

@@ -1,5 +1,5 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
+import BaseLayout from "@layouts/BaseLayout.astro";
 ---
 
 <BaseLayout pageTitle="Not found">

src/pages/about.astro

@@ -1,8 +1,8 @@
 ---
 import { Image } from "astro:assets";
-import BaseLayout from "../layouts/BaseLayout.astro";
-import { IconArrowUpRightFromSquare } from "../components/icons";
-import { ImageSamStickerJuicebox } from "../assets/images";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import { IconArrowUpRightFromSquare } from "@components/icons";
+import { ImageSamStickerJuicebox } from "@assets/images";
 ---
 
 <BaseLayout pageTitle="About me">
@@ -41,7 +41,7 @@ import { ImageSamStickerJuicebox } from "../assets/images";
           <Image
             src={ImageSamStickerJuicebox}
             class="u-photo max-w-full transition-transform group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100"
-            alt="Sam Brendan with googly eyes and fangs showing from his lips, sipping from the straw of a banana juice box as some of the liquid escapes his mouth. Art by OliveCow."
+            alt="Sam Brendan with googly eyes and fangs showing from his lips, sipping from the straw of a banana juice box as some of the liquid escapes his mouth. His main feature is the briefcase he has for a face, with a wide maw and googly eyes. Art by OliveCow."
             loading="eager"
             height={320}
           />

src/pages/feed.xml.ts

@@ -1,7 +1,7 @@
 import rss from "@astrojs/rss";
 import type { APIRoute } from "astro";
 import { set as dateSet, subMinutes } from "date-fns";
-import { TOS_FEED } from "../data/tos";
+import { TOS_FEED } from "@data/tos";
 
 export const GET: APIRoute = ({ site }) => {
   return rss({

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import { readFile } from "node:fs/promises";
-import BaseLayout from "../layouts/BaseLayout.astro";
-import { IconEnvelope, IconBriefcase, IconKey, IconLink, IconCommentDots, IconSSH } from "../components/icons";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import { IconEnvelope, IconBriefcase, IconKey, IconLink, IconCommentDots, IconSSH } from "@components/icons";
 import {
   IconBluesky,
   IconCodeberg,
@@ -29,7 +29,7 @@ import {
   IconTwitch,
   IconWeasyl,
   IconYouTube,
-} from "../components/icons/brands";
+} from "@components/icons/brands";
 
 const gpgKey = await readFile("./public/gpg.pub", { encoding: "utf-8" });
 const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
@@ -62,7 +62,9 @@ const sshKey = await readFile("./public/ssh.pub", { encoding: "utf-8" });
         alt="A pixelated metal briefcase over a background with a green gradient."
         class="u-logo mx-auto my-4 h-screen max-h-48 rounded-full transition-transform hover:scale-110 motion-reduce:transition-none motion-reduce:hover:scale-100 sm:max-h-72"
       />
-      <p class="p-note mt-6 sm:px-5 md:px-6">I'm a safe vore enthusiast, a furry, and occasional writer.</p>
+      <p class="p-note mt-6 sm:px-5 md:px-6">
+        I'm a safe vore enthusiast, a furry, a programmer, and occasional writer.
+      </p>
       <ul id="links" class="grid grid-cols-3 gap-x-4 px-4 pt-8 sm:grid-cols-4 sm:px-20 md:px-32" aria-label="Links">
         {
           Astro.site ? (

src/pages/robots.txt.ts

@@ -1,5 +1,5 @@
 import type { APIRoute } from "astro";
-import { AI_BOTS } from "../data/ai_bots";
+import { AI_BOTS } from "@data/ai_bots";
 
 export const GET: APIRoute = async () => {
   const robots = [AI_BOTS.map((bot) => `User-agent: ${bot}`), "Disallow: /", "", "User-agent: *", "Disallow: .htaccess"]

src/pages/sam_brendan.astro

@@ -1,8 +1,8 @@
 ---
 import { Image } from "astro:assets";
-import BaseLayout from "../layouts/BaseLayout.astro";
-import { IconArrowUpRightFromSquare } from "../components/icons";
-import { ImageSamAllStickers, ImageSamRefsheet } from "../assets/images";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import { IconArrowUpRightFromSquare } from "@components/icons";
+import { ImageSamAllStickers, ImageSamRefsheet } from "@assets/images";
 ---
 
 <BaseLayout pageTitle="Sam Brendan">

src/pages/terms_of_service.astro

@@ -1,8 +1,8 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
-import { IconSquareRSS } from "../components/icons";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import { IconSquareRSS } from "@components/icons";
 
-import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "../data/tos";
+import { TOS_COMMISSION_STATUS, TOS_UPDATED_AT } from "@data/tos";
 ---
 
 <BaseLayout pageTitle="Terms of Service">

src/pages/work.astro

@@ -1,6 +1,6 @@
 ---
-import BaseLayout from "../layouts/BaseLayout.astro";
-import { IconArrowUpRightFromSquare, IconBriefcase } from "../components/icons";
+import BaseLayout from "@layouts/BaseLayout.astro";
+import { IconArrowUpRightFromSquare, IconBriefcase } from "@components/icons";
 import {
   IconEkasPortal,
   IconFurAffinity,
@@ -8,10 +8,10 @@ import {
   IconSoFurry,
   IconSubscribeStar,
   IconWeasyl,
-} from "../components/icons/brands";
+} from "@components/icons/brands";
 
-import { TOS_COMMISSION_STATUS } from "../data/tos";
-import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
+import { TOS_COMMISSION_STATUS } from "@data/tos";
+import { SUBSCRIBESTAR_ENABLED } from "@data/subscribestar";
 ---
 
 <BaseLayout pageTitle="My work">
@@ -57,8 +57,8 @@ import { SUBSCRIBESTAR_ENABLED } from "../data/subscribestar";
         and I'm very proud of it! Check it out if you have an hour to spare and the subject matters interest you.
       </p>
       <p class="mb-4 mt-4 text-justify indent-6 sm:mt-6 sm:px-5 sm:indent-12">
-        You can find my gallery and its mirrors below, which include all of my content. Aside from the first link, these
-        also include some of the art that I got from others (commissions, gifts, etc.).
+        You can find my galleries through any of the links below. Aside from the first link, these also include some of
+        the art that I got from others (commissions, gifts, etc.).
       </p>
       <ul class="h-card flex flex-col items-center">
         <li class="mb-2 w-max sm:mb-1">

tsconfig.json

@@ -1,4 +1,13 @@
 {
   "extends": "astro/tsconfigs/strict",
-  "exclude": ["dist"]
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@assets/*": ["src/assets/*"],
+      "@components/*": ["src/components/*"],
+      "@data/*": ["src/data/*"],
+      "@layouts/*": ["src/layouts/*"]
+    }
+  }
 }