Prevent duplicate form and navbar listeners after page transitions, tidy env, env example

.env.example

@@ -0,0 +1,7 @@
+# Copy to `.env` and fill in real values. Never commit `.env`.
+EMAIL_HOST=smtp.example.com
+EMAIL_PORT=587
+EMAIL_SECURE=false
+EMAIL_USER=user@example.com
+EMAIL_PASS=change-me
+EMAIL_FROM=noreply@example.com

src/components/ContactForm.astro

@@ -77,7 +77,8 @@ const { id: ID = "contact-form" } = Astro.props;
 <script define:vars={{ ID }}>
   function init() {
     const form = document.getElementById(ID);
-    if (!form) return;
+    if (!form || form.dataset.initialised) return;
+    form.dataset.initialised = "true";
     const responseMsg = form.querySelector(
       `#${CSS.escape(ID + "-response-message")}`
     );

src/components/Navbar.astro

@@ -139,7 +139,8 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
     nav = document.getElementById("nav");
     toggle = document.getElementById("menu-toggle");
 
-    if (toggle) {
+    if (toggle && !toggle.dataset.bound) {
+      toggle.dataset.bound = "true";
       toggle.addEventListener("click", () => {
         if (nav) {
           const visible = nav.getAttribute("data-mobile-menu") === "visible";
@@ -151,18 +152,24 @@ const { navbarDisplay = "normal" } = Astro.props as Props;
       });
     }
 
-    document.addEventListener("keydown", (e) => {
+    if (!document.documentElement.dataset.navbarKeydownBound) {
-      if (
+      document.documentElement.dataset.navbarKeydownBound = "true";
-        e.key === "Escape" &&
+      document.addEventListener("keydown", (e) => {
-        nav?.getAttribute("data-mobile-menu") === "visible"
+        if (
-      ) {
+          e.key === "Escape" &&
-        nav.setAttribute("data-mobile-menu", "hidden");
+          nav?.getAttribute("data-mobile-menu") === "visible"
-        toggle?.setAttribute("aria-expanded", "false");
+        ) {
-      }
+          nav.setAttribute("data-mobile-menu", "hidden");
-    });
+          toggle?.setAttribute("aria-expanded", "false");
+        }
+      });
+    }
 
     checkScroll();
   });
 
-  window.addEventListener("scroll", checkScroll);
+  if (!document.documentElement.dataset.navbarScrollBound) {
+    document.documentElement.dataset.navbarScrollBound = "true";
+    window.addEventListener("scroll", checkScroll, { passive: true });
+  }
 </script>

src/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="@astrojs/image/client" />
+/// <reference types="astro/client" />
 /// <reference types="./types/SiteImage" />
 
 interface Window {