fix stupid view transition shit and make basic server

package.json

@@ -12,9 +12,12 @@
   "dependencies": {
     "@astrojs/check": "^0.8.2",
     "@astrojs/tailwind": "^5.1.0",
+    "@fastify/compress": "^7.0.3",
+    "@fastify/static": "^7.0.4",
     "@iconify-json/ph": "^1.1.13",
     "astro": "^4.12.2",
     "astro-icon": "^1.1.0",
+    "fastify": "^4.28.1",
     "nanostores": "^0.10.3",
     "tailwindcss": "^3.4.6",
     "typescript": "^5.5.3"

server.js

@@ -0,0 +1,22 @@
+import fastify from "fastify";
+import fastifyStatic from "@fastify/static";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const app = fastify({ logger: false });
+
+await app.register(import("@fastify/compress"));
+
+app.register(fastifyStatic, {
+  root: path.join(__dirname, "dist"),
+  prefix: "/",
+  serve: true,
+  wildcard: false,
+});
+
+app.listen({
+  port: 8080,
+  host: "0.0.0.0",
+});

src/components/Header.astro

@@ -38,7 +38,7 @@ const t = useTranslations(lang);
       </HeaderButton>
     </div>
     {/* Mobile hamburger menu */}
-    <div class="flex md:hidden" id="mobileNavTrigger">
+    <div class="flex md:hidden" id="mobileNavTrigger" transition:persist>
       <Icon
         name="ph:text-align-justify-bold"
         class="h-9 w-9 text-text-color"
@@ -80,8 +80,16 @@ const t = useTranslations(lang);
   isMobileNavOpen.subscribe((open) => {
     if (open) {
       isMobileNavOpenLocal = true;
+      if (hamburger_menu && right_caret) {
+        hamburger_menu.style.display = "none";
+        right_caret.style.display = "block";
+      }
     } else {
       isMobileNavOpenLocal = false;
+      if (hamburger_menu && right_caret) {
+        hamburger_menu.style.display = "block";
+        right_caret.style.display = "none";
+      }
     }
   });
 
@@ -90,11 +98,4 @@ const t = useTranslations(lang);
   if (mobileNavTrigger) {
     mobileNavTrigger.addEventListener("click", openDialog);
   }
-
-  document.addEventListener("astro:after-swap", () => {
-    if (mobileNavTrigger) {
-      const mobileNavTrigger = document.getElementById("mobileNavTrigger")!;
-      mobileNavTrigger.addEventListener("click", openDialog);
-    }
-  });
 </script>

src/components/MobileNavigation.astro

@@ -30,5 +30,11 @@ const t = useTranslations(lang);
   </HeaderButton>
 </div>
 <script>
-  const mobileNavButton = document.getElementById("mobileNavButton");
+  import { fade } from "astro:transitions";
+  import { isMobileNavOpen } from "../store.js";
+  function closeMobileNav() {
+    isMobileNavOpen.set(false);
+  }
+  const mobileNavMenu = document.getElementById("mobileNavMenu");
+  mobileNavMenu!.addEventListener("click", closeMobileNav);
 </script>

src/components/debug.astro

@@ -1,103 +0,0 @@
----
-import { getLangFromUrl, useTranslations } from "../i18n/utils";
-import { isMobileNavOpen } from "../store.js";
-import Logo from "./Logo.astro";
-import HeaderButton from "./HeaderButton.astro";
-import { Icon } from "astro-icon/components";
-const lang = getLangFromUrl(Astro.url);
-const t = useTranslations(lang);
----
-
-<div
-  id="navbar"
-  class="flex h-16 flex-row items-center justify-end border-b-2 border-border-color bg-navbar-color px-4 z-30 relative"
->
-  <div class="w-1/8">
-    {/* Typical desktop menu */}
-    <div class="relative flex-row hidden md:flex">
-      <HeaderButton text={t("header.games")} route={`/${lang}/games/`}>
-        <Icon
-          name="ph:cube"
-          class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
-        />
-        {
-          /* Astro won't let us pass the icon as a prop so it's going into the outlet here. */
-        }
-      </HeaderButton>
-      <HeaderButton text={t("header.settings")}>
-        <Icon
-          name="ph:wrench-fill"
-          class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
-        />
-      </HeaderButton>
-      <HeaderButton text={t("header.morelinks")}>
-        <Icon
-          name="ph:link-bold"
-          class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6"
-        />
-      </HeaderButton>
-    </div>
-    {/* Mobile hamburger menu */}
-    <div class="flex md:hidden" id="mobileNavTrigger">
-      <Icon
-        name="ph:text-align-justify-bold"
-        class="h-9 w-9 text-text-color"
-        id="hamburger_menu"
-      />
-      <Icon
-        name="ph:caret-right-bold"
-        class="h-9 w-9 text-text-color hidden"
-        id="right_caret"
-      />
-    </div>
-  </div>
-</div>
-<script>
-  import { isMobileNavOpen } from "../store.js";
-  let isMobileNavOpenLocal = true;
-  const right_caret = document.getElementById("right_caret");
-  const hamburger_menu = document.getElementById("hamburger_menu");
-  const mobileNavTrigger = document.getElementById("mobileNavTrigger");
-  // Create a copy of the nano store so we can make this a toggle
-
-  // Set the store to true when the button is clicked
-  function openDialog() {
-    if (isMobileNavOpenLocal == false) {
-      isMobileNavOpen.set(true);
-      if (hamburger_menu && right_caret) {
-        hamburger_menu.style.display = "none";
-        right_caret.style.display = "block";
-      }
-    } else {
-      isMobileNavOpen.set(false);
-      if (hamburger_menu && right_caret) {
-        hamburger_menu.style.display = "block";
-        right_caret.style.display = "none";
-      }
-    }
-  }
-
-  isMobileNavOpen.subscribe((open) => {
-    if (open) {
-      isMobileNavOpenLocal = true;
-    } else {
-      isMobileNavOpenLocal = false;
-    }
-  });
-
-  // Add an event listener to the button
-
-  if (mobileNavTrigger) {
-    mobileNavTrigger.addEventListener("click", openDialog);
-  }
-
-  document.addEventListener("astro:after-swap", () => {
-    function dumbFunc() {
-      alert(1);
-    }
-    const mobileNavTrigger = document.getElementById("mobileNavTrigger");
-    if (mobileNavTrigger) {
-      mobileNavTrigger.addEventListener("click", dumbFunc);
-    }
-  });
-</script>

src/layouts/Layout.astro

@@ -18,6 +18,10 @@ const { title } = Astro.props;
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
+    />
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <ViewTransitions />
@@ -28,6 +32,7 @@ const { title } = Astro.props;
     <div
       id="mobileNavMenu"
       class="w-full fixed inset-0 h-[calc(100vh-4rem)] z-0"
+      transition:persist
     >
       <MobileNavigation />
     </div>
@@ -57,7 +62,6 @@ const { title } = Astro.props;
     </style>
 
     <style is:global>
-      @import "https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap";
       :root {
         --accent: 136, 58, 234;
         --accent-light: 224, 204, 250;